/* Estilos del cliente, agrupados por estructura, componentes, formularios y adaptación de pantalla. */
/* Paleta, tipografía y variables comunes de la interfaz. */
:root {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #243b3b;
  background: #f5f7f6;
  font-synthesis: none;
  --green: #176b54;
  --line: #e1e8e4;
  --muted: #71817b;
}
/* Modelo de tamaño: el borde y el relleno forman parte del ancho de cada elemento. */
* {
  box-sizing: border-box;
}
/* Documento sin margen exterior para alinear la estructura principal. */
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  outline-offset: 4px;
}
button {
  cursor: pointer;
  border: 1px solid #d1ddd7;
  border-radius: 7px;
  background: white;
  color: #25473b;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
}
button:hover {
  background: #eef6f1;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.primary:hover {
  background: #10543f;
}
a {
  color: var(--green);
}
/* Mantiene ocultos los elementos de sesión y mensajes aunque otra regla declare display. */
[hidden] {
  display: none !important;
}
/* Contenedor principal de navegación y espacio de trabajo. */
#shell {
  display: flex;
  min-height: 100vh;
}
/* Barra de navegación lateral fija en escritorio. */
aside {
  width: 235px;
  position: fixed;
  inset: 0 auto 0 0;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--line);
}
/* Identidad visual del sistema y enlace al resumen. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 750;
  text-decoration: none;
  color: #21483c;
  margin-bottom: 44px;
}

/* Presentación circular del logo en la navegación. */
.brand-logo {
  width: 38px;
  height: 38px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
}

