/* ==========================================================================
   Cédula LIETC — hoja de estilos.

   Los colores no son una interpretación: salen del PDF del instrumento (guinda
   de las barras de sección, verde de la observación interna, oro y verde agua de
   las dos cajas de clasificación). Se escribe CSS plano, sin Tailwind ni proceso
   de build, por la misma razón que en SICEAC: la aplicación se sirve con
   plantillas de Django y el estilo debe viajar con el proyecto, sin Node.

   La pantalla imita la hoja tamaño carta —fondo gris, papel blanco centrado—
   porque la cédula se llena frente al personal de la unidad y se reconoce por su
   forma antes que por su contenido.
   ========================================================================== */

:root {
  --guinda: #9f2241;
  --guinda-oscuro: #691c32;
  --verde: #1e6b52;
  --verde-imss: #235b4e;
  --oro: #a57f2c;
  --verde-agua: #d4e5e1;
  --arena: #f5e9cf;

  --tinta: #1c1c1c;
  --tinta-2: #4a4a4a;
  --tinta-3: #7a7a7a;
  --papel: #ffffff;
  --mesa: #e9e9ea;
  --linea: #c9c9cb;
  --linea-suave: #e3e3e5;
  --error: #b3261e;

  --ancho-hoja: 1120px;
  --radio: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mesa);
  color: var(--tinta);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
}
.salto-contenido:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--papel);
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--guinda);
}

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

/* --- Membrete y pie institucionales -------------------------------------- */

.membrete {
  max-width: var(--ancho-hoja);
  margin: 1.5rem auto 0;
  padding: 1.2rem 2rem 0.6rem;
  background: var(--papel);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.membrete__logos {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Los tres elementos del membrete van a la misma altura, como en el impreso. */
.membrete__gobmx,
.membrete__imss { height: 84px; width: auto; }

.membrete__division {
  width: 1px;
  height: 66px;
  background: var(--linea);
}

.membrete__soldadera {
  height: 84px;
  opacity: 0.9;
}

.pie {
  max-width: var(--ancho-hoja);
  margin: 0 auto 2.5rem;
  padding: 0.8rem 2rem 1.6rem;
  background: var(--papel);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-top: 3px solid var(--guinda);
}

.pie__efemeride { height: 62px; }

.pie__direccion {
  margin: 0;
  font-size: 12px;
  color: var(--tinta-2);
}

/* --- La hoja -------------------------------------------------------------- */

.hoja {
  max-width: var(--ancho-hoja);
  margin: 0 auto;
  padding: 0.5rem 2rem 1.5rem;
  background: var(--papel);
}

.titulo-cedula {
  margin: 0.5rem 0 0;
  padding: 0.6rem 1rem;
  background: var(--guinda-oscuro);
  color: #fff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.01em;
}

.subtitulo-cedula {
  margin: 0.5rem 0 1rem;
  text-align: center;
  font-size: 12.5px;
  font-style: italic;
  color: var(--tinta-2);
}

.regla-general {
  margin: 0 0 0.4rem;
  padding: 0.55rem 0.8rem;
  background: #f7f4f5;
  border-left: 4px solid var(--guinda);
  font-size: 12.5px;
  color: var(--tinta-2);
}

.regla-general--siglas {
  border-left-color: var(--verde-imss);
  color: var(--tinta-3);
}

.barra {
  margin: 1.6rem 0 0;
  padding: 0.45rem 0.9rem;
  background: var(--guinda);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.barra--centrada { text-align: center; }
.barra--verde { background: var(--verde); font-size: 13px; text-transform: none; }

.bloque { margin: 0 0 0.4rem; }

.enunciado {
  margin: 0.7rem 0 0.3rem;
  font-weight: 600;
}

.enunciado--secundario {
  font-weight: 400;
  font-size: 12.5px;
  font-style: italic;
  color: var(--tinta-2);
}

.regla-marcado {
  margin: 0.2rem 0 0.6rem;
  font-size: 12px;
  color: var(--guinda-oscuro);
}

.aclaracion {
  display: block;
  margin-top: 0.25rem;
  font-size: 12.5px;
  color: var(--tinta-2);
}

/* --- Encabezado de identificación ---------------------------------------- */

.buscador {
  margin: 1rem 0 0.8rem;
  position: relative;
}

.buscador > label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 0.25rem;
}

.ayuda-campo, .nota-campo {
  display: block;
  margin: 0.25rem 0 0;
  font-size: 12px;
  color: var(--tinta-3);
}

.buscador__resultados {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.45);
}

.buscador__resultados li { border-bottom: 1px solid var(--linea-suave); }
.buscador__resultados li:last-child { border-bottom: 0; }

.buscador__resultados button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.buscador__resultados button:hover,
.buscador__resultados button:focus,
.buscador__resultados li[aria-selected="true"] button {
  background: var(--verde-agua);
  outline: none;
}

.buscador__resultados strong { display: block; font-size: 13px; }
.buscador__resultados small { color: var(--tinta-3); font-size: 12px; }
.buscador__resultados .aviso { padding: 0.5rem 0.7rem; font-size: 12px; color: var(--tinta-3); }

.tabla-encabezado {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tabla-encabezado th,
.tabla-encabezado td {
  border: 1px solid var(--linea);
  padding: 0.4rem 0.6rem;
  vertical-align: middle;
}

.tabla-encabezado th {
  background: #f3f3f4;
  text-align: left;
  font-size: 12.5px;
  width: 15%;
}

.precargado {
  display: block;
  min-height: 1.4em;
  font-weight: 600;
  color: var(--verde-imss);
}

.opciones-linea { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.opciones-linea ul, .opciones-linea li { list-style: none; margin: 0; padding: 0; }
.opciones-linea ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.opciones-linea label { font-size: 13px; cursor: pointer; }

/* --- Tablas del instrumento ---------------------------------------------- */

.tabla-instrumento {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 0.4rem;
}

.tabla-instrumento thead th {
  background: var(--guinda);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--guinda);
  text-align: left;
}

.tabla-instrumento tbody th,
.tabla-instrumento tbody td {
  border: 1px solid var(--linea);
  padding: 0.5rem 0.6rem;
  vertical-align: middle;
}

.tabla-instrumento tbody th {
  background: #f6f2f3;
  font-size: 12.5px;
  text-align: center;
}

.col-clave { width: 46px; text-align: center; }
.col-etiqueta { width: 140px; }
.col-marca { width: 62px; text-align: center; }

.tabla-instrumento thead .col-marca,
.tabla-instrumento thead .col-clave { text-align: center; }

.tabla-trazadora .texto-opcion { line-height: 1.4; }

.fila--con-error td, .fila--con-error th { background: #fdf1f0; }

/* Las celdas de marca son el objetivo táctil completo: en tableta se marca con
   el dedo sin apuntar a un círculo de tres milímetros. */
.marca { padding: 0 !important; }

.marca__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 46px;
  padding: 0.35rem 0.2rem;
  cursor: pointer;
}

.marca__caja input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--guinda);
  margin: 0;
}

