/* ============================================================
   Sistema de Fichas de Nuevo Ingreso · ITSC
   Hoja de estilo única · minimalista y responsiva
   Línea gráfica compartida con los demás sistemas del Tec.
   ============================================================ */

:root {
  /* Institucional */
  --azul:        #1b396a;
  --azul-osc:    #142b50;
  --azul-claro:  #2c528e;
  --azul-tenue:  #eef2f8;
  --azul-borde:  #d3ddec;

  /* Grises */
  --gris-900: #1f2937;
  --gris-700: #3f4a5a;
  --gris-500: #6b7684;
  --gris-400: #97a1ae;
  --gris-300: #cbd2db;
  --gris-200: #e3e7ed;
  --gris-100: #f1f3f7;
  --gris-50:  #f7f8fa;
  --blanco:   #ffffff;

  /* Semáforo de estatus */
  --ambar:     #b26a00;
  --ambar-bg:  #fdf3e2;
  --verde:     #1c7a4d;
  --verde-bg:  #e7f5ee;
  --violeta:   #6d3f9e;
  --violeta-bg:#f2ecfa;
  --rojo:      #b3261e;
  --rojo-bg:   #fdecea;

  --radio:   10px;
  --radio-s: 6px;
  --sombra:  0 1px 2px rgba(27, 57, 106, .06), 0 4px 16px rgba(27, 57, 106, .06);
  --linea:   1px solid var(--gris-200);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* El cuerpo es una columna flexible para que el pie quede siempre abajo,
   aunque la página tenga poco contenido. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* descuenta la barra del navegador en móvil */
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gris-900);
  background: var(--gris-50);
}

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; color: var(--azul); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 .8rem; }

a { color: var(--azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.contenedor-angosto { max-width: 780px; }

/* ---------- Encabezado institucional ---------- */
.barra-inst {
  background: var(--blanco);
  border-bottom: 3px solid var(--azul);
  flex-shrink: 0;
}
.barra-inst .contenedor {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.barra-inst img.sep { height: 34px; width: auto; }
.barra-inst img.itsc { height: 44px; width: auto; }
.barra-inst .inst-txt { margin-left: auto; text-align: right; line-height: 1.3; }
.barra-inst .inst-txt strong { display: block; font-size: .85rem; color: var(--azul); }
.barra-inst .inst-txt span { font-size: .74rem; color: var(--gris-500); }

/* ============================================================
   Panel lateral
   El menú vive a la izquierda y se pliega a solo iconos. El estado
   plegado se guarda en el navegador (ver app.js), así que la barra
   respeta cómo la dejó cada quien.
   ============================================================ */
.disposicion { display: flex; flex: 1 0 auto; width: 100%; align-items: flex-start; }

.lateral {
  width: 250px;
  flex-shrink: 0;
  background: var(--azul);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: width .18s ease;
  z-index: 50;
}

/* Membrete de la barra */
.lateral .marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  min-height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  flex-shrink: 0;
}
.lateral .marca img {
  height: 34px;
  width: 34px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--blanco);
  border-radius: var(--radio-s);
  padding: 3px;
}
.lateral .marca .txt { line-height: 1.25; overflow: hidden; }
.lateral .marca .txt strong { display: block; color: var(--blanco); font-size: .88rem; white-space: nowrap; }
.lateral .marca .txt span { font-size: .69rem; color: rgba(255, 255, 255, .58); white-space: nowrap; }

/* Botón de plegar, dentro del membrete de la barra. */
.btn-plegar {
  margin-left: auto;
  background: none;
  border: 0;
  border-radius: var(--radio-s);
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
@media (hover: hover) {
  .btn-plegar:hover { background: rgba(255, 255, 255, .12); color: var(--blanco); }
}
.btn-plegar svg { width: 18px; height: 18px; transition: transform .18s ease; }

/* Enlaces */
.lateral-menu { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 0 14px; }
.lateral-menu .grupo {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .42);
  padding: 15px 18px 6px;
  white-space: nowrap;
}
.lateral-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  color: rgba(255, 255, 255, .82);
  font-size: .88rem;
  border-left: 3px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.lateral-menu a:hover { background: rgba(255, 255, 255, .07); color: var(--blanco); text-decoration: none; }
.lateral-menu a.activo {
  background: rgba(255, 255, 255, .13);
  color: var(--blanco);
  border-left-color: var(--blanco);
  font-weight: 600;
}
.lateral-menu a svg { width: 18px; height: 18px; flex-shrink: 0; }
.lateral-menu a .rot { overflow: hidden; text-overflow: ellipsis; }
.lateral-menu a.en-obra { color: rgba(255, 255, 255, .5); }
.lateral-menu a .obra {
  margin-left: auto;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 1px 7px;
}

/* Pie de la barra: quién está dentro */
.lateral .sesion {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: 12px 18px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  gap: 10px;
}
.lateral .sesion .quien { line-height: 1.3; overflow: hidden; }
.lateral .sesion .quien strong { display: block; color: var(--blanco); font-size: .82rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.lateral .sesion .quien span { font-size: .7rem; white-space: nowrap; }
.lateral .sesion .salir {
  margin-left: auto;
  color: rgba(255, 255, 255, .75);
  display: flex;
  align-items: center;
  padding: 6px;
  border-radius: var(--radio-s);
}
.lateral .sesion .salir:hover { background: rgba(255, 255, 255, .12); color: var(--blanco); text-decoration: none; }
.lateral .sesion .salir svg { width: 17px; height: 17px; }

/* --- Plegado: solo iconos --- */
body.lateral-plegado .lateral { width: 64px; }
body.lateral-plegado .lateral .marca { justify-content: center; padding-left: 0; padding-right: 0; }

/* En 64 px no caben el logotipo y el botón, y lo que hace falta ahí es
   poder volver a desplegar: se queda el botón. El logotipo del Tec sigue
   a la vista en la barra institucional de arriba. */
body.lateral-plegado .lateral .marca .marca-logo { display: none; }
body.lateral-plegado .btn-plegar { margin-left: 0; }
body.lateral-plegado .btn-plegar svg { transform: rotate(180deg); }

body.lateral-plegado .lateral .marca .txt,
body.lateral-plegado .lateral-menu .grupo,
body.lateral-plegado .lateral-menu a .rot,
body.lateral-plegado .lateral-menu a .obra,
body.lateral-plegado .lateral .sesion .quien { display: none; }
body.lateral-plegado .lateral-menu a { justify-content: center; padding-left: 0; padding-right: 0; border-left-width: 0; border-right: 3px solid transparent; }
body.lateral-plegado .lateral-menu a.activo { border-right-color: var(--blanco); }
body.lateral-plegado .lateral .sesion { justify-content: center; padding-left: 0; padding-right: 0; }
body.lateral-plegado .lateral .sesion .salir { margin-left: 0; }

/* Separador visible entre grupos cuando solo hay iconos */
body.lateral-plegado .lateral-menu .grupo + a { border-top: 1px solid rgba(255, 255, 255, .13); margin-top: 8px; padding-top: 14px; }

/* Columna de contenido */
.principal {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Hamburguesa de la barra institucional. En escritorio el plegado se manda
   desde la barra azul, así que esta sobra; queda para pantalla angosta,
   donde la barra sale de cuadro y no habría cómo abrirla. */
.btn-menu {
  display: none;
  background: none;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-s);
  color: var(--gris-700);
  cursor: pointer;
  padding: 7px;
  align-items: center;
  flex-shrink: 0;
}
.btn-menu:hover { background: var(--gris-100); color: var(--azul); border-color: var(--azul-borde); }
.btn-menu svg { width: 18px; height: 18px; }

/* Velo para el modo teléfono, donde la barra flota sobre el contenido */
.velo-lateral {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, .5);
  z-index: 45;
  display: none;
}
body.lateral-abierto .velo-lateral { display: block; }

/* ---------- Página ---------- */
.pagina { padding: 26px 0 60px; flex: 1 0 auto; }
.encabezado-pagina {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.encabezado-pagina p { margin: 0; color: var(--gris-500); font-size: .88rem; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--blanco);
  border: var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  overflow: hidden;
}
.tarjeta > .cab {
  padding: 13px 18px;
  border-bottom: var(--linea);
  background: var(--gris-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.tarjeta > .cab h2, .tarjeta > .cab h3 { margin: 0; font-size: .95rem; letter-spacing: .01em; }
.tarjeta > .cuerpo { padding: 18px; }

/* Franja de sección tipo formato oficial */
.franja {
  background: var(--azul);
  color: var(--blanco);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 8px 18px;
}

/* ---------- Formularios ---------- */
.campo { margin-bottom: 15px; }
.campo > label,
.etiqueta {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gris-700);
  margin-bottom: 5px;
  letter-spacing: .01em;
}
.requerido { color: var(--rojo); font-weight: 400; }
.ayuda { font-size: .78rem; color: var(--gris-500); margin-top: 4px; }

input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=date], input[type=time], input[type=number], input[type=url],
input[type=search], select, textarea {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: .92rem;
  color: var(--gris-900);
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-s);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(44, 82, 142, .13);
}
input:disabled, textarea:disabled, select:disabled { background: var(--gris-100); color: var(--gris-500); }
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7684' d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; padding-right: 30px; }

