/* =============================================================================
   SISTEMA DE LEGAJOS DIGITALES — Estilos globales
   Paleta oficial: nav oscuro #2c3e50, verde #2ecc71, naranja #e67e22, azul #5dade2
   ============================================================================= */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --nav-bg:        #2c3e50;
  --nav-bg-hover:  #34495e;
  --nav-bg-active: #3d566e;
  --nav-border:    rgba(255,255,255,.09);
  --nav-width:     240px;

  --verde:         #2ecc71;
  --verde-oscuro:  #1a8a45;
  --naranja:       #e67e22;
  --azul:          #5dade2;
  --rojo:          #e74c3c;
  --amarillo:      #f1c40f;
  --gris:          #95a5a6;

  --fondo:         #f0f2f5;
  --blanco:        #ffffff;
  --texto:         #2c3e50;
  --texto-suave:   #7f8c8d;
  --borde:         #dde1e7;

  --sombra-sm:     0 1px 4px rgba(0,0,0,.08);
  --sombra-md:     0 3px 12px rgba(0,0,0,.12);
  --radio:         8px;
  --radio-sm:      5px;

  --fuente:        'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Reset base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  min-height: 100vh;
  display: flex;
}

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

/* ── Layout principal ─────────────────────────────────────────────────────── */
.nav-panel {
  width: var(--nav-width);
  min-height: 100vh;
  background: var(--nav-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  overflow-y: auto;
}

.main-content {
  margin-left: var(--nav-width);
  flex: 1;
  /* Sin esto, como elemento flex no baja de su ancho mínimo: cualquier cosa
     ancha de adentro (una tabla, unas pestañas desplazables) estira la página
     entera y aparece scroll horizontal en el teléfono. */
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Logo hexágono ────────────────────────────────────────────────────────── */
.nav-logo {
  padding: 20px 16px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--nav-border);
}

.hex-svg { flex-shrink: 0; }

.logo-text { line-height: 1.2; }
.logo-text .title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blanco);
  letter-spacing: .5px;
}
.logo-text .subtitle {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  letter-spacing: 1px;
}

/* ── Navegación ───────────────────────────────────────────────────────────── */
.nav-menu { flex: 1; padding: 8px 0; }

.nav-section-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.35);
  padding: 14px 16px 4px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: rgba(255,255,255,.75);
  font-size: .88rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.nav-item:hover {
  background: var(--nav-bg-hover);
  color: var(--blanco);
  text-decoration: none;
}
.nav-item.active {
  background: var(--nav-bg-active);
  color: var(--blanco);
  border-left-color: var(--verde);
  font-weight: 600;
}
.nav-item .nav-icon { width: 18px; text-align: center; font-size: 1rem; opacity: .8; }

/* Sub-menú */
.nav-submenu { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.nav-submenu.open { max-height: 400px; }
.nav-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 38px;
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-sub-item:hover { background: var(--nav-bg-hover); color: var(--blanco); text-decoration: none; }
.nav-sub-item.active { color: var(--verde); border-left-color: var(--verde); font-weight: 600; }

/* Chevron del nav */
.nav-chevron {
  margin-left: auto;
  font-size: .7rem;
  transition: transform .2s;
  opacity: .5;
}
.nav-item.open .nav-chevron { transform: rotate(180deg); }

/* Footer del nav */
.nav-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--nav-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-user {
  flex: 1;
  overflow: hidden;
}
.nav-user .user-name {
  color: var(--blanco);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-user .user-role {
  color: rgba(255,255,255,.4);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.btn-logout {
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6);
  border-radius: var(--radio-sm);
  padding: 5px 9px;
  font-size: .75rem;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.btn-logout:hover { background: rgba(255,255,255,.1); color: var(--blanco); }

/* ── Área de contenido ────────────────────────────────────────────────────── */
.page-header {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--texto);
}
.page-subtitle {
  font-size: .82rem;
  color: var(--texto-suave);
  margin-top: 2px;
}

.page-body { padding: 24px 28px; flex: 1; }

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--borde);
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--texto);
}
.card-body { padding: 20px; }

/* ── Formularios ──────────────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
}
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-1 { grid-template-columns: 1fr; }

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 8px;
  align-items: end;
}

label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--texto-suave);
  letter-spacing: .4px;
  text-transform: uppercase;
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 8px 11px;
  font-size: .88rem;
  color: var(--texto);
  background: var(--blanco);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--fuente);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(93,173,226,.18);
}

/* Campo sustentado por documento (solo lectura en ficha) */
input.doc-sustentado, select.doc-sustentado {
  background: #f7f9fb;
  color: var(--texto-suave);
  cursor: not-allowed;
  border-style: dashed;
}

