/* ═══════════════════════════════════════════════════════════════════════════
   EXPEDIENTES

   Un expediente laboral, en papel, es una carpeta con separadores. Esta
   pantalla es eso: arriba los separadores —cada uno con su color, como las
   pestañitas de cartón de una carpeta de verdad— y adentro, las hojas.

   Dos decisiones mandan sobre todo lo demás:

   · La hoja que falta ES el sitio donde se sube. Punteada, como un hueco en
     la carpeta, y se enciende cuando uno le acerca el archivo. Nunca hay que
     buscar un botón.
   · Cada separador tiene su tono y lo lleva a todo lo suyo —el canto de
     arriba, el ícono, las hojas—, así uno sabe en qué carpeta está sin leer el
     título. El "ya está" es siempre el turquesa de la casa, en todas.

   Las hojas llevan la esquina de arriba doblada. Es el único guiño a papel de
   toda la pantalla, y está puesto a propósito ahí: es lo que hace que una
   tarjeta se lea como un documento y no como un botón más. */

.exp-panel {
  --exp-luz: var(--teal);
  --exp-luz-alta: color-mix(in srgb, var(--teal) 88%, #fff);
  --exp-rojo: #c0392b;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--e1);
  overflow: hidden;
}
[data-theme="dark"] .exp-panel { --exp-luz: #5fd8d0; --exp-luz-alta: #7ee6e0; --exp-rojo: #f0938c; }

/* Los tonos de cada separador son los del menú (--m-*, en home.css): el mismo
   color que la pestaña de afuera, y Personales el de Colaboradores. Esas
   variables ya traen su versión clara para el tema oscuro. */
.exp-separador.personales, .exp-carpeta.personales { --tono: var(--m-colaboradores); }
.exp-separador.pagos, .exp-carpeta.pagos { --tono: var(--m-pagos); }
.exp-separador.vacaciones, .exp-carpeta.vacaciones { --tono: var(--m-vacaciones); }
.exp-separador.aguinaldo, .exp-carpeta.aguinaldo { --tono: var(--m-aguinaldos); }
.exp-separador.liquidacion, .exp-carpeta.liquidacion { --tono: var(--m-liquidaciones); }

/* ── La cabecera ──────────────────────────────────────────────────────────
   Cuatro columnas dichas de antemano, para que no cambie de alto según cuán
   largo sea el nombre —ese brinco ya se corrigió una vez en Reportes. */
.exp-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 24px;
  padding: 20px 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--exp-luz) 6%, transparent), transparent);
}
.exp-quien { display: flex; align-items: center; gap: 14px; min-width: 0; }
.exp-quien > div { min-width: 0; }
.exp-quien .avatar { width: 48px; height: 48px; font-size: 16px; flex: 0 0 auto; }
.exp-quien h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 660;
  letter-spacing: -.015em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-quien p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }

.exp-avance { display: grid; gap: 2px; padding-right: 4px; text-align: right; }
.exp-avance small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.exp-avance b { font-size: 17px; font-weight: 680; color: var(--ink); font-variant-numeric: tabular-nums; }
.exp-avance b i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.exp-avance span { font-size: 11.5px; font-weight: 650; }
.exp-avance span.faltan { color: var(--exp-rojo); }
.exp-avance span.listo { color: var(--exp-luz); }

/* El anillo dice de un vistazo si "12 de 40" es mucho o poco. */
.exp-anillo {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(var(--exp-luz) calc(var(--parte) * 1%), color-mix(in srgb, var(--muted) 16%, transparent) 0);
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--exp-luz) 22%, transparent));
}
.exp-anillo::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
.exp-anillo b { position: relative; z-index: 1; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.exp-anillo i { font-style: normal; font-size: 9.5px; color: var(--muted); }

.exp-mandos { display: inline-flex; align-items: center; gap: 9px; }

/* ── Los separadores ──────────────────────────────────────────────────────
   Se sientan sobre una raya, como las pestañas de cartón sobre la carpeta. El
   escogido se sube, toma el fondo de la carpeta y se funde con ella: por eso
   pierde el borde de abajo y se come la raya con el margen negativo. */
.exp-separadores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 18px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 45%, var(--card));
}
.exp-separador {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: -1px;
  padding: 12px 14px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-2) var(--ease);
}
/* El canto de color de arriba: apagado en los que no se ven, entero y con su
   luz en el escogido. */
