/* ═══════════════════════════════════════════════════════════════
   KW Premier - estilos compartidos
   ═══════════════════════════════════════════════════════════════
   Reglas que se repiten en (casi) todas las páginas del sitio:
   colores, botones, modales, header/footer, campos de formulario,
   insignias de rol. Para usarlo en una página:

     <link rel="stylesheet" href="/assets/css/kw-base.css">

   Un solo cambio aquí se refleja en toda página que lo enlace - no
   hace falta editar documento por documento.

   Lo que SÍ debe seguir viviendo dentro de cada página (no aquí):
   estilos específicos de esa página o ese documento en particular
   (por ejemplo el diseño de las hojas tamaño carta de los acuerdos,
   o el layout propio de una vista de lista/directorio).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
/* Con su propia version: sin ella, kw-ui.css se quedaba en el cache
   del navegador aunque kw-base.css se volviera a bajar. */
@import url('kw-ui.css?v=20260905a');

/* Los colores viven aquí; las medidas y los componentes, en kw-ui.css. */
:root {
  --red: #8a0000;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --bg: /* Formas oscuras encima: tapan tramos de los filos, y ese tapado es
         lo que hace que una onda se vea pasando por delante de otra. */
      radial-gradient(68% 96% at 13% 26%, rgba(8,0,3,0.94) 0%, rgba(8,0,3,0.55) 44%, transparent 72%),
      radial-gradient(58% 85% at 94% 64%, rgba(8,0,3,0.90) 0%, rgba(8,0,3,0.45) 42%, transparent 70%),
      /* Filos luminosos: de cada elipse enorme solo se asoma un tramo del
         borde, y ese arco es el que dibuja el pliegue. El hilo claro va
         angosto y el resplandor ancho, para que se lea como luz pegandole
         al canto de la onda y no como una linea pintada.
         Los tamanos van en porcentaje del propio recuadro y no en vmax:
         asi la composicion se ve igual de proporcionada en la pantalla
         ancha del escritorio que en la alta del celular; con vmax los
         arcos se salian por abajo en vertical. */
      radial-gradient(170% 178% at 62% -72%,
        rgba(120,10,35,0.20) 0%, rgba(70,5,22,0.09) 46%,
        rgba(255,95,120,0) 57.4%, rgba(255,150,170,0.52) 59.5%,
        rgba(255,105,135,0.26) 60.3%, rgba(255,60,95,0.09) 63%, transparent 73%),
      radial-gradient(106% 171% at 72% 126%,
        rgba(120,10,35,0.20) 0%, rgba(70,5,22,0.09) 45%,
        rgba(255,95,120,0) 56.8%, rgba(255,145,165,0.48) 58.9%,
        rgba(255,100,130,0.24) 59.7%, rgba(255,55,90,0.09) 62.5%, transparent 72%),
      radial-gradient(96% 128% at -22% 76%,
        rgba(110,9,32,0.17) 0%, rgba(65,4,20,0.08) 44%,
        rgba(255,95,120,0) 56.2%, rgba(255,140,160,0.40) 58.4%,
        rgba(255,95,125,0.20) 59.2%, rgba(255,50,85,0.08) 62%, transparent 71%),
      /* Resplandor de ambiente, para que los filos no floten en negro seco */
      radial-gradient(95% 133% at 30% 4%, rgba(140,10,38,0.28), transparent 64%),
      radial-gradient(88% 139% at 80% 98%, rgba(95,0,26,0.36), transparent 62%),
      linear-gradient(165deg, #1c0209 0%, #120106 46%, #080003 100%);
  --card: #ffffff;
  --border: rgba(0,0,0,0.07);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* El hueco de la barra de desplazamiento se reserva SIEMPRE, haya o no
   barra. Sin esto, cualquier pantalla que crezca o se encoja (buscar en
   una lista y quedarse sin resultados, abrir un filtro, cargar datos)
   hace aparecer o desaparecer la barra, y al cambiar el ancho útil se
   recorre TODO el contenido unos pixeles de lado: se ve como un
   brinquito de la página entera.

   Solo reserva espacio donde la barra de verdad ocupa ancho (Windows,
   Linux). En Mac y celular, donde la barra flota encima, esto no cambia
   nada. */
html {
  /* Los paneles que entran por un lado esperan estacionados fuera de la
     pantalla, y ahí alargan el área que se puede recorrer: aparecía una
     barra horizontal y la página se podía arrastrar de lado hasta el
     panel escondido. Se recorta.

     Va `clip` y no `hidden` a propósito: `hidden` convierte al elemento
     en un contenedor con scroll propio, y eso rompe todo lo que va
     pegajoso adentro (los encabezados de tabla, sin ir más lejos).
     `clip` solo recorta. */
  overflow-x: clip;
  scrollbar-gutter: stable;
  /* El deslizón horizontal es para abrir los paneles laterales, no para
     irse de la página: sin esto el navegador lo toma como "atrás". */
  overscroll-behavior-x: contain;
}

html, body {
  font-family: 'Poppins', Arial, sans-serif;
  letter-spacing: -0.01em;
}
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Campo trampa para robots: se llena solo si quien envía el formulario no
   es una persona, así que tiene que quedar fuera de la pantalla y fuera del
   recorrido con Tab. Sin esta regla se ve como una caja de texto suelta, y
   lo que escriba ahí alguien de verdad hace que su envío se descarte. */
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* ── Header / logo ── */
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 40px; width: auto; display: block; }

/* Botón de regresar: sin borde ni fondo - solo texto e ícono, que
   cambian de color al presionarse. */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  text-decoration: none; padding: 8px 10px;
  border: none; background: none; cursor: pointer;
  transition: color 0.15s, transform 0.12s;
}
.back-btn:hover { color: var(--text); }
.back-btn:active { color: var(--red); transform: scale(0.94); }
.back-btn svg { flex-shrink: 0; }
/* Dentro del header va en la punta contraria a la hamburguesa. Con margen
   automático y no confiando en que sea el último hijo: drawer.js le cuelga
   después el campo de búsqueda, que en reposo no se ve pero sí cuenta para
   la regla de :last-child de más abajo. */
header.kw-header .back-btn { margin-left: auto; }

/* Título compacto dentro del header, solo visible en móvil - ahí se
   esconde el bloque de título de la página (eyebrow + h1 + desc) para
   no repetir el mismo texto dos veces y ganar espacio en pantalla.
   Uso: <span class="kw-header-title">Acuerdos y contratos</span>
   entre el hueco que deja drawer.js (hamburguesa) y el back-btn. */
.kw-header-title {
  display: none;
  flex: 1; min-width: 0;
  text-align: center;
  font-size: 14.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 8px;
}
@media (max-width: 640px) {
  .kw-header-title { display: block; }
}

/* ── Header compartido (páginas migradas: <header class="kw-header">) ──
   Barra fija translúcida con blur; en lugar de un borde duro, un
   degradado la funde con el contenido. Al hacer scroll hacia abajo,
   drawer.js le pone .kw-header-oculto: en celular la cápsula entera se
   va hacia arriba y vuelve al subir; en escritorio se queda fija.
   El contenido de cada página debe dejar ~72px libres arriba. */
header.kw-header {
  position: fixed; top: 10px; left: 12px; right: 12px; z-index: 90;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; min-height: 52px;
  /* Cápsula flotante en vez de una barra pegada de orilla a orilla:
     las esquinas redondas del todo y el aire alrededor son lo que la
     hacen leer como una pastilla de vidrio encima del contenido. */
  border-radius: 999px;
  /* El mismo vidrio que las tarjetas: antes iba mas solido y se veia
     como una barra blanca encima, no como vidrio. */
  background: radial-gradient(62% 48% at 16% 98%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.34) 42%, rgba(255,255,255,0) 74%), radial-gradient(70% 50% at 90% 2%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 66%), linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.66) 100%);
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38);
  transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
}
/* ── Cuando hay botones de acción, el header se parte en dos ──
   drawer.js le pone .kw-header-partido y arma dentro una .kw-header-capsula
   con lo de navegar y un grupo .kw-header-sueltos con los atajos (Perfil,
   campanita, Panel). El <header> deja entonces de ser la cápsula: pasa a
   ser nada más el renglón que acomoda las dos piezas. */
header.kw-header-partido {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0;
  gap: 10px;
}
/* Los selectores llevan el header adelante a propósito: varias páginas
   traen su propio estilo para estos botones (por ejemplo .btn-admin-header
   en el Portal) en un <style> que carga DESPUÉS de esta hoja, y con la
   misma especificidad les ganaría. */
header.kw-header .kw-header-capsula,
header.kw-header .kw-header-sueltos > *:not(#notif-bell-slot) {
  border-radius: 999px;
  background: radial-gradient(62% 48% at 16% 98%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.34) 42%, rgba(255,255,255,0) 74%), radial-gradient(70% 50% at 90% 2%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 66%), linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.66) 100%);
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38);
}
header.kw-header .kw-header-capsula {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; min-height: 52px;
}
/* Los atajos (la campanita) van pegados a la orilla derecha, siempre.
   Antes los empujaba la cápsula, que se estiraba a todo lo ancho; en
   cuanto una pantalla la deja medir lo suyo, la campanita se venía con
   ella hasta media pantalla. Pegarla aquí la deja quieta sin depender de
   lo que hagan las demás piezas del renglón. */
header.kw-header .kw-header-sueltos {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin-left: auto;
}
/* Cada atajo es su propia pastilla, del mismo alto que la cápsula para
   que los dos queden alineados. */
header.kw-header .kw-header-sueltos > * {
  display: flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 18px;
  color: var(--red); text-decoration: none;
  font-size: 12.5px; font-weight: 700;
  transition: box-shadow 0.15s;
}
/* La campanita va suelta, sin pastilla: una campana ya se lee como botón
   por sí sola, y metida en un círculo pesaba lo mismo que el resto del
   header sin ser igual de importante. Conserva su ancho para que el
   desplegable siga colgando de donde debe. */
header.kw-header .kw-header-sueltos > #notif-bell-slot {
  padding: 0; width: 44px;
  background: none; border: 0; box-shadow: none; backdrop-filter: none;
}
header.kw-header .kw-header-sueltos > #notif-bell-slot:hover { box-shadow: none; }
header.kw-header .kw-header-sueltos > * .notif-bell-btn {
  position: relative;
  background: none; border: none; box-shadow: none;
  width: 100%; height: 100%; color: var(--red);
}
/* El SVG no traía tamaño propio: sin esta regla el navegador lo dibuja a
   su tamaño por defecto (bastante más grande que la pastilla de 52px que
   lo contiene), así que sale enorme y recortado. */
