/* estilo.css — hoja propia mínima de la página de subencargados (#12612).
 *
 * SIN build, SIN Tailwind, SIN CDN, SIN JavaScript. La regla de Tailwind/DaisyUI de
 * CLAUDE.md está acotada a `aios-agent/panel/`; esto es un documento legal servido por la
 * fábrica, no una pantalla del panel.
 *
 * TIPOGRAFÍA: PILA DEL SISTEMA, a propósito. El formulario del webinar auto-aloja
 * Montserrat porque vive EMBEBIDO bajo la cabecera de la landing y tiene que parecerse a
 * ella; esta página se abre entera y sola, así que duplicar 55 KB de binarios de fuente en
 * un segundo paquete no se paga (#12612, Step 2, punto 6).
 *
 * La CSP de la app es `default-src 'none'; style-src 'self'`: esta hoja se sirve desde el
 * propio origen y no hay ni un byte de JavaScript. Tampoco importa hojas de terceros — lo
 * bloquearía la CSP, y con razón.
 *
 * NI UN SOLO RECURSO EXTERNO NI LOCAL: no hay fuentes, ni imágenes, ni iconos. Si algún día
 * se añade uno, su fichero tiene que existir bajo `static/` — un 404 de recurso NO rompe
 * nada visible y solo se ve abriendo la página, por eso lo vigila un test
 * (`test_toda_url_de_estilo_css_apunta_a_un_fichero_que_existe`).
 *
 * OJO AL REDACTAR ESTE COMENTARIO: los dos tests de arriba barren la hoja ENTERA, también
 * los comentarios. Escribir aquí la palabra de importar o una llamada a recurso de ejemplo
 * los pone en ROJO, y la respuesta correcta es reformular el comentario, NUNCA enseñarles a
 * saltarse los comentarios: el día que alguien comente una regla de verdad, dejarían de
 * verla.
 */

:root {
  --tinta: #1f2933;
  --tinta-suave: #52606d;
  --linea: #d9e2ec;
  --fondo: #ffffff;
  --fondo-suave: #f5f7fa;
  --acento: #0b5fff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem 1rem 4rem;
  background: var(--fondo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.anexo {
  max-width: 54rem;
  margin: 0 auto;
}

h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0 0 0.25rem;
}

h2 {
  font-size: 1.3rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
}

p {
  margin: 0 0 1.1rem;
}

.responsable {
  color: var(--tinta-suave);
  margin-bottom: 1.25rem;
}

.sello {
  background: var(--fondo-suave);
  border-left: 4px solid var(--acento);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.75rem;
}

/* Banda de BORRADOR (#12638). Solo se pinta si la fecha está sin fijar, y eso solo puede
 * servirse con el permiso local: en producción el proceso no arranca con un borrador. Que
 * se vea mucho es el propósito — nadie debe confundir la verificación local con la página
 * publicada. */
.borrador {
  background: #fff4e5;
  border-left: 4px solid #d9480f;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.75rem;
}

.aclaracion {
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

/* El envoltorio permite desplazar la tabla en pantallas estrechas en vez de desbordar la
 * página: un anexo se lee tanto en un portátil como en el móvil de quien recibe el aviso. */
.tabla-envoltorio {
  overflow-x: auto;
  margin: 0 0 1.1rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

th,
td {
  border: 1px solid var(--linea);
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

thead th {
  background: var(--fondo-suave);
  font-weight: 600;
}

td a {
  color: var(--acento);
  word-break: break-all;
}

.nota {
  margin: 0.45rem 0 0;
  color: var(--tinta-suave);
  font-size: 0.85rem;
  line-height: 1.45;
}

.sin-lista {
  color: var(--tinta-suave);
}

/* Móvil en vertical (PO, 2026-09-22): con cinco columnas la tabla obligaba a desplazarse o a
 * girar el móvil. En pantallas estrechas cada fila pasa a ser una ficha y cada dato lleva
 * delante el nombre de su columna, que la plantilla repite en `data-label`. La cabecera se
 * oculta a la vista pero sigue en el documento para los lectores de pantalla. */
@media (max-width: 40rem) {
  table.subencargados,
  table.subencargados tbody,
  table.subencargados tr,
  table.subencargados td {
    display: block;
    width: 100%;
  }

  table.subencargados thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  table.subencargados tr {
    border: 1px solid var(--linea);
    margin-bottom: 1rem;
  }

  table.subencargados td {
    border: 0;
    border-top: 1px solid var(--linea);
    padding: 0.5rem 0.8rem;
  }

  table.subencargados td:first-child {
    border-top: 0;
    background: var(--fondo-suave);
  }

  table.subencargados td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tinta-suave);
  }

  table.subencargados td:first-child::before {
    display: none;
  }
}

.contacto {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}

.contacto a {
  color: var(--acento);
}