textarea { min-height: 72px; resize: vertical; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--radio-sm);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s;
  white-space: nowrap;
  font-family: var(--fuente);
}
.btn-primary   { background: var(--nav-bg);      color: var(--blanco); }
.btn-primary:hover { background: var(--nav-bg-hover); color: var(--blanco); text-decoration: none; }
.btn-success   { background: var(--verde);        color: var(--blanco); }
.btn-success:hover { background: var(--verde-oscuro); color: var(--blanco); text-decoration: none; }
.btn-warning   { background: var(--naranja);      color: var(--blanco); }
.btn-warning:hover { background: #ca6f1e; color: var(--blanco); text-decoration: none; }
.btn-danger    { background: var(--rojo);         color: var(--blanco); }
.btn-danger:hover { background: #c0392b; color: var(--blanco); text-decoration: none; }
.btn-info      { background: var(--azul);         color: var(--blanco); }
.btn-info:hover { background: #2e86c1; color: var(--blanco); text-decoration: none; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto);
}
.btn-outline:hover { background: var(--fondo); text-decoration: none; }
.btn-sm { padding: 5px 12px; font-size: .8rem; }
.btn-xs { padding: 3px 8px;  font-size: .75rem; }

/* ── Badges / Estado ──────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}
.badge-verde    { background: rgba(46,204,113,.15);  color: var(--verde-oscuro); }
.badge-rojo     { background: rgba(231,76,60,.15);   color: #c0392b; }
.badge-naranja  { background: rgba(230,126,34,.15);  color: #a04000; }
.badge-azul     { background: rgba(93,173,226,.15);  color: #1a5276; }
.badge-amarillo { background: rgba(241,196,15,.2);   color: #7d6608; }
.badge-gris     { background: rgba(149,165,166,.2);  color: #566573; }

/* Situación del trabajador → badge automático */
.sit-activo              { @extend .badge-verde;    }
.sit-inactivo            { @extend .badge-rojo;     }
.sit-vacaciones          { @extend .badge-amarillo; }
.sit-licencia-sin-goce   { @extend .badge-amarillo; }
.sit-licencia-maternidad { @extend .badge-amarillo; }
.sit-suplencia           { @extend .badge-amarillo; }

/* ── Tablas ───────────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .87rem;
}
thead tr {
  background: #f8f9fa;
  border-bottom: 2px solid var(--borde);
}
th {
  padding: 10px 14px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  color: var(--texto-suave);
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: middle;
}
tbody tr:hover { background: #fafbfc; }
tbody tr:last-child td { border-bottom: none; }

/* ── Alertas ──────────────────────────────────────────────────────────────── */
.alert {
  padding: 11px 16px;
  border-radius: var(--radio-sm);
  font-size: .87rem;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-danger  { background: #fdf3f2; border: 1px solid #f5c6c2; color: #922b21; }
.alert-success { background: #f0faf4; border: 1px solid #a9dfbf; color: #1e8449; }
.alert-warning { background: #fef9ec; border: 1px solid #f9e4b7; color: #7d6608; }
.alert-info    { background: #eaf4fb; border: 1px solid #aed6f1; color: #1a5276; }

/* ── Buscador con autocompletado ──────────────────────────────────────────── */
.search-wrapper { position: relative; }
.search-wrapper input { padding-right: 36px; }
.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-suave);
  pointer-events: none;
}
.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-top: none;
  border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  box-shadow: var(--sombra-md);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.autocomplete-list.visible { display: block; }
.autocomplete-item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: .87rem;
  border-bottom: 1px solid #f5f5f5;
  transition: background .1s;
}
.autocomplete-item:hover,
.autocomplete-item.selected,
.autocomplete-item.active { background: #eaf4fb; }
.autocomplete-item .dni { color: var(--texto-suave); font-size: .78rem; margin-top: 1px; }

/* ── Confirmación DNI (Subir Documentos) ─────────────────────────────────── */
.servidor-confirmado {
  background: #f0faf4;
  border: 1px solid #a9dfbf;
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.servidor-confirmado .nombre { font-weight: 700; font-size: .95rem; }
.servidor-confirmado .dni    { color: var(--texto-suave); font-size: .8rem; }
.servidor-no-encontrado {
  background: #fdf3f2;
  border: 1px solid #f5c6c2;
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  color: #922b21;
  font-size: .87rem;
}

/* ── Legajo Virtual — drag & drop ─────────────────────────────────────────── */
.seccion-legajo {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 12px;
}
.seccion-header {
  background: #f8f9fa;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: .88rem;
  border-bottom: 1px solid var(--borde);
  user-select: none;
}
.seccion-header .count {
  font-size: .75rem;
  background: var(--azul);
  color: var(--blanco);
  border-radius: 12px;
  padding: 1px 8px;
}
.seccion-docs { padding: 8px; }
.doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  margin-bottom: 6px;
  font-size: .87rem;
  cursor: grab;
  transition: box-shadow .15s;
}
.doc-item:active { cursor: grabbing; box-shadow: var(--sombra-md); }
.doc-item.dragging { opacity: .5; box-shadow: var(--sombra-md); }
.doc-handle { color: var(--borde); font-size: 1.1rem; cursor: grab; }
.doc-nombre { flex: 1; font-weight: 500; }
.doc-fecha  { color: var(--texto-suave); font-size: .78rem; white-space: nowrap; }

/* ── Ficha Legajo Personal ────────────────────────────────────────────────── */
.ficha-wrapper { max-width: 1200px; }

.ficha-header {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 20px 24px;
  margin-bottom: 16px;
  border: 1px solid var(--borde);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.ficha-nombre   { font-size: 1.3rem; font-weight: 700; }
.ficha-dni      { color: var(--texto-suave); font-size: .9rem; }
.ficha-actions  { display: flex; gap: 10px; align-items: center; }

.ficha-section {
  background: var(--blanco);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  margin-bottom: 12px;
  overflow: hidden;
}
.ficha-section-title {
  background: #f8f9fa;
  border-bottom: 1px solid var(--borde);
  padding: 10px 20px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.ficha-grid { padding: 16px 20px; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px 20px; }

/* Campo inline (AIRHSP+CAP+PAP en un solo slot del grid) */
.inline-fields { display: flex; gap: 8px; align-items: flex-end; }
.inline-fields .form-group { min-width: 0; }
.inline-fields .form-group.grow { flex: 1; }
.inline-fields .form-group.short { flex: 0 0 70px; }
.inline-fields .form-group.xshort { flex: 0 0 52px; }

/* ── Modales ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  width: 420px;
  max-width: 95vw;
  overflow: hidden;
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}
.modal-body    { padding: 20px; }
.modal-footer  { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; gap: 10px; justify-content: flex-end; }
.modal-close   { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--texto-suave); }

/* ── Tooltip (campos doc-sustentado) ─────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #2c3e50;
  color: var(--blanco);
  font-size: .72rem;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 300;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }
.mt-8        { margin-top: 8px; }
.mt-16       { margin-top: 16px; }
.mt-24       { margin-top: 24px; }
.mb-16       { margin-bottom: 16px; }
.mb-24       { margin-bottom: 24px; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-muted  { color: var(--texto-suave); }
.text-sm     { font-size: .8rem; }
.fw-600      { font-weight: 600; }
.w-100       { width: 100%; }

/* ── Pantalla de Login ────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  width: 100%;
  min-width: 0;          /* si no, como elemento flex no se encoge */
  background: linear-gradient(135deg, #2c3e50 0%, #3d566e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: var(--blanco);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
  /* Ancho fluido con tope, NO ancho fijo. El body es un contenedor flex (por
     el menú lateral), así que .login-page es un elemento flex y no se encoge
     por debajo de su contenido: con "width: 380px" la tarjeta obligaba a la
     página a medir 420px en un teléfono de 360, y se salía por el costado. */
  width: 100%;
  max-width: 380px;
  overflow: hidden;
}
.login-header {
  background: var(--nav-bg);
  padding: 28px 32px 24px;
  text-align: center;
}
.login-header .logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.login-header .title  { color: var(--blanco); font-size: 1.4rem; font-weight: 700; }
.login-header .sub    { color: rgba(255,255,255,.5); font-size: .78rem; letter-spacing: 1px; }
.login-body { padding: 28px 32px 32px; }
.login-body label { display: block; margin-bottom: 5px; font-size: .82rem; font-weight: 600; color: var(--texto-suave); }
.login-body input { margin-bottom: 16px; }
.login-body .btn { width: 100%; justify-content: center; padding: 10px; font-size: .95rem; margin-top: 4px; }
.login-footer { text-align: center; padding-bottom: 20px; color: var(--texto-suave); font-size: .75rem; padding-left: 32px; padding-right: 32px; line-height: 1.5; }

/* ── Activación de los avisos en el dispositivo ────────────────────────────
   El bloque vive en la pantalla de códigos de verificación, que es donde el
   personal de RRHH trabaja cuando llega uno.                               */
.card-avisos { border-left: 4px solid var(--verde); }
.avisos-botones { display: flex; gap: 10px; flex-wrap: wrap; }

.aviso-estado {
  margin-top: 12px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--texto-suave);
}
.aviso-estado:empty { display: none; }
.aviso-estado.aviso-bueno { color: var(--verde-oscuro); font-weight: 600; }
.aviso-estado.aviso-tibio { color: #a35a09; }
.aviso-estado.aviso-malo  { color: var(--rojo); }

/* ── Datos de contacto para recuperar el acceso ────────────────────────────
   Reemplaza al formulario del código: el restablecimiento lo hace RRHH a
   mano, así que lo que hace falta es saber a quién escribir.              */
.contacto-recuperar {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 16px;
}
.contacto-fila {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  font-size: .86rem;
}
.contacto-fila:last-child { border-bottom: 0; }
.contacto-fila:nth-child(odd) { background: var(--fondo); }
.contacto-etiqueta {
  flex: 0 0 72px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.contacto-valor { font-weight: 600; word-break: break-word; }

/* ── Salidas de la pantalla del código ─────────────────────────────────────
   Se llega aquí desde una notificación, no navegando: sin estos botones la
   pantalla era un callejón sin salida.                                     */
.aviso-salidas {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.aviso-salidas .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }

/* ── Avance del registro ───────────────────────────────────────────────────
   Va entre las dos tablas de usuarios. Es el número que dice si el piloto
   avanza: mientras una persona no tenga cuenta, no puede subir nada.      */
.avance {
  padding: 20px 22px;
  margin: 18px 0;
  border-left: 4px solid var(--verde);
}
.avance-cifras {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.avance-grande {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--verde-oscuro);
}
.avance-total {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.avance-texto { font-size: .92rem; color: var(--texto); }

.avance-barra {
  height: 12px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
}
.avance-relleno {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--verde-oscuro), var(--verde));
  transition: width .4s ease;
  /* Que un avance mínimo se vea igual, en vez de una barra invisible. */
  min-width: 3px;
}
.avance-pie {
  margin-top: 11px;
  font-size: .82rem;
  color: var(--texto-suave);
  line-height: 1.5;
}

/* ── Botones de icono ──────────────────────────────────────────────────────
   Para acciones repetidas fila tras fila. Con cinco familiares, diez botones
   con la palabra «Editar» y «Eliminar» ocupan más que los propios datos.    */
.celda-iconos {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}
.celda-iconos form { display: inline-flex; margin: 0; }

.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn-icono:hover      { background: var(--fondo); border-color: var(--azul); }
.btn-icono:active     { transform: scale(.93); }
.btn-icono-rojo:hover { background: #fdeceb; border-color: var(--rojo); }

/* Acciones de una fila de documento. En pantalla ancha son botones con texto;
   en el teléfono se quedan solo con el icono (ver la regla en @media). */
.btn-accion { gap: 6px; }
.btn-accion .accion-icono { display: none; }

/* Celda que describe el documento: el nombre en una línea y el detalle
   —institución, estado, fecha— debajo, más chico. */
.celda-doc .doc-nombre {
  display: block;
  font-weight: 600;
  color: var(--texto);
}
.celda-doc .doc-detalle {
  display: block;
  margin-top: 2px;
  font-size: .82rem;
  color: var(--texto-suave);
}
.celda-doc .doc-detalle:empty { display: none; }

/* Bloque del escaneo dentro del modal de edición del legajo virtual. */
.bloque-escaneo {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.bloque-escaneo .bloque-titulo {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.escaneo-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.escaneo-fila input[type="file"] { flex: 1 1 200px; min-width: 0; font-size: .82rem; }

/* La columna de acciones ocupa lo que ocupan sus botones y no más: así el
   encabezado queda encima de ellos y no perdido a media tabla. */
.tabla-tarjeta th:last-child,
.tabla-tarjeta td.celda-iconos { width: 1%; white-space: nowrap; text-align: right; }

/* ── Foto vigente dentro del modal ─────────────────────────────────────────
   Antes no había forma de ver la propia foto ni de obtenerla. Hace falta:
   Comunicaciones la pide para los saludos de cumpleaños.                   */
.foto-actual {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px;
  background: var(--fondo);
}
/* El enlace es inline por defecto y la imagen quedaba pegada a la
   izquierda con un hueco al costado. */
.foto-actual a { display: block; }
.foto-actual img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: var(--radio-sm);
  background: var(--blanco);
  cursor: zoom-in;
}
.foto-actual-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  font-size: .8rem;
  color: var(--texto-suave);
}
.foto-separador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 14px;
  font-size: .76rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.foto-separador::before,
.foto-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}

/* ── Foto de perfil: elegir cámara o galería, y ver antes de enviar ───────── */
.foto-opciones {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
/* Los <label> envuelven un <input type=file> oculto: son el botón visible. */
.foto-opciones .btn {
  flex: 1 1 0;
  justify-content: center;
  min-height: 46px;
  cursor: pointer;
  text-transform: none;      /* .btn es un label y hereda la regla de rótulos */
  letter-spacing: normal;
  font-size: .86rem;
}

.foto-previa {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px;
  margin-bottom: 14px;
  background: var(--fondo);
}
.foto-previa img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: var(--radio-sm);
  background: var(--blanco);
}
.foto-previa-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  font-size: .78rem;
  color: var(--texto-suave);
}

.reg-intro-simple {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--texto);
  margin-bottom: 16px;
}

/* ── Sello de prueba piloto ────────────────────────────────────────────────
   El dominio lleva el nombre de la institución y la página podría confundirse
   con un sitio oficial. Antes esto era un recuadro de cuatro líneas sobre el
   formulario: cumplía, pero se comía la pantalla y quitaba seriedad. Basta
   con una etiqueta junto al logo.                                          */
.sello-piloto {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(230,126,34,.55);
  border-radius: 999px;
  background: rgba(230,126,34,.14);
  color: #f0a860;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Página de reenvío de código (se abre desde el aviso de Telegram) ─────── */
.aviso-dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
}
.aviso-dato span   { font-size: .78rem; color: var(--texto-suave); flex: 0 0 auto; }
.aviso-dato strong { font-size: .9rem; text-align: right; }
.aviso-codigo {
  margin: 20px 0 10px;
  padding: 16px;
  background: #f6fdf9;
  border: 2px dashed var(--verde);
  border-radius: var(--radio);
  text-align: center;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--verde-oscuro);
  user-select: all;   /* un toque selecciona el código entero */
}

/* ── «Mantener sesión iniciada» ────────────────────────────────────────────
   Es un <label> dentro de .login-body, donde la regla de los rótulos de campo
   lo pondría en MAYÚSCULAS y gris. Se repite el selector anidado para ganarle
   en especificidad, igual que con el consentimiento del registro.          */
.check-recordar,
.login-body .check-recordar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 16px;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto-suave);
  cursor: pointer;
}
.check-recordar input,
.login-body .check-recordar input {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--verde);
}

/* ── Enlaces bajo el formulario de login ──────────────────────────────────── */
.login-links { text-align: center; }
.login-links-sep { height: 1px; background: var(--borde); margin: 20px 0 16px; }
.login-links p { font-size: .82rem; color: var(--texto-suave); margin-bottom: 7px; }
.login-links p:last-child { margin-bottom: 0; }
.login-links a { font-weight: 600; }

/* ── Registro de servidor ─────────────────────────────────────────────────── */
.card-registro { max-width: 440px; }
.card-registro .reg-intro { font-size: .82rem; margin-bottom: 22px; }

.reg-step { margin-bottom: 20px; }
.reg-step:last-of-type { margin-bottom: 24px; }
.reg-step > label { font-weight: 700; color: var(--texto); font-size: .85rem; }
.reg-step .reg-label-sub { margin-top: 12px; }
.reg-hint { font-size: .74rem; color: var(--texto-suave); line-height: 1.45; }

.login-body .reg-step input { margin-bottom: 8px; }
.input-group { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.login-body .input-group input { margin-bottom: 0; }
.login-body .input-group .btn { width: auto; flex: 0 0 auto; margin-top: 0; padding: 8px 16px; font-size: .85rem; }

.input-readonly { background: var(--fondo) !important; color: var(--texto-suave); font-weight: 600; }
.input-codigo { letter-spacing: 6px; text-align: center; font-size: 1.15rem !important; font-weight: 700; }
.input-ok { border-color: var(--verde) !important; background: #f6fdf9 !important; font-weight: 600; }

/* Código de verificación en el panel del admin */
.codigo-grande {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--nav-bg);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 3px 10px;
}
.login-body input:disabled { background: #f7f8fa; color: var(--texto-suave); cursor: not-allowed; }
/* Un botón bloqueado tiene que VERSE bloqueado. Esta regla vivía solo
   dentro de .login-body, así que en los modales del portal el botón
   deshabilitado se veía idéntico a uno activo y la gente lo tocaba. */
.btn:disabled,
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ── Portal del servidor ──────────────────────────────────────────────────── */
.card-angosta { max-width: 520px; }

.datos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
}
.dato-item { min-width: 0; }
.dato-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 3px;
}
.dato-valor {
  font-size: .92rem;
  color: var(--texto);
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.form-campo { margin-bottom: 16px; }
.form-campo label {
  display: block;
  margin-bottom: 5px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.form-campo .opcional { font-weight: 400; color: var(--gris); }

/* ── Documento legal (términos y condiciones) ─────────────────────────────── */
.legal-wrap { max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; }
.legal-header {
  background: var(--nav-bg);
  color: var(--blanco);
  border-radius: var(--radio) var(--radio) 0 0;
  padding: 26px 34px;
}
.legal-marca { display: flex; align-items: center; gap: 14px; }
.legal-titulo { font-size: 1.25rem; font-weight: 700; }
.legal-sub    { font-size: .82rem; color: rgba(255,255,255,.6); margin-top: 2px; }
.legal-meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
}

.legal-doc {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-top: none;
  border-radius: 0 0 var(--radio) var(--radio);
  padding: 30px 34px 36px;
  font-size: .89rem;
  line-height: 1.72;
  color: var(--texto);
}
.legal-doc h2 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--nav-bg);
  margin: 30px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borde);
}
.legal-doc h2:first-of-type { margin-top: 8px; }
.legal-doc p  { margin-bottom: 12px; text-align: justify; }
.legal-doc ul, .legal-doc ol { margin: 0 0 14px 22px; }
.legal-doc li { margin-bottom: 7px; text-align: justify; }
.legal-intro {
  background: var(--fondo);
  border-left: 3px solid var(--verde);
  padding: 14px 16px;
  border-radius: var(--radio-sm);
}
.legal-destacado {
  background: #fef9ec;
  border-left: 3px solid var(--naranja);
  padding: 12px 15px;
  border-radius: var(--radio-sm);
}
.legal-pendiente {
  background: rgba(230,126,34,.16);
  color: #a04000;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.legal-nota {
  margin-top: 34px;
  padding: 15px 17px;
  background: #eaf4fb;
  border: 1px dashed var(--azul);
  border-radius: var(--radio-sm);
  font-size: .82rem;
  color: #1a5276;
}
.legal-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-size: .8rem;
  color: var(--texto-suave);
  flex-wrap: wrap;
}