header.kw-header .kw-header-sueltos > * .notif-bell-btn svg { width: 21px; height: 21px; }
header.kw-header .kw-header-sueltos > *:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 30px rgba(0,0,0,0.26);
}
header.kw-header .kw-header-sueltos > * .notif-bell-btn {
  color: var(--muted); transition: color var(--t-rapido);
}
header.kw-header .kw-header-sueltos > * .notif-bell-btn:hover {
  background: none; transform: none; color: var(--red);
}

/* La campana vive en el renglón del título en todas las pantallas del
   Hub. Estas reglas también cubren las vistas antiguas cuyo encabezado se
   completa desde drawer.js y que todavía no cargan la pieza de kw-ui. */
.kw-acciones-universales {
  display: flex; align-items: center; gap: 12px;
}
.kw-acciones-universales > .kw-page-acciones {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; margin-left: auto;
}

@media (max-width: 640px) {
  /* En celular el texto de los atajos sobra: con el ícono basta, y así
     la cápsula de al lado se queda con el ancho que necesita. */
  header.kw-header .kw-header-sueltos > * span:not(.notif-bell-badge) { display: none; }
  header.kw-header .kw-header-sueltos > * { padding: 0; width: 52px; }
}

/* ── Esconderse al bajar: solo en celular ──
   La cápsula entera se va hacia arriba (con sus botones adentro, no
   nada más el fondo) y vuelve completa al subir. Se mueve con
   transform y no con top, porque transform lo resuelve la GPU y no
   obliga a recalcular el acomodo de la página en cada cuadro.

   En escritorio no se esconde: ahí sobra alto de pantalla y perder el
   Atrás y el menú mientras se lee estorba más de lo que ayuda. Como el
   ocultarse vive dentro de este @media, en pantalla grande la clase
   que pone drawer.js simplemente no hace nada. */
@media (max-width: 900px) {
  header.kw-header {
    transition: transform 0.28s var(--curva-salida), opacity 0.22s var(--curva),
                background 0.25s, box-shadow 0.25s, border-color 0.25s;
  }
  header.kw-header.kw-header-oculto {
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
  }
}

.btn-volver {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.4); border-radius: 10px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  padding: 8px 14px; font-size: 12px; font-weight: 700;
  color: #555; cursor: pointer;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 3px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  transition: background 0.15s, box-shadow 0.12s, transform 0.12s;
}
.btn-volver:hover { background: #ececec; }
.btn-volver:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset, 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Footer con redes sociales ── */
footer { display: flex; justify-content: center; gap: 10px; padding: 24px 20px; }
.footer-social {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.footer-social:hover { background: #ffe0e0; color: var(--red); transform: translateY(-2px); }
.footer-social svg { width: 15px; height: 15px; fill: currentColor; }

/* ── Botones ──
   Estilo "con profundidad": relieve suave hacia afuera en reposo, y
   se hunden (sombra hacia adentro + se achican un poco) al presionarlos. */
.btn-download {
  flex: 0 0 130px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  padding: 10px 8px; font-size: 12px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 3px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.12s, transform 0.12s;
}
.btn-download:hover { background: #ececec; }
.btn-download:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset, 0 1px 2px rgba(0,0,0,0.04);
}
.btn-outline-red { border-color: var(--red); color: var(--red); }
.btn-outline-green { border-color: #1f6d2e; color: #1f6d2e; }
.btn-outline-purple { border-color: var(--red); color: var(--red); }
.btn-outline-blue { border-color: var(--red); color: var(--red); }

.btn-guardar {
  background: radial-gradient(70% 90% at 18% 104%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 66%), linear-gradient(150deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 100%);
  color: var(--red);
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%); border: none; border-radius: 10px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38), 0 6px 20px rgba(0,0,0,0.18);
  transition: filter 0.15s, box-shadow 0.12s, transform 0.12s;
}
.btn-guardar:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 24px rgba(0,0,0,0.24); }
.btn-guardar:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}
.btn-guardar:disabled { opacity: 0.6; cursor: default; }

.btn-nuevo-documento {
  background: radial-gradient(70% 90% at 18% 104%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 66%), linear-gradient(150deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 100%);
  color: var(--red);
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%); border: none; border-radius: 40px;
  padding: 11px 18px; font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38), 0 6px 20px rgba(0,0,0,0.18);
  transition: filter 0.18s, box-shadow 0.12s, transform 0.12s;
  white-space: nowrap;
}
.btn-nuevo-documento:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 24px rgba(0,0,0,0.24); }
.btn-nuevo-documento:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}

/* ── Modales de confirmación (nombre, finalizar, copia, eliminar, etc.) ── */
/* Los modales se prenden y apagan con style.display en cada página, así
   que la animación de entrada va como animation (arranca sola en cuanto
   el elemento se muestra) y no como transition. La de salida la pone
   kwUI.cerrarModal(), que espera a que termine antes de esconderlo. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: kw-modal-fondo var(--t-medio) var(--curva) both;
}
.modal-box {
  background: linear-gradient(150deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.9) 45%, rgba(255,255,255,0.86) 100%); border-radius: 14px; padding: 24px;
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  width: 100%; max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38);
  animation: kw-modal-caja var(--t-medio) var(--curva-salida) both;
}
.modal-overlay.cerrando { animation: kw-modal-fondo var(--t-rapido) var(--curva) reverse both; }
.modal-overlay.cerrando .modal-box { animation: kw-modal-caja var(--t-rapido) var(--curva) reverse both; }
@keyframes kw-modal-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes kw-modal-caja {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-box,
  .modal-overlay.cerrando, .modal-overlay.cerrando .modal-box { animation-duration: 0.01ms; }
}
.modal-box h3 { font-size: 17px; margin-bottom: 4px; }
.modal-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
/* El mensaje de kwUI.alert()/kwUI.confirm(): a diferencia del subtítulo
   de arriba, aquí el texto ES el contenido, así que va de tamaño normal
   y con el color de texto de siempre, no apagado. "pre-line" respeta
   los \n que trae el mensaje (los mismos que antes leía alert() nativo). */
.kw-aviso-msg { font-size: 14px; color: var(--text); line-height: 1.5; white-space: pre-line; margin: 0; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.btn-modal-cancelar, .btn-modal-confirmar {
  flex: 1; padding: 10px; border-radius: 30px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; border: none;
  transition: box-shadow 0.12s, transform 0.12s, filter 0.15s;
}
.btn-modal-cancelar {
  background: #f2f2f2; color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 2px 6px rgba(0,0,0,0.08);
}
.btn-modal-cancelar:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
}
.btn-modal-confirmar {
  background: radial-gradient(70% 90% at 18% 104%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 66%), linear-gradient(150deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 100%);
  color: var(--red);
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38), 0 6px 20px rgba(0,0,0,0.18);
}
.btn-modal-confirmar:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 24px rgba(0,0,0,0.24); }
.btn-modal-confirmar:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}
/* Deshabilitado se ve apagado de verdad, no solo "más tenue": con
   opacity 0.6 el rojo seguía leyéndose como botón listo para picar. */
.btn-modal-confirmar:disabled {
  background: #e2e2e0; color: #999; box-shadow: none;
  cursor: default; transform: none; filter: none;
}
/* Mientras manda, el botón se queda activo de color pero sin permitir
   otro clic: apagarlo a media petición se lee como que algo falló. */
.btn-modal-confirmar.enviando:disabled {
  background: radial-gradient(70% 90% at 18% 104%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 66%), linear-gradient(150deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 100%);
  color: var(--red);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38), 0 6px 20px rgba(0,0,0,0.18);
}
.btn-modal-confirmar.enviado:disabled {
  background: #1a7a1a; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 14px rgba(26,122,26,0.3);
}
.btn-modal-confirmar .kw-btn-cont {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.kw-btn-spinner {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid rgba(138,0,0,0.25); border-top-color: #fff;
  border-radius: 50%;
  animation: kw-girar 0.6s linear infinite;
}
@keyframes kw-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kw-btn-spinner { animation-duration: 2s; } }

/* Campo obligatorio: el asterisco avisa antes de picarle a Enviar por
   qué el botón está apagado. */
.field.requerido > label::after { content: ' *'; color: var(--red); }

/* ── Campos de formulario (perfil, listas, etc.) ── */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 11.5px; font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--red); margin-bottom: 5px;
}

/* Los formularios muestran sus etiquetas con capitalización natural.
   El !important también neutraliza reglas locales antiguas que las
   convertían visualmente a mayúsculas. */
form label,
.campo > label,
.campo-form > label,
.kw-campo-filtro > label,
.kw-campo-rango > label,
.dic-campo > label {
  text-transform: none !important;
  letter-spacing: normal !important;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 13.5px; font-family: inherit;
  color: var(--text); background: #fff; outline: none;
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(138,0,0,0.08);
}
.field input:disabled { background: #f4f4f4; color: var(--muted); }

/* Contraseña con ojito para mostrarla/ocultarla. */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 40px; }
.password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 4px; display: flex; align-items: center; justify-content: center;
}
.password-toggle:hover { color: var(--text); }

/* Campo con ícono adentro (para los enlaces de redes en Mi Perfil). */
.campo-icono { position: relative; }
.campo-icono svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted);
  fill: currentColor; pointer-events: none;
}
.campo-icono svg.sin-relleno { fill: none; stroke: currentColor; stroke-width: 2; }
.campo-icono input { padding-left: 37px; }

/* ── Íconos de redes en tarjetas de personas y micrositio ──
   Al pasar el cursor, cada ícono toma el color de su propia red. */
