/* =====================================================================
   COPITEL · Hoja de estilos (FUENTE)
   ---------------------------------------------------------------------
   Este es el fichero que se edita. css/estilo.css se genera desde aquí
   con Autoprefixer (prefijos -webkit- para navegadores embebidos antiguos):
     npx postcss css/estilo.fuente.css -u autoprefixer -o css/estilo.css
   Si no quiere regenerar, puede editar css/estilo.css directamente.

   Compatibilidad con el navegador del panel Toshiba:
     - SIN variables CSS, CSS Grid ni "gap" en flex (márgenes en su lugar).
     - Unidades px/%: nada de vh/vw.
     - Fuente propia en WOFF (no WOFF2): la entienden también los WebKit antiguos.

   CONCEPTO "PAPEL SOBRE BISEL" (v2, revisión de legibilidad)
   El texto claro sobre fondo oscuro se "lava" en los paneles TN de los
   equipos (ángulo de visión, ~110 ppp). Por eso:
     - El marco (cabecera y raíl) sigue oscuro, como el bisel del equipo.
     - Todo el contenido va en "hojas" blancas con tinta casi negra.
     - Nunca gris claro para texto: el secundario es #384152 (10:1 sobre blanco).
     - Texto de tarjetas ≥ 15 px; solo etiquetas en negrita bajan a 13 px.

   Paleta
     bisel        #0D1320   texto bisel   #FFFFFF / #C4CDDA
     bandeja      #E4E7EC   (fondo del contenido)
     papel        #FFFFFF   borde papel   #B9C0CB
     tinta        #10151F   tinta 2       #384152
     rojo Toshiba #D0021B   (relleno, texto blanco 5,6:1)
     rojo texto   #B5001A   (texto rojo sobre blanco, 7:1)
     verde estado #22C55E   ámbar estado  #F59E0B
   ===================================================================== */

/* ---------- Fuente: Atkinson Hyperlegible (Braille Institute, licencia OFL) ----------
   Diseñada para distinguir al máximo cada letra y cifra (l/I/1, 0/O, 6/8...),
   justo lo que necesitan números de serie, ppm y teléfonos en pantallas de baja
   resolución. Subconjunto latino: incluye tildes, ñ, ¿ ¡ º. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-400.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-700.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: #E4E7EC;                    /* bandeja */
  color: #10151F;                         /* tinta */
  font-family: "Atkinson Hyperlegible", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(208, 2, 27, .2);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; border: 0; display: block; }