.rejilla { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
.rejilla-3 { display: grid; gap: 0 16px; grid-template-columns: repeat(3, 1fr); }
.col-todo { grid-column: 1 / -1; }

/* Casillas de selección tipo "dirigido a" */
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opcion {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-s);
  background: var(--blanco);
  cursor: pointer;
  font-size: .88rem;
  flex: 1 1 210px;
  transition: border-color .15s, background .15s;
}
/* En táctil el :hover se queda pegado tras tocar y parece seleccionado,
   así que el resalte se limita a dispositivos con puntero real. */
@media (hover: hover) {
  .opcion:hover { border-color: var(--azul-claro); }
}
.opcion input { accent-color: var(--azul); width: 16px; height: 16px; margin: 0; flex: none; }
.opcion.marcada { border-color: var(--azul); background: var(--azul-tenue); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 17px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  border-radius: var(--radio-s);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--azul); color: var(--blanco); }
.btn-primario:hover:not(:disabled) { background: var(--azul-osc); color: var(--blanco); }
.btn-secundario { background: var(--blanco); color: var(--azul); border-color: var(--gris-300); }
.btn-secundario:hover:not(:disabled) { border-color: var(--azul); background: var(--azul-tenue); color: var(--azul); }
.btn-fantasma { background: transparent; color: var(--gris-700); border-color: var(--gris-300); }
.btn-fantasma:hover:not(:disabled) { background: var(--gris-100); color: var(--gris-900); }
.btn-peligro { background: var(--blanco); color: var(--rojo); border-color: #f0c4c1; }
.btn-peligro:hover:not(:disabled) { background: var(--rojo-bg); color: var(--rojo); }
.btn-exito { background: var(--verde); color: var(--blanco); }
.btn-exito:hover:not(:disabled) { background: #15603c; color: var(--blanco); }
.btn-bloque { width: 100%; }
/* Los SVG de icono() no traen width ni height --se dimensionan donde se
   usan-- y dentro de un botón, que es flexible, se estiraban a todo lo
   que daba. Aquí se les fija el tamaño del texto que acompañan. */
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-mini svg { width: 14px; height: 14px; }
.btn-mini { padding: 6px 11px; font-size: .8rem; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.acciones-fin { justify-content: flex-end; }

/* ---------- Etiquetas de estatus ---------- */
.etiqueta-estatus {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.et-pendiente { background: var(--ambar-bg);  color: var(--ambar); }
.et-proceso   { background: var(--azul-tenue);color: var(--azul); }
.et-liberar   { background: var(--violeta-bg);color: var(--violeta); }
.et-cerrada   { background: var(--verde-bg);  color: var(--verde); }
.et-cancelada { background: var(--gris-200);  color: var(--gris-500); }

.prioridad { font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.pr-ALTA  { color: var(--rojo); }
.pr-MEDIA { color: var(--ambar); }
.pr-BAJA  { color: var(--gris-500); }

.folio {
  font-family: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .84rem;
  font-weight: 600;
  color: var(--azul);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---------- Credenciales de seguimiento (folio + clave) ---------- */
.clave {
  font-family: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--azul);
  white-space: nowrap;
}
.credenciales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.credencial {
  border: 1px solid var(--azul-borde);
  background: var(--azul-tenue);
  border-radius: var(--radio-s);
  padding: 13px 15px;
  text-align: center;
}
.credencial .rot {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris-500);
  margin-bottom: 4px;
}
.credencial .valor { font-size: 1.35rem; line-height: 1.2; }

/* ---------- Indicadores ---------- */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.indicador {
  background: var(--blanco);
  border: var(--linea);
  border-left: 3px solid var(--gris-300);
  border-radius: var(--radio-s);
  padding: 13px 15px;
  text-decoration: none;
  display: block;
  transition: border-color .15s, transform .12s;
}
.indicador:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--gris-300); }
.indicador .num { font-size: 1.7rem; font-weight: 700; color: var(--azul); line-height: 1.1; }
.indicador .rot { font-size: .76rem; color: var(--gris-500); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.indicador.i-pendiente { border-left-color: var(--ambar); }
.indicador.i-proceso   { border-left-color: var(--azul-claro); }
.indicador.i-liberar   { border-left-color: var(--violeta); }
.indicador.i-cerrada   { border-left-color: var(--verde); }

/* ---------- Tablas ---------- */
.tabla-envoltura { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 680px; }
/* Las de muchas columnas necesitan más aire antes de empezar a partir
   nombres en tres renglones; si no cabe, la envoltura la deja rodar. */
table.tabla.ancha { min-width: 900px; }
table.tabla th {
  text-align: left;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris-500);
  font-weight: 700;
  padding: 10px 14px;
  background: var(--gris-50);
  border-bottom: var(--linea);
  white-space: nowrap;
}
table.tabla td { padding: 11px 14px; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
table.tabla tbody tr:last-child td { border-bottom: none; }
table.tabla tbody tr:hover { background: var(--gris-50); }
table.tabla .col-acciones { text-align: right; white-space: nowrap; }
.txt-sec { color: var(--gris-500); font-size: .82rem; }
.recorte { display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Filtros */
.filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
}
.filtros .campo { margin-bottom: 0; flex: 1 1 180px; }
.filtros .campo.ancho { flex: 2 1 260px; }

/* ---------- Firma digital ---------- */
.firma-caja { max-width: 460px; }
.firma-lienzo {
  width: 100%;
  height: 170px;
  background: var(--blanco);
  border: 1px dashed var(--gris-400);
  border-radius: var(--radio-s);
  touch-action: none;
  cursor: crosshair;
  display: block;
}
.firma-lienzo.firmado { border-style: solid; border-color: var(--azul); }
.firma-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  font-size: .78rem;
  color: var(--gris-500);
}

/* Importación de firma digitalizada (solo personal con cuenta) */
.firma-importar {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--gris-300);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.firma-importar .ayuda { margin: 0; flex: 1 1 220px; min-width: 0; }

/* Firma ya guardada, en la vista de la orden */
.firma-mostrada { text-align: center; }
.firma-mostrada img {
  display: block;
  margin: 0 auto;
  max-width: 230px;
  height: auto;
  max-height: 90px;
}
.firma-mostrada .linea-firma {
  border-top: 1px solid var(--gris-700);
  margin: 2px auto 6px;
  max-width: 250px;
}
.firma-mostrada .nombre-firma { font-size: .82rem; font-weight: 600; color: var(--gris-900); }
.firma-mostrada .rol-firma { font-size: .74rem; color: var(--gris-500); }
.firmas-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 8px; }

/* ---------- Vista de orden (formato oficial digital) ---------- */
.orden-hoja {
  background: var(--blanco);
  border: var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.orden-titulo {
  text-align: center;
  padding: 18px;
  border-bottom: var(--linea);
}
.orden-titulo h1 { font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.orden-titulo .sub { font-size: .8rem; color: var(--gris-500); }

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 22px;
  padding: 18px;
}
.dato .rot {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris-500);
  font-weight: 700;
  margin-bottom: 2px;
}
.dato .val { font-size: .92rem; color: var(--gris-900); }
.dato .val.vacio { color: var(--gris-400); }

.bloque-texto {
  padding: 16px 18px;
  white-space: pre-wrap;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--gris-900);
}
.bloque-texto.vacio { color: var(--gris-400); font-style: italic; }