.persona-red {
  width: 28px; height: 28px; border-radius: 50%;
  background: #f5f5f5; color: #888;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.persona-red:hover { transform: translateY(-2px); }
.persona-red svg { width: 13px; height: 13px; fill: currentColor; }
.persona-red svg.sin-relleno { fill: none; stroke: currentColor; stroke-width: 2; }
.red-sitio:hover { color: var(--red); background: #ffecec; }
.red-whatsapp:hover { color: #25D366; background: #e9fbef; }
.red-instagram:hover { color: #E1306C; background: #fdecf3; }
.red-facebook:hover { color: #1877F2; background: #e9f2fe; }
.red-tiktok:hover { color: #000; background: #e8e8e8; }
.red-linkedin:hover { color: #0A66C2; background: #e8f1fa; }

/* ── Animación de carga (aros concéntricos girando en rojo KW) ──
   Uso: <div class="kw-loader"><div class="circle uno"></div><div class="circle dos"></div>
        <div class="circle tres"></div></div> */
.kw-loader {
  display: flex; justify-content: center; align-items: center;
  min-height: 30vh;
  padding: 22px 0;
  width: 100%;
  grid-column: 1 / -1;
  position: relative;
}
.kw-loader .circle {
  position: absolute; top: 50%; left: 50%;
  border: 2.5px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: kw-rotar linear infinite;
}
.kw-loader .circle.uno { width: 28px; height: 28px; margin: -14px 0 0 -14px; animation-duration: 0.85s; }
.kw-loader .circle.dos { width: 42px; height: 42px; margin: -21px 0 0 -21px; animation-duration: 0.95s; }
.kw-loader .circle.tres { width: 56px; height: 56px; margin: -28px 0 0 -28px; animation-duration: 1.05s; }
@keyframes kw-rotar {
  from { transform: rotateZ(360deg); }
  to { transform: rotateZ(0deg); }
}

/* ── Skeleton screens (placeholders que laten mientras carga contenido
   real, para listas de tarjetas - documentos guardados, incidencias, etc.)
   Uso: un contenedor con .kw-skel-line / .kw-skel-circle dentro de la
   misma estructura de la tarjeta real (ej. .lista-item), con clases de
   ancho .kw-skel-w40/50/60/70/80/100 y .kw-skel-sm para líneas delgadas. ── */
.kw-skel {
  background: linear-gradient(90deg, #ececec 25%, #f6f6f6 37%, #ececec 63%);
  background-size: 400px 100%;
  animation: kw-skel-pulso 1.4s ease-in-out infinite;
  border-radius: 7px;
  pointer-events: none;
}
@keyframes kw-skel-pulso {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.kw-skel-line { height: 13px; }
.kw-skel-line.kw-skel-sm { height: 9px; }
.kw-skel-circle { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.kw-skel-w30 { width: 30%; }
.kw-skel-w40 { width: 40%; }
.kw-skel-w50 { width: 50%; }
.kw-skel-w60 { width: 60%; }
.kw-skel-w70 { width: 70%; }
.kw-skel-w80 { width: 80%; }
.kw-skel-w100 { width: 100%; }

/* ── Aparición animada de elementos (tarjetas de listas al cargar) ──
   Uso: agregar .kw-aparece al elemento recién insertado, opcionalmente
   con style="animation-delay: Nms" para escalonar varios en secuencia. */
@keyframes kw-aparece {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* backwards y no both: el estado final de la animación es exactamente el
   natural (opacity 1, sin desplazar), así que "both" no aportaba nada y
   en cambio dejaba un transform pegado para siempre. Un transform, aunque
   sea el de identidad, convierte al elemento en el marco de referencia de
   todo lo que tenga dentro con position:fixed - y ahí un botón flotante
   deja de estar fijo a la pantalla y se va con el scroll. */
.kw-aparece { animation: kw-aparece 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes kw-aparece-fade { from { opacity: 0; } to { opacity: 1; } }
.kw-aparece-fila { animation: kw-aparece-fade 0.4s ease both; }

/* ── Aparición escalonada al entrar a una página ──
   Puramente CSS (sin JS) para que no haya parpadeo: al ser parte de la
   hoja de estilos, el estado inicial ya aplica desde el primer pintado.
   Los bloques principales del contenido (título, tarjetas, secciones)
   entran uno tras otro; si el bloque es una cuadrícula de tarjetas
   (.cards-grid, .grid o la agenda del calendario) cada tarjeta se anima
   por separado. .split/.calendar-col cubren el layout del calendario. */
main > :not(.cards-grid):not(.grid),
.page > :not(.cards-grid):not(.grid),
.split > *,
.calendar-col > *,
.cards-grid > *,
.grid > *,
#agenda-container > * {
  /* backwards, no both: ver la nota de .kw-aparece. Con "both" cada
     bloque de la página se quedaba con un transform puesto y cualquier
     botón flotante de adentro dejaba de estar fijo a la pantalla. */
  animation: kw-aparece 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
main > :not(.cards-grid):not(.grid):nth-child(2), .page > :not(.cards-grid):not(.grid):nth-child(2), .split > *:nth-child(2), .calendar-col > *:nth-child(2), .cards-grid > *:nth-child(2), .grid > *:nth-child(2), #agenda-container > *:nth-child(2) { animation-delay: 90ms; }
main > :not(.cards-grid):not(.grid):nth-child(3), .page > :not(.cards-grid):not(.grid):nth-child(3), .split > *:nth-child(3), .calendar-col > *:nth-child(3), .cards-grid > *:nth-child(3), .grid > *:nth-child(3), #agenda-container > *:nth-child(3) { animation-delay: 180ms; }
main > :not(.cards-grid):not(.grid):nth-child(4), .page > :not(.cards-grid):not(.grid):nth-child(4), .split > *:nth-child(4), .calendar-col > *:nth-child(4), .cards-grid > *:nth-child(4), .grid > *:nth-child(4), #agenda-container > *:nth-child(4) { animation-delay: 270ms; }
main > :not(.cards-grid):not(.grid):nth-child(5), .page > :not(.cards-grid):not(.grid):nth-child(5), .split > *:nth-child(5), .calendar-col > *:nth-child(5), .cards-grid > *:nth-child(5), .grid > *:nth-child(5), #agenda-container > *:nth-child(5) { animation-delay: 360ms; }
main > :not(.cards-grid):not(.grid):nth-child(6), .page > :not(.cards-grid):not(.grid):nth-child(6), .split > *:nth-child(6), .calendar-col > *:nth-child(6), .cards-grid > *:nth-child(6), .grid > *:nth-child(6), #agenda-container > *:nth-child(6) { animation-delay: 450ms; }
main > :not(.cards-grid):not(.grid):nth-child(n+7), .page > :not(.cards-grid):not(.grid):nth-child(n+7), .split > *:nth-child(n+7), .calendar-col > *:nth-child(n+7), .cards-grid > *:nth-child(n+7), .grid > *:nth-child(n+7), #agenda-container > *:nth-child(n+7) { animation-delay: 500ms; }

/* ── Mensajes de estado (éxito / error) ── */
.msg {
  font-size: 13px; padding: 10px 12px; border-radius: 10px;
  margin-top: 12px; display: none;
}
.msg.error { display: block; background: #fdeaea; color: #a30000; }
.msg.ok { display: block; background: #eaf7ea; color: #1a7a1a; }

/* ── Rol ──
   Sin pastilla: el rol es un dato, no algo que se pique, y encima del
   vidrio la pastilla se veía como un parche. Queda el puro texto con
   su color. */
.rol-badge {
  display: inline-block;
  font-size: 12px; font-weight: 700; text-transform: capitalize;
  letter-spacing: 0.01em;
}
/* Los cuatro roles se distinguen por qué tan hondo va el vino, no por
   colores distintos: así no aparecen morados y azules sueltos en medio
   de una plataforma que es toda de un color. */
.rol-master { color: #6b0000; }
.rol-admin { color: #8a0000; }
.rol-staff { color: #a83232; }
.rol-asociado { color: #495057; }

/* ── Tarjetas con relleno de color al pasar el cursor ──
   Uso: <a class="hover-card" style="--card-color: var(--red);">
          <div class="hover-card-icon" style="background:#E7F5FF;"><svg style="color:#1971c2;">...</svg></div>
          <div class="hover-card-title">Título</div>
          <div class="hover-card-desc">Descripción breve.</div>
          <div class="hover-card-arrow"><svg>flecha</svg></div>
        </a>
   --card-color es el color propio de cada tarjeta: tiñe su ícono y su
   flecha, no la tarjeta entera. Al pasar el cursor la tarjeta no se
   llena de color: el vidrio se aclara casi a blanco y se levanta, como
   una lámina de cristal que se acerca. */
.hover-card {
  position: relative;
  overflow: hidden;
  background: radial-gradient(62% 48% at 16% 98%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.34) 42%, rgba(255,255,255,0) 74%), radial-gradient(70% 50% at 90% 2%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 66%), linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.66) 100%);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38);
  padding: 28px 24px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.18s, transform 0.18s;
}
.hover-card:hover {
  background: linear-gradient(150deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 45%, rgba(255,255,255,0.96) 100%);
  border-color: rgba(255,255,255,0.85);
  box-shadow: 0 16px 38px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.9);
  transform: translateY(-3px);
}
.hover-card:active { transform: translateY(0) scale(0.97); }

.hover-card-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; flex-shrink: 0;
  transition: background 0.2s;
}
.hover-card-icon svg { width: 22px; height: 22px; transition: color 0.2s; }
/* El ícono es lo único que se llena de color al pasar el cursor: queda
   como el cuadrito oscuro de la tarjeta activa del ejemplo. */
.hover-card:hover .hover-card-icon { background: var(--card-color, var(--red)); }
.hover-card:hover .hover-card-icon svg { color: #fff; }

.hover-card-title {
  font-size: 17px; font-weight: 700; color: var(--text);
  margin-bottom: 8px; letter-spacing: -0.2px; transition: color 0.2s;
}

.hover-card-desc {
  font-size: 13px; color: var(--muted); line-height: 1.6; flex: 1;
  transition: color 0.2s;
  /* Hueco para la flecha, que va encimada en la esquina de abajo a la
     derecha. Sin esto, la descripción más larga del tablero le pasaba
     por debajo y el último renglón quedaba tapado. */
  padding-right: 44px;
}

.hover-card-arrow {
  position: absolute; right: 20px; bottom: 20px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-color, var(--red)); color: #fff;
  opacity: 0; transform: translate(-6px, 6px);
  transition: opacity 0.2s, transform 0.2s;
}
.hover-card-arrow svg { width: 16px; height: 16px; }
.hover-card:hover .hover-card-arrow { opacity: 1; transform: translate(0, 0); }

/* ── Menú lateral (hamburguesa) ──
   Inyectado por /assets/js/drawer.js - ver ese archivo para el uso. */
/* Ícono de hamburguesa: sin fondo ni borde - solo las tres rayas, que
   cambian de color al presionarse. */
.hamburger-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; box-shadow: none;
  cursor: pointer; color: var(--text);
  transition: color 0.15s, transform 0.12s;
}
/* Páginas sin <header> (por ejemplo index.html): flotante fijo. */
.hamburger-btn.fijo { position: fixed; top: 14px; left: 12px; z-index: 150; }
.hamburger-btn:active { color: var(--red); transform: scale(0.88); }
.hamburger-btn svg { width: 22px; height: 22px; }
/* La lupa comparte estilo con la hamburguesa (misma clase) y vive justo
   a su derecha; en páginas sin <header> también flota fijo, corrido lo
   justo para no encimarse con ella. */
.hamburger-btn.fijo-buscar { left: 54px; }

/* ── Buscador del sitio (lupa junto al menú) ──
   Ya no abre un panel aparte: al picar la lupa, la propia cápsula del
   header se estira y se escribe ahí mismo. Lo que estorba (el título,
   el Atrás) se hace a un lado mientras dura la búsqueda.

   En las páginas que ya traen su propio buscador (Drive, el ABC
   Tracker, las listas de documentos), drawer.js esconde ese campo y le
   pasa a la página lo que se escriba aquí: así hay una sola lupa en
   pantalla y sigue filtrando lo mismo que antes. */
.kw-buscar-campo-inline {
  flex: 1; min-width: 0;
  display: none;
  border: none; outline: none; background: none;
  font-family: inherit; font-size: 15px; color: var(--text);
}
.kw-buscar-cerrar-inline {
  display: none;
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.06); color: var(--muted); cursor: pointer;
  align-items: center; justify-content: center;
}
.kw-buscar-cerrar-inline:hover { background: rgba(0,0,0,0.12); color: var(--text); }
.kw-buscar-cerrar-inline svg { width: 13px; height: 13px; }

/* Mientras se busca: sale el campo y se esconde todo lo demás de la
   cápsula, menos la lupa (que ahora cierra) y el propio campo. */
header.kw-buscando .kw-buscar-campo-inline { display: block; }
header.kw-buscando .kw-buscar-cerrar-inline { display: flex; }
header.kw-buscando .kw-header-title,
header.kw-buscando .back-btn,
header.kw-buscando .kw-header-sueltos,
header.kw-buscando .hamburger-btn:not(.kw-buscar-btn) { display: none; }

/* Los resultados cuelgan de la cápsula. */
.kw-buscar-resultados-inline {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  max-height: min(60vh, 420px); overflow-y: auto;
  padding: 6px; z-index: 95;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 16px 44px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38);
}
.kw-buscar-resultados-inline[hidden] { display: none; }

/* "Sin resultados" es un renglón, no una pantalla: con 26px arriba y
   abajo salía un recuadro enorme para siete palabras. */
.kw-buscar-vacio { padding: 13px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.kw-buscar-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-radius: 11px;
  text-decoration: none; color: var(--text);
  transition: background 0.15s;
}
.kw-buscar-item:hover { background: rgba(138,0,0,0.07); }
.kw-buscar-item-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Un renglón por resultado, cortado con puntos. Los nombres largos de
   Drive se partían en dos y tres líneas, y seis resultados llenaban la
   lista entera. */
.kw-buscar-item-label {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kw-buscar-item-cat { font-size: 11px; color: var(--muted); line-height: 1.3; }
.kw-buscar-item > svg { width: 15px; height: 15px; color: #c9c9c9; flex-shrink: 0; }
.kw-buscar-item:hover > svg { color: var(--red); }

/* El buscador propio de la página se esconde: su trabajo lo hace ahora
   la lupa del header, y tener dos lupas en pantalla confundía. */
.kw-buscador-local-oculto { display: none !important; }

/* Con el botón insertado como primer hijo del header, el último hijo
   (back-btn, grupo de la derecha, etc.) se recorre al extremo derecho. */
header > *:last-child { margin-left: auto; }

.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200;
  /* Un desenfoque leve detrás del velo: es lo que hace que el panel se
     lea como vidrio y no como una hoja blanca encima de la página. */
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

/* El mismo vidrio que las tarjetas y la cápsula del header: flota con
   aire alrededor (no pegado de orilla a orilla) para que el canto se
   alcance a ver, que es la mitad del efecto. */
.drawer {
  position: fixed; top: 10px; left: 12px; bottom: 10px;
  width: var(--panel-ancho, 280px); max-width: 82vw;
  z-index: 201; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(62% 48% at 16% 98%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.34) 42%, rgba(255,255,255,0) 74%),
    radial-gradient(70% 50% at 90% 2%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 66%),
    linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.66) 100%);
  border: 1px solid rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow: 0 18px 48px rgba(0,0,0,0.34),
              inset 0 1px 0 rgba(255,255,255,0.95),
              inset 0 -1px 0 rgba(255,255,255,0.30),
              inset 1px 0 0 rgba(255,255,255,0.38);
  /* Se sale un poco de mas que su ancho, porque ya no arranca pegado a
     la orilla: con -100% se quedaba asomando la franja del margen. */
  transform: translateX(calc(-100% - 16px));
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  padding: 18px 20px; border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-header img { height: 32px; width: auto; display: block; }
/* La hamburguesa que vive dentro del riel. En el panel de siempre (celular
   y sitio público) no hace falta: ahí ya está la del header. */
.drawer-hamburguesa { display: none; }
.drawer-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.82);
  background: radial-gradient(70% 90% at 18% 104%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 66%),
              linear-gradient(150deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 8px rgba(0,0,0,0.12);
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color var(--t-rapido), box-shadow var(--t-rapido);
}
.drawer-close:hover { color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 4px 12px rgba(0,0,0,0.18); }
/* ── Quién está adentro, hasta arriba del menú ──
   Es lo primero que se ve al abrirlo y es también la puerta al perfil.
   Antes eso era una pastilla suelta en el header, y solo existía en el
   portal: desde aquí queda en las mismas 28 pantallas que traen menú. */
.drawer-usuario {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; margin: 12px 12px 0;
  border-radius: 12px; text-decoration: none;
  transition: background var(--t-rapido);
}
.drawer-usuario:hover { background: rgba(255,255,255,0.55); }
.drawer-usuario-foto {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--pastel-rojo, #fbe9e9); color: var(--red);
}
.drawer-usuario-foto svg { width: 19px; height: 19px; }
.drawer-usuario-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drawer-usuario-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.drawer-usuario-nombre {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  /* El nombre completo puede no caber; se corta con puntos en vez de
     empujar el ancho del menú. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-usuario-rol { font-size: 11.5px; font-weight: 600; color: var(--muted); }

.drawer-nav {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 2px;
  /* La barra de desplazamiento del navegador, encima de una franja de
     64px, se come un cuarto del ancho y se ve como un tubo gris pegado
     a los íconos. Se sigue pudiendo desplazar (rueda, dedo, teclado):
     lo único que se va es el dibujo de la barra. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Al llegar al final de la lista, seguir arrastrando ya no le pasa el
     scroll a la página de atrás (eso movía el header aunque uno
     estuviera dentro del menú). */
  overscroll-behavior: contain;
}
.drawer-nav::-webkit-scrollbar { width: 0; height: 0; }
.drawer-section-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); padding: 14px 12px 6px;
}
.drawer-section-label:first-child { padding-top: 4px; }
.drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 13.5px;
  transition: background 0.15s;
}
/* Sobre vidrio, un gris sólido se ve como un parche pegado; el realce
   va con blanco translúcido, que es luz y no pintura. */
.drawer-link:hover { background: rgba(255,255,255,0.55); }
.drawer-link.activo {
  color: var(--red);
  background: radial-gradient(70% 90% at 18% 104%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 66%),
              linear-gradient(150deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 3px 12px rgba(138,0,0,0.14);
}
.drawer-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.drawer-buscar {
  position: relative; width: calc(100% - 40px); margin: 10px 20px 0;
}
.drawer-usuario {
  flex: 0 0 auto;
  box-sizing: border-box;
}
.drawer-buscar-toggle {
  width: 100%; border: 0; font: inherit; cursor: pointer; text-align: left;
}
.drawer-footer { padding: 14px 20px 18px; border-top: 1px solid rgba(0,0,0,0.06); }
.drawer-footer .drawer-link { color: #a30000; }

/* ══════════════════════════════════════════════════════════════
   El riel: el menú siempre a la vista
   ══════════════════════════════════════════════════════════════
   En pantalla ancha y dentro de la plataforma (drawer.js pone .kw-riel
   en el <html>; en el sitio público no), el menú deja de ir y venir: se
   queda como una franja de íconos pegada a la izquierda y se ensancha
   al acercarle el cursor o al picar la hamburguesa.

   El contenido se recorre para dejarle su lugar en vez de quedar
   debajo. Es más trabajo que dejarlo flotando encima, pero flotando le
   tapaba la orilla al contenido en los monitores angostos, que es justo
   donde más falta hace cada pixel.

   El ensanchado se hace con el ancho y no escondiendo texto: el panel ya
   recorta lo que se sale (overflow: hidden), así que las etiquetas se
   asoman solas conforme crece. Así se ve como una gaveta que se abre y
   no como texto que aparece de golpe.

   Debajo de 1024px no aplica nada de esto: en celular y tableta el menú
   sigue siendo el panel de siempre, que aparece sobre el contenido. */
@media (min-width: 1024px) {
  html.kw-riel {
    --riel-ancho: 292px;
    --riel-hueco: 292px;
  }
  html.kw-riel.kw-riel-inicio {
    --riel-ancho: 68px;
    --riel-hueco: 68px;
  }
  html.kw-riel body { padding-left: var(--riel-hueco); }
  html.kw-riel header.kw-header { left: calc(var(--riel-hueco) + 12px); }

  html.kw-riel .drawer:not(.drawer-der) {
    top: 0; left: 0; bottom: 0;
    transform: none;
    width: var(--riel-ancho);
    max-width: none;
    border: 0; border-right: 1px solid var(--border, rgba(0,0,0,0.1));
    border-radius: 0;
    background: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 8px 0 24px rgba(35, 27, 27, 0.08);
    transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 360ms ease;
  }
  html.kw-riel .drawer:not(.drawer-der):hover,
  html.kw-riel .drawer:not(.drawer-der).open,
  html.kw-riel .drawer:not(.drawer-der):focus-within {
    width: 292px;
    box-shadow: 14px 0 34px rgba(35, 27, 27, 0.13);
  }
  /* El freno de un instante: se pone al soltar el riel con el cursor
     todavía encima, y se quita en cuanto el cursor sale. Sin él, cerrar
     no se veía porque el :hover volvía a ensancharlo de inmediato. */
  html.kw-riel .drawer:not(.drawer-der).sin-hover,
  html.kw-riel .drawer:not(.drawer-der).sin-hover:hover { width: var(--riel-ancho); }
  /* Una búsqueda activa nunca puede quedarse dentro del riel angosto:
     el campo y los resultados necesitan el ancho completo hasta cerrar. */
  html.kw-riel .drawer:not(.drawer-der).buscando,
  html.kw-riel .drawer:not(.drawer-der).buscando.sin-hover {
    width: 292px;
  }

  /* El velo oscuro es para cuando el menú tapa la página. El riel no la
     tapa: vive en su propia franja. */
  html.kw-riel .drawer-overlay { display: none; }

  /* La X del riel sobra: se cierra solo al alejar el cursor. La del
     panel de accesos NO: ese se abre con clic y se queda, así que
     necesita su manera visible de cerrarse. */
  html.kw-riel .drawer:not(.drawer-der) .drawer-close { display: none; }

  /* El encabezado conserva siempre su altura para que abrir el riel no
     mueva el perfil, la lupa ni el icono que está debajo del cursor. El
     logo sí permanece invisible hasta que el riel se ensancha. */
  html.kw-riel .drawer:not(.drawer-der) .drawer-header {
    display: flex; order: -3; height: 56px; min-height: 56px;
    padding: 10px 18px; justify-content: flex-start; overflow: hidden;
    opacity: 0; border-bottom-color: transparent;
    transition: opacity 160ms ease, border-color 160ms ease;
  }
  html.kw-riel .drawer:not(.drawer-der) .drawer-close { display: none; }
  html.kw-riel .drawer:not(.drawer-der) .drawer-header .logo {
    display: flex; align-items: center;
    text-decoration: none; overflow: hidden;
  }
  html.kw-riel .drawer:not(.drawer-der) .drawer-header img {
    display: block; width: auto; height: 32px; max-width: none;
    opacity: 1;
  }
  html.kw-riel .drawer:not(.drawer-der):hover .drawer-header,
  html.kw-riel .drawer:not(.drawer-der).open .drawer-header,
  html.kw-riel .drawer:not(.drawer-der):focus-within .drawer-header {
    opacity: 1; border-bottom-color: rgba(0,0,0,0.06);
  }

  /* Angosto no se recorta nada a media palabra: dos letras sueltas al
     filo se leen como un error, no como que hay más. Todo lo que es
     texto se desvanece y quedan solo los íconos; al ensancharse vuelve.
     El desvanecido va un poco más rápido que el ancho para que las
     letras no se vean arrastradas mientras la gaveta se mueve. */
  html.kw-riel .drawer:not(:hover):not(.open):not(:focus-within) .drawer-link > span,
  html.kw-riel .drawer:not(:hover):not(.open):not(:focus-within) .drawer-section-label,
  html.kw-riel .drawer:not(:hover):not(.open):not(:focus-within) .drawer-usuario-txt,
  html.kw-riel .drawer.sin-hover .drawer-link > span,
  html.kw-riel .drawer.sin-hover .drawer-section-label,
  html.kw-riel .drawer.sin-hover .drawer-usuario-txt { opacity: 0; }
  .drawer-link > span,
  .drawer-section-label,
  .drawer-usuario-txt { transition: opacity var(--t-rapido); }
  html.kw-riel .drawer-usuario {
    order: -2; min-height: 68px;
    margin: 10px 8px 0; padding: 13px 7px;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* En el riel cerrado el texto no conserva un ancho fantasma: la foto
     queda centrada. Al abrirse, el texto recupera su espacio de forma
     estable desde el primer cuadro. */
  html.kw-riel .drawer:not(:hover):not(.open):not(:focus-within) .drawer-usuario-txt,
  html.kw-riel .drawer.sin-hover .drawer-usuario-txt {
    width: 0;
    flex: 0 0 0;
    overflow: hidden;
  }
  html.kw-riel .drawer:not(:hover):not(.open):not(:focus-within) .drawer-usuario-foto,
  html.kw-riel .drawer.sin-hover .drawer-usuario-foto {
    margin-left: auto;
    margin-right: auto;
  }
  html.kw-riel .drawer:hover .drawer-usuario-txt,
  html.kw-riel .drawer.open .drawer-usuario-txt,
  html.kw-riel .drawer:focus-within .drawer-usuario-txt {
    width: auto;
    flex: 1 1 auto;
  }

  html.kw-riel .drawer-buscar {
    order: -1; width: calc(100% - 28px); min-height: 46px;
    margin: 2px 14px 8px;
  }
  html.kw-riel .drawer.buscando .drawer-buscar {
    width: calc(100% - 28px);
    margin-left: 14px;
    margin-right: 14px;
  }
  html.kw-riel .drawer-buscar-toggle { min-height: 46px; padding: 11px 17px; }
  html.kw-riel .drawer.buscando .drawer-buscar {
    display: flex; align-items: center;
    background: #fff; border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--sombra-1);
  }
  html.kw-riel .drawer.buscando .drawer-buscar-toggle {
    width: 42px; flex: 0 0 42px; padding: 10px;
    background: none;
  }
  html.kw-riel .drawer.buscando .drawer-buscar-toggle span { display: none; }
  html.kw-riel .drawer.buscando .drawer-buscar .kw-buscar-campo-inline {
    display: block; font-size: 13px;
  }
  html.kw-riel .drawer.buscando .drawer-buscar .kw-buscar-cerrar-inline {
    display: flex; width: 26px; height: 26px; margin-right: 7px;
  }
  html.kw-riel .drawer-buscar .kw-buscar-resultados-inline {
    top: calc(100% + 7px); left: 0; right: auto;
    width: 276px; max-height: min(48vh, 340px);
    border-radius: 14px; background: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 16px 34px rgba(35,27,27,0.16);
  }

  /* Angosto, ese renglón es la hamburguesa; ancho, es el logo. Antes el
     logo se recortaba a la marca "kw" y quedaba como un adorno cortado
     que además no se podía picar. Ahora el espacio sirve para algo: es
     el botón que deja el menú abierto sin tener que sostener el cursor. */
  html.kw-riel .drawer:not(.drawer-der) .drawer-hamburguesa {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    order: 2; margin-left: auto;
    border: 0; background: none; padding: 0;
    color: var(--text); cursor: pointer;
    transition: color var(--t-rapido), opacity var(--t-medio);
  }
  html.kw-riel .drawer-hamburguesa:hover { color: var(--red); }
  html.kw-riel .drawer-hamburguesa svg { width: 21px; height: 21px; }

  /* El Dock inspira el movimiento, no una copia literal: el ícono que
     recibe el cursor crece y avanza un poco, mientras su nombre aparece
     con el ensanchado del riel. Los vecinos se mantienen estables para
     que el menú no salte al recorrerlo. */
  html.kw-riel .drawer-link svg,
  html.kw-riel .drawer-usuario-foto {
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
                color 180ms ease, box-shadow 260ms ease;
    transform-origin: center;
  }
  html.kw-riel .drawer-link:hover svg {
    transform: translateX(3px) scale(1.22);
  }
  html.kw-riel .drawer-usuario:hover .drawer-usuario-foto {
    transform: translateX(3px) scale(1.1);
    box-shadow: 0 5px 14px rgba(40,12,12,0.2);
  }

  /* ── El header se queda sin barra ──
     Con el riel puesto, la cápsula blanca de arriba ya no navega a
     ningún lado: era el mismo menú, otra vez, en forma de tira. Se le
     quita el fondo y queda el puro renglón de íconos flotando sobre el
     contenido; lo que sí hace falta (buscar, la campanita, el Panel,
     el Atrás) se queda, pero suelto.

     La cápsula vuelve a aparecer al buscar: ahí sí se convierte en un
     campo de texto, y un campo sin su recuadro no se entiende. */
  html.kw-riel header.kw-header .kw-header-capsula {
    background: none; background-image: none;
    border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0; min-height: 44px;
  }
  /* Al picar la lupa aparece un cuadro de búsqueda del tamaño de lo que
     se escribe, no una barra de orilla a orilla. Estirado ocupaba todo
     el renglón para un campo que casi siempre lleva dos palabras, y el
     desplegable de resultados heredaba ese ancho: media pantalla de
     blanco para tres renglones. */
  html.kw-riel header.kw-buscando {
    /* El ancho del cuadro y el de sus resultados salen de aquí: el
       desplegable cuelga del <header> y no del cuadro, así que sin una
       sola fuente los dos se despegan al tocar uno. */
    --ancho-buscador: min(360px, 42vw);
  }
  /* La campanita y el Panel se quedan donde estaban. Se escondían porque
     el campo se estiraba de orilla a orilla y les quitaba el lugar; ya
     que es un cuadro de su propio tamaño, no le estorban a nadie y
     desaparecerlos solo dejaba la sensación de que algo se rompió. */
  /* La orilla derecha ya se la pone la regla de arriba, que vale
     siempre; aquí solo hace falta volver a enseñarlas, porque buscando
     se esconden de fábrica. */
  html.kw-riel header.kw-buscando .kw-header-sueltos { display: flex; }

  html.kw-riel header.kw-buscando .kw-header-capsula {
    flex: 0 0 auto;
    width: var(--ancho-buscador);
    /* Se abre creciendo desde la lupa, no apareciendo de golpe. */
    animation: kw-buscador-abre var(--t-medio) var(--curva-salida) both;
    transform-origin: left center;
    background-image: var(--card-degradado, none);
    background-color: rgba(255,255,255,0.95);
    border: 1px solid var(--border);
    box-shadow: var(--sombra-2);
    border-radius: var(--r-tarjeta, 18px);
    /* Delgado: lo que mide el cuadro es su contenido más un pelo de
       aire. Con la lupa de 40px y 6px arriba y abajo salía de 54, más
       alto que los atajos de al lado (44) y que cualquier otra cosa del
       renglón, y se leía como una barra y no como un campo. */
    padding: 5px 12px; min-height: 0;
  }
  html.kw-riel header.kw-buscando .kw-buscar-campo-inline { font-size: 14px; }
  /* La lupa se encoge mientras es el ícono de adentro del campo; suelta
     vuelve a su tamaño de botón. */
  html.kw-riel header.kw-buscando .kw-buscar-btn { width: 32px; height: 32px; }
  html.kw-riel header.kw-buscando .kw-buscar-btn svg { width: 19px; height: 19px; }
  html.kw-riel header.kw-buscando .kw-buscar-cerrar-inline { width: 26px; height: 26px; }
  /* Los resultados miden lo mismo que el cuadro y quedan debajo de él,
     no de orilla a orilla del renglón. Bajan desde el cuadro en vez de
     aparecer ya puestos. */
  html.kw-riel header.kw-buscando .kw-buscar-resultados-inline {
    right: auto;
    width: var(--ancho-buscador);
    border-radius: var(--r-tarjeta, 18px);
    /* Más corto: la lista llegaba casi al pie de la pantalla y tapaba
       la página entera para enseñar resultados que casi siempre están
       en los primeros. Los demás se siguen alcanzando rodando. */
    max-height: min(46vh, 320px);
    animation: kw-buscador-baja var(--t-medio) var(--curva-salida) both;
  }

  @keyframes kw-buscador-abre {
    from { opacity: 0; transform: scaleX(0.72); }
    to   { opacity: 1; transform: scaleX(1); }
  }
  @keyframes kw-buscador-baja {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    html.kw-riel header.kw-buscando .kw-header-capsula,
    html.kw-riel header.kw-buscando .kw-buscar-resultados-inline { animation: none; }
  }

  /* ── El contenido sube ──
     Las páginas reservaban arriba entre 82 y 100px, que era el alto de
     la cápsula del header más su aire. Sin barra, ese hueco quedó
     vacío. Se fija aquí un solo valor para todas: el renglón de íconos
     mide 44px y arranca a 10px del borde, así que con 62px el título
     queda justo debajo de la lupa, sin la franja en blanco que se veía
     antes.

     Va con el <html> por delante a propósito. Cada página trae su
     padding en su propio <style>, que carga después de esta hoja; con
     la misma especificidad le ganaría. Y solo se toca el de arriba:
     los laterales y el de abajo son cosa de cada pantalla.

     Una pantalla que acomode su header dentro del flujo (y no flotando)
     no necesita reservar nada: se sale poniéndole .kw-header-en-flujo a
     su <body>. Lo hace Dictámenes, que ya traía su header metido en una
     cinta junto al título. */
  html.kw-riel body:not(.kw-header-en-flujo) > main,
  html.kw-riel body:not(.kw-header-en-flujo) > .page,
  html.kw-riel body:not(.kw-header-en-flujo) > div > main,
  html.kw-riel body:not(.kw-header-en-flujo) > div > .page {
    padding-top: 18px !important;
    padding-left: 18px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Los atajos medían 52px para igualar el alto de la cápsula. Sin ella
     ya no tienen a quién igualarse, y esos ocho pixeles de más eran
     justo los que empujaban el contenido hacia abajo. */
  html.kw-riel header.kw-header .kw-header-sueltos > * { height: 44px; }
  html.kw-riel header.kw-header .kw-header-sueltos > #notif-bell-slot { width: 40px; }
  /* La hamburguesa del header sobra: la del riel hace lo mismo y está
     junto a lo que abre. */
  html.kw-riel #kw-drawer-toggle { display: none; }
  html.kw-riel header.kw-header:not(.kw-buscando) #kw-buscar-toggle { display: none; }

  /* Y el "Atrás" también. Servía cuando llegar a otro lado era volver
     sobre los pasos; con el riel siempre a la vista, cualquier destino
     está a un clic sin tener que retroceder. En celular no se quita:
     ahí el menú está guardado detrás de la hamburguesa. */
  html.kw-riel header.kw-header .back-btn { display: none; }

  /* ── El renglón de arriba deja pasar los clics ──
     Sin fondo, el header se ve como si no estuviera; pero seguía ahí,
     estirado de orilla a orilla, tragándose todo clic que cayera en esa
     franja. Con la barra puesta no se notaba porque era una barra de
     verdad; ahora tapaba la orilla de arriba de la página sin que nada
     lo explicara.

     Los clics lo atraviesan y solo los botones los reciben, cada uno en
     su propio espacio. Al buscar no: ahí la cápsula vuelve a ser un
     campo de texto y necesita recibirlos. */
  html.kw-riel header.kw-header:not(.kw-buscando),
  html.kw-riel header.kw-header:not(.kw-buscando) .kw-header-capsula {
    pointer-events: none;
  }
  /* Todo lo que cuelga del header recibe clics otra vez, menos la
     cápsula, que es el hueco vacío que se atraviesa. Va por "cualquier
     hijo" y no por una lista de nombres: una pantalla puede colgar sus
     propios botones del renglón (Firmas cuelga los de volver), y con la
     lista cerrada esos nacían muertos, sin nada que dijera por qué. */
  html.kw-riel header.kw-header:not(.kw-buscando) > *:not(.kw-header-capsula),
  html.kw-riel header.kw-header:not(.kw-buscando) > *:not(.kw-header-capsula) *,
  html.kw-riel header.kw-header:not(.kw-buscando) .kw-header-capsula > * {
    pointer-events: auto;
  }

  /* La foto va centrada en la franja mientras está angosta: pegada a la
     izquierda quedaba fuera del eje de los íconos de abajo. */
  html.kw-riel .drawer:not(:hover):not(.open) .drawer-usuario,
  html.kw-riel .drawer.sin-hover .drawer-usuario { justify-content: center; padding: 13px 0; }
  html.kw-riel .drawer-usuario-foto {
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(40,12,12,0.14);
  }

  /* Sin esto, un nombre largo o una etiqueta larga estiran el renglón y
     empujan el ícono fuera de la franja mientras está angosta. */
  html.kw-riel .drawer-link,
  html.kw-riel .drawer-usuario { white-space: nowrap; }
  html.kw-riel .drawer-nav { padding: 6px 8px 14px; }
  html.kw-riel .drawer-link { min-height: 46px; padding: 11px 17px; }
  html.kw-riel .drawer-link svg { width: 20px; height: 20px; }
  html.kw-riel .drawer-footer { padding: 10px 8px 12px; background: #fff; }
  html.kw-riel .drawer-footer .drawer-link { padding: 11px 17px; }
}

@media (max-width: 1023px) {
  .drawer-buscar { display: none; }
}

/* ── Panel de la derecha: los accesos que cada quien se guarda ──
   Mismo vidrio y mismo comportamiento que el de la izquierda; solo
   entra del otro lado. */
.drawer-der {
  left: auto; right: 12px;
  transform: translateX(calc(100% + 16px));
}
.drawer-der.open { transform: translateX(0); }

.drawer-titulo {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 700; color: var(--text);
}
.drawer-titulo svg { width: 17px; height: 17px; color: var(--red); }

/* El enlace y el bote de basura comparten renglón: el bote solo se
   asoma al pasar el mouse (en celular se ve siempre, que ahí no hay
   mouse que lo despierte). */
.drawer-acceso { display: flex; align-items: center; gap: 4px; }
.drawer-acceso .drawer-link { flex: 1; min-width: 0; }
.drawer-acceso .drawer-link span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer-quitar {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: none; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.drawer-quitar svg { width: 14px; height: 14px; }
.drawer-acceso:hover .drawer-quitar, .drawer-quitar:focus-visible { opacity: 1; }
.drawer-quitar:hover { background: rgba(163,0,0,0.1); color: #a30000; }
@media (hover: none) {
  .drawer-quitar { opacity: 0.55; }
}

.drawer-vacio {
  padding: 22px 12px; font-size: 13px; color: var(--muted); line-height: 1.6;
}
.drawer-vacio span { display: block; margin-top: 6px; font-size: 12.5px; opacity: 0.85; }

.drawer-agregar {
  width: 100%; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--red); background: rgba(255,255,255,0.55);
}
.drawer-agregar:disabled { opacity: 0.6; cursor: default; }

/* ── Desplegable de notificaciones (campanita) ───────────────────────
   Vivía duplicado en portal.html y en hub/tickets.html, y las dos copias
   ya habían empezado a separarse. Aquí queda una sola: cada página se
   queda nada más con el estilo de su botón, que sí cambia según el
   header donde va.
   Solo existe en escritorio: en celular la campanita es un enlace a su
   propia página (hub/notificaciones.html) - un desplegable de 320px no
   cabía bien ahí y ya se sentía encimado con el header. */
.notif-backdrop {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(15,15,15,0.35);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-medio) var(--curva);
}
.notif-backdrop.abierto { opacity: 1; pointer-events: auto; }

/* El desplegable cuelga de la orilla derecha del botón y se abre hacia
   la izquierda. Nace ya en el DOM (no con display:none) para poder
   animar su entrada; oculto se le quitan además los clics y se saca
   del orden de lectura, para que no estorbe ni se pueda tabular hasta
   él mientras está cerrado. */
.notif-dropdown {
  /* Cuelga del borde de abajo de la campanita y no de una distancia
     fija: con los 46px de antes, sobre una pastilla de 52 el panel
     empezaba seis pixeles arriba de donde termina la campana y se le
     encimaba a ella y al header. Medido contra el 100%, queda debajo
     sin importar de qué alto sea la pastilla. */
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-height: 420px;
  background: linear-gradient(150deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.9) 45%, rgba(255,255,255,0.86) 100%); border: 1px solid rgba(255,255,255,0.82); border-radius: 14px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--sombra-3), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.38); overflow: hidden; z-index: 50;
  display: flex; flex-direction: column; text-align: left;
  transform-origin: top right;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px) scale(0.96);
  transition: opacity var(--t-rapido) var(--curva), transform var(--t-rapido) var(--curva-salida),
              visibility var(--t-rapido);
}
.notif-dropdown.abierto {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* El panel vive directamente en body, asi que se mide contra la ventana.
   En celular entra como el menu principal, solo que desde la derecha. */
@media (max-width: 1023px) {
  .notif-dropdown {
    position: fixed; top: 10px; right: 12px; bottom: 10px; left: auto;
    width: var(--panel-ancho, 280px); max-width: calc(100vw - 24px); max-height: none;
    border-radius: 22px; z-index: 201;
    transform: translateX(calc(100% + 16px));
    transform-origin: center right;
    transition: transform var(--t-lento) var(--curva), visibility var(--t-lento);
  }
  .notif-dropdown.abierto { transform: translateX(0); }
  .notif-backdrop { z-index: 200; }
}
.notif-dropdown-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700;
}
.notif-dropdown-head > span:first-child { min-width: 0; flex: 1; }
.notif-cerrar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255,255,255,0.7);
  color: var(--muted); cursor: pointer;
}
.notif-cerrar:hover { color: var(--red); }
.notif-cerrar svg { width: 18px; height: 18px; }
.notif-marcar-todas {
  border: none; background: none; color: var(--red); font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit; order: 3; width: 100%; text-align: left; padding: 0;
}
.notif-dropdown-list { overflow-y: auto; overscroll-behavior: contain; }
.notif-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 11px 14px; border: none; border-bottom: 1px solid var(--border);
  background: #fff; text-align: left; cursor: pointer; font-family: inherit;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #fafafa; }
.notif-item-nuevo { background: #fff8f8; }
.notif-item-nuevo:hover { background: #fff0f0; }
.notif-item-titulo { font-size: 12.5px; font-weight: 700; color: var(--text); }
.notif-item-msg { font-size: 12px; color: var(--muted); line-height: 1.4; }
.notif-item-fecha { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.notif-vacio { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }

/* Caja estable para la campana y contador anclado a su esquina. */
#notif-bell-slot { position: relative; flex: 0 0 44px; overflow: visible; }
#notif-bell-slot .notif-bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  line-height: 1; text-decoration: none;
}
#notif-bell-slot .notif-bell-btn svg {
  display: block; width: 21px; height: 21px; flex: none;
}
#notif-bell-slot .notif-bell-badge {
  position: absolute; top: 3px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; border: 2px solid #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
}

/* ══════════════════════════════════════════════════════════════
   Las notificaciones, en panel lateral
   ══════════════════════════════════════════════════════════════
   Eran un recuadro de 320×420 colgando de la campanita. Al lado del
   menú, que ya es una gaveta de alto completo, se veía como una pieza
   de otro juego: mismo sitio, dos maneras distintas de enseñar una
   lista.

   Ahora es el mismo panel, del mismo tamaño y del mismo material, solo
   que entra por la derecha. Abre con clic y nada más: el menú se
   ensancha al acercar el cursor porque está siempre a la vista y roza
   sin querer no cuesta nada; unas notificaciones que se abrieran solas
   al pasar por encima taparían la pantalla sin que nadie las pidiera.

   Debajo de 1024px no aplica: ahí la campanita ya manda derecho a la
   página de notificaciones. */
@media (min-width: 1024px) {
  html.kw-riel .notif-dropdown {
    position: fixed; top: 10px; right: 12px; bottom: 10px; left: auto;
    width: var(--panel-ancho, 280px); max-width: 82vw; max-height: none;
    border-radius: 22px;
    background:
      radial-gradient(62% 48% at 16% 98%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.34) 42%, rgba(255,255,255,0) 74%),
      radial-gradient(70% 50% at 90% 2%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 66%),
      linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.66) 100%);
    border: 1px solid rgba(255,255,255,0.82);
    backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%);
    box-shadow: 0 18px 48px rgba(0,0,0,0.34),
                inset 0 1px 0 rgba(255,255,255,0.95),
                inset 0 -1px 0 rgba(255,255,255,0.30),
                inset 1px 0 0 rgba(255,255,255,0.38);
    z-index: 201;
    /* Entra deslizando desde su orilla, igual que el menú, en vez de
       aparecer creciendo desde una esquina. */
    transform: translateX(calc(100% + 16px));
    transition: transform var(--t-lento) var(--curva);
    opacity: 1; visibility: visible;
  }
  html.kw-riel .notif-dropdown.abierto { transform: translateX(0); }
  /* Cerrado no recibe clics ni se puede tabular hasta él, aunque siga
     visible para poder animarlo. */
  html.kw-riel .notif-dropdown:not(.abierto) { pointer-events: none; }
  /* El velo se queda solo para atrapar el clic que cierra el panel: sin
     color y sin desenfoque. Oscurecer la pantalla es de una ventana que
     exige atención antes de dejar seguir; estos paneles no exigen nada,
     se asoman y se van. */
  html.kw-riel .notif-backdrop {
    z-index: 200;
    background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html.kw-riel .drawer-overlay {
    background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }

  /* Los dos paneles de la derecha van pegados a su orilla y con las
     esquinas casi rectas. Flotando con margen y 22px de redondeo se
     leían como una cápsula enorme; un panel que entra por un lado se
     entiende mejor si nace de ese lado en vez de aparecer despegado de
     él. Solo las esquinas de adentro llevan curva. */
  html.kw-riel .notif-dropdown,
  html.kw-riel .drawer-der {
    top: 0; bottom: 0; right: 0;
    border-radius: 14px 0 0 14px;
    border-right: 0;
  }

  /* El encabezado y los renglones se acomodan al ancho del panel. */
  html.kw-riel .notif-dropdown-head { padding: 18px 20px; font-size: 14px; }
  html.kw-riel .notif-dropdown-list { padding: 6px 10px; }
  html.kw-riel .notif-item {
    background: none; border-bottom: 0; border-radius: 12px;
    padding: 11px 12px; margin-bottom: 2px;
  }
  html.kw-riel .notif-item:hover { background: rgba(255,255,255,0.55); }
  html.kw-riel .notif-item-nuevo { background: rgba(138,0,0,0.05); }
  html.kw-riel .notif-item-nuevo:hover { background: rgba(138,0,0,0.09); }
}

.kw-page-acciones > #notif-bell-slot {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
}
.kw-page-acciones > #notif-bell-slot .notif-bell-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}
.kw-page-acciones > #notif-bell-slot .notif-bell-btn:hover {
  background: transparent;
  color: var(--red);
}
.kw-page-acciones > #notif-bell-slot .notif-bell-btn svg {
  width: 19px;
  height: 19px;
}