/* Casilla de aceptación en el registro */
.check-terminos,
.login-body .check-terminos {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--texto);
  /* Es un <label>, así que heredaba la regla global de los rótulos de campo:
     MAYÚSCULAS, gris claro y espaciado entre letras. Sobre el texto legal más
     importante de la página eso resultaba casi ilegible. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  cursor: pointer;
}
.check-terminos input,
.login-body .check-terminos input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--verde);
}
.check-terminos input:disabled + span,
.login-body .check-terminos input:disabled + span { opacity: .5; }
.check-terminos span,
.login-body .check-terminos span {
  /* Sin esto, como elemento flex no baja de su ancho mínimo y las
     líneas siguientes se salen por la izquierda. */
  min-width: 0;
}
.check-terminos a,
.login-body .check-terminos a { font-weight: 600; }

/* Pestañas genéricas */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--borde);
  flex-wrap: wrap;
}
.tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 9px 20px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  font-family: var(--fuente);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--texto); }
.tab.active { color: var(--verde-oscuro); border-bottom-color: var(--verde); }
.tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--fondo);
  color: var(--texto-suave);
}
.tab.active .tab-num { background: rgba(46,204,113,.2); color: var(--verde-oscuro); }
.tab-panel[hidden] { display: none; }

/* Formularios de subida del portal */
.form-subir { max-width: 640px; }
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-subir input[type="file"] {
  width: 100%;
  border: 1px dashed var(--borde);
  border-radius: var(--radio-sm);
  padding: 9px 11px;
  font-size: .84rem;
  background: var(--fondo);
  cursor: pointer;
}