/* ---------- Línea de tiempo ---------- */
.linea-tiempo { list-style: none; margin: 0; padding: 6px 0 0; }
.linea-tiempo li {
  position: relative;
  padding: 0 0 16px 22px;
  border-left: 2px solid var(--gris-200);
  margin-left: 5px;
}
.linea-tiempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linea-tiempo li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blanco);
  border: 2px solid var(--azul-claro);
}
.linea-tiempo .lt-acc { font-weight: 600; font-size: .88rem; }
.linea-tiempo .lt-meta { font-size: .77rem; color: var(--gris-500); }
.linea-tiempo .lt-det { font-size: .85rem; color: var(--gris-700); margin-top: 2px; }

/* ---------- Avisos ---------- */
.aviso {
  padding: 12px 15px;
  border-radius: var(--radio-s);
  font-size: .88rem;
  margin-bottom: 16px;
  border: 1px solid transparent;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.aviso-info  { background: var(--azul-tenue); color: var(--azul-osc);  border-color: var(--azul-borde); }
.aviso-ok    { background: var(--verde-bg);   color: var(--verde);     border-color: #bfe3ce; }
.aviso-alerta{ background: var(--ambar-bg);   color: var(--ambar);     border-color: #f0dcb8; }
.aviso-error { background: var(--rojo-bg);    color: var(--rojo);      border-color: #f2c9c6; }

.vacio-estado { text-align: center; padding: 48px 20px; color: var(--gris-500); }
.vacio-estado .icono { font-size: 2.2rem; opacity: .35; display: block; margin-bottom: 8px; }

/* ---------- Modal ---------- */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, .55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  z-index: 60;
}
.modal-fondo.abierto { display: flex; }
.modal {
  background: var(--blanco);
  border-radius: var(--radio);
  width: 100%;
  max-width: 620px;
  box-shadow: 0 20px 50px rgba(15, 27, 48, .28);
  margin: auto;
}
.modal .cab {
  padding: 15px 20px;
  border-bottom: var(--linea);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.modal .cab h3 { margin: 0; }
.modal .cuerpo { padding: 20px; }
.modal .pie { padding: 14px 20px; border-top: var(--linea); background: var(--gris-50); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.cerrar-modal {
  background: none; border: none; font-size: 1.5rem; line-height: 1;
  color: var(--gris-400); cursor: pointer; padding: 0 4px;
}
.cerrar-modal:hover { color: var(--gris-900); }

/* ---------- Portal público ---------- */
.portada { padding: 46px 0 30px; text-align: center; }
.portada h1 { font-size: 1.85rem; margin-bottom: 8px; }
.portada p { color: var(--gris-500); max-width: 560px; margin: 0 auto 26px; }
.tarjetas-portada { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; text-align: left; }
.tarjeta-accion {
  background: var(--blanco);
  border: var(--linea);
  border-radius: var(--radio);
  padding: 22px;
  text-decoration: none;
  display: block;
  box-shadow: var(--sombra);
  transition: border-color .15s, transform .12s;
}
.tarjeta-accion:hover { border-color: var(--azul); transform: translateY(-2px); text-decoration: none; }
.tarjeta-accion .icono { font-size: 1.5rem; display: block; margin-bottom: 8px; }
.tarjeta-accion h3 { margin-bottom: 4px; }
.tarjeta-accion p { color: var(--gris-500); font-size: .87rem; margin: 0; }

/* ---------- Acceso ---------- */
.acceso-pantalla {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 16px;
  background: linear-gradient(160deg, var(--azul) 0%, var(--azul-osc) 100%);
}
.acceso-caja {
  background: var(--blanco);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(10, 20, 40, .3);
  width: 100%;
  max-width: 390px;
  padding: 32px 28px;
  text-align: center;
}
.acceso-caja img { height: 62px; margin-bottom: 12px; }
.acceso-caja h1 { font-size: 1.15rem; }
.acceso-caja .sub { color: var(--gris-500); font-size: .84rem; margin-bottom: 22px; }
.acceso-caja form { text-align: left; }

/* ---------- Pie ---------- */
.pie-inst {
  margin-top: auto;   /* lo empuja al fondo aunque la página sea corta */
  flex-shrink: 0;
  border-top: var(--linea);
  background: var(--blanco);
  padding: 18px 0;
  font-size: .76rem;
  color: var(--gris-500);
  text-align: center;
  line-height: 1.6;
}
/* Los sitios institucionales van en el mismo tono que el resto del pie;
   se distinguen al pasar encima, sin romper el renglón con color. */
.pie-inst a { color: inherit; text-decoration: none; }
.pie-inst a:hover { color: var(--azul); text-decoration: underline; }

/* La reserva de derechos se separa del domicilio con una línea tenue. */
.pie-inst .derechos {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gris-200);
  font-size: .72rem;
  color: var(--gris-400);
}

/* ---------- Utilidades ---------- */
.oculto { display: none !important; }
.solo-movil { display: none; }
@media (max-width: 760px) {
  .solo-movil { display: inline-block; }
  table.tabla.apilable td.solo-escritorio { display: none; }
}
.centro { text-align: center; }
.derecha { text-align: right; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 18px; }
.mb-2 { margin-bottom: 18px; }
.separador { border: none; border-top: var(--linea); margin: 18px 0; }

/* ============================================================
   Piezas propias de Vinculación
   ============================================================ */

/* ---------- Pastilla de categoría ---------- */
/* El color lo pone cada categoría con la variable --tono. */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--gris-700);
  white-space: nowrap;
}
.pastilla::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tono, var(--azul));
  flex-shrink: 0;
}