/* Estado abierto del buscador: un campo bajo, de esquinas suaves y sin
   controles interiores que compitan con el texto. */
@media (min-width: 1024px) {
  html.kw-riel body #drawer.buscando #drawer-buscar {
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar::before {
    content: none;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .drawer-buscar-toggle,
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-cerrar-inline {
    display: none !important;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-campo-inline {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    flex: 1 1 auto !important;
    padding: 0 42px 0 12px !important;
    line-height: 34px !important;
  }
  html.kw-riel body #drawer.buscando.busqueda-con-resultados .drawer-nav {
    min-height: 0;
    overflow: hidden;
    padding: 6px 8px 0;
  }
  html.kw-riel body #drawer.buscando.busqueda-con-resultados .drawer-nav > :not(#drawer-buscar) {
    display: none !important;
  }
  html.kw-riel body #drawer.buscando.busqueda-con-resultados #drawer-buscar {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr);
    gap: 8px;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-campo-inline {
    box-sizing: border-box;
    height: 34px !important;
    line-height: normal !important;
    position: relative;
    z-index: 1;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: 0 0 0 2px rgba(138,0,0,0.06) !important;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-resultados-inline {
    position: static !important;
    align-self: stretch;
    box-sizing: border-box;
    width: 100% !important;
    height: 100%;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    scrollbar-width: thin;
    scrollbar-color: #dedede #f8f8f8;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-resultados-inline::-webkit-scrollbar {
    width: 5px;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-resultados-inline::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 3px;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-resultados-inline::-webkit-scrollbar-thumb {
    background: #dedede;
    border: 1px solid #f8f8f8;
    border-radius: 3px;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-resultados-inline::-webkit-scrollbar-thumb:hover {
    background: #cfcfcf;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-item {
    border: 0;
    border-radius: 4px;
    padding: 9px 10px;
  }
  html.kw-riel body #drawer.buscando.busqueda-con-resultados #drawer-buscar {
    grid-template-columns: minmax(0, 1fr) 32px !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 8px !important;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-campo-inline {
    grid-column: 1 / -1;
    grid-row: 1;
    border: 1px solid var(--red) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-cerrar-inline {
    position: absolute;
    top: 6px;
    right: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px !important;
    height: 34px !important;
    margin: 0 !important;
    z-index: 1;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
  }
  html.kw-riel body #drawer.buscando #drawer-buscar .kw-buscar-cerrar-inline:hover {
    background: transparent !important;
    color: var(--text) !important;
  }
  html.kw-riel body #drawer.buscando.busqueda-con-resultados #drawer-buscar .kw-buscar-cerrar-inline {
    top: 0;
  }
  html.kw-riel body #drawer.buscando.busqueda-con-resultados #drawer-buscar .kw-buscar-resultados-inline {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}

/* Buscador del riel: icono, campo y cierre forman una sola capsula. */
@media (min-width: 1024px) {
  html.kw-riel #drawer.buscando #drawer-buscar {
    box-sizing: border-box;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: calc(100% - 16px) !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 8px 2px !important;
    padding: 0 !important;
    overflow: visible;
    border: 1px solid var(--red) !important;
    border-radius: 23px !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(138,0,0,0.10) !important;
  }
  html.kw-riel #drawer.buscando #drawer-buscar .drawer-buscar-toggle {
    display: flex !important;
    flex: 0 0 42px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22px 0 0 22px !important;
    outline: 0 !important;
    background: transparent !important;
  }
  html.kw-riel #drawer.buscando #drawer-buscar .drawer-buscar-toggle > span:not(.drawer-buscar-icono) {
    display: none !important;
  }
  html.kw-riel #drawer.buscando #drawer-buscar .kw-buscar-campo-inline {
    display: block !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 44px !important;
    flex: 1 1 auto !important;
    padding: 0 4px !important;
  }
  html.kw-riel #drawer.buscando #drawer-buscar .kw-buscar-cerrar-inline {
    display: flex !important;
    flex: 0 0 26px;
    width: 26px !important;
    height: 26px !important;
    margin-right: 8px !important;
  }
  html.kw-riel #drawer:not(.buscando):not(:hover):not(.open):not(:focus-within) #drawer-buscar .drawer-buscar-toggle > span:not(.drawer-buscar-icono),
  html.kw-riel #drawer.sin-hover:not(.buscando) #drawer-buscar .drawer-buscar-toggle > span:not(.drawer-buscar-icono) {
    display: none !important;
  }
}