/* Tablas de documentos ya enviados */
.tabla-docs { margin-top: 22px; border-top: 1px solid var(--borde); padding-top: 4px; }
.celda-acciones { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.detalle-doc { font-size: .82rem; line-height: 1.5; }
.motivo {
  font-size: .78rem;
  color: #922b21;
  background: #fdf3f2;
  border-left: 3px solid var(--rojo);
  padding: 5px 9px;
  border-radius: 3px;
  margin-top: 5px;
  max-width: 280px;
}

/* Pantalla de revisión: PDF a la izquierda, datos a la derecha */
.revision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.visor-pdf { width: 100%; height: 640px; border: none; display: block; }

.bloque-decision {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo);
}
.bloque-titulo { font-weight: 700; font-size: .88rem; margin-bottom: 8px; }

.opcion-radio {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 9px 11px;
  margin-bottom: 6px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: .85rem;
  line-height: 1.5;
}
.opcion-radio:hover { border-color: var(--azul); }
.opcion-radio input { margin-top: 3px; flex: 0 0 auto; }
.opcion-radio:has(input:checked) { border-color: var(--verde); background: #f6fdf9; }

.acciones-revision { display: flex; gap: 10px; margin-top: 20px; }

@media (max-width: 1100px) {
  .revision-grid { grid-template-columns: 1fr; }
  .visor-pdf { height: 460px; }
}

/* Foto de perfil en el panel lateral del portal */
.nav-perfil {
  padding: 6px 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--nav-border);
}
.avatar-wrap { position: relative; display: inline-block; }
.avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.15);
  display: block;
  background: var(--nav-bg-hover);
}
.avatar-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255,255,255,.35);
}
.avatar-camara {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--nav-bg);
  background: var(--verde);
  color: var(--blanco);
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.avatar-camara:hover { background: var(--verde-oscuro); transform: scale(1.08); }
.avatar-punto {
  position: absolute;
  left: -2px;
  top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--nav-bg);
}
.punto-amarillo { background: var(--amarillo); }
.punto-rojo     { background: var(--rojo); }