/* ---------- Accesos directos de la agenda ---------- */
.tel {
  font-family: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .84rem;
  white-space: nowrap;
}
.contacto-directo { display: inline-flex; gap: 6px; }
.ico-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radio-s);
  border: 1px solid var(--gris-300);
  color: var(--gris-700);
  background: var(--blanco);
  transition: background .15s, border-color .15s, color .15s;
}
.ico-accion svg { width: 17px; height: 17px; }
.ico-accion:hover { text-decoration: none; }
.ico-accion.wa:hover     { background: #e7f5ee; border-color: #25d366; color: #12864a; }
.ico-accion.tel:hover    { background: var(--azul-tenue); border-color: var(--azul-claro); color: var(--azul); }
.ico-accion.correo:hover { background: var(--ambar-bg); border-color: #e0b878; color: var(--ambar); }
.ico-accion.apagado { opacity: .35; cursor: not-allowed; }

/* Teléfono partido en lada + número */
.telefono-campo { display: flex; gap: 8px; }
.telefono-campo select { flex: 0 0 auto; width: auto; max-width: 58%; }
.telefono-campo input { flex: 1 1 auto; min-width: 0; }

/* ---------- Calendario ---------- */
.calendario-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.calendario-barra .mes {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--azul);
  text-transform: capitalize;
  min-width: 190px;
}
.calendario-barra .navegar { display: flex; gap: 6px; }

.rejilla-mes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--blanco);
  box-shadow: var(--sombra);
}
.rejilla-mes .dia-rot {
  background: var(--gris-50);
  border-bottom: var(--linea);
  padding: 9px 8px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris-500);
  text-align: center;
}
.celda-dia {
  min-height: 116px;
  border-right: 1px solid var(--gris-100);
  border-bottom: 1px solid var(--gris-100);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.celda-dia:nth-child(7n) { border-right: none; }
.celda-dia.otro-mes { background: var(--gris-50); }
.celda-dia.otro-mes .num-dia { color: var(--gris-400); }
.celda-dia .num-dia {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gris-700);
  align-self: flex-start;
  min-width: 22px;
  text-align: center;
  padding: 2px 0;
  border-radius: 999px;
}
.celda-dia.hoy .num-dia { background: var(--azul); color: var(--blanco); }
.celda-dia .agregar-dia {
  margin-top: auto;
  align-self: flex-end;
  border: none;
  background: none;
  color: var(--gris-400);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: var(--radio-s);
  opacity: 0;
  transition: opacity .12s;
}
.celda-dia:hover .agregar-dia { opacity: 1; }
.celda-dia .agregar-dia:hover { background: var(--azul-tenue); color: var(--azul); }

.evento-chip {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-left: 3px solid var(--tono, var(--azul));
  background: var(--gris-100);
  color: var(--gris-900);
  font: inherit;
  font-size: .74rem;
  line-height: 1.3;
  padding: 4px 6px;
  border-radius: var(--radio-s);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evento-chip:hover { background: var(--azul-tenue); text-decoration: none; }
.evento-chip .hora { font-weight: 700; color: var(--tono, var(--azul)); }

/* Categorías: lista con su interruptor de compartir */
.lista-categorias { display: flex; flex-direction: column; gap: 2px; }
.fila-categoria {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--gris-100);
  flex-wrap: wrap;
}
.fila-categoria:last-child { border-bottom: none; }
.fila-categoria .nom { font-weight: 600; font-size: .88rem; }
.fila-categoria .acciones { margin-left: auto; }

/* Leyenda de colores del calendario público, donde conviven categorías. */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: var(--blanco);
  border: var(--linea);
  border-radius: var(--radio-s);
}

.enlace-compartido {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  background: var(--azul-tenue);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio-s);
  padding: 8px 10px;
  margin-top: 4px;
}
.enlace-compartido input {
  border: none;
  background: none;
  font-size: .78rem;
  color: var(--azul-osc);
  padding: 0;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
.enlace-compartido input:focus { box-shadow: none; }

/* Interruptor */
/* Va calificado con `.campo > label` porque el interruptor casi siempre es
   la etiqueta de un campo, y esa regla —más específica— le impondría
   `display: block` y encimaría el riel sobre el texto. */
.interruptor,
.campo > label.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gris-700);
  margin-bottom: 0;
}
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor .riel {
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: var(--gris-300);
  position: relative;
  transition: background .15s;
  flex-shrink: 0;
}
.interruptor .riel::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--blanco);
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}
.interruptor input:checked + .riel { background: var(--verde); }
.interruptor input:checked + .riel::after { transform: translateX(17px); }
.interruptor input:focus-visible + .riel { box-shadow: 0 0 0 3px rgba(44, 82, 142, .25); }