.marca__texto { font-size: 11px; color: var(--tinta-3); }

.marca__caja:has(input:checked) { background: var(--verde-agua); }
.marca__caja:has(input:checked) .marca__texto { color: var(--verde-imss); font-weight: 700; }
.marca__caja:focus-within { outline: 2px solid var(--guinda); outline-offset: -2px; }

.marca--vacia { background: repeating-linear-gradient(135deg, #fafafa, #fafafa 6px, #f1f1f1 6px, #f1f1f1 12px); }

/* --- Ayuda plegable (definiciones del reverso) --------------------------- */

.ayuda { display: inline-block; vertical-align: middle; margin-left: 0.35rem; }

.ayuda > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--verde-imss);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ayuda > summary::-webkit-details-marker { display: none; }
.ayuda > summary:hover { background: var(--guinda); }

.ayuda[open] > summary { background: var(--guinda); }

.ayuda p {
  margin: 0.4rem 0 0.2rem;
  padding: 0.5rem 0.7rem;
  background: #f4f7f6;
  border-left: 3px solid var(--verde-imss);
  font-size: 12.5px;
  font-style: normal;
  color: var(--tinta-2);
}

/* --- Clasificación -------------------------------------------------------- */

.clasificacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 0.5rem;
}

.clasificacion__caja {
  border: 1px solid var(--linea);
  padding: 0.7rem 0.9rem;
  text-align: center;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.clasificacion__caja--a { background: var(--verde-agua); }
.clasificacion__caja--b { background: var(--arena); }

/* La caja se enciende sola según los seis eslabones: la clasificación es
   resultado y no se captura, así que no hay nada que marcar aquí. */
.clasificacion[data-valor="A"] .clasificacion__caja--a,
.clasificacion[data-valor="B"] .clasificacion__caja--b {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--guinda);
}