/* Ajuste fino del buscador del riel y del perfil:
   el buscador no debe ocupar casi todo el panel, y activar su campo no
   debe cambiar la geometría del bloque de usuario. */
@media (min-width: 1024px) {
  html.kw-riel .drawer:not(.drawer-der):hover .drawer-buscar,
  html.kw-riel .drawer:not(.drawer-der).open .drawer-buscar,
  html.kw-riel .drawer:not(.drawer-der):focus-within .drawer-buscar,
  html.kw-riel .drawer:not(.drawer-der).buscando .drawer-buscar {
    width: 236px;
    margin-left: 14px;
    margin-right: 0;
  }

  html.kw-riel .drawer:not(.drawer-der).buscando .drawer-usuario {
    width: 276px;
    margin: 10px 8px 0;
    padding: 13px 7px;
    justify-content: flex-start;
  }
  html.kw-riel .drawer:not(.drawer-der).buscando .drawer-usuario-foto {
    margin-left: 0;
    margin-right: 0;
  }
  html.kw-riel .drawer:not(.drawer-der).buscando .drawer-usuario-txt {
    width: auto;
    flex: 1 1 auto;
    opacity: 1;
    overflow: hidden;
  }
}

/* El botón de búsqueda del riel cerrado ocupa la misma celda que los
   demás iconos. Se elimina el fondo nativo del <button> y se centra la
   lupa para que no quede recortada ni desplazada. */