.exp-separador::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--tono);
  opacity: .32;
  transition: opacity var(--dur-2) ease, left var(--dur-2) var(--ease), right var(--dur-2) var(--ease);
}
.exp-separador:hover { color: var(--ink); background: color-mix(in srgb, var(--tono) 7%, transparent); }
.exp-separador:hover::before { opacity: .75; }
.exp-separador:focus-visible { outline: 2px solid var(--tono); outline-offset: -3px; }

.exp-separador.on {
  color: var(--ink);
  border-color: var(--line);
  background: var(--card);
  transform: translateY(-2px);
  box-shadow: 0 -8px 20px -14px color-mix(in srgb, var(--tono) 80%, transparent);
}
.exp-separador.on::before {
  top: -1px;
  left: -1px;
  right: -1px;
  border-radius: 12px 12px 0 0;
  opacity: 1;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--tono) 55%, transparent);
}

.exp-separador-icono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--tono);
  background: color-mix(in srgb, var(--tono) 13%, transparent);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) ease;
}
.exp-separador-icono svg { width: 17px; height: 17px; }
.exp-separador:hover .exp-separador-icono { transform: translateY(-1px); }
.exp-separador.on .exp-separador-icono {
  color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tono) 80%, #fff), var(--tono));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--tono) 38%, transparent);
}
[data-theme="dark"] .exp-separador.on .exp-separador-icono { color: #0b1220; }

.exp-separador-texto { display: grid; gap: 1px; min-width: 0; }
.exp-separador-texto b {
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-separador-texto small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.exp-separador-faltan {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 21px;
  height: 21px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--exp-rojo) 15%, transparent);
  color: var(--exp-rojo);
  font-size: 10.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.exp-separador-listo { display: grid; place-items: center; flex: 0 0 auto; margin-left: auto; color: var(--exp-luz); }
.exp-separador-listo svg { width: 16px; height: 16px; }

/* ── La carpeta abierta ───────────────────────────────────────────────── */
.exp-carpeta { padding: 24px 26px 28px; }
.exp-carpeta-cabeza { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.exp-carpeta-cabeza > div { min-width: 0; margin-right: auto; }
.exp-carpeta-cabeza h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 660;
  color: var(--ink);
}
.exp-carpeta-cabeza h2 svg { width: 19px; height: 19px; color: var(--tono); }
.exp-carpeta-cabeza p { margin: 6px 0 0; max-width: 78ch; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.exp-formatos {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--muted) 11%, transparent);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.exp-anio { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* Los meses de Pagos. Solo salen los meses que tienen pagos: un mes vacío no
   tiene nada que archivar. El puntito rojo dice "aquí falta algo" sin tener
   que entrar a cada uno a ver. */
.exp-meses { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.exp-mes-chip {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-2) ease, border-color var(--dur-2) ease, background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.exp-mes-chip small { font-size: 10.5px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.exp-mes-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--tono) 45%, transparent); }
.exp-mes-chip:focus-visible { outline: 2px solid var(--tono); outline-offset: 2px; }
.exp-mes-chip.on {
  color: var(--tono);
  border-color: color-mix(in srgb, var(--tono) 55%, transparent);
  background: color-mix(in srgb, var(--tono) 11%, transparent);
  box-shadow: 0 3px 12px -4px color-mix(in srgb, var(--tono) 55%, transparent);
}
.exp-mes-punto {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--exp-rojo);
  box-shadow: 0 0 0 2px var(--card);
}

/* ── Las hojas ────────────────────────────────────────────────────────────
   Columnas contadas a mano por ancho, no una cuadrícula que se acomoda sola:
   así una hoja nunca queda sola y estirada al final de la fila. */