.clasificacion__titulo { margin: 0; font-weight: 700; font-size: 14px; }
.clasificacion__caja--a .clasificacion__titulo { color: var(--verde-imss); }
.clasificacion__caja--b .clasificacion__titulo { color: var(--oro); }
.clasificacion__detalle { margin: 0.25rem 0 0; font-size: 12px; color: var(--tinta-2); }

.clasificacion__nota,
.clasificacion__bloqueos { margin: 0.5rem 0 0; font-size: 12.5px; }
.clasificacion__bloqueos strong { color: var(--guinda-oscuro); }

.clasificacion__cierre {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--verde-agua);
  font-size: 12.5px;
  color: var(--verde-imss);
}

/* --- Observación interna, firmas y anexos -------------------------------- */

/* El bloque de observación interna solo se enciende en el caso que lo justifica:
   seis eslabones en Sí y la trazadora en «a» o «b». Apagado se ve claramente
   inactivo, para que nadie lo intente llenar. */
.observacion[data-aplica="no"] { opacity: 0.5; }
.observacion[data-aplica="no"] textarea { background: #f6f6f7; cursor: not-allowed; }
.observacion[data-aplica="si"] { opacity: 1; }
.observacion[data-aplica="si"] .nota-campo--inactivo { display: none; }
.observacion[data-aplica="si"] .casilla-interna strong { color: var(--verde); }

.obligatorio {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--guinda);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.casilla-interna { margin: 0.7rem 0 0.9rem; }
.casilla-interna label { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.casilla-interna input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--guinda); }

.campo { margin: 0.8rem 0; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 0.25rem; }

input[type="text"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font: inherit;
  background: #fff;
  color: var(--tinta);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--guinda);
  outline-offset: 0;
  border-color: var(--guinda);
}

.firmas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.firma label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 0.25rem; }

.firma__lienzo {
  display: block;
  width: 100%;
  height: 130px;
  margin-top: 0.6rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #fdfdfd;
  touch-action: none; /* si no, arrastrar el dedo para firmar desplaza la página */
  cursor: crosshair;
}

.firma__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--tinta);
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  font-size: 12px;
  color: var(--tinta-2);
}

.firmas__nota {
  grid-column: 1 / -1;
  margin: 0;
  text-align: right;
  font-size: 12px;
  font-style: italic;
  color: var(--tinta-3);
}

.anexos { margin-top: 2rem; }
.anexos h3 { margin: 0 0 0.3rem; font-size: 13px; }
.tabla-pruebas { font-size: 13px; }