@media (min-width: 1024px) {
  html.kw-riel .drawer:not(.drawer-der):not(:hover):not(.open):not(:focus-within) .drawer-buscar,
  html.kw-riel .drawer:not(.drawer-der).sin-hover .drawer-buscar {
    width: 40px;
    height: 46px;
    min-height: 46px;
    margin: 2px 14px 8px;
    background: transparent;
    box-shadow: none;
  }
  html.kw-riel .drawer:not(.drawer-der):not(:hover):not(.open):not(:focus-within) .drawer-buscar-toggle,
  html.kw-riel .drawer:not(.drawer-der).sin-hover .drawer-buscar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    background: transparent !important;
    border: 0;
    color: var(--text);
  }
  html.kw-riel .drawer:not(.drawer-der):not(:hover):not(.open):not(:focus-within) .drawer-buscar-toggle svg,
  html.kw-riel .drawer:not(.drawer-der).sin-hover .drawer-buscar-toggle svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
}

/* Refinamiento final del buscador del riel:
   la lupa conserva su espacio aun cuando el texto queda oculto;
   el campo abierto es bajo y queda centrado con el mismo margen a ambos
   lados del panel. */
@media (min-width: 1024px) {
  html.kw-riel .drawer:not(.drawer-der):not(:hover):not(.open):not(:focus-within) .drawer-buscar-toggle > span,
  html.kw-riel .drawer:not(.drawer-der).sin-hover .drawer-buscar-toggle > span {
    width: 0;
    min-width: 0;
    flex: 0 0 0;
    overflow: hidden;
    opacity: 0;
  }
  html.kw-riel .drawer:not(.drawer-der):not(:hover):not(.open):not(:focus-within) .drawer-buscar-toggle svg,
  html.kw-riel .drawer:not(.drawer-der).sin-hover .drawer-buscar-toggle svg {
    display: block;
    visibility: visible;
    opacity: 1;
    margin: 0;
  }

  html.kw-riel .drawer:not(.drawer-der):hover .drawer-buscar,
  html.kw-riel .drawer:not(.drawer-der).open .drawer-buscar,
  html.kw-riel .drawer:not(.drawer-der):focus-within .drawer-buscar,
  html.kw-riel .drawer:not(.drawer-der).buscando .drawer-buscar {
    width: 236px;
    margin-left: auto;
    margin-right: auto;
  }

  html.kw-riel .drawer.buscando .drawer-buscar,
  html.kw-riel .drawer.buscando .drawer-buscar-toggle {
    min-height: 36px;
    height: 36px;
  }
  html.kw-riel .drawer.buscando .drawer-buscar-toggle {
    width: 38px;
    flex-basis: 38px;
    padding: 4px 8px;
  }
  html.kw-riel .drawer.buscando .drawer-buscar .kw-buscar-campo-inline {
    line-height: 1.2;
  }
  html.kw-riel .drawer.buscando .drawer-buscar .kw-buscar-cerrar-inline {
    width: 24px;
    height: 24px;
  }
}