/* Selector de color de la categoría */
input[type=color] {
  width: 46px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-s);
  background: var(--blanco);
  cursor: pointer;
}

/* ---------- Bolsa de trabajo ---------- */
.lista-vacantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.vacante {
  background: var(--blanco);
  border: var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vacante h3 { margin: 0; }
.vacante .empresa { font-size: .84rem; color: var(--gris-500); font-weight: 600; }
.vacante .resumen { font-size: .86rem; color: var(--gris-700); margin: 0; }
.vacante .datos-vacante { display: flex; flex-wrap: wrap; gap: 6px; }
.marbete {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gris-700);
  background: var(--gris-100);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.marbete.acento { background: var(--azul-tenue); color: var(--azul); }
.vacante .acciones { margin-top: auto; padding-top: 6px; }

/* Lista del mes: es la que se lee en teléfono, donde la rejilla solo
   alcanza para mostrar puntos de color. */
.agenda-mes { display: none; margin-top: 18px; }
.agenda-dia { border-bottom: var(--linea); padding: 12px 0; }
.agenda-dia:last-child { border-bottom: none; }
.agenda-dia .fecha {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris-500);
  margin-bottom: 7px;
}
.agenda-dia .evento-linea {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-left: 3px solid var(--tono, var(--azul));
  background: var(--gris-50);
  border-radius: var(--radio-s);
  padding: 9px 11px;
  margin-bottom: 7px;
  font: inherit;
  font-size: .87rem;
  cursor: pointer;
}
.agenda-dia .evento-linea:last-child { margin-bottom: 0; }
.agenda-dia .evento-linea strong { display: block; }
.agenda-dia .evento-linea .meta { font-size: .77rem; color: var(--gris-500); }

/* ---------- Sección en desarrollo ---------- */
.en-desarrollo {
  text-align: center;
  padding: 54px 24px;
  max-width: 560px;
  margin: 0 auto;
}
.en-desarrollo .icono {
  font-size: 2.6rem;
  display: block;
  margin-bottom: 10px;
  opacity: .5;
}
.en-desarrollo h1 { margin-bottom: 10px; }
.en-desarrollo p { color: var(--gris-500); }
.lista-alcance {
  text-align: left;
  display: inline-block;
  margin: 6px auto 0;
  padding-left: 20px;
  color: var(--gris-700);
  font-size: .89rem;
}
.lista-alcance li { margin-bottom: 6px; }

/* ---------- Datos en dos columnas ---------- */
.datos { padding: 18px; }
.dato { margin-bottom: 13px; }
.dato:last-child { margin-bottom: 0; }
.dato .rot {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris-500);
  margin-bottom: 2px;
}
.dato .val { font-size: .92rem; }

