/* ═══════════════════════════════════════════════════════════════════════
   drwCheck · web pública: capa visual sobre el source (DC-18)
   ═══════════════════════════════════════════════════════════════════════
   Se carga DESPUÉS de original.css (el estilo del source, intacto) y de
   temas.css (tokens; sin atributo data-tema se aplica Inestech). Solo
   cambia el aspecto: cabecera y pie de planner, ficha en dos filas por
   dato, nombre de la obra resaltado y avisos al estilo Ant Design.

   Lo que NO cambia, a propósito: los colores del veredicto (vigente,
   superado, no válido). Son una señal de seguridad, no de marca.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Outfit";
  src: url("fuentes/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--f-texto);
  background: var(--c-fondo);
  color: var(--c-texto);
}
main { background: var(--c-fondo); }

/* ── Cabecera planner ───────────────────────────────────────────────── */
header.cab {
  height: 56px; padding: 0 16px; gap: 12px; flex-wrap: nowrap;
  background: var(--c-cab-fondo);
  border-top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-cab-borde) 35%, transparent);
}
header.cab .marca {
  margin: 0; white-space: nowrap;
  font: 500 28px/1 var(--f-marca); letter-spacing: -.01em;
  color: var(--c-marca);
}
header.cab .marca b { font-weight: inherit; color: var(--logo-azul); }

/* Language switcher: the look comes from the shared component
   (selector-idioma.css). Here it is only placed on the right of the header. */
header.cab .language-switcher { margin-left: auto; }

/* ── Estado del listado y aviso legal (antes, dentro del pie) ───────── */
.estado {
  max-width: 680px; margin: 0 auto; padding: 8px 20px 20px;
  font-size: 12px; line-height: 1.5; color: var(--c-texto-suave);
}
.estado b { color: var(--c-texto); font-weight: 600; }
.estado .legal { margin: 6px 0 0; }

/* ── Pie planner (48 px en total, filete incluido) ──────────────────── */
footer.pie {
  box-sizing: border-box; min-height: 48px; padding: 8px 16px;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: var(--c-pie-fondo); color: var(--c-pie-texto);
  border-top: 4px solid var(--c-pie-filete);
  font-size: 14px; line-height: 1.4; text-align: center;
}
footer.pie .logo-inestech { height: 22px; }

/* ── Ficha del plano ────────────────────────────────────────────────── */
/* El nombre de la obra destaca con color, como en el original, pero con un
   tono apto para texto (más de 5:1 de contraste). */
.doc .obra {
  font-size: 17px; font-weight: 600; line-height: 1.3;
  letter-spacing: normal; text-transform: none;
  color: var(--c-acento-texto); margin: 0 0 6px;
}
.doc .denom { color: var(--c-titulo); }
.doc .tit { color: var(--c-texto-suave); }

/* Dos filas por dato: etiqueta arriba, valor debajo, sin apiñar el valor a
   la derecha en el móvil. En pantallas anchas, los datos van en dos columnas. */
.datos, .datos tbody, .datos tr, .datos th, .datos td { display: block; width: auto; }
.datos tbody { display: grid; grid-template-columns: 1fr; column-gap: 24px; }
.datos tr { border-bottom: 1px solid var(--a-borde-sec); padding: 10px 0; }
.datos th, .datos td { border: 0; padding: 0; }
.datos th { font-size: 12px; font-weight: 400; color: var(--c-texto-suave); }
.datos th small { font-size: 12px; }
.datos td { font-size: 15px; font-weight: 600; color: var(--c-titulo); margin-top: 2px; }
.datos td.suave { font-weight: 400; color: var(--c-texto); }
@media (min-width: 600px) {
  .datos tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Avisos al estilo Ant Design ────────────────────────────────────── */
.nota, .aviso {
  /* Mismo margen lateral que el resto del contenido en el móvil (en el
     source tocaban los bordes de la pantalla); centrados hasta 680 px. */
  max-width: none;
  margin-left: max(16px, calc((100% - 680px) / 2));
  margin-right: max(16px, calc((100% - 680px) / 2));
}
.nota {
  border: 1px solid var(--c-info-borde); border-radius: var(--a-radio-lg);
  background: var(--c-info-suave); color: var(--a-texto);
}
.nota b { color: var(--a-texto); }
.nota.alerta {
  border-color: var(--a-aviso-borde); background: var(--a-aviso-fondo); color: var(--a-texto);
}
.nota.alerta b { color: var(--a-texto); }

/* Revisión vigente cuando el papel está superado: se mantiene el número
   grande en el rojo del veredicto, que es la información clave. */
.aviso {
  border: 1px solid var(--a-error-borde); border-radius: var(--a-radio-lg);
  background: var(--a-error-fondo);
}
.aviso h2 {
  font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--v-no);
}
.aviso .accion { color: var(--c-texto); }

/* ── Listado de planos vigentes ─────────────────────────────────────── */
.listado h1 { color: var(--c-titulo); }
.listado .intro { color: var(--c-texto-suave); }
.obra-bloque h2 {
  font-size: 17px; letter-spacing: normal; text-transform: none;
  color: var(--c-acento-texto); border-bottom-color: var(--a-borde-sec);
}
.tabla-wrap {
  border: 1px solid var(--a-borde-sec); border-radius: var(--a-radio-lg);
  background: var(--c-superficie);
}
table.planos th, table.planos td { padding: 12px 16px; border-bottom-color: var(--a-borde-sec); }
table.planos thead th {
  font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none;
  color: var(--a-texto); background: #FAFAFA; border-bottom: 1px solid var(--a-borde-sec);
}
table.planos td.denom { color: var(--c-titulo); }
table.planos td.tit { color: var(--c-texto-suave); }
table.planos tbody tr:last-child td { border-bottom: 0; }

/* Revisión vigente del listado como etiqueta de Ant Design (verde de éxito) */
.pill {
  padding: 0 7px; line-height: 20px; font-size: 12px; font-weight: 400; letter-spacing: normal;
  border: 1px solid var(--a-ok-borde); border-radius: var(--a-radio-sm);
  background: var(--a-ok-fondo); color: var(--a-ok-texto);
}