/* Buscar en la página vive como un acceso más del menú, encima de
   Propiedades, con la misma geometría que los demás enlaces. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso {
    order: -10;
    width: auto !important;
    margin: 0 8px 2px !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 11px 17px !important;
    gap: 12px;
    border-radius: 10px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html.kw-riel .drawer-buscar-acceso.buscando {
    background: #fff;
    border: 1px solid var(--red);
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(138,0,0,0.1);
  }
}

/* El acceso de búsqueda comparte el componente visual real de los
   enlaces del menú; solo al activarse su contenedor recibe el contorno. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto !important;
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 8px 2px !important;
    padding: 11px 17px !important;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    box-shadow: none;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  html.kw-riel #drawer.buscando .drawer-buscar-acceso {
    background: #fff;
    border: 1px solid var(--red);
    box-shadow: 0 0 0 2px rgba(138,0,0,0.1);
  }
}

/* Buscar en la página: mismo comportamiento exacto que un drawer-link. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso {
    order: initial !important;
    position: relative;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 17px !important;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html.kw-riel .drawer-buscar-acceso:hover {
    background: rgba(255,255,255,0.55) !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 22px;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle span {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    white-space: nowrap;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  html.kw-riel #drawer.buscando .drawer-buscar-acceso {
    background: #fff !important;
    border: 1px solid var(--red) !important;
    box-shadow: 0 0 0 2px rgba(138,0,0,0.1) !important;
  }
}

/* El acceso de búsqueda no se desplaza al pasar el cursor. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso:hover,
  html.kw-riel .drawer-buscar-acceso:hover .drawer-buscar-toggle {
    transform: none !important;
  }
  html.kw-riel .drawer-buscar-acceso:hover .drawer-buscar-toggle svg {
    transform: none !important;
  }
}

/* Contenedor neutro; el botón interno es el único drawer-link, igual que
   todos los accesos del menú. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso {
    order: initial !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 11px 17px !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle:hover {
    transform: none !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle:hover svg {
    transform: translateX(3px) scale(1.22) !important;
  }
}

/* El hover de Buscar en la página solo cambia el realce; no mueve su
   caja, icono ni texto. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle,
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle svg {
    transform: none !important;
    transition: background 0.15s, color 0.15s !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle:hover,
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle:hover svg {
    transform: none !important;
  }
}

/* El buscador usa literalmente la misma pieza que cualquier acceso:
   el contenedor no participa en el layout y el enlace es el drawer-link. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso {
    display: contents !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 17px !important;
    border: 0 !important;
    border-radius: 10px;
    background: transparent !important;
    color: var(--text);
    font: inherit;
    text-decoration: none;
    transform: none;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle:hover {
    background: rgba(255,255,255,0.55) !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    transform: none !important;
  }
  html.kw-riel #drawer.buscando .drawer-buscar-acceso .drawer-buscar-toggle {
    background: #fff !important;
    outline: 1px solid var(--red);
    outline-offset: -1px;
  }
}

/* Buscador tipo checkbox: el acceso conserva la geometría del menú y
   la cápsula se abre al marcarlo. */