/* ---------- Aviso flotante ---------- */
#avisos {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100vw - 32px);
}
.aviso-flotante {
  background: var(--gris-900);
  color: var(--blanco);
  padding: 11px 16px;
  border-radius: var(--radio-s);
  font-size: .87rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  animation: entra .2s ease-out;
}
.aviso-flotante.ok    { background: var(--verde); }
.aviso-flotante.error { background: var(--rojo); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Usuarios y permisos ---------- */

/* La matriz de permisos necesita más ancho que un formulario normal. */
.modal.ancho { max-width: 780px; }

/* Mi cuenta: los datos a la izquierda y lo que uno puede a la derecha. */
.datos-dos {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
}
@media (max-width: 900px) {
  .datos-dos { grid-template-columns: 1fr; }
}
/* Dentro de una tarjeta el relleno ya lo pone .cuerpo. */
.cuerpo > .datos { padding: 0; }

/* Opción con explicación abajo del rótulo.

   Igual que el interruptor, va calificada con `.campo > label` porque la
   opción vive dentro de un campo y esa regla --más específica-- le
   impondría `display: block`, dejando el redondel encima del texto en
   vez de a su lado. */
.campo > label.opcion { display: flex; }
.opcion > span { display: flex; flex-direction: column; gap: 2px; }
.opcion .txt-sec { font-size: .8rem; line-height: 1.35; font-weight: 400; }
.opcion + .opcion { margin-top: 8px; }

.tabla.permisos th.centro, .tabla.permisos td.centro { width: 108px; }
.tabla.permisos input[type="checkbox"] {
  accent-color: var(--azul);
  width: 17px;
  height: 17px;
  cursor: pointer;
}
.tabla.permisos tbody tr:hover { background: var(--gris-50); }

/* Quien está suspendido sigue en la lista, pero apagado: se ve que
   existe sin que se confunda con quien sí puede entrar. */
.renglon-apagado { opacity: .55; }
.renglon-apagado .celda-principal strong { text-decoration: line-through; }

/* Número de pendientes junto a Papelera en el menú lateral. */
.lateral-menu .aviso-num {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--rojo);
  color: var(--blanco);
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
body.lateral-plegado .lateral-menu .aviso-num { display: none; }

/* El nombre de la barra lateral lleva al perfil propio. */
.sesion a.quien { text-decoration: none; color: inherit; display: block; min-width: 0; }
@media (hover: hover) {
  .sesion a.quien:hover strong { text-decoration: underline; }
}

/* ---------- Convenios ---------- */
.indicador.i-cancelada { border-left-color: var(--rojo); }

/* El renglón de lo que vence --o ya venció-- se distingue de un vistazo,
   sin tener que leer la columna de estado. */
.renglon-alerta { background: var(--ambar-bg); }
.renglon-alerta:hover { background: var(--ambar-bg); }

.ico-accion.pdf:hover { background: var(--rojo-bg); border-color: #e6a49f; color: var(--rojo); }

/* Documento ya resguardado, dentro del formulario. */
.archivo-actual {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--gris-50);
  border: var(--linea);
  border-radius: var(--radio-s);
  font-size: .82rem;
  color: var(--gris-700);
}
.archivo-actual span { min-width: 0; overflow-wrap: anywhere; }

/* Campo que deja de aplicar, como el término de un convenio sin fecha. */
.campo.apagado { opacity: .5; }

/* Lo que pesa el PDF elegido, antes de mandarlo. */
.peso-elegido {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radio-s);
  font-size: .82rem;
  background: var(--gris-50);
  border: var(--linea);
  color: var(--gris-700);
}
.peso-elegido.atencion { background: var(--ambar-bg); border-color: #e0b878; color: var(--ambar); }
.peso-elegido.malo     { background: var(--rojo-bg);  border-color: #e6a49f; color: var(--rojo); }

/* El enlace al compresor va subrayado y en el mismo tono del aviso, para
   que se lea como salida y no como adorno. */
.peso-elegido a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ---------- Papelera ---------- */
.papelera-ficha { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.papelera-ficha .quien-borro { font-size: .8rem; color: var(--gris-600); }
.papelera-datos {
  margin: 0;
  padding: 14px 16px;
  background: var(--gris-50);
  border: var(--linea);
  border-radius: var(--radio-s);
  font-size: .82rem;
  line-height: 1.5;
  max-height: 340px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   Responsivo
   ============================================================ */
/* ---------------------------------------------------------------
   En pantalla angosta la barra deja de ocupar columna y se convierte
   en un cajón que entra por la izquierda sobre el contenido.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .lateral {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 40px rgba(10, 20, 40, .35);
  }
  /* Aquí sí hace falta la hamburguesa: la barra está fuera de cuadro. */
  .btn-menu { display: flex; }

  /* Dentro del cajón el botón ya no pliega, cierra; por eso no gira. */
  .btn-plegar svg,
  body.lateral-plegado .btn-plegar svg { transform: none; }

  /* Plegado es un estado de escritorio: en teléfono la barra abre completa. */
  body.lateral-plegado .lateral { width: 250px; }
  body.lateral-plegado .lateral .marca { justify-content: flex-start; padding-left: 16px; padding-right: 16px; }
  body.lateral-plegado .btn-plegar { margin-left: auto; }
  body.lateral-plegado .lateral .marca .marca-logo { display: block; }
  body.lateral-plegado .lateral .marca .txt,
  body.lateral-plegado .lateral-menu .grupo,
  body.lateral-plegado .lateral-menu a .rot,
  body.lateral-plegado .lateral-menu a .obra,
  body.lateral-plegado .lateral .sesion .quien { display: block; }
  body.lateral-plegado .lateral .sesion .quien { display: block; }
  body.lateral-plegado .lateral-menu a {
    justify-content: flex-start;
    padding-left: 18px;
    padding-right: 18px;
    border-left-width: 3px;
    border-right-width: 0;
  }
  body.lateral-plegado .lateral-menu .grupo + a { border-top: none; margin-top: 0; padding-top: 10px; }
  body.lateral-plegado .lateral .sesion { justify-content: flex-start; padding-left: 18px; padding-right: 18px; }
  body.lateral-plegado .lateral .sesion .salir { margin-left: auto; }

  body.lateral-abierto .lateral { transform: none; }
  body.lateral-abierto { overflow: hidden; }
}

/* ---------------------------------------------------------------
   Tablas en teléfono: cada fila se convierte en una tarjeta y cada
   celda se rotula con su encabezado. Se acabó el scroll horizontal.
   Requiere data-rotulo="…" en cada <td>.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  .tabla-envoltura { overflow-x: visible; }

  table.tabla.apilable,
  table.tabla.apilable tbody,
  table.tabla.apilable tr,
  table.tabla.apilable td { display: block; width: 100%; }

  /* Apilada ya no necesita ancho mínimo: se acabó el scroll horizontal. */
  table.tabla.apilable,
  table.tabla.apilable.ancha { min-width: 0; }

  table.tabla.apilable thead { display: none; }

  table.tabla.apilable tr {
    border: var(--linea);
    border-radius: var(--radio-s);
    background: var(--blanco);
    padding: 4px 0;
    margin-bottom: 10px;
  }
  table.tabla.apilable tr:last-child { margin-bottom: 0; }
  table.tabla.apilable tbody tr:hover { background: var(--blanco); }

  /* El rótulo se posiciona a la izquierda y el valor ocupa el resto, así
     los saltos de línea dentro de la celda siguen funcionando. */
  table.tabla.apilable td {
    position: relative;
    border: none;
    border-bottom: 1px solid var(--gris-100);
    padding: 9px 14px 9px 40%;
    text-align: right;
    min-height: 38px;
  }
  table.tabla.apilable td:last-child { border-bottom: none; }

  table.tabla.apilable td::before {
    content: attr(data-rotulo);
    position: absolute;
    left: 14px;
    top: 10px;
    width: 34%;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris-500);
  }

  /* Celdas sin rótulo: ocupan todo el ancho (la principal y las acciones) */
  table.tabla.apilable td[data-rotulo=""]::before,
  table.tabla.apilable td.celda-principal::before { content: none; }
  table.tabla.apilable td.celda-principal {
    text-align: left;
    background: var(--gris-50);
    border-bottom: var(--linea);
    padding: 11px 14px;
  }
  table.tabla.apilable td.col-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 11px 14px;
  }
  table.tabla.apilable td.col-acciones::before { content: none; }
  table.tabla.apilable td.col-acciones .btn { flex: 1 1 auto; }

  /* El recorte de una línea deja de tener sentido apilado */
  table.tabla.apilable .recorte {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .rejilla, .rejilla-3 { grid-template-columns: 1fr; }

  /* El mes se vuelve un vistazo con puntos de color y el detalle se lee
     en la lista de abajo, que en escritorio está oculta. */
  .celda-dia { min-height: 56px; padding: 4px 2px; align-items: center; }
  .celda-dia .num-dia { font-size: .74rem; align-self: center; }
  .celda-dia .agregar-dia { display: none; }
  .evento-chip {
    height: 6px;
    width: 70%;
    padding: 0;
    font-size: 0;
    border-left: none;
    border-radius: 999px;
    background: var(--tono, var(--azul));
  }
  .evento-chip .hora { display: none; }
  .agenda-mes { display: block; }
  .rejilla-mes .dia-rot { padding: 7px 2px; font-size: .62rem; }
  .telefono-campo { flex-direction: column; }
  .telefono-campo select { max-width: none; width: 100%; }
  .contacto-directo { gap: 8px; }
  .calendario-barra .mes { min-width: 0; flex: 1 1 100%; }
  .barra-inst .contenedor { flex-wrap: wrap; gap: 10px; }
  .barra-inst img.sep { height: 26px; }
  .barra-inst img.itsc { height: 36px; }
  .barra-inst .inst-txt { margin-left: auto; }
  .barra-inst .inst-txt span { display: none; }
  .encabezado-pagina { align-items: flex-start; }
  .portada { padding: 30px 0 20px; }
  .portada h1 { font-size: 1.5rem; }
  .acciones .btn { flex: 1 1 auto; }
  .modal { max-width: none; }
  .firma-lienzo { height: 150px; }
}

@media (max-width: 480px) {
  .contenedor { padding: 0 13px; }
  .tarjeta > .cuerpo, .modal .cuerpo { padding: 15px; }
  .datos { padding: 15px; }
  .indicador .num { font-size: 1.4rem; }
}

/* Por si alguien decide imprimir la pantalla desde el navegador */
@media print {
  .lateral, .velo-lateral, .btn-menu, .acciones, .pie-inst, #avisos, .no-imprimir { display: none !important; }
  body { background: var(--blanco); font-size: 12px; }
  .orden-hoja, .tarjeta { box-shadow: none; border-color: var(--gris-300); }
  .pagina { padding: 0; }
}

/* ============================================================
   Sistema de Fichas · piezas propias

   Todo lo de arriba es la hoja compartida con los demás sistemas del
   Tec. De aquí para abajo va lo que solo usa este: la solicitud, el
   comprobante imprimible y las barras de proporción de los reportes.
   ============================================================ */

/* ---------- Formularios largos ----------
   La solicitud pide más de treinta datos. Los encabezados de bloque
   parten la captura en tramos para que no se lea como una pared. */
.titulo-bloque {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris-500);
  font-weight: 700;
  margin: 26px 0 12px;
  padding-bottom: 7px;
  border-bottom: var(--linea);
}
.titulo-bloque:first-child { margin-top: 0; }