.definiciones { margin-top: 1rem; border: 1px solid var(--linea); border-radius: var(--radio); }
.definiciones > summary {
  padding: 0.55rem 0.8rem;
  background: #f3f3f4;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.definiciones dl { margin: 0; padding: 0.6rem 1rem 1rem; font-size: 12.5px; }
.definiciones dt { font-weight: 700; margin-top: 0.7rem; color: var(--guinda-oscuro); }
.definiciones dd { margin: 0.2rem 0 0; color: var(--tinta-2); }

/* --- Botones, mensajes y errores ----------------------------------------- */

.acciones {
  margin: 2rem 0 1rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.boton {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--guinda);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--guinda);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.boton:hover { background: #f7eef1; }

.boton--principal {
  background: var(--guinda);
  color: #fff;
  padding: 0.75rem 2.4rem;
  font-size: 16px;
}
.boton--principal:hover { background: var(--guinda-oscuro); border-color: var(--guinda-oscuro); }

.boton--tenue {
  padding: 0.25rem 0.7rem;
  font-size: 12px;
  border-color: var(--linea);
  color: var(--tinta-2);
}

.mensajes { margin: 1rem 0 0; }

.mensaje {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radio);
  border-left: 4px solid var(--verde-imss);
  background: #f0f6f4;
  font-size: 13.5px;
}

.mensaje--error { border-left-color: var(--error); background: #fdf1f0; color: #7c1d16; }

.errores, .errores-generales {
  margin: 0.3rem 0 0;
  padding: 0 0 0 1.1rem;
  color: var(--error);
  font-size: 12.5px;
}

.errores-generales { list-style: none; padding: 0.5rem 0.8rem; background: #fdf1f0; }

/* --- Acuse y consulta ----------------------------------------------------- */

.acuse { text-align: center; padding: 2rem 0; }
.acuse__folio {
  display: inline-block;
  margin: 0.6rem 0 1rem;
  padding: 0.5rem 1.4rem;
  background: var(--verde-agua);
  border: 1px solid var(--verde-imss);
  border-radius: var(--radio);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--verde-imss);
}

.acuse__datos { margin: 0 auto 1.4rem; max-width: 620px; text-align: left; }
.acuse__datos th { text-align: left; padding-right: 1rem; color: var(--tinta-2); font-weight: 600; }

.distintivo {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.distintivo--a { background: var(--verde-agua); color: var(--verde-imss); }
.distintivo--b { background: var(--arena); color: var(--oro); }

.filtros { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; margin: 1rem 0; }
.filtros label { display: block; font-size: 12px; color: var(--tinta-2); }
.filtros select, .filtros input { width: auto; min-width: 160px; }

.tabla-consulta { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-consulta th, .tabla-consulta td { border: 1px solid var(--linea); padding: 0.4rem 0.6rem; }
.tabla-consulta thead th { background: var(--guinda); color: #fff; text-align: left; }
.tabla-consulta tbody tr:nth-child(even) { background: #fafafa; }

.paginacion { margin: 1rem 0; display: flex; gap: 0.6rem; align-items: center; font-size: 13px; }

/* --- Adaptación a pantalla chica ----------------------------------------- */

@media (max-width: 860px) {
  body { font-size: 15.5px; }
  .hoja, .membrete, .pie { padding-left: 1rem; padding-right: 1rem; }
  /* En pantalla chica solo caben los dos logotipos; la ilustración se retira
     antes que reducirlos, porque son la identificación del documento. */
  .membrete__soldadera { display: none; }
  .membrete__gobmx, .membrete__imss { height: 52px; }
  .firmas, .clasificacion { grid-template-columns: 1fr; }

  /* Las tablas se vuelven tarjetas: la cédula se aplica de pie, con el celular
     en la mano, y una tabla de cinco columnas obligaría a desplazamiento lateral
     justo mientras se dicta la pregunta al personal. */
  .tabla-encabezado, .tabla-encabezado tbody, .tabla-encabezado tr, .tabla-encabezado th,
  .tabla-encabezado td,
  .tabla-instrumento, .tabla-instrumento tbody, .tabla-instrumento tr,
  .tabla-instrumento tbody th, .tabla-instrumento tbody td {
    display: block;
    width: auto;
  }

  .tabla-instrumento thead, .tabla-encabezado thead { display: none; }

  .tabla-instrumento tbody tr, .tabla-encabezado tbody tr {
    margin-bottom: 0.8rem;
    border: 1px solid var(--linea);
    border-left: 4px solid var(--guinda);
  }

  .tabla-instrumento tbody th, .tabla-encabezado tbody th { text-align: left; }
  .tabla-instrumento tbody td, .tabla-encabezado tbody td { border: 0; border-top: 1px solid var(--linea-suave); }

  .marca { display: inline-block !important; width: 49%; border-top: 1px solid var(--linea-suave) !important; }
  .marca--vacia { display: none !important; }
  .marca__caja { width: 100%; flex-direction: row; gap: 0.5rem; }
  .marca__texto { font-size: 14px; }
  .col-clave, .col-etiqueta, .col-marca { width: auto; }
}

/* --- Impresión ------------------------------------------------------------ */

@media print {
  body { background: #fff; }
  .hoja, .membrete, .pie { max-width: none; margin: 0; }
  .acciones, .buscador__resultados, .filtros { display: none; }
  /* El anexo de definiciones se imprime desplegado: cedula.js abre cada
     <details> antes de imprimir, para que una impresión de la pantalla siga
     sirviendo como la hoja de papel, con su reverso. Aquí solo se ocultan los
     controles, que en papel no significan nada. */
  .ayuda > summary, .definiciones > summary { display: none; }
  .ayuda p { border-left-color: var(--linea); background: transparent; }
}

/* Navegación entre pantallas, solo visible con sesión de administración. */
.membrete__navegacion { display: flex; gap: 16px; margin-left: auto; padding-right: 18px; font-size: 13px; }
.membrete__navegacion a { color: var(--guinda-oscuro); font-weight: 600; text-decoration: none; }
.membrete__navegacion a:hover { text-decoration: underline; }
.membrete__navegacion form { margin: 0; }
.membrete__salir {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--guinda-oscuro);
  cursor: pointer;
}
.membrete__salir:hover { text-decoration: underline; }