@media (min-width: 1024px) {
  #drawer-buscar-acceso, .drawer-buscar-acceso { position: relative; }
  #search-btn {
    position: absolute;
    left: -100vw;
    opacity: 0;
    pointer-events: none;
  }
  #drawer-buscar .drawer-buscar-toggle {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 11px 17px !important;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;
    background: transparent;
  }
  #drawer-buscar .drawer-buscar-icono,
  #drawer-buscar .drawer-buscar-icono svg {
    display: flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  #drawer-buscar .kw-buscar-campo-inline {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
  }
  #drawer.buscando #drawer-buscar {
    display: flex;
    align-items: center;
    width: calc(100% - 16px);
    margin: 0 8px 2px;
    min-height: 46px;
    border: 1px solid var(--red);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(138,0,0,0.1);
  }
  #drawer.buscando #drawer-buscar .drawer-buscar-toggle {
    width: 42px !important;
    min-width: 42px !important;
    padding: 11px 12px !important;
  }
  #drawer.buscando #drawer-buscar .drawer-buscar-toggle > span:not(.drawer-buscar-icono) {
    display: none !important;
  }
  #drawer.buscando #drawer-buscar .kw-buscar-campo-inline {
    display: block;
  }
}

/* Búsqueda como acceso normal: solo el botón participa visualmente en
   el listado; el contenedor no añade geometría ni estados propios. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso {
    display: contents !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: auto !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 17px !important;
    border: 0 !important;
    border-radius: 10px;
    background: transparent !important;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle:hover {
    background: rgba(255,255,255,0.55) !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    transform: none !important;
  }
}

/* Misma geometría y animación que cualquier drawer-link. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 11px 17px !important;
    margin: 0 !important;
    border-radius: 10px;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    transform-origin: center !important;
    transition: transform 260ms cubic-bezier(0.22,1,0.36,1),
                color 180ms ease, box-shadow 260ms ease !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle:hover svg {
    transform: translateX(3px) scale(1.22) !important;
  }
}

/* La cápsula de búsqueda no cambia de fondo al pasar el cursor; solo
   conserva la animación de la lupa. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle:hover {
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Alineación base del buscador: la lupa parte en la misma posición que
   los iconos de los accesos, antes de cualquier hover. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle {
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    align-items: center !important;
    vertical-align: middle;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle svg {
    display: block !important;
    vertical-align: middle;
    margin: 0 !important;
    transform: translateX(0) scale(1) !important;
  }
}

/* Corrección del desfase inicial: el acceso parte con la misma coordenada
   horizontal que alcanza durante el hover. */
@media (min-width: 1024px) {
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle svg {
    transform: translateX(3px) scale(1) !important;
  }
  html.kw-riel .drawer-buscar-acceso .drawer-buscar-toggle:hover svg {
    transform: translateX(3px) scale(1.22) !important;
  }
}

/* Garantía final del menú permanente. Algunas páginas antiguas
   conservan reglas del riel contraído después de la hoja compartida;
   en escritorio el menú del Hub debe ganar siempre. Durante una
   búsqueda se respetan sus reglas propias para dejar espacio al campo. */
@media (min-width: 1024px) {
  html.kw-riel:not(.kw-riel-inicio) #drawer:not(.drawer-der) {
    width: 292px !important;
    min-width: 292px !important;
    max-width: 292px !important;
  }
  html.kw-riel:not(.kw-riel-inicio) #drawer:not(.drawer-der):not(.buscando) .drawer-header {
    opacity: 1 !important;
    visibility: visible !important;
  }
  html.kw-riel:not(.kw-riel-inicio) #drawer:not(.drawer-der):not(.buscando) .drawer-link > span,
  html.kw-riel:not(.kw-riel-inicio) #drawer:not(.drawer-der):not(.buscando) .drawer-section-label,
  html.kw-riel:not(.kw-riel-inicio) #drawer:not(.drawer-der):not(.buscando) .drawer-usuario-txt {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
  }
  html.kw-riel:not(.kw-riel-inicio) #drawer:not(.drawer-der):not(.buscando) .drawer-usuario-txt {
    flex: 1 1 auto !important;
  }
}

/* Los dos índices documentales preceden al encabezado compartido y
   conservaban el relleno antiguo de 100px. Se alinean explícitamente con
   el título del historial de Firmas también en pantallas intermedias. */
@media (min-width: 641px) {
  html.kw-riel body.kw-indice-documentos > main.page {
    padding-top: 18px !important;
    padding-left: 18px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  body.kw-indice-documentos .kw-page-encabezado {
    margin-top: 0 !important;
  }
}

/* Apertura y cierre discretos del buscador, sin mover los accesos. */
@keyframes kw-buscar-abre-suave {
  from { opacity: .72; transform: scaleY(.94); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes kw-buscar-cierra-suave {
  from { opacity: .72; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}
@media (min-width: 1024px) {
  html.kw-riel #drawer.buscando #drawer-buscar {
    transform-origin: top center;
    animation: kw-buscar-abre-suave 180ms ease-out;
  }
  html.kw-riel #drawer.busqueda-cerrando #drawer-buscar .drawer-buscar-toggle {
    transform-origin: center left;
    animation: kw-buscar-cierra-suave 180ms ease-out;
  }

  /* La lupa comparte exactamente la columna de los demás iconos. */
  html.kw-riel #drawer .drawer-buscar-toggle svg,
  html.kw-riel #drawer .drawer-buscar-icono,
  html.kw-riel #drawer .drawer-buscar-icono svg {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
    margin: 0 !important;
    transform: none !important;
  }
  html.kw-riel #drawer.buscando #drawer-buscar .drawer-buscar-toggle {
    width: 38px !important;
    min-width: 38px !important;
    padding: 11px 9px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.kw-riel #drawer.buscando #drawer-buscar,
  html.kw-riel #drawer.busqueda-cerrando #drawer-buscar .drawer-buscar-toggle {
    animation: none;
  }
}

/* Un solo título para todos los módulos del Hub. Firmas Digitales es la
   referencia: las reglas locales antiguas no deben cambiar ni su tamaño
   ni su posición al pasar de una pantalla a otra. */
html.kw-riel .kw-page-titulo,
html.kw-riel .page-title {
  margin-top: 0 !important;
  font-family: inherit !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
}

/* En los índices de Contratos y Acuerdos las redes cierran la página,
   igual que Cerrar sesión cierra el menú. El espacio libre se queda entre
   las tarjetas y el separador, no debajo de las redes. */
@media (min-width: 641px) {
  html.kw-riel body.kw-indice-documentos > main.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 12px !important;
  }
  body.kw-indice-documentos > main.page > .footer {
    margin-top: auto !important;
  }
}