.pie-formulario {
  padding: 14px 18px;
  border-top: var(--linea);
  background: var(--gris-50);
  border-radius: 0 0 var(--radio) var(--radio);
}

/* El campo que trae error se marca de dos maneras --el borde y el
   mensaje-- porque solo con el color no lo distingue quien no ve bien
   los rojos. */
.campo-malo > label { color: var(--rojo); }
.campo-malo input,
.campo-malo select,
.campo-malo textarea { border-color: var(--rojo); background: var(--rojo-bg); }
.ayuda-error { color: var(--rojo); font-weight: 600; }

/* ---------- Paginación ---------- */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: var(--linea);
}

/* ---------- Barra de proporción de los reportes ---------- */
.barra-proporcion {
  display: inline-block;
  vertical-align: middle;
  width: 110px;
  max-width: 40vw;
  height: 7px;
  margin-right: 8px;
  border-radius: 4px;
  background: var(--gris-200);
  overflow: hidden;
}
.barra-proporcion > span {
  display: block;
  height: 100%;
  background: var(--azul-claro);
  border-radius: 4px;
}


/* ============================================================
   Hoja imprimible · comprobante y expediente

   Esto NO es responsivo a propósito, y es el único lugar del sistema
   donde eso es correcto. Es una hoja de papel: mide 21 cm de ancho con
   márgenes de 1.5 cm --lo mismo que traía el PDF anterior-- y se ve
   igual en la pantalla que en la impresora.

   La versión anterior armaba esto con TCPDF, así que el formato salía
   siempre parejo. Al pasarlo a la rejilla del sistema se reacomodaba
   según el ancho de la ventana y ya no correspondía con lo impreso.
   ============================================================ */

/* En pantallas angostas la hoja no cabe. En vez de dejar que se
   reacomode --que es justo lo que se quiere evitar-- se encoge entera
   con la misma proporción; el JavaScript calcula cuánto. */
.hoja-marco { width: 100%; overflow: hidden; }
.hoja-marco.sin-ajuste { overflow-x: auto; }

.hoja {
  width: 21cm;
  min-height: 27.7cm;
  margin: 0 auto;
  padding: 1.5cm;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  box-shadow: var(--sombra);
  transform-origin: top left;
  color: #212529;
  font-size: 11pt;
  line-height: 1.45;
}

.hoja img.banner { display: block; width: 18cm; height: auto; margin-bottom: .5cm; }

.hoja h1 {
  text-align: center;
  color: var(--azul);
  font-size: 17pt;
  font-weight: 700;
  margin: 0 0 .2cm;
}
.hoja h2 {
  text-align: center;
  color: #535353;
  font-size: 12.5pt;
  font-weight: 600;
  margin: 0 0 .5cm;
}
.hoja h3 {
  color: var(--azul);
  font-size: 11pt;
  font-weight: 700;
  margin: .45cm 0 .15cm;
}
.hoja p { margin: 0 0 .25cm; }

/* Las listas de datos van sin viñeta, como en el PDF anterior. */
.hoja ul.datos-hoja { list-style: none; margin: 0 0 .4cm; padding: 0; }
.hoja ul.datos-hoja li { margin-bottom: .12cm; }
.hoja ul.datos-hoja b { color: var(--azul); }

/* Los pasos del trámite: el número en azul, colgado a la izquierda,
   para que el texto de varios renglones quede alineado. */
.hoja ol.pasos-hoja { list-style: none; margin: 0 0 .4cm; padding: 0; counter-reset: paso; }
.hoja ol.pasos-hoja > li {
  counter-increment: paso;
  position: relative;
  padding-left: 1cm;
  margin-bottom: .25cm;
  break-inside: avoid;
}
.hoja ol.pasos-hoja > li::before {
  content: counter(paso) ".-";
  position: absolute;
  left: 0;
  color: var(--azul);
  font-weight: 700;
}
.hoja ol.pasos-hoja ul { margin: .12cm 0 0; padding-left: .6cm; }

.hoja .firma-hoja { text-align: center; margin: 1.1cm 0 .5cm; break-inside: avoid; }
.hoja .firma-hoja .raya {
  width: 8cm;
  margin: 0 auto .1cm;
  border-bottom: 1px solid #212529;
}