.nav-perfil-nombre {
  margin-top: 11px;
  color: var(--blanco);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
}
.nav-perfil-dni { color: rgba(255,255,255,.45); font-size: .72rem; margin-top: 2px; }

.foto-modal-preview { text-align: center; margin-bottom: 12px; }
.foto-modal-preview img {
  width: 150px;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
}

/* Foto de perfil */
.foto-bloque { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.foto-actual { text-align: center; flex: 0 0 auto; }
.foto-actual img {
  width: 132px;
  height: 168px;
  object-fit: cover;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--fondo);
  display: block;
}
.foto-vacia {
  width: 132px;
  height: 168px;
  border: 1px dashed var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo);
  color: var(--texto-suave);
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto-pie { margin-top: 7px; font-size: .75rem; color: var(--texto-suave); }
.foto-acciones { flex: 1 1 280px; min-width: 260px; }
.foto-comparar { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.foto-flecha { font-size: 1.5rem; color: var(--texto-suave); }

/* Subtítulo dentro de una tarjeta */
.card-subseccion {
  padding: 14px 20px 0;
  margin-top: 4px;
  border-top: 1px solid var(--borde);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-subseccion .btn { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Sección todavía no construida */
.en-construccion { text-align: center; padding: 56px 20px; }
.en-construccion-icono { font-size: 2.6rem; margin-bottom: 14px; }
.en-construccion-texto {
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--texto-suave);
  font-size: .95rem;
}

/* Badge de pendientes en el menú lateral */
.nav-badge {
  display: inline-block;
  min-width: 19px;
  padding: 1px 6px;
  margin-left: auto;
  border-radius: 10px;
  background: var(--naranja);
  color: var(--blanco);
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
}

/* =============================================================================
   MÓVIL
   El sistema nació para PC en red local. Ahora entra personal desde el celular,
   así que por debajo de 900px el menú lateral deja de ocupar espacio fijo y
   pasa a ser un cajón que se abre con el botón de hamburguesa, como en una
   aplicación.
   ============================================================================= */

/* ── Barra superior: solo existe en móvil ─────────────────────────────────── */
.barra-movil {
  display: none;                 /* se enciende en la media query */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  /* Por encima del cajón: así el botón —que al abrirse se convierte en X—
     sigue visible y se puede tocar para cerrar, que es lo que uno espera
     después de haberlo tocado para abrir. */
  z-index: 150;
  background: var(--nav-bg);
  color: var(--blanco);
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top);  /* teléfonos con muesca */
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.barra-movil .titulo {
  flex: 1;                       /* empuja el avatar al extremo derecho */
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón de hamburguesa: 44px de lado, el mínimo cómodo para un dedo. */
.btn-hamburguesa {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radio-sm);
  -webkit-tap-highlight-color: transparent;
}
.btn-hamburguesa span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--blanco);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
/* Las tres barras se convierten en una X cuando el cajón está abierto. */
body.menu-abierto .btn-hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-abierto .btn-hamburguesa span:nth-child(2) { opacity: 0; }
body.menu-abierto .btn-hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Avatar en la barra superior: el atajo a la foto en el teléfono. */
.avatar-barra {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: var(--nav-bg-hover);
  cursor: pointer;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
.avatar-barra img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.avatar-barra-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.05rem;
  color: rgba(255,255,255,.55);
}
.avatar-barra .avatar-punto {
  position: absolute;
  right: -1px;
  bottom: -1px;
}

/* Fondo oscuro que se pone detrás del cajón abierto. */
.nav-fondo {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .25s;
}

@media (max-width: 900px) {

  .barra-movil { display: flex; }

  /* ── El menú lateral pasa a ser un cajón ───────────────────────────────── */
  .nav-panel {
    width: min(82vw, 300px);
    max-width: 300px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 140;                /* por encima del fondo oscuro, debajo de la barra */
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
    /* Arranca debajo de la barra para no taparla. */
    padding-top: calc(56px + env(safe-area-inset-top));
  }
  body.menu-abierto .nav-panel { transform: translateX(0); }

  body.menu-abierto .nav-fondo { display: block; opacity: 1; }
  /* Mientras el cajón está abierto, el fondo no se desplaza. */
  body.menu-abierto { overflow: hidden; }

  /* El contenido ocupa todo el ancho, debajo de la barra. */
  .main-content {
    margin-left: 0;
    padding-top: 56px;
  }

  /* ── Rejillas: todo a una columna ──────────────────────────────────────────
     Dos campos lado a lado en un teléfono dejan ~140px para cada uno. El
     nombre de una institución no entra ni de lejos, y quien escribe no ve lo
     que ya escribió. En vertical cada campo usa el ancho completo.          */
  .form-grid, .ficha-grid, .datos-grid, .revision-grid, .form-fila {
    grid-template-columns: 1fr;
  }
  .col-span-2, .col-span-3 { grid-column: span 1; }
  .form-subir { max-width: none; }

  /* Las opciones de la foto, una debajo de otra: dos botones con emoji y
     texto no entran a lo ancho sin partirse. */
  .foto-opciones { flex-direction: column; }

  /* ── Tablas sueltas ────────────────────────────────────────────────────────
     Las que no se convirtieron en tarjetas se vuelven desplazables a lo ancho,
     para que ninguna empuje la página: la página nunca se mueve en horizontal,
     la tabla sí.                                                            */
  table:not(.tabla-tarjeta) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table:not(.tabla-tarjeta) th,
  table:not(.tabla-tarjeta) td { white-space: nowrap; }

  /* ── Tablas convertidas en tarjetas ────────────────────────────────────────
     Una tabla de 7 columnas es ilegible en un teléfono, aunque se desplace:
     para ver el botón «Corregir» habría que arrastrar hasta el final de cada
     fila. Aquí cada fila se convierte en una tarjeta apilada.

     Es el MISMO marcado: en pantalla ancha sigue siendo una tabla normal. Los
     encabezados no se pierden, viajan en el atributo data-label de cada celda
     y reaparecen como etiqueta al lado del valor.                           */
  .tabla-tarjeta,
  .tabla-tarjeta thead,
  .tabla-tarjeta tbody,
  .tabla-tarjeta td { display: block; width: auto; }

  .tabla-tarjeta thead { display: none; }

  /* La fila es una columna flexible. Eso permite REORDENAR las celdas solo en
     el teléfono —el nombre arriba como título, las acciones al pie— sin tocar
     el orden de las columnas en pantalla ancha ni duplicar marcado. */
  .tabla-tarjeta tr {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
  }

  /* Orden dentro de la tarjeta, independiente del orden de las columnas. */
  .tabla-tarjeta td.celda-titulo   { order: -2; }
  .tabla-tarjeta td.celda-sub      { order: -1; }
  .tabla-tarjeta td.celda-estado   { order:  8; }
  .tabla-tarjeta td.celda-acciones { order:  9; }
  .tabla-tarjeta tr:last-child { margin-bottom: 0; }

  /* Franja de color al costado: el estado se reconoce sin leer nada. */
  .tabla-tarjeta tr.fila-aprobado  { border-left-color: var(--verde);    }
  .tabla-tarjeta tr.fila-observado { border-left-color: var(--rojo);     }
  .tabla-tarjeta tr.fila-pendiente { border-left-color: var(--amarillo); }

  /* Celda normal: etiqueta a la izquierda, valor a la derecha. */
  .tabla-tarjeta td {
    border: 0;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: .88rem;
    text-align: right;
  }
  .tabla-tarjeta td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--texto-suave);
    text-align: left;
  }

  /* La celda que describe el documento es el cuerpo entero de la tarjeta. */
  .tabla-tarjeta td.celda-doc {
    display: block;
    text-align: left;
    padding: 0;
  }
  .tabla-tarjeta td.celda-doc::before { content: none; }
  .tabla-tarjeta td.celda-doc .doc-nombre { font-size: 1.02rem; line-height: 1.3; }
  .tabla-tarjeta td.celda-doc .doc-detalle { margin-top: 4px; }

  /* Título de la tarjeta: sin etiqueta, a todo lo ancho. */
  .tabla-tarjeta td.celda-titulo {
    display: block;
    text-align: left;
    padding: 0 0 3px;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--texto);
  }
  .tabla-tarjeta td.celda-titulo::before { content: none; }

  /* Renglón secundario bajo el título, con la línea que separa del detalle. */
  .tabla-tarjeta td.celda-sub {
    display: block;
    text-align: left;
    padding: 0 0 9px;
    margin-bottom: 5px;
    font-size: .8rem;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--borde);
  }
  .tabla-tarjeta td.celda-sub::before { content: none; }

  /* Estado: la insignia manda sola, sin etiqueta que la repita. */
  .tabla-tarjeta td.celda-estado {
    display: block;
    text-align: left;
    padding: 8px 0 0;
  }
  .tabla-tarjeta td.celda-estado::before { content: none; }

  /* Acciones: pie de tarjeta con los botones repartidos a lo ancho. */
  .tabla-tarjeta td.celda-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0 0;
    margin-top: 10px;
    border-top: 1px solid var(--borde);
  }
  .tabla-tarjeta td.celda-acciones::before { content: none; }
  .tabla-tarjeta td.celda-acciones > * { flex: 1 1 90px; }
  /* «Cancelar» va en su propio renglón, a todo lo ancho: es la acción
     destructiva y conviene que se distinga de las otras, no que quede
     pegada a «Ver» según cómo caiga el ajuste de línea. */
  .tabla-tarjeta td.celda-acciones form { flex: 1 1 100%; }
  .tabla-tarjeta td.celda-acciones .btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    font-size: .85rem;
  }

  /* Los iconos van arriba a la derecha, en la misma altura que el nombre.
     Al pie se llevaban una fila entera por tarjeta —con cinco familiares, cinco
     filas casi vacías—; aquí no ocupan ninguna. */
  .tabla-tarjeta tr { position: relative; }
  .tabla-tarjeta td.celda-iconos {
    position: absolute;
    top: 11px;
    right: 12px;
    padding: 0;
    margin: 0;
    border: 0;
  }
  .tabla-tarjeta td.celda-iconos::before { content: none; }
  .tabla-tarjeta .btn-icono { width: 38px; height: 38px; font-size: 1rem; }

  /* Un ojo y un lápiz, no dos botones con texto: en una tarjeta angosta las
     palabras ocupan más que el documento que acompañan. */
  .tabla-tarjeta td.celda-iconos { gap: 6px; width: auto; }
  .tabla-tarjeta td.celda-iconos .btn-accion {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 0;
    padding: 0;
    font-size: 1rem;
  }
  .tabla-tarjeta td.celda-iconos .accion-icono { display: inline; }
  .tabla-tarjeta td.celda-iconos .accion-texto { display: none; }
  /* Que el nombre no se meta por debajo de los iconos. */
  .tabla-tarjeta tr:has(.celda-iconos) .celda-titulo,
  .tabla-tarjeta tr:has(.celda-iconos) .celda-sub,
  .tabla-tarjeta tr:has(.celda-iconos) .celda-doc .doc-nombre { padding-right: 92px; }

  /* Fila de «todavía no hay nada»: ocupa la tarjeta entera. */
  .tabla-tarjeta td[colspan] { display: block; text-align: center; }
  .tabla-tarjeta td[colspan]::before { content: none; }

  /* El motivo de una observación necesita todo el ancho para leerse. */
  .tabla-tarjeta .motivo { max-width: none; text-align: left; margin-top: 6px; }

  /* ── Cabecera de página ────────────────────────────────────────────────────
     El título ya se muestra en la barra superior; repetirlo debajo cuesta unos
     60px de pantalla y confunde. Se conservan el subtítulo y los botones, que
     sí aportan.                                                             */
  .page-header .page-title { display: none; }
  /* Y si la cabecera se queda sin nada que mostrar, desaparece entera en vez
     de dejar una franja blanca vacía. */
  .page-header:not(:has(.page-subtitle, .btn, a, button, input, form)) {
    display: none;
  }
  .page-header { padding: 12px 18px; }
  .page-body   { padding: 16px 18px; }
  .card-body   { padding: 16px; }

  .avisos-botones { flex-direction: column; }
  .avisos-botones .btn { width: 100%; justify-content: center; }

  .avance { padding: 16px; }
  .avance-grande { font-size: 1.7rem; }

  /* La acción principal de un formulario ocupa el ancho: es más fácil de
     acertar con el pulgar y deja claro que es el paso final. */
  .form-subir > .btn { width: 100%; justify-content: center; }

  /* ── Pestañas ──────────────────────────────────────────────────────────────
     Tres pestañas no entran a lo ancho y se partían en 1 + 2, que se lee como
     si la primera fuera un título. En una sola fila que se desliza queda claro
     que son hermanas.                                                       */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }

  /* ── Toque cómodo ──────────────────────────────────────────────────────── */
  .btn { padding: 11px 18px; min-height: 44px; }
  .nav-item { padding: 13px 16px; font-size: .95rem; }

  /* 16px es el umbral por debajo del cual iPhone hace zoom automático al
     tocar un campo, y después la página queda descuadrada. */
  input[type="text"], input[type="date"], input[type="email"],
  input[type="number"], input[type="password"], input[type="tel"],
  select, textarea {
    font-size: 16px;
    padding: 11px 12px;
  }

  /* ── Espaciados más ajustados ──────────────────────────────────────────── */
  .visor-pdf { height: 60vh; }
  .modal-box { width: 94vw; max-height: 88vh; overflow-y: auto; }
}

  /* ── Pantallas de acceso ───────────────────────────────────────────────────
     Con menos aire se llega antes al botón sin perder legibilidad.          */
  .login-header { padding: 20px 22px 18px; }
  .login-body   { padding: 20px 22px 24px; }
  .login-footer { padding-left: 22px; padding-right: 22px; }
  .login-header svg { width: 44px; height: 50px; }
  .login-header .title { font-size: 1.22rem; }
  .reg-step { margin-bottom: 15px; }
  .reg-step:last-of-type { margin-bottom: 18px; }
  .aviso-piloto { padding: 9px 12px; margin-bottom: 14px; font-size: .75rem; }
  .reg-intro { margin-bottom: 14px; }

  /* El botón de al lado del campo no debe comerse el espacio del texto. */
  .login-body .input-group .btn { padding: 8px 13px; font-size: .82rem; }

/* Teléfonos angostos */
@media (max-width: 480px) {
  .aviso-codigo { font-size: 1.9rem; letter-spacing: 5px; }
  .login-body, .login-header { padding-left: 20px; padding-right: 20px; }
  .barra-movil .titulo { font-size: .92rem; }
}

/* Nada debe empujar la página a lo ancho. */
html, body { max-width: 100%; overflow-x: hidden; }