/* =============================================================================
   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;
  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;
  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);
  width: 380px;
  max-width: 100%;
  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; }

/* ── Aviso de prueba piloto ───────────────────────────────────────────────────
   El dominio lleva el nombre de la institución, así que la página podría
   confundirse con un sitio oficial. Este aviso deja claro que no lo es.
   Va arriba de todo, antes que el logo, para que se lea primero.            */
.aviso-piloto {
  background: #fff4e5;
  border: 1px solid #f0c39a;
  border-left: 4px solid var(--naranja);
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: .78rem;
  line-height: 1.45;
  color: #7a4a12;
}
.aviso-piloto strong { display: block; margin-bottom: 2px; color: #a35a09; }

/* ── 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 */
}

/* ── 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 { 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; }
.login-body .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── 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 {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--texto-suave);
}
.check-terminos input { margin-top: 3px; flex: 0 0 auto; }
.check-terminos input:disabled + span { opacity: .5; }
.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;
  z-index: 120;                  /* por encima del cajón cerrado */
  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 {
  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); }

/* 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 */
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
    padding-top: 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 ──────────────────────────────────────── */
  .form-grid, .ficha-grid, .datos-grid, .revision-grid {
    grid-template-columns: 1fr;
  }
  .col-span-2, .col-span-3 { grid-column: span 1; }

  /* ── Tablas ────────────────────────────────────────────────────────────────
     Con 6 o 7 columnas no hay pantalla de teléfono que alcance. Se vuelven
     desplazables a lo ancho para que ninguna se salga de la página: la página
     nunca se mueve en horizontal, la tabla sí.                              */
  .tabla-base {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .tabla-base th, .tabla-base td { white-space: nowrap; }

  /* ── 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; }
}

/* 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; }