.exp-hojas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exp-papel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exp-hojas.entra .exp-papel {
  animation: exp-aparece .4s var(--ease) backwards;
  animation-delay: calc(min(var(--turno, 0), 12) * 32ms);
}
@keyframes exp-aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* El marco lleva la sombra y la hoja el recorte. Van separados porque un
   recorte (clip-path) se come la sombra del mismo elemento; en el marco, el
   drop-shadow sigue la silueta ya recortada, esquina doblada incluida. */
.exp-hoja-marco {
  transition: filter var(--dur-2) ease, transform var(--dur-2) var(--ease);
}
.exp-hoja {
  --pliegue: 22px;
  --pliegue-color: color-mix(in srgb, var(--line) 85%, var(--card));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  min-height: 172px;
  padding: 18px 18px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--pliegue)) 0, 100% var(--pliegue), 100% 100%, 0 100%);
  transition: border-color var(--dur-2) ease, background var(--dur-2) ease;
}
/* La esquina doblada: la solapa cae hacia abajo y a la izquierda. */
.exp-hoja::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--pliegue);
  height: var(--pliegue);
  border-bottom-left-radius: 5px;
  background: linear-gradient(225deg, transparent 50%, var(--pliegue-color) 50%);
  transition: background var(--dur-2) ease;
}
.exp-hoja:focus-visible { outline: 2px solid var(--tono); outline-offset: 2px; }

.exp-hoja-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  padding-right: 10px;
  font-size: 13.5px;
  font-weight: 640;
  line-height: 1.32;
  color: var(--ink);
}
.exp-hoja-detalle { font-size: 11.5px; line-height: 1.42; color: var(--muted); }

/* La que falta: punteada, como un hueco en la carpeta, y con la flecha de
   subir. Todo en ella dice "aquí va algo". */
.exp-papel.pendiente .exp-hoja {
  --pliegue-color: color-mix(in srgb, var(--tono) 16%, var(--card));
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted) 40%, transparent);
  background: color-mix(in srgb, var(--tono) 3%, var(--card));
}
.exp-hoja-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--tono);
  background: color-mix(in srgb, var(--tono) 12%, transparent);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) ease, background var(--dur-2) ease;
}
.exp-hoja-icono svg { width: 19px; height: 19px; }
.exp-hoja-pista {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
  transition: color var(--dur-2) ease;
}

.exp-papel.pendiente:hover .exp-hoja-marco { transform: translateY(-3px); filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--tono) 22%, transparent)); }
.exp-papel.pendiente:hover .exp-hoja { border-color: color-mix(in srgb, var(--tono) 60%, transparent); background: color-mix(in srgb, var(--tono) 7%, var(--card)); }
.exp-papel.pendiente:hover .exp-hoja-icono { transform: translateY(-3px); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--tono) 55%, transparent); }
.exp-papel.pendiente:hover .exp-hoja-pista { color: var(--tono); }

/* Con el archivo encima: la hoja deja de ser un hueco y se enciende entera.
   Es la confirmación de "suéltelo aquí", antes de soltar. */
.exp-papel.soltando .exp-hoja-marco { transform: translateY(-4px) scale(1.015); filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--tono) 38%, transparent)); }
.exp-papel.soltando .exp-hoja {
  --pliegue-color: color-mix(in srgb, var(--tono) 40%, var(--card));
  border-style: solid;
  border-color: var(--tono);
  background: color-mix(in srgb, var(--tono) 15%, var(--card));
}
.exp-papel.soltando .exp-hoja-icono {
  color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tono) 80%, #fff), var(--tono));
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--tono) 70%, transparent);
}
[data-theme="dark"] .exp-papel.soltando .exp-hoja-icono { color: #0b1220; }
.exp-papel.soltando .exp-hoja-pista { color: var(--tono); }

/* La que ya está: hoja entera, con su lavado de color arriba y el sello del
   turquesa de la casa, que en todas las carpetas quiere decir lo mismo. */
.exp-papel.firmado .exp-hoja {
  border-color: color-mix(in srgb, var(--tono) 26%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 9%, var(--card)), var(--card) 58%);
}
.exp-papel.firmado:hover .exp-hoja-marco { transform: translateY(-3px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .14)); }
.exp-papel.firmado:hover .exp-hoja { border-color: color-mix(in srgb, var(--tono) 50%, var(--line)); }