.brand span {
  min-width: 0;
}
/* Etiquetas pequeñas que identifican cada sección. */
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 16px;
}
aside .eyebrow {
  padding-left: 12px;
  font-size: 9px;
}
/* Distribución de los enlaces de navegación. */
nav {
  display: grid;
  gap: 5px;
}
nav a {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 7px;
  text-decoration: none;
  color: #68766e;
  font-size: 18px;
}
nav a span {
  font-size: 13px;
  font-weight: 550;
}
nav a:hover,
nav a.active {
  background: #e9f2ed;
  color: var(--green);
}
nav a.active {
  box-shadow: inset 3px 0 var(--green);
}
.aside-bottom {
  margin-top: auto;
  padding: 25px 10px 0;
  font-size: 11px;
  color: var(--muted);
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #58a782;
  border-radius: 50%;
  margin-right: 7px;
}
.quiet {
  display: block;
  border: 0;
  background: none;
  padding: 15px 0 0;
  font-size: 12px;
  color: #738077;
}
/* Reserva espacio para la barra lateral y permite que el contenido se adapte al ancho. */
main {
  margin-left: 235px;
  flex: 1;
  min-width: 0;
}
/* Franja superior con identificación y controles de sesión. */
.topbar {
  height: 77px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  color: #7c8a82;
  font-size: 10px;
  letter-spacing: 1.4px;
}
.topbar > span:last-child {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0;
}
.avatar {
  display: grid;
  place-items: center;
  background: #ecf2ee;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 10px;
  color: #38604d;
}
/* Márgenes y ancho máximo de las pantallas de trabajo. */
.workspace {
  padding: 38px 40px 20px;
  max-width: 1680px;
  margin: auto;
}
/* Distribución del título y los botones principales. */
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.page-heading .eyebrow {
  margin-bottom: 10px;
}
h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -1px;
  font-weight: 650;
}
#description {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 0;
}
/* Botones de acción que se ajustan a varias filas si falta espacio. */
#actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
/* Mensaje de resultado visible tras una operación. */
#notice {
  padding: 14px 18px;
  border-radius: 7px;
  margin-bottom: 20px;
  background: #e4f0e8;
  color: #235641;
  font-size: 13px;
}
#notice.error {
  background: #f9e9e5;
  color: #a34434;
}
/* Distribución de contadores del resumen. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 26px;
}
/* Tarjeta individual de un contador. */
.stat {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
}
.stat p {
  font-size: 12px;
  color: #748478;
  margin: 0 0 18px;
}
.stat strong {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1px;
}
.stat small {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  color: #819086;
}
.stat.accent {
  background: #1d5a46;
  color: #fff;
  border: 0;
}
.stat.accent p,
.stat.accent small {
  color: #c2d9ca;
}
/* Contenedor de tablas y bloques de información. */
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
/* Texto de ayuda que explica marcas y asistencia. */
.explanation {
  padding: 18px 22px;
  font-size: 13px;
  line-height: 1.5;
}
.explanation p {
  margin: 7px 0 0;
  color: var(--muted);
}
/* Botones para alternar entre resumen y marcas individuales. */
.view-switch {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
}
/* Encabezado de paneles de información. */
.panel-heading {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.panel-heading small {
  color: var(--muted);
  font-size: 11px;
}
/* Resumen distribuido en dos columnas cuando hay ancho disponible. */
.two-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}
/* Permite desplazar tablas anchas sin ensanchar toda la página. */
.table-scroll {
  overflow: auto;
}
/* Las observaciones deben leerse completas, sin quedar cortadas como una celda corta. */
.attendance-observations td:last-child {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 300px;
  max-width: 680px;
  line-height: 1.6;
  overflow: visible;
}
/* Presentación común de tablas de datos. */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}
/* Etiquetas del encabezado de las tablas. */
thead {
  background: #f8faf8;
  color: #718276;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
th {
  font-weight: 600;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 17px 20px;
  border-bottom: 1px solid #eef2ef;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
}
tr:last-child td {
  border-bottom: 0;
}
td strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
td small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  font-size: 11px;
}
td .row-actions {
  display: flex;
  gap: 7px;
}
td button {
  font-size: 11px;
  padding: 6px 9px;
}
/* Indicadores visuales de estado. */
.badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.45px;
  padding: 5px 8px;
  border-radius: 5px;
  background: #eef1f0;
  color: #718177;
}
/* Color de estados confirmados o correctos. */
.badge.good {
  background: #e7f3eb;
  color: #2b7954;
}
/* Color de estados pendientes o incompletos. */
.badge.warning {
  background: #fbf0d9;
  color: #9a7527;
}
/* Color de incidencias o errores. */
.badge.bad {
  background: #f9e7e3;
  color: #ad5748;
}
/* Mensaje cuando una consulta no contiene filas. */
.empty {
  text-align: center;
  padding: 55px 24px;
  color: var(--muted);
  font-size: 13px;
}
.empty strong {
  display: block;
  color: #405d4d;
  margin: 10px;
  font-size: 16px;
}
/* Distribución del formulario de búsqueda y filtros. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.filters label {
  flex: 1;
  min-width: 125px;
  font-size: 10px;
  color: var(--muted);
}
/* Separación de la etiqueta y su campo de entrada. */
label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: #536e5d;
}
input,
select {
  width: 100%;
  border: 1px solid #d9e2dc;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
  color: #2b4636;
  min-width: 0;
}
input:focus,
select:focus {
  border-color: var(--green);
}
/* Lista que explica el flujo operativo del resumen. */
.steps {
  list-style: none;
  padding: 12px 24px;
  margin: 0;
}
.steps li {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #eef2ee;
  font-size: 12px;
}
.steps li:last-child {
  border: 0;
}
.step-number {
  height: 26px;
  width: 26px;
  border: 1px solid #d4e3d9;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green);
  flex-shrink: 0;
}
.steps strong {
  font-weight: 600;
}
.steps p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  margin: 6px 0 0;
}
/* Controles y recuento de paginación. */
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 15px;
}
.pager div {
  display: flex;
  gap: 8px;
}
/* Pie de página con identificación y hora de actualización. */
footer {
  display: flex;
  justify-content: space-between;
  color: #9aa79e;
  font-size: 10px;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
/* Fondo y centrado del formulario de acceso. */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at top left, #d9e9df, #f5f7f6 70%);
}
/* Tarjeta que agrupa los campos de credenciales. */
.login-card {
  background: white;
  border: 1px solid #dce6dd;
  border-radius: 16px;
  width: min(420px, 90vw);
  padding: 40px;
  box-shadow: 0 20px 80px #264b3410;
}
/* Logo de identificación del formulario de acceso. */
.login-logo {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 22px;
}
.login-card .eyebrow {
  margin-top: 0;
}
.login-card > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.login-card label {
  margin: 20px 0;
}
.login-card button {
  width: 100%;
}
/* Ventana modal reutilizada para formularios y detalles. */
dialog {
  border: 1px solid #d8e3da;
  border-radius: 14px;
  padding: 28px;
  width: min(620px, 94vw);
  max-height: 90vh;
  color: #264533;
  box-shadow: 0 25px 80px #142d3630;
}
/* Fondo atenuado mientras está abierto un diálogo. */
dialog::backdrop {
  background: #14342960;
  backdrop-filter: blur(3px);
}
/* Título y botón de cierre del diálogo. */
.dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.icon-button {
  border: 0;
  font-size: 23px;
  padding: 0 6px;
  background: none;
}
/* Campos distribuidos en dos columnas en pantallas grandes. */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
/* Elementos que ocupan todo el ancho del formulario. */
.form-grid .full {
  grid-column: 1/-1;
}
.form-grid .check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
/* Conserva el tamaño natural de las casillas de selección. */
.check input {
  width: auto;
}
/* Botones de guardar, cancelar y cerrar. */
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 20px;
}
#form-error,
#login-error {
  color: #b54232;
  font-size: 12px;
}
/* Texto explicativo de los formularios. */
.hint {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
/* Visor de mensajes originales con saltos de línea y ajuste de texto. */
.raw {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #f5f7f5;
  padding: 16px;
  font: 11px/1.6 monospace;
  max-height: 55vh;
  overflow: auto;
}
/* Mensaje mostrado mientras la API prepara una vista. */
.loading {
  padding: 40px;
  color: var(--muted);
}
/* Adaptación a pantallas medianas: reduce la navegación y reorganiza el resumen. */
@media (max-width: 1100px) {
  aside {
    width: 190px;
    padding: 25px 12px;
  }
  main {
    margin-left: 190px;
  }
  .workspace {
    padding: 28px 22px;
  }
  .two-columns {
    grid-template-columns: 1fr;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .topbar {
    padding: 0 22px;
  }
}
/* Adaptación móvil: navegación superior, formularios de una columna y control de salida visible. */
@media (max-width: 700px) {
  #shell {
    display: block;
  }
  aside {
    position: static;
    width: 100%;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .brand {
    margin-bottom: 15px;
    font-size: 19px;
  }
  aside .eyebrow,
  .aside-bottom {
    display: none;
  }
  nav {
    display: flex;
    overflow: auto;
    gap: 7px;
  }
  nav a {
    padding: 9px;
    white-space: nowrap;
  }
  nav a span {
    font-size: 11px;
  }
  main {
    margin-left: 0;
  }
  .topbar {
    height: 48px;
  }
  .workspace {
    padding: 25px 16px;
  }
  .page-heading {
    align-items: start;
    flex-direction: column;
    gap: 18px;
  }
  h1 {
    font-size: 26px;
  }
  .stats {
    gap: 10px;
  }
  .stat {
    padding: 18px;
  }
  .stat strong {
    font-size: 26px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .filters label {
    min-width: 40%;
  }
  td,
  th {
    padding: 13px;
  }
  footer {
    gap: 15px;
  }
  .login-card {
    padding: 28px;
  }
}

/* Control alternativo de cierre de sesión para pantallas pequeñas. */
.mobile-logout {
  display: none;
}
/* Adaptación móvil: navegación superior, formularios de una columna y control de salida visible. */
@media (max-width: 700px) {
  .mobile-logout {
    display: block;
    padding: 6px 8px;
    font-size: 10px;
  }
}

.two-columns > * {
  min-width: 0;
}

.row-actions {
  flex-wrap: wrap;
}
td:has(.row-actions) {
  min-width: 260px;
  white-space: normal;
}

/* Controles secundarios separados de las tareas diarias. */
nav details { margin-top: 16px; }
nav summary { cursor: pointer; padding: 12px 18px; color: #50645a; font-size: 12px; }
nav details a { padding-left: 32px; }
.advanced-filters { flex-basis: 100%; }
.advanced-filters summary, .maintenance summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.advanced-filters .row-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.maintenance { margin-top: 24px; padding: 16px 24px; }
.maintenance > button { margin: 8px 12px 8px 0; }

.welcome { padding: 24px; margin-bottom: 24px; }
.welcome h2 { margin-top: 0; }
.quick-link { display: inline-block; background: #195f4e; color: white; padding: 12px 18px; border-radius: 10px; text-decoration: none; margin: 8px 12px 8px 0; font-weight: 600; }
.quick-link.secondary { background: #e8f0eb; color: #195f4e; }

/* La confirmación de mantenimiento mantiene casilla y texto en una sola fila. */
.cleanup-confirm { display:flex; flex-direction:row; align-items:flex-start; gap:10px; }
.cleanup-confirm input[type="checkbox"] { width:auto; min-height:0; margin:3px 0 0; flex-shrink:0; }

/* Navegación 1.1.3: jerarquía clara, iconos uniformes y equipos agrupados. */
aside { width:264px; padding:24px 16px 18px; background:#123e35; color:#e0ece7; border:0; overflow-y:auto; z-index:30; }
main { margin-left:264px; }
.brand { color:#fff; gap:12px; margin:0 10px 28px; font-size:24px; font-weight:750; letter-spacing:-.6px; }
.brand-logo { width:44px;height:44px;border:2px solid #ffffff30; }
.brand small { display:block; color:#c6d7d0;font-size:10px;letter-spacing:.3px;font-weight:450;margin-top:6px; }
aside nav { display:grid;gap:4px;overflow:visible; }
.nav-group-label { color:#a3bfb3;font-size:9px;letter-spacing:1.6px;font-weight:700;margin:22px 14px 8px; }
.nav-group-label:first-child { margin-top:0; }
.nav-icon { width:19px;height:19px;flex:none; }
aside nav a { color:#d1e1d9;padding:12px 14px;border-radius:9px;gap:11px;font-size:13px;min-height:43px; }
aside nav a span { font-size:12px;font-weight:500; }
aside nav a:hover { background:#ffffff0d;color:#fff; }
aside nav a.active { background:#e9f5ed;color:#163f32;box-shadow:none; }
aside nav a.active span { font-weight:700; }
aside nav details { margin-top:22px; }
aside nav summary { display:flex;align-items:center;gap:11px;color:#d1e1d9;padding:12px 14px;font-size:12px;border-radius:9px;list-style:none; }
aside nav summary::-webkit-details-marker { display:none; }
aside nav summary:hover { background:#ffffff0d; }
.nav-chevron { margin-left:auto;font-size:16px; }
aside nav details[open] .nav-chevron { transform:rotate(180deg); }
aside nav details a { margin-left:15px;padding-left:14px;border-left:1px solid #ffffff23;border-radius:0 9px 9px 0; }
.aside-bottom { color:#bed3c7;font-size:11px;margin:28px 12px 0;padding-top:20px;border-top:1px solid #ffffff20; }
.aside-bottom .quiet { color:#d4e4db;font-size:11px; }
.topbar { height:72px;letter-spacing:.3px;font-size:11px;position:relative; }
.topbar-location,.topbar-account { display:flex;align-items:center;gap:16px; }
.breadcrumb-separator { padding:0 12px;color:#c0ccc5; }
#breadcrumb { color:#274637;font-weight:650; }
.security-shortcut { text-decoration:none;padding:8px 12px;border:1px solid #dce6df;border-radius:8px;font-size:11px;font-weight:600; }
.account-label { color:#6d8075;font-size:11px; }
.menu-toggle { display:none; }
.nav-overlay { position:fixed;inset:0;background:#0b211b80;border:0;border-radius:0;z-index:25; }
.security-intro { display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:22px; }
.security-intro h2 { margin:6px 0 8px;font-size:22px;letter-spacing:-.6px; }
.security-intro p,.section-heading p { color:#71817b;font-size:12px;line-height:1.6; }
.security-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:22px; }
.security-card { background:white;border:1px solid var(--line);padding:24px;border-radius:12px; }
.security-card h2 { margin:18px 0 10px;font-size:13px;color:#6b7b72; }
.security-card strong { display:block;font-size:20px;letter-spacing:-.5px; }
.security-card p { color:#71817b;line-height:1.7;font-size:12px;margin-bottom:0; }
.security-state { display:inline-flex;font-size:10px;font-weight:600;border-radius:20px;padding:5px 9px; }
.security-state.on { background:#edf6ee;color:#2c6746; }.security-state.pending { background:#fff4db;color:#836320; }
.section-heading { margin:28px 0 14px; }.section-heading h2 { font-size:17px;margin:0; }
@media(max-width:1100px) and (min-width:701px){ aside { width:236px; }main{margin-left:236px;}aside nav a span{font-size:11px;}.brand{font-size:22px;margin-left:6px;} }
@media(max-width:700px){
 aside { position:fixed;inset:0 auto 0 0;width:270px;height:100dvh;transform:translateX(-105%);transition:transform .18s ease;border:0;padding:24px 16px; }
 body.navigation-open aside { transform:translateX(0); }
 main { margin-left:0; }.menu-toggle {display:inline-flex;padding:6px 9px;border:0;font-size:19px;}
 .topbar {height:62px;padding:0 14px;}.topbar-location{gap:8px;}.topbar-account{gap:8px;}.account-label,.security-shortcut{display:none;}
 .topbar-location>span{font-size:10px;}.breadcrumb-separator{padding:0 5px;}.brand{margin-bottom:28px;font-size:24px;}
 aside .aside-bottom {display:block;}aside nav a{white-space:normal;}aside nav a span{font-size:12px;}
 .security-grid{grid-template-columns:1fr;}.security-intro{align-items:flex-start;flex-direction:column;gap:12px;}
}

.users-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;}
@media(max-width:700px){.users-heading{align-items:flex-start;flex-direction:column;}}

/* Secciones de Personal y datos de salud: navegación independiente del enrolamiento. */
.personnel-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid #dce5df;padding-bottom:12px}
.personnel-tabs button.selected{background:#195f4e;color:#fff;border-color:#195f4e}
.health-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:18px;border:1px solid #dce5df;border-radius:10px;margin:0;min-width:0}
.health-fields legend{font-weight:600;padding:0 8px}
.health-fields[hidden]{display:none}
.health-fields label:first-of-type{grid-column:1/-1}
@media(max-width:700px){.health-fields{grid-template-columns:1fr}.personnel-tabs button{flex:1 1 auto}}

/* Consulta DNI: propuesta explícita, sin cambios de estado ni datos laborales. */
.dni-lookup{border:1px solid #d8e5df;border-radius:12px;padding:14px;overflow:auto;background:#f7faf8}.dni-lookup table{margin:12px 0}.dni-lookup button{margin:4px 8px 4px 0}

/* Combos largos con búsqueda local, teclado y selección de opciones existentes. */
.search-choice{display:block;position:relative}.search-choice-input{width:100%;padding-right:38px!important}.search-choice-toggle{position:absolute;right:3px;top:3px;min-height:32px;padding:3px 10px!important;background:transparent!important;border:0!important;color:inherit!important}.search-choice-list{position:absolute;top:100%;left:0;right:0;max-height:240px;overflow:auto;z-index:60;background:white;border:1px solid #b8cfc5;border-radius:8px;box-shadow:0 8px 22px #12332224;margin-top:4px;padding:5px}.search-choice-list[hidden]{display:none}.search-choice-option{display:block;width:100%;text-align:left;white-space:normal;border:0!important;border-radius:5px!important;background:white!important;color:#243b3b!important;padding:9px 10px!important;font-weight:400!important}.search-choice-option:hover,.search-choice-option.active{background:#e5f2ec!important}.search-choice-option[aria-selected=true]{font-weight:700!important}.search-choice-group{font-size:11px;font-weight:700;color:#577068;padding:10px 9px 4px;pointer-events:none}.search-choice-empty{padding:12px;color:#66766e}.search-choice-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Historial de personal: cambios separados para facilitar la lectura. */
.personnel-history{border:1px solid var(--border,#dbe3e0);border-radius:10px;padding:14px;margin:12px 0}.personnel-history h3{margin:0 0 6px}.personnel-history p{overflow-wrap:anywhere}

.transfer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.transfer-grid .panel{display:flex;flex-direction:column;gap:12px}.transfer-grid label{display:flex;flex-direction:column;gap:6px}#transfer-person-list{max-height:300px;overflow:auto}#transfer-person-list .check{flex-direction:row}#transfer-review{margin:20px 0}