/* Tablero SQDCO · pantalla de planta.
 *
 * Estética industrial deliberada, distinta al resto del portal: fondo gris muy
 * claro, bordes rectos, cifras enormes, semáforo de verdad. Esto no se lee en un
 * escritorio, se ve al pasar frente a una TV.
 */

.mod-sqdco{
  --sq-fondo:#F5F5F3; --sq-tinta:#202124; --sq-linea:#202124;
  --sq-verde:#16A34A; --sq-amarillo:#FBBF24; --sq-rojo:#E31B23; --sq-azul:#0868B2;
  --sq-apagado:#9aa0a6;
  background:var(--sq-fondo);color:var(--sq-tinta);
  margin:calc(-1 * var(--gut));padding:0;min-height:100vh;
}
.mod-sqdco .sqdco{padding:0 clamp(16px,2vw,32px) clamp(16px,2vw,28px)}

/* Franja de señalización industrial. Discreta: 6 px, solo arriba. */
.mod-sqdco .cinta{
  height:6px;
  background:repeating-linear-gradient(45deg,#FBBF24 0 14px,#202124 14px 28px);
}

.mod-sqdco .cab{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;padding:clamp(12px,1.5vw,20px) 0 10px;
}
.mod-sqdco .marca{
  font-size:clamp(19px,2vw,30px);font-weight:700;letter-spacing:.02em;
  display:flex;align-items:baseline;gap:9px;
}
.mod-sqdco .marca b{color:var(--sq-azul)}
.mod-sqdco .marca span{color:var(--sq-apagado);font-weight:400}
.mod-sqdco .sub{font-size:clamp(11px,.85vw,14px);color:#5f6368;letter-spacing:.04em}

.mod-sqdco .pilares{
  display:flex;flex-direction:row;gap:clamp(14px,3vw,52px);flex-wrap:wrap;
  border-top:2px solid var(--sq-linea);border-bottom:1px solid var(--sq-linea);
  padding:7px 0;margin-bottom:clamp(10px,1.4vw,18px);
}
.mod-sqdco .pilares span{
  font-size:clamp(9px,.72vw,12px);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;color:#5f6368;
}

/* Retícula 3 × 2, como un tablero físico. */
.mod-sqdco .rejilla{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px);
}
.mod-sqdco .pilar{
  border:1.5px solid var(--sq-linea);border-radius:2px;background:#fff;
  padding:clamp(10px,1.2vw,18px);display:flex;flex-direction:column;min-width:0;
}
.mod-sqdco .pilar.nd{background:#fafaf9;border-color:#c9ccd1}
.mod-sqdco .pilar > header{
  font-size:clamp(11px,.95vw,15px);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--sq-linea);padding-bottom:8px;
}
.mod-sqdco .pilar.nd > header{border-bottom-color:#c9ccd1;color:#5f6368}
.mod-sqdco .ico{font-size:1.15em}

.mod-sqdco .medidor{text-align:center;padding:clamp(6px,1vw,14px) 0 4px}
.mod-sqdco .taco{width:100%;max-width:270px;height:auto;display:block;margin:0 auto}
.mod-sqdco .sin-taco{
  height:clamp(72px,7vw,104px);display:grid;place-items:center;
  font-size:clamp(20px,2vw,30px);font-weight:700;color:var(--sq-apagado);letter-spacing:.1em;
}
.mod-sqdco .cifra{
  font-size:clamp(34px,4.4vw,68px);font-weight:700;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:2px;
}
.mod-sqdco .meta-lbl{
  font-size:clamp(9px,.72vw,12px);color:#5f6368;text-transform:uppercase;
  letter-spacing:.1em;margin-top:7px;
}

.mod-sqdco .pie{list-style:none;margin-top:auto;padding-top:10px;border-top:1px solid #dcdcd8}
.mod-sqdco .pie li{
  font-size:clamp(11px,.88vw,14px);color:#5f6368;
  display:flex;gap:7px;padding:3px 0;font-variant-numeric:tabular-nums;
}
.mod-sqdco .pie li b{color:var(--sq-tinta);font-weight:700;min-width:2.6em;text-align:right}
.mod-sqdco .pie li.mal b{color:var(--sq-rojo)}

.mod-sqdco .aviso{
  margin-top:9px;padding-top:8px;border-top:1px dashed #dcdcd8;
  font-size:clamp(10px,.76vw,12px);color:var(--sq-rojo);line-height:1.35;
}
.mod-sqdco .pilar.nd .aviso{color:#5f6368}

.mod-sqdco .nota-pie{
  margin-top:clamp(10px,1.4vw,18px);padding-top:9px;border-top:1px solid var(--sq-linea);
  font-size:clamp(10px,.76vw,12px);color:#5f6368;max-width:110ch;
}

@media (max-width:1100px){ .mod-sqdco .rejilla{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .mod-sqdco .rejilla{grid-template-columns:1fr} }

/* ── Marcador de seguridad ────────────────────────────────────────────────────
 * El letrero de planta de siempre: fondo negro, dígitos rojos, una caja por
 * cifra. Es el único elemento del portal que se sale del papel blanco, y es a
 * propósito — de lejos se reconoce antes de leerse.
 */
.mod-sqdco .pilar.safety{background:#0b0b0c;border-color:#0b0b0c}
.mod-sqdco .pilar.safety > header{color:#f5f5f3;border-bottom-color:#2a2a2d}
.mod-sqdco .tablero-led{
  display:grid;gap:clamp(8px,1vw,14px);padding:clamp(10px,1.4vw,18px) 0;
}
.mod-sqdco .led{text-align:center}
.mod-sqdco .led-etq{
  font-size:clamp(9px,.7vw,11px);text-transform:uppercase;letter-spacing:.2em;
  color:#8a8a8f;margin-bottom:7px;
}
.mod-sqdco .digitos{display:flex;gap:clamp(4px,.5vw,7px);justify-content:center}
.mod-sqdco .digitos span{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:clamp(28px,3.6vw,54px);font-weight:700;line-height:1;
  color:#ff2a1f;background:#151517;border:1px solid #2a2a2d;border-radius:2px;
  padding:clamp(4px,.6vw,10px) clamp(6px,.8vw,13px);
  /* El resplandor es lo que lo hace leerse como LED y no como texto rojo. */
  text-shadow:0 0 6px rgba(255,42,31,.85),0 0 18px rgba(255,42,31,.45);
}
.mod-sqdco .led.sin .digitos{color:#4a4a4f;letter-spacing:.2em;text-shadow:none}
.mod-sqdco .led-pie{
  font-size:clamp(9px,.68vw,11px);color:#6a6a6f;margin-top:6px;letter-spacing:.06em;
}
.mod-sqdco .pilar.safety .pie{border-top-color:#2a2a2d}
.mod-sqdco .pilar.safety .pie li{color:#8a8a8f}
.mod-sqdco .pilar.safety .pie li b{color:#f5f5f3}
.mod-sqdco .pilar.safety .aviso{border-top-color:#2a2a2d;color:#8a8a8f}
.mod-sqdco .pilar.safety code{color:#c9ccd1}