a { color: #B5001A; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; }
p { margin: 0; }
b, strong { font-weight: 700; }
small { font-size: 14px; }
.oculto { display: none !important; }

/* Foco visible para teclado: tinta sobre papel, blanco sobre el bisel */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid #10151F; outline-offset: 2px;
}
.cabecera a:focus, .rail a:focus { outline-color: #FFFFFF; }

/* Iconos SVG del sprite: heredan el color del texto */
.ico {
  width: 24px; height: 24px; -webkit-flex: none; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--sm { width: 18px; height: 18px; vertical-align: -3px; }

/* "Hoja": superficie común de todas las tarjetas de contenido */
.hoja,
.destacada, .canal, .noticia, .equipo-ficha, .ventajas-lista li, .ficha-equipo {
  background: #FFFFFF;
  border: 1px solid #B9C0CB;
  border-radius: 12px;
  box-shadow: 0 1px 0 #B9C0CB;            /* canto inferior: la hoja "se apoya" en la bandeja */
}

/* ---------- Cabecera (bisel) ---------- */
.cabecera {
  display: -webkit-flex;
  display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between;
  height: 56px; padding: 0 16px;
  background: #0D1320; color: #FFFFFF;
  position: relative; z-index: 2;
}
.cabecera:after {                         /* franja roja Toshiba sobre el raíl */
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 104px; height: 3px; background: #D0021B;
}
.marca { color: #FFFFFF; text-decoration: none; display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; }
.marca-nombre { font-size: 22px; font-weight: 700; letter-spacing: 3px; }
.marca-sub { margin-left: 10px; font-size: 14px; color: #C4CDDA; }

.estado {
  display: -webkit-flex;
  display: flex; -webkit-align-items: center; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  background: #1C2538; border: 1px solid #36425A;
  font-size: 15px; color: #FFFFFF; white-space: nowrap;
}
.estado-punto { width: 12px; height: 12px; border-radius: 50%; background: #8A94A6; margin-right: 8px; }
.estado.abierto .estado-punto { background: #22C55E; }
.estado.cerrado .estado-punto { background: #F59E0B; }

.distribuidor { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.distribuidor-txt { font-size: 12px; line-height: 1.15; color: #C4CDDA; text-align: right; margin-right: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.logo-toshiba { background: #FFFFFF; border-radius: 6px; padding: 4px 8px; }
.logo-toshiba img { width: 76px; height: 28px; }

/* ---------- Raíl de navegación (bisel) ---------- */
.rail { background: #0D1320; }
.rail-btn {
  display: -webkit-flex;
  display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  color: #C4CDDA; text-decoration: none;
  font-size: 15px; font-weight: 700;
  border-left: 5px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.rail-btn .ico { width: 28px; height: 28px; margin-bottom: 4px; stroke-width: 2.2; }
.rail-btn:active { background: #1C2538; }
/* Sección activa: "pestaña" que se funde con la bandeja clara del contenido */
.rail-btn.activo { color: #10151F; background: #E4E7EC; border-left-color: #D0021B; }
.rail-btn--rojo .ico { color: #FF5A6A; }
.rail-btn--rojo.activo .ico { color: #D0021B; }

.contenido { padding: 20px 24px; }
.panel { margin-bottom: 40px; }

/* ---------- Títulos y etiquetas ---------- */
.titulo-panel { font-size: 28px; margin-bottom: 16px; color: #10151F; }
.titulo-panel span { font-size: 18px; font-weight: 400; color: #384152; }
.antetitulo { color: #B5001A; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  background: #D0021B; color: #FFFFFF;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.nota { color: #384152; font-size: 15px; }

/* ===================== INICIO ===================== */
.inicio { display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; }
.inicio-principal { -webkit-flex: 1 1 60%; flex: 1 1 60%; padding-right: 24px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; }
.inicio h1 { font-size: 42px; letter-spacing: -.5px; margin-bottom: 12px; }
.entradilla { font-size: 19px; color: #384152; max-width: 540px; margin-bottom: 18px; }

.ficha-equipo {
  display: -webkit-flex;
  display: flex; -webkit-align-items: center; align-items: center;
  border-style: dashed; border-color: #6B7486; box-shadow: none;
  padding: 8px 12px; margin-bottom: 18px; font-size: 16px; color: #10151F;
}
.ficha-equipo .ico { margin-right: 10px; color: #B5001A; }

/* Botones de acción grandes (≥ 76 px de alto) */
.acciones { display: -webkit-flex; display: flex; }
.accion {
  -webkit-flex: 1 1 0;
          flex: 1 1 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  min-height: 78px; padding: 12px 14px; margin-right: 12px;
  background: #FFFFFF; border: 2px solid #10151F; border-radius: 12px;
  color: #10151F; text-decoration: none;
  transition: background-color .15s ease, -webkit-transform .1s ease;
  transition: background-color .15s ease, transform .1s ease;
  transition: background-color .15s ease, transform .1s ease, -webkit-transform .1s ease;
}
.accion:last-child { margin-right: 0; }
.accion:active { -webkit-transform: scale(.98); transform: scale(.98); background: #EEF1F5; }
.accion .ico { width: 30px; height: 30px; margin-right: 12px; }
.accion-txt small { display: block; color: #384152; font-size: 14px; }
.accion-txt b { display: block; font-size: 21px; white-space: nowrap; }
.accion--rojo { background: #D0021B; border-color: #D0021B; color: #FFFFFF; }
.accion--rojo small { color: #FFFFFF; }
.accion--rojo:active { background: #A80016; }

/* Novedad destacada */
.destacada {
  -webkit-flex: 0 0 300px;
          flex: 0 0 300px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; overflow: hidden;
  color: #10151F; text-decoration: none;
}
.destacada-img img { width: 100%; height: auto; }
.destacada-txt { padding: 14px 16px; }
.destacada-txt b { display: block; font-size: 21px; margin: 8px 0 4px; }
.destacada-txt span { color: #384152; font-size: 16px; }
.destacada-txt .etiqueta { color: #FFFFFF; font-size: 13px; }

/* ===================== SOPORTE ===================== */
.canales { display: -webkit-flex; display: flex; margin-bottom: 14px; }
.canal {
  -webkit-flex: 1 1 0;
          flex: 1 1 0; margin-right: 14px; padding: 14px 16px;
  display: -webkit-flex;
  display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start;
}
.canal:last-child { margin-right: 0; }
.canal h3 { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 15px; color: #384152; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.canal h3 .ico { margin-right: 8px; color: #B5001A; width: 20px; height: 20px; }
.canal--destacado { border: 2px solid #D0021B; box-shadow: inset 0 4px 0 #D0021B; }

.numero {
  font-size: 40px; font-weight: 700; letter-spacing: 1px; color: #10151F;
  text-decoration: none; white-space: nowrap; margin-bottom: 10px;
}
.horario { border-collapse: collapse; width: 100%; margin-bottom: 10px; font-size: 17px; }
.horario th { text-align: left; font-weight: 400; color: #10151F; padding: 6px 0; border-top: 1px solid #C9CED7; }
.horario td { text-align: right; font-weight: 700; padding: 6px 0; border-top: 1px solid #C9CED7; white-space: nowrap; }

.dato {
  display: inline-block; min-height: 44px; line-height: 44px;   /* objetivo táctil */
  font-size: 19px; font-weight: 700; color: #10151F; text-decoration: none; margin-bottom: 6px;
}
/* El QR ya está sobre papel blanco: basta un margen de silencio y un marco fino */
.qr {
  background: #FFFFFF; border: 1px solid #C9CED7; border-radius: 8px; padding: 8px;
  width: 136px; height: 136px; margin-bottom: 8px;
}
.qr img { width: 118px; height: 118px; image-rendering: pixelated; }
.qr-sin { color: #10151F; font-size: 13px; text-align: center; padding-top: 40px; }

.tenga-a-mano {
  display: -webkit-flex;
  display: flex; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap;
  background: #10151F; color: #FFFFFF; border-radius: 12px; padding: 10px 16px; font-size: 16px;
}
.tenga-a-mano ol { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.tenga-a-mano li { counter-increment: paso; margin-left: 18px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.tenga-a-mano li:before {
  content: counter(paso); display: inline-block; width: 24px; height: 24px; line-height: 24px;
  margin-right: 6px; border-radius: 50%; background: #D0021B; color: #FFFFFF;
  text-align: center; font-size: 14px; font-weight: 700;
}
.tenga-a-mano small { color: #DCE2EA; margin-left: 4px; }
.direccion { margin-top: 10px; color: #384152; font-size: 15px; }
.direccion .ico { margin-right: 6px; }

/* ===================== NOVEDADES ===================== */
.noticias { display: -webkit-flex; display: flex; }
.noticia { -webkit-flex: 1 1 0; flex: 1 1 0; margin-right: 14px; overflow: hidden; }
.noticia:last-child { margin-right: 0; }
.noticia img { width: 100%; height: 120px; object-fit: cover; border-bottom: 1px solid #C9CED7; }
.noticia-txt { padding: 12px 16px 16px; }
.noticia h3 { font-size: 20px; line-height: 1.2; margin: 10px 0 6px; color: #10151F; }
.noticia p { color: #384152; font-size: 16px; line-height: 1.4; }
.pie-panel { margin-top: 14px; color: #384152; font-size: 16px; }
.pie-panel a { color: #10151F; font-weight: 700; text-decoration: none; }

/* ===================== EQUIPOS ===================== */
.cabeza-equipos { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 14px; }
.cabeza-equipos .titulo-panel { margin-bottom: 0; }
.filtros { display: none; }                         /* sin JS no se muestran: se ve toda la gama */
.con-js .filtros { display: -webkit-flex; display: flex; }
.chip {
  min-height: 46px; padding: 0 18px; margin-left: 8px;
  background: #FFFFFF; color: #10151F; border: 2px solid #10151F; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.chip.activo { background: #10151F; color: #FFFFFF; }

.rejilla-equipos { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-right: -12px; }
.equipo { width: 25%; padding: 0 12px 12px 0; }       /* 4 columnas en el panel de 10,1" */
.equipo-ficha { height: 100%; overflow: hidden; position: relative; }

/* Tira de tóner: dice si el equipo es color (C·M·Y·K), B/N (negro)
   o híbrido (negro + azul, el color del tóner borrable de Toshiba). */
.tira { display: -webkit-flex; display: flex; height: 6px; }
.tira i { -webkit-flex: 1 1 0; flex: 1 1 0; }
.t-c { background: #00A0E9; } .t-m { background: #E4007C; } .t-y { background: #FFE100; }
.t-k { background: #10151F; } .t-azul { background: #1D4ED8; }

.equipo-img { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 104px; padding: 8px 8px 0; }
.equipo-img img { max-height: 96px; width: auto; }
.equipo-txt { padding: 8px 12px 12px; }
.equipo-cat { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #384152; }
.equipo h3 { font-size: 17px; line-height: 1.2; margin: 2px 0 4px; color: #10151F; }
.velocidad { display: block; font-size: 17px; font-weight: 700; color: #B5001A; margin-bottom: 2px; }
.equipo p { color: #10151F; font-size: 15px; line-height: 1.3; }

/* ===================== VENTAJAS ===================== */
.ventajas { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; }
.ventaja-hero { -webkit-flex: 1 1 50%; flex: 1 1 50%; margin: 0 20px 0 0; }
.ventaja-hero img { border-radius: 12px; width: 100%; }
.ventaja-hero figcaption { margin-top: 10px; color: #384152; font-size: 17px; }
.ventaja-hero figcaption b { color: #10151F; }
.ventajas-lista { -webkit-flex: 1 1 50%; flex: 1 1 50%; list-style: none; margin: 0; padding: 0; }
.ventajas-lista li { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 12px 14px; margin-bottom: 10px; }
.ventajas-lista .ico { width: 28px; height: 28px; color: #B5001A; margin-right: 12px; margin-top: 2px; }
.ventajas-lista b { display: block; font-size: 18px; color: #10151F; }
.ventajas-lista span { color: #384152; font-size: 16px; }

/* =====================================================================
   MODO APP (paneles y pantallas horizontales ≥ 700 px)
   Cabecera fija + raíl a la izquierda + una sola sección visible.
   Solo se activa si hay JS (clase .con-js en <html>).
   ===================================================================== */
@media (min-width: 700px) {
  .con-js body { overflow: hidden; }
  .con-js .armazon { position: absolute; top: 56px; left: 0; right: 0; bottom: 0; }
  .con-js .rail {
    position: absolute; top: 0; left: 0; bottom: 0; width: 104px;
    display: -webkit-flex;
    display: flex; -webkit-flex-direction: column; flex-direction: column;
  }
  .con-js .rail-btn { -webkit-flex: 1 1 0; flex: 1 1 0; max-height: 96px; }
  .con-js .contenido {
    position: absolute; top: 0; left: 104px; right: 0; bottom: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .con-js .panel { display: none; margin: 0 auto; max-width: 1180px; }
  .con-js .panel.visible { display: block; }
  .con-js #inicio.visible { height: 100%; }
  .con-js .inicio { height: 100%; -webkit-align-items: center; align-items: center; }
  .con-js .panel.visible { -webkit-animation: aparecer .18s ease-out; animation: aparecer .18s ease-out; }
}
@-webkit-keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .con-js .panel.visible { -webkit-animation: none; animation: none; }
  .accion, .rail-btn { transition: none; }
}

/* ---------- Panel de 9" (800 × 480) y similares ----------
   Se reduce el espacio, no la legibilidad: mínimos 15 px texto / 13 px etiquetas. */
@media (max-width: 900px) and (min-width: 700px) {
  body { font-size: 16px; }
  .cabecera { height: 48px; padding: 0 12px; }
  .con-js .armazon { top: 48px; }
  .marca-nombre { font-size: 19px; letter-spacing: 2px; }
  .marca-sub, .distribuidor-txt { display: none; }
  .estado { font-size: 14px; padding: 4px 10px; }
  .con-js .rail { width: 88px; }
  .cabecera:after { width: 88px; }
  .con-js .contenido { left: 88px; }
  .rail-btn { font-size: 13px; }
  .rail-btn .ico { width: 24px; height: 24px; }
  .contenido { padding: 14px 16px; }

  .inicio h1 { font-size: 32px; }
  .entradilla { font-size: 17px; margin-bottom: 12px; }
  .destacada { -webkit-flex-basis: 230px; flex-basis: 230px; }
  .destacada-txt { padding: 10px 12px; }
  .destacada-txt b { font-size: 18px; }
  .destacada-txt span { font-size: 15px; }
  .inicio-principal { padding-right: 16px; }
  .ficha-equipo { font-size: 15px; }
  .acciones { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .accion { min-height: 62px; padding: 8px 10px; margin-right: 8px; }
  .accion .ico { width: 24px; height: 24px; margin-right: 8px; }
  .accion-txt b { font-size: 17px; }
  .accion-txt small { font-size: 13px; }

  .titulo-panel { font-size: 24px; margin-bottom: 10px; }
  .titulo-panel span { display: none; }
  .canal { padding: 10px 12px; margin-right: 10px; }
  .numero { font-size: 30px; }
  .horario { font-size: 15px; }
  .dato { font-size: 17px; }
  .qr { width: 112px; height: 112px; }
  .qr img { width: 94px; height: 94px; }
  .nota { font-size: 13px; }
  .tenga-a-mano { font-size: 14px; padding: 8px 12px; }
  .tenga-a-mano small { display: none; }
  .direccion { font-size: 14px; }

  .noticia { margin-right: 10px; }
  .noticia img { height: 92px; }
  .noticia-txt { padding: 10px 12px 12px; }
  .noticia h3 { font-size: 17px; margin-top: 8px; }
  .noticia p { font-size: 15px; }
  .pie-panel { font-size: 15px; }

  /* 3 columnas en el panel de 9": se desplaza un poco, pero se lee bien */
  .equipo { width: 33.333%; padding: 0 10px 10px 0; }
  .rejilla-equipos { margin-right: -10px; }
  .equipo-img { height: 92px; }
  .equipo-img img { max-height: 84px; }
  .equipo-txt { padding: 6px 10px 10px; }
  .equipo h3 { font-size: 16px; }
  .velocidad { font-size: 16px; }
  .chip { min-height: 44px; padding: 0 12px; margin-left: 6px; font-size: 15px; }

  .ventaja-hero figcaption { font-size: 15px; }
  .ventajas-lista li { padding: 8px 10px; margin-bottom: 8px; }
  .ventajas-lista b { font-size: 16px; }
  .ventajas-lista span { font-size: 15px; }
}

@media (min-width: 700px) and (max-height: 520px) {
  .destacada-img img { max-height: 130px; object-fit: cover; }
}

/* =====================================================================
   MÓVIL (< 700 px): documento normal, barra de secciones arriba
   ===================================================================== */
@media (max-width: 699px) {
  .cabecera { height: auto; min-height: 56px; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 8px 16px; }
  .marca-sub, .distribuidor-txt { display: none; }
  .estado { -webkit-order: 3; order: 3; width: 100%; margin-top: 8px; -webkit-justify-content: center; justify-content: center; }
  .rail { display: -webkit-flex; display: flex; position: -webkit-sticky; position: sticky; top: 0; z-index: 3; }
  .rail-btn { -webkit-flex: 1 1 0; flex: 1 1 0; min-height: 62px; font-size: 13px; border-left: 0; border-bottom: 4px solid transparent; }
  .rail-btn.activo { border-bottom-color: #D0021B; }
  .rail-btn .ico { width: 22px; height: 22px; }
  .contenido { padding: 20px 16px; }
  .panel { padding-top: 8px; }

  .inicio, .canales, .noticias, .ventajas { display: block; }
  .inicio-principal { padding-right: 0; margin-bottom: 18px; }
  .inicio h1 { font-size: 32px; }
  .acciones { display: block; }
  .accion { margin: 0 0 10px; }
  .canal, .noticia { margin: 0 0 12px; }
  .ventaja-hero { margin: 0 0 14px; }
  .cabeza-equipos { display: block; }
  .cabeza-equipos .titulo-panel { margin-bottom: 10px; }
  .filtros { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
  .chip { margin: 0 6px 6px 0; }
  .equipo { width: 50%; }
  .tenga-a-mano ol { display: block; margin-top: 6px; }
  .tenga-a-mano li { margin: 4px 0; }
}

/* =====================================================================
   FORMULARIO (soporte.html / enviar.php)
   ===================================================================== */
.con-js body.pagina-form { overflow: auto; }
.form-main { max-width: 860px; margin: 0 auto; padding: 16px 24px 40px; }
.volver {
  display: -webkit-inline-flex;
  display: inline-flex; -webkit-align-items: center; align-items: center; min-height: 44px;
  color: #10151F; text-decoration: none; font-weight: 700; margin-bottom: 8px;
}
.volver .ico { -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-right: 6px; width: 20px; height: 20px; }
.form-intro { color: #384152; margin-bottom: 18px; }

fieldset { border: 0; margin: 0 0 18px; padding: 0; }
legend { font-weight: 700; font-size: 18px; margin-bottom: 8px; padding: 0; color: #10151F; }

/* Tipo de solicitud: radios convertidos en botones grandes */
.tipos { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; }
.tipo { width: 25%; padding: 0 10px 10px 0; }
.tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tipo span {
  display: -webkit-flex;
  display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center;
  min-height: 60px; padding: 8px; border-radius: 12px;
  background: #FFFFFF; border: 2px solid #10151F; color: #10151F;
  font-weight: 700; font-size: 18px; cursor: pointer;
}
.tipo input:checked + span { background: #D0021B; border-color: #D0021B; color: #FFFFFF; }
.tipo input:focus + span { outline: 3px solid #10151F; outline-offset: 2px; }

.campos { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-right: -14px; }
.campo { width: 50%; padding: 0 14px 14px 0; }
.campo--ancho { width: 100%; }
.campo label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 16px; color: #10151F; }
.campo label small { font-weight: 400; color: #384152; }
.campo input, .campo textarea {
  width: 100%; min-height: 50px; padding: 10px 12px;
  background: #FFFFFF; color: #10151F;
  border: 2px solid #6B7486; border-radius: 10px;   /* borde de campo ≥ 3:1 sobre la bandeja */
  font: inherit; font-size: 18px;
  -webkit-appearance: none; appearance: none;
}
.campo input::-webkit-input-placeholder, .campo textarea::-webkit-input-placeholder { color: #6B7486; }
.campo input::placeholder, .campo textarea::placeholder { color: #6B7486; }
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: #10151F; }
.ayuda { display: block; color: #384152; font-size: 15px; margin-top: 4px; }

.trampa { position: absolute; left: -9999px; }   /* campo anti-spam oculto */

.consentimiento { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; margin: 4px 0 18px; font-size: 16px; color: #10151F; }
.consentimiento input { width: 26px; height: 26px; margin: 0 10px 0 0; -webkit-flex: none; flex: none; }

.boton {
  display: -webkit-inline-flex;
  display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  min-height: 58px; padding: 0 28px; border: 0; border-radius: 12px;
  background: #D0021B; color: #FFFFFF; font: inherit; font-size: 19px; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.boton:active { background: #A80016; }
.boton .ico { margin-left: 10px; }

.aviso { border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; color: #10151F; }
.aviso--ok { background: #E7F6EC; border: 2px solid #15803D; }
.aviso--error { background: #FDECEE; border: 2px solid #D0021B; }
.aviso h1 { font-size: 26px; margin-bottom: 8px; }
.aviso ul { margin: 8px 0 0; padding-left: 20px; }

@media (max-width: 699px) {
  .tipo { width: 50%; }
  .campo { width: 100%; }
}

/* ---------- Sprite de iconos (oculto sin style="": compatible con la CSP) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Caja de diagnóstico (?diag=1) ---------- */
.diagnostico {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 99;
  margin: 0; padding: 10px 12px; max-height: 45%; overflow: auto;
  background: #FFF7D6; color: #1A1A1A; border: 2px solid #E3A800; border-radius: 8px;
  font: 14px/1.4 Consolas, "Courier New", monospace; white-space: pre-wrap; word-break: break-all;
}

/* ---------- Contadores (3 columnas) ---------- */
.campo--tercio { width: 33.333%; }
.ayuda--bloque { margin: -2px 0 10px; }
legend small { font-weight: 400; color: #384152; font-size: 15px; }
.obligatorio { color: #B5001A; }

/* ---------- Consumibles de tóner ----------
   Casillas convertidas en botones grandes (≥ 56 px alto, 10 px de separación).
   Con JS el bloque solo se ve con "Tóner" elegido; sin JS se ve siempre. */
.con-js .bloque-toner { display: none; }
.con-js .tipo-toner .bloque-toner { display: block; }
.consumibles { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; }
.consumible { width: 20%; padding: 0 10px 10px 0; }
.consumible input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consumible span {
  display: -webkit-flex;
  display: flex; -webkit-align-items: center; align-items: center; position: relative;
  min-height: 58px; padding: 8px 12px; border-radius: 12px;
  background: #FFFFFF; border: 2px solid #8A93A3; color: #10151F;
  font-weight: 700; font-size: 16px; line-height: 1.2; cursor: pointer;
}
/* Seleccionado: borde grueso de tinta, fondo gris y ✓ (no depende solo del color) */
.consumible input:checked + span { border: 3px solid #10151F; background: #EEF1F5; }
.consumible input:checked + span:after {
  content: "\2713"; position: absolute; top: 3px; right: 8px; font-size: 16px; font-weight: 700; color: #10151F;
}
.consumible input:focus + span { outline: 3px solid #10151F; outline-offset: 2px; }
.muestra {
  display: inline-block; -webkit-flex: none; flex: none; width: 24px; height: 24px; border-radius: 50%;
  margin-right: 10px; border: 2px solid rgba(16, 21, 31, .45);
}
.muestra--negro    { background: #111111; }
.muestra--magenta  { background: #E4007C; }
.muestra--cian     { background: #00A0E9; }
.muestra--amarillo { background: #FFE100; }
.muestra--residuos { background: #8A93A3; border-style: dashed; border-radius: 4px; }

@media (max-width: 899px) {
  .consumible span { padding: 8px; font-size: 15px; }   /* 5 en fila también en el panel de 9" */
  .muestra { margin-right: 8px; }
}
@media (max-width: 699px) {
  .consumible { width: 50%; }
  .campo--tercio { width: 33.333%; }
  .campo--tercio label { font-size: 14px; }
}

/* ---------- Tarjetas de soporte pulsables enteras ("enlace extendido") ----------
   El :after del enlace cubre toda la tarjeta: se puede pulsar en cualquier punto. */
.canal--pulsable { position: relative; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.canal--pulsable .enlace-tarjeta:after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 12px; z-index: 1;
}
.canal--pulsable:active { background: #EEF1F5; border-color: #10151F; }
.canal--destacado.canal--pulsable:active { border-color: #A80016; }
.canal--pulsable .enlace-tarjeta:focus { outline: none; }
.canal--pulsable .enlace-tarjeta:focus:after { outline: 3px solid #10151F; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .canal--pulsable { transition: none; } }