.exp-hoja-tipo {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.exp-hoja-tipo.pdf { color: #c0392b; background: color-mix(in srgb, #c0392b 12%, transparent); }
.exp-hoja-tipo.img { color: #0f7ddb; background: color-mix(in srgb, #0f7ddb 12%, transparent); }
.exp-hoja-tipo.doc { color: #5b4bd6; background: color-mix(in srgb, #5b4bd6 12%, transparent); }
[data-theme="dark"] .exp-hoja-tipo.pdf { color: #f4757f; background: color-mix(in srgb, #f4757f 16%, transparent); }
[data-theme="dark"] .exp-hoja-tipo.img { color: #7ab8f5; background: color-mix(in srgb, #7ab8f5 16%, transparent); }
[data-theme="dark"] .exp-hoja-tipo.doc { color: #b795ff; background: color-mix(in srgb, #b795ff 16%, transparent); }

.exp-hoja-sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--exp-luz);
}
.exp-hoja-sello svg { width: 15px; height: 15px; }

/* Lo de abajo de cada hoja. Quitar va apagado y aparece al acercarse: es lo
   que menos se usa y lo único que no se puede deshacer. */
.exp-papel-pie { display: flex; align-items: center; gap: 2px; min-height: 30px; padding: 0 2px; }
.exp-hoja-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.exp-hoja-link svg { width: 14px; height: 14px; }
.exp-hoja-link:hover { color: var(--ink); background: color-mix(in srgb, var(--tono) 10%, transparent); }
.exp-hoja-link:focus-visible { outline: 2px solid var(--tono); outline-offset: 1px; }
.exp-hoja-estado { padding: 5px 9px; font-size: 11.5px; font-weight: 600; color: var(--exp-rojo); }

.exp-hoja-quitar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2) ease, color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.exp-hoja-quitar svg { width: 15px; height: 15px; }
.exp-papel:hover .exp-hoja-quitar,
.exp-papel:focus-within .exp-hoja-quitar { opacity: 1; }
.exp-hoja-quitar:hover { color: var(--exp-rojo); background: color-mix(in srgb, var(--exp-rojo) 11%, transparent); }
.exp-hoja-quitar:focus-visible { opacity: 1; outline: 2px solid var(--exp-rojo); outline-offset: 1px; }
@media (hover: none) { .exp-hoja-quitar { opacity: 1; } }

/* ── La carpeta vacía ───────────────────────────────────────────────────── */
.exp-bandeja {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 46px 24px 48px;
  border: 1px dashed color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--tono) 3%, transparent);
  text-align: center;
}
.exp-bandeja-icono {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 6px;
  border-radius: 16px;
  color: var(--tono);
  background: color-mix(in srgb, var(--tono) 12%, transparent);
}
.exp-bandeja-icono svg { width: 24px; height: 24px; }
.exp-bandeja b { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.exp-bandeja p { margin: 0; max-width: 46ch; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ── Anchos angostos ──────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .exp-hojas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .exp-cabeza { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 16px; }
  .exp-mandos { grid-column: 1 / -1; }
}
/* Con la ventana angosta los cinco separadores no caben de a quinto: ruedan
   de lado, que se sigue leyendo, en vez de cortar "Liquidación" a "Liqui…". */
@media (max-width: 1060px) {
  .exp-separadores {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Cada separador del ancho de lo suyo, no de un quinto: con columnas fijas
       de 168 px el nombre se cortaba a "Person…" y "Vacaci…", que es justo lo
       que se quería evitar al dejarlos rodar de lado. */
    grid-auto-columns: max-content;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .exp-separadores::-webkit-scrollbar { display: none; }
  .exp-hojas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* El anillo va al lado de su cuenta y no solo en un renglón: separados, el
     "0 de 33" y el "0 %" parecían dos cosas distintas. */
  .exp-cabeza { grid-template-columns: minmax(0, 1fr) auto auto; padding: 18px; }
  .exp-avance { text-align: left; }
  .exp-carpeta { padding: 20px 18px 22px; }
  .exp-carpeta-cabeza { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .exp-cabeza { grid-template-columns: minmax(0, 1fr) auto; }
  .exp-quien { grid-column: 1 / -1; }
  .exp-hojas { grid-template-columns: minmax(0, 1fr); }
  .exp-hoja { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .exp-hojas.entra .exp-papel { animation: none; }
  .exp-hoja-marco, .exp-hoja-icono, .exp-separador { transition: none; }
}

/* ── Lo que oculta el buscador ────────────────────────────────────────────
   .exp-papel es flex, y un display propio le gana al [hidden] del navegador:
   sin esta regla el buscador marcaba las hojas como ocultas y seguían a la
   vista. */
.exp-papel[hidden],
.exp-sin-coincidencia[hidden] { display: none; }

/* ── El buscador de Aguinaldo ─────────────────────────────────────────────
   Va en el mismo sitio donde las otras carpetas tienen su escogedor de año o
   de período: es el mando de esta carpeta. */
.exp-buscar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 250px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--muted);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.exp-buscar svg { width: 16px; height: 16px; flex: 0 0 auto; }
.exp-buscar input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.exp-buscar input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.exp-buscar:focus-within {
  border-color: color-mix(in srgb, var(--tono) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 16%, transparent);
  color: var(--tono);
}

.exp-sin-coincidencia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 22px;
  border: 1px dashed color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
}
.exp-sin-coincidencia svg { width: 17px; height: 17px; }
.exp-sin-coincidencia b { color: var(--ink); font-weight: 650; }

/* ── El cajón "¿Qué documento es?" ────────────────────────────────────────
   Vive en el cajón, fuera del panel, así que no hereda --exp-luz: los colores
   van dichos aquí mismo para los dos temas. */
.exp-nombrar {
  --nom-luz: var(--teal);
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
[data-theme="dark"] .exp-nombrar { --nom-luz: #5fd8d0; }
.exp-nombrar-icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  color: var(--nom-luz);
  background: color-mix(in srgb, var(--nom-luz) 13%, transparent);
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--nom-luz) 60%, transparent);
}
.exp-nombrar-icono svg { width: 26px; height: 26px; }
.exp-nombrar h2 { margin: 2px 0 0; font-size: 19px; font-weight: 660; letter-spacing: -.015em; color: var(--ink); }
.exp-nombrar > p { margin: 0; max-width: 42ch; font-size: 13px; line-height: 1.55; color: var(--muted); }

.exp-nombrar-archivo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--muted) 6%, transparent);
  text-align: left;
}
.exp-nombrar-archivo b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.exp-nombrar-archivo small { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.exp-nombrar-campo {
  display: grid;
  gap: 7px;
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--muted);
}
.exp-nombrar-campo input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0;
  outline: 0;
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
[data-theme="dark"] .exp-nombrar-campo input { background: #121824; }
.exp-nombrar-campo input:focus {
  border-color: var(--nom-luz);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nom-luz) 18%, transparent);
}
.exp-nombrar-aviso { justify-self: start; margin: -4px 0 0; font-size: 12px; font-weight: 600; color: #c0392b; }
[data-theme="dark"] .exp-nombrar-aviso { color: #f0938c; }
.exp-nombrar-aviso[hidden] { display: none; }

.exp-nombrar-sugerencias { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.exp-sugerencia {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.exp-sugerencia:hover,
.exp-sugerencia:focus-visible {
  color: var(--nom-luz);
  border-color: color-mix(in srgb, var(--nom-luz) 50%, transparent);
  background: color-mix(in srgb, var(--nom-luz) 9%, transparent);
  outline: 0;
}
.exp-nombrar .drawer-actions { width: 100%; margin-top: 6px; }

@media (max-width: 900px) {
  .exp-buscar { width: 100%; }
}

/* Los dos cajones chicos de Expedientes, del ancho de lo suyo. Con el ancho
   de cajón de siempre —760 px— el de "¿Qué documento es?" dejaba 150 px de
   marco vacío a cada lado de un formulario de 480: se veía estirado, que es lo
   que ya se corrigió en el de confirmar el aguinaldo. */
.drawer[data-cajon="expediente-nombrar"],
.drawer[data-cajon="expediente-quitar"] { width: min(560px, 94vw); }