.hoja .notas-hoja { font-size: 8.5pt; padding-left: .5cm; margin: 0; color: #3f4a5a; }
.hoja .notas-hoja li { margin-bottom: .1cm; }

/* El pie de la hoja va centrado: pegado a la izquierda y a dos renglones
   se veia como un sobrante, y es lo ultimo que se lee del documento. */
.hoja .sello-hoja {
  margin-top: .6cm;
  padding-top: .2cm;
  border-top: 1px solid var(--gris-200);
  font-size: 7.5pt;
  color: var(--gris-500);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* El expediente lleva los datos en dos columnas fijas, como el PDF. */
.hoja .columnas-hoja { column-count: 2; column-gap: 1cm; }
.hoja .columnas-hoja > * { break-inside: avoid; }

/* ---------- Solicitud de Inscripción ----------
   Reproduce el formato que el departamento ya usaba en papel: el
   logotipo encajonado a la izquierda, el título sobre una franja, y los
   bloques centrados en versalitas. */
.solicitud-membrete {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #000;
  margin-bottom: .3cm;
}
.solicitud-membrete .logo {
  flex: 0 0 4cm;
  border-right: 1.5px solid #000;
  padding: .15cm .25cm;
  display: flex;
  align-items: center;
}
.solicitud-membrete .logo img { width: 100%; height: auto; }
.solicitud-membrete .titulo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .2cm .3cm;
}
.solicitud-membrete .titulo h1 {
  text-align: center;
  color: #000;
  font-size: 17pt;
  font-weight: 400;
  margin: 0 0 .12cm;
}
.solicitud-membrete .franja {
  height: .28cm;
  background: #9a9a9a;
  border: 1px solid #000;
}

.hoja .solicitud-fecha { text-align: right; margin: 0 0 .25cm; font-size: 11pt; }
.hoja .solicitud-carrera { text-align: center; margin: 0 0 .25cm; }

.hoja h3.solicitud-bloque {
  text-align: center;
  color: #000;
  font-size: 11pt;
  font-weight: 700;
  letter-spacing: .04em;
  margin: .32cm 0 .18cm;
}

.solicitud-campos { padding-left: .3cm; }
.solicitud-campos p { margin: 0 0 .08cm; }
.solicitud-campos b { color: #000; }

/* Nacimiento/Estado civil y Grupo sanguíneo/Atención especial van en el
   mismo renglón, como en el formato original. */
.solicitud-campos .par { display: flex; gap: 1.2cm; flex-wrap: wrap; }
.solicitud-campos .par > p { margin-bottom: .08cm; }

.solicitud-firma { text-align: center; margin-top: .6cm; break-inside: avoid; }
.solicitud-firma p { margin: 0; }
/* Hueco para la firma y el sello del departamento. */
.solicitud-firma .espacio-sello { height: 1.7cm; }
.solicitud-firma .raya { width: 9cm; margin: 0 auto; border-bottom: 1px solid #212529; }

@media print {
  /* Nada del sistema: la hoja va sola en el papel. */
  .barra-inst, .pie-inst, .lateral, .velo-lateral, .btn-menu,
  .encabezado-pagina, .aviso, .acciones, #avisos, .no-imprimir { display: none !important; }

  html, body { background: var(--blanco); }
  .pagina { padding: 0; }
  .contenedor, .contenedor-angosto { max-width: none; width: auto; padding: 0; margin: 0; }

  /* El encogido de pantalla no aplica en papel: ahí la hoja ya cabe. */
  .hoja-marco { overflow: visible; height: auto !important; }
  .hoja {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    transform: none !important;
  }
  .hoja img.banner { width: 100%; }
  a[href^="http"]::after { content: ""; }

  /* El cuerpo del sistema es una columna flexible de 100vh de alto minimo,
     para que el pie quede abajo aunque la pagina traiga poco. En papel eso
     significa "una hoja completa como minimo", y bastaba con que la hoja
     rebasara por un renglon para que se fuera a la segunda. */
  body { min-height: 0; display: block; }

  /* La hoja se aprieta un poco en papel. Cabia en A4 por el calculo, pero
     el navegador descuenta ademas su propio encabezado y pie --la fecha,
     la direccion, el numero de pagina-- y los margenes que traiga puestos
     el usuario, que no siempre son los del @page. Con esto queda cerca de
     21 cm de los 26.7 utiles, y ya no brinca por un renglon de mas. */
  .hoja { font-size: 10pt; line-height: 1.35; }
  .hoja img.banner { margin-bottom: .35cm; }
  .hoja h1 { font-size: 15pt; }
  .hoja h2 { font-size: 11pt; margin-bottom: .35cm; }
  .hoja h3 { margin: .3cm 0 .1cm; }
  .hoja ul.datos-hoja { margin-bottom: .3cm; }
  .hoja ul.datos-hoja li { margin-bottom: .06cm; }
  .hoja ol.pasos-hoja > li { margin-bottom: .16cm; }
  .hoja .firma-hoja { margin: .75cm 0 .35cm; }
  .hoja .notas-hoja { font-size: 8pt; }
  .hoja .sello-hoja { margin-top: .35cm; font-size: 7pt; }
  .hoja .solicitud-campos { line-height: 1.28; }

  /* El expediente lleva seis grupos de datos y llega a los 23.6 cm de los
     26.7 utiles: le queda poco para un nombre largo o un bachillerato de
     nombre kilometrico. Va un punto mas apretado que el comprobante, que
     con cinco pasos anda holgado. */
  .hoja.compacta { font-size: 9.5pt; line-height: 1.3; }
  .hoja.compacta ul.datos-hoja { margin-bottom: .22cm; }
  .hoja.compacta ul.datos-hoja li { margin-bottom: .03cm; }
  .hoja.compacta .firma-hoja { margin: .6cm 0 .3cm; }

  /* Y si aun asi no cabe, que se parta por un bloque completo y no a media
     lista. */
  .hoja ul, .hoja ol, .hoja h1, .hoja h2, .hoja h3 { break-inside: avoid; }
}

@page { size: A4 portrait; margin: 1.5cm; }

/* ---------- Interruptores del panel de inicio ----------
   El rótulo lleva su explicación debajo, así que el conjunto se apila y
   los interruptores se leen como una lista. */
.interruptor .txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.interruptor .txt strong { color: var(--gris-900); }
.interruptor + .interruptor { margin-top: 12px; }
.cuerpo > .interruptor { display: flex; }

/* ---------- Números de control ---------- */
/* El renglón que separa una carrera de la siguiente en la lista. */
.renglon-grupo td {
  background: var(--azul-tenue);
  color: var(--azul);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tabla tbody tr.renglon-grupo:hover td { background: var(--azul-tenue); }

/* El número propuesto en la vista previa todavía no es de nadie. */
.folio.propuesto {
  color: var(--gris-500);
  border-style: dashed;
}

/* ---------- Casos por revisar antes de numerar ---------- */
.tarjeta-alerta { border-color: #e0b878; }
.tarjeta-alerta > .cab { background: var(--ambar-bg); border-bottom-color: #e0b878; }
.tarjeta-alerta > .cab h2 { color: var(--ambar); }

.caso-revisar {
  border-left: 3px solid var(--ambar);
  background: var(--gris-50);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  padding: 11px 14px;
  margin-bottom: 12px;
}
/* Lo que casi seguro es un duplicado se distingue de lo que solo hay que
   confirmar: no piden la misma atención. */
.caso-revisar.grave { border-left-color: var(--rojo); background: var(--rojo-bg); }
.caso-revisar.grave > strong { color: var(--rojo); }
.caso-revisar > strong { display: block; margin-bottom: 2px; }
.caso-revisar > .txt-sec { display: block; }
.caso-revisar:last-child { margin-bottom: 0; }

.lista-casos { margin: 8px 0 0; padding-left: 18px; font-size: .85rem; }
.lista-casos li { margin-bottom: 3px; }

/* Las tarjetas de Configuración llevan icono de trazo, no emoji. */
.tarjeta-accion .icono svg { width: 26px; height: 26px; color: var(--azul); }