/* Inter (OFL, autoalojada como el resto de assets del proyecto -- sin
   Google Fonts ni ningún otro CDN de terceros, mismo criterio que el
   sprite de iconos Lucide traído a mano). Fuente variable: un único
   fichero cubre todo el rango de pesos (100-900) en vez de cargar uno
   por peso usado. Se mantiene como fallback de --font-mono-adjacent
   para lo ya escrito contra su métrica, pero deja de ser la fuente
   general del cuerpo (ver Manrope debajo -- rediseño "C + paleta B"
   aprobado por el usuario en un canvas de diseño).
*/
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2-variations"),
       url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Manrope (OFL, autoalojada igual que Inter -- subconjunto "latin" de
   Google Fonts, suficiente para es/ca/en/fr, descargado una sola vez a
   app/static/fonts/, sin CDN de terceros en producción). Fuente
   variable de un solo eje de peso (200-800). Elegida en la ronda de
   rediseño de app.guildawork.com (dirección "C" del canvas de diseño,
   estructura SaaS suave + tipografía geométrica, combinada con la
   paleta oscura/lima ya existente -- dirección "B"). */
@font-face {
  font-family: "Manrope";
  src: url("fonts/ManropeVariable.woff2") format("woff2-variations"),
       url("fonts/ManropeVariable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --border: #d8dbe1;
  --text: #1a1d23;
  --text-muted: #6b7280;
  --sidebar-bg: #0a0a0c;
  --sidebar-text: #c9cdd4;
  --sidebar-text-active: #ffffff;
  /* Acento único, terminal/neón (Fase rediseño "Nate Gentile") — un solo
     verde-lima marcado en vez de un color distinto por tarjeta; --on-accent
     es el color de texto que va ENCIMA de --primary (negro: el lima es
     demasiado claro para texto blanco legible). */
  --primary: #a6e600;
  --primary-dark: #8fc400;
  /* Lima como TEXTO: #a6e600 sobre blanco da ~1,5:1 (ilegible); este olivo
     da ~5:1. --primary se queda para fondos/bordes. En oscuro vale el lima. */
  --primary-text: #4d7a00;
  --on-accent: #0a0a0a;
  --danger: #e0555a;
  --success: #1f9d55;
  --warning: #b8860b;
  /* Versiones para TEXTO sobre fondo claro (>= 4,5:1; las de arriba dan ~3,3-3,7:1
     y se quedan para fondos, bordes e iconos) y anillo de foco visible (el lima
     --primary sobre blanco da 1,5:1, casi invisible para quien navega con teclado). */
  --danger-text: #b3262b;
  --success-text: #17713f;
  --warning-text: #8a6508;
  --focus-ring: #4d7a00;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);

  /* Sistema de diseño (Fase 0 del rediseño): escalas de espaciado,
     tipografía, radios y sombra. --radius/--shadow de arriba se mantienen
     tal cual (equivalen a --radius-md/--shadow-md) para no romper las
     ~1600 líneas de CSS ya escritas contra esos dos nombres. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --font-size-sm: 0.85em;
  --font-size-base: 1em;
  --font-size-lg: 1.15em;
  --font-size-xl: 1.5em;

  /* Esquinas suaves (revisado — el look "esquinas casi rectas" de la fase
     anterior acabó leyéndose como plantilla genérica hecha con IA, no como
     el terminal profesional que buscaba). */
  --radius-sm: 10px;
  --radius-md: var(--radius);
  --radius-lg: 22px;

  /* Ancho del panel lateral fijo en el patrón "lista + ficha rápida"
     (dashboard, calendario fiscal) -- un único token en vez de que cada
     página fijara su propio ancho (380px / 300px, dos números para el
     mismo patrón). */
  --detail-rail-width: 360px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: var(--shadow);
  --shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.08);

  /* Estética "terminal" (referencia: nategentile.com + el panel "Orion"
     que mandó el usuario) — paneles PLANOS (nada de vidrio esmerilado:
     eso era la iteración anterior, esta referencia es sólida y de bordes
     nítidos) con el brillo de acento reservado al lima, fondo liso sin
     rejilla decorativa (quitada para dar una imagen más profesional).
     --glass-* se mantienen como nombre por compatibilidad con las ~15
     reglas que ya los usan, pero ahora apuntan a colores sólidos del
     tema, sin transparencia ni blur. */
  --glass-bg: var(--surface);
  --glass-border: var(--border);
  --glass-blur: 0px;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;

  /* Portal de cliente (dirección "B" del rediseño, aprobada tras comparar
     mockups): paleta de papel cálido deliberadamente DISTINTA del
     terminal lima/negro del resto de la app -- quien abre el portal es
     un cliente de la gestoría, a menudo sin perfil técnico, no el
     personal interno. El lima se conserva como acento de marca
     reconocible, pero sobre un fondo cálido en vez de negro. */
  --portal-paper: #faf8f3;
  --portal-card: #ffffff;
  --portal-line: #e4e0d4;
  --portal-ink: #2b2a24;
  --portal-muted: #7a7768;
  --portal-accent: #6b8f00;
  --portal-accent-bg: #eef5d6;
  --portal-warn-bg: #fdf1dc;
  --portal-warn-ink: #8a5a12;
  --portal-ok-bg: #e9f5ea;
  --portal-ok-ink: #2f7a3c;
}

/* Modo oscuro: sigue "Sistema" (prefers-color-scheme) salvo que el usuario
   haya elegido explícitamente Claro/Oscuro desde el selector de la barra
   lateral (app/static/sidebar.js), en cuyo caso [data-theme] manda siempre,
   gane o pierda al sistema operativo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Negro casi puro, no gris azulado — es justo la diferencia entre
       "modo oscuro genérico" y el look terminal de la referencia. */
    --bg: #0a0a0c;
    --surface: #101113;
    --border: #2a2d33;
    --text: #e8eae9;
    --text-muted: #8a9099;
    --sidebar-bg: #050506;
    --primary: #ccff33;
    --primary-dark: #a6e600;
    --primary-text: #ccff33;
    --danger: #ff6b70;
    --warning: #eab308;
    --danger-text: #ff6b70;
    --success-text: #3fb67c;
    --warning-text: #eab308;
    --focus-ring: #ccff33;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5);
    --glass-bg: var(--surface);
    --glass-border: var(--border);
    /* Portal de cliente: "papel oscuro" cálido, no el negro puro del
       resto de la app -- conserva la identidad de "expediente" también
       en oscuro, con el lima aclarado para contraste. */
    --portal-paper: #16140f;
    --portal-card: #1e1b14;
    --portal-line: #332f22;
    --portal-ink: #ece7d8;
    --portal-muted: #a39d87;
    --portal-accent: #c7e85c;
    --portal-accent-bg: #2a2f12;
    --portal-warn-bg: #3a2c10;
    --portal-warn-ink: #e8c168;
    --portal-ok-bg: #16301d;
    --portal-ok-ink: #7fd996;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0a0c;
  --surface: #101113;
  --border: #2a2d33;
  --text: #e8eae9;
  --text-muted: #8a9099;
  --sidebar-bg: #050506;
  --primary: #ccff33;
  --primary-dark: #a6e600;
  --primary-text: #ccff33;
  --danger: #ff6b70;
  --warning: #eab308;
  --danger-text: #ff6b70;
  --success-text: #3fb67c;
  --warning-text: #eab308;
  --focus-ring: #ccff33;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5);
  --glass-bg: var(--surface);
  --glass-border: var(--border);
  --portal-paper: #16140f;
  --portal-card: #1e1b14;
  --portal-line: #332f22;
  --portal-ink: #ece7d8;
  --portal-muted: #a39d87;
  --portal-accent: #c7e85c;
  --portal-accent-bg: #2a2f12;
  --portal-warn-bg: #3a2c10;
  --portal-warn-ink: #e8c168;
  --portal-ok-bg: #16301d;
  --portal-ok-ink: #7fd996;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", "Inter", "Segoe UI", -apple-system, Roboto, sans-serif;
  /* Fondo liso a propósito (antes había una micro-rejilla decorativa
     aquí, quitada para dar una imagen más profesional/limpia). */
  background-color: var(--bg);
  color: var(--text);
  font-size: 15px;
}

/* Scrollbar fina, sin flechas — el toque "rice" también en el detalle
   del scroll, en vez del scrollbar ancho por defecto del sistema. Solo
   WebKit/Blink (Chromium embebido en pywebview) — Firefox usa su propio
   `scrollbar-width: thin` de forma nativa sin necesitar esto. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

a { color: inherit; }

/* Enlace de CONTENIDO/texto (dentro de una tabla, una lista, un párrafo)
   -- no confundir con .btn-ghost u otros "botones con forma de enlace",
   que ya tienen su propio tratamiento. Antes cada zona improvisaba su
   propio text-decoration suelto sin criterio común; esta clase da un
   aspecto reconocible y consistente de "esto es un enlace" en toda la
   app, reusando las variables de color ya existentes. */
.link {
  color: var(--primary-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary-dark) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.link:hover {
  color: var(--primary-text);
  text-decoration-color: var(--primary-text);
  text-decoration-thickness: 2px;
}
/* Mismo tratamiento aplicado por contexto, sin tener que anotar
   class="link" enlace por enlace en cada plantilla: enlaces de "volver
   a"/alternativas en páginas de auth y portal, direcciones mailto: en
   tablas (leads/solicitudes de backoffice), y enlaces de texto dentro
   de una fila de lista (.log-text, historial/tareas/tiquets/fiscal). */
.auth-alterna a,
a[href^="mailto:"],
.log-text a {
  color: var(--primary-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary-dark) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.auth-alterna a:hover,
a[href^="mailto:"]:hover,
.log-text a:hover {
  text-decoration-color: var(--primary-text);
  text-decoration-thickness: 2px;
}

/* ---- Campos de formulario, base global (Fase rediseño global) ----
   Antes cada pantalla (correo, calendario, ajustes de chat…) definía su
   propio `input[type="text"]` suelto con `border: 1px solid var(--border)`
   y sin más — funcionaba, pero sin foco visible ni fondo coherente con
   el resto del rediseño. Esta regla de base cubre lo común (fondo,
   borde, esquinas, el brillo de foco) y las reglas por pantalla, que
   siguen existiendo para el layout (flex, ancho...), quedan encima sin
   tener que tocarlas una por una. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea,
select {
  background: var(--glass-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: inherit;
  padding: 8px 11px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ---- Solo lectores de pantalla ---- */
/* Para labels que harían el formulario más ancho/repetitivo visualmente
   (el placeholder ya dice lo mismo a la vista) pero que un input necesita
   igualmente para tener nombre accesible. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Saltar al contenido (accesibilidad) ---- */
/* Oculto visualmente salvo al recibir foco por teclado (Tab) -- deja
   saltar directo a <main> sin tener que pasar por los ~11 enlaces del
   icon-rail cada vez con un lector de pantalla o navegación por teclado. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 1000;
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,.2));
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
}

/* ---- Icon rail (navegación principal) ---- */
/* Dock flotante estilo Hyprland/waybar: separado del borde, en vidrio
   esmerilado oscuro (siempre oscuro, gane o pierda el tema del resto de
   la app — es "la barra", no el lienzo) con un filo de brillo a la
   derecha y el activo marcado con un brillo de acento en vez de un
   relleno plano. */
.app-shell { padding: var(--space-2); gap: var(--space-2); }
.icon-rail {
  width: 64px;
  flex-shrink: 0;
  /* Fijo a la altura de la ventana (no a la del contenido de la página,
     que puede ser mucho más larga) -- si no, la tarjeta de cuenta de
     abajo del todo acababa muy por debajo del fold en páginas largas.
     align-self:flex-start es necesario porque .app-shell es flex y por
     defecto estira sus hijos a la misma altura (stretch). */
  position: sticky;
  top: var(--space-2);
  align-self: flex-start;
  max-height: calc(100vh - var(--space-2) * 2);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%), var(--sidebar-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  transition: width 0.15s ease;
  /* Sin overflow:hidden a propósito -- la campana/tarjeta de cuenta
     viven aquí ahora con sus paneles desplegables (position:absolute,
     se salen del ancho del propio rail), y quedarían recortados si el
     rail recortara su propio contenido. El colapsar etiquetas ya lo
     resuelve display:none (ver .icon-rail-etiqueta), no este overflow. */
}
:root[data-rail-expandido="1"] .icon-rail { width: 200px; align-items: stretch; padding: var(--space-3) var(--space-2); }
.icon-rail-nav {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: inherit;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  width: 100%;
}
.icon-rail-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--sidebar-text);
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
:root[data-rail-expandido="1"] .icon-rail-link { width: 100%; justify-content: flex-start; padding: 0 10px; }
.icon-rail-link:hover { background: rgba(255,255,255,0.08); }
.icon-rail-link.active {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--sidebar-text-active);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 16px -2px color-mix(in srgb, var(--primary) 70%, transparent);
}
.icon-rail-link.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
:root[data-rail-expandido="1"] .icon-rail-link.active::before { left: 2px; }
.icon-rail-icono { width: 20px; height: 20px; flex-shrink: 0; }
/* Separador entre grupos del menú (Inicio / Trabajo diario / Herramientas
   y asistencia / Datos y administración) -- en colapsado es solo una
   línea sutil sin texto (el hueco ya funciona como ancla visual), en
   expandido se estira y aparece la etiqueta de sección debajo. */
.icon-rail-separador {
  width: 32px;
  height: 1px;
  margin: var(--space-2) 0;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
:root[data-rail-expandido="1"] .icon-rail-separador {
  width: auto;
  align-self: stretch;
  margin: var(--space-3) var(--space-2) 0;
}
.icon-rail-grupo-etiqueta {
  display: none;
  font-size: 0.68em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-text);
  opacity: 0.55;
  padding: 2px 10px 0;
}
:root[data-rail-expandido="1"] .icon-rail-grupo-etiqueta { display: block; }
.icon-rail-etiqueta {
  display: none;
  white-space: nowrap;
  font-size: 0.8em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
:root[data-rail-expandido="1"] .icon-rail-etiqueta { display: inline; }
.icon-rail-toggle { margin-bottom: var(--space-1); }
.icon-rail-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  background: var(--danger);
  color: white;
  font-size: 0.62em;
  font-weight: 700;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 8px -1px color-mix(in srgb, var(--danger) 80%, transparent);
}
:root[data-rail-expandido="1"] .icon-rail-badge { position: static; margin-left: auto; }

/* ---- Cabecera del rail: logo + campana de notificaciones ---- */
.icon-rail-brand-mark { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.notificaciones-menu { position: relative; }
.notificaciones-badge { top: -2px; right: -4px; }
/* #id + .clase a propósito: .ajustes-panel define su propio min-width
   más abajo en el fichero, y con la misma especificidad (una clase)
   gana la que aparezca DESPUÉS en la cascada -- el id garantiza que
   esta gana siempre, sin depender del orden de las reglas. */
#notificaciones-panel.notificaciones-panel {
  /* El rail es angosto (64-200px) -- un panel de 320-380px no cabe
     debajo sin salirse de la pantalla, así que se abre hacia la
     DERECHA del rail en vez de hacia abajo (comportamiento por
     defecto heredado de .ajustes-panel). */
  top: 0;
  left: calc(100% + 8px);
  right: auto;
  min-width: 320px;
  max-width: 380px;
  max-height: 420px;
  overflow-y: auto;
}
.notificaciones-panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.notificaciones-vaciar-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78em;
  cursor: pointer;
  padding: 2px 4px;
}
.notificaciones-vaciar-btn:hover { color: var(--danger-text); text-decoration: underline; }
.notificacion-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
}
.notificacion-item:last-child { border-bottom: none; }
.notificacion-item:hover { background: var(--bg); }
.notificacion-item.es-no-leida { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.notificacion-item-contenido {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 10px 4px 10px 12px;
  text-decoration: none;
  color: var(--text);
}
.notificacion-item-titulo { font-weight: 600; font-size: 0.9em; }
.notificacion-item-cuerpo { font-size: 0.85em; color: var(--text-muted); margin-top: 2px; }
.notificacion-item-fecha { font-size: 0.75em; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); }
.notificacion-item-eliminar {
  flex-shrink: 0;
  align-self: center;
  margin-right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.notificacion-item-eliminar svg { width: 13px; height: 13px; }
.notificacion-item:hover .notificacion-item-eliminar { opacity: 1; }
.notificacion-item-eliminar:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger-text); }

/* ---- Tarjeta de cuenta (abajo del rail) ---- */
.icon-rail-perfil-menu { position: relative; margin-top: auto; }
.icon-rail-perfil-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
  transition: background 0.12s ease;
}
:root[data-rail-expandido="1"] .icon-rail-perfil-card { width: 100%; height: auto; padding: 6px 8px; }
.icon-rail-perfil-card:hover { background: rgba(255,255,255,0.08); }
.icon-rail-perfil-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}
.icon-rail-perfil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.icon-rail-perfil-avatar .avatar-circulo { width: 100%; height: 100%; font-size: 0.72em; }
.icon-rail-perfil-texto { display: none; flex-direction: column; min-width: 0; text-align: left; }
:root[data-rail-expandido="1"] .icon-rail-perfil-texto { display: flex; }
.icon-rail-perfil-nombre {
  font-size: 0.8em;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-rail-perfil-tenant {
  font-size: 0.7em;
  color: var(--sidebar-text);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* #id + .clase: misma razón que #notificaciones-panel más arriba --
   .ajustes-panel declara su propia posición más abajo en el fichero y
   ganaría por orden de cascada con igual especificidad. */
#perfil-panel.icon-rail-perfil-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  right: auto;
}

/* ---- Grupos plegables del rail (Correo, Fiscal) -- solo se comportan
   como árbol con el rail expandido; colapsado, el padre es un enlace
   normal a su hijo principal (mismo comportamiento de siempre). ---- */
.icon-rail-grupo-plegable { width: 100%; display: flex; flex-direction: column; }
.icon-rail-chevron {
  display: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.icon-rail-chevron svg { width: 13px; height: 13px; }
:root[data-rail-expandido="1"] .icon-rail-chevron { display: inline-flex; }
.icon-rail-grupo-plegable.is-abierto .icon-rail-chevron { transform: rotate(180deg); }
.icon-rail-submenu { display: none; flex-direction: column; padding-left: 34px; }
:root[data-rail-expandido="1"] .icon-rail-grupo-plegable.is-abierto .icon-rail-submenu { display: flex; }
.icon-rail-sublink {
  display: block;
  padding: 6px 10px;
  font-size: 0.78em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sidebar-text);
  opacity: 0.75;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.icon-rail-sublink:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.icon-rail-sublink.active { opacity: 1; color: var(--sidebar-text-active); font-weight: 600; }

/* ---- Top bar (buscador + atajos de teclado) ---- */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: var(--space-2); }
.top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  height: 56px;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-sm);
}
/* Sin marca/campana/ajustes que empujar a la derecha (se movieron al
   rail) -- el buscador crece hasta un ancho razonable en vez de
   quedarse pegado a la izquierda con un hueco vacío detrás. */
.top-bar .busqueda-boton-abrir { flex: 0 1 480px; }
.ajustes-panel[hidden] { display: none; }
.ajustes-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 20;
}
.ajustes-panel-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 0.9em;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  /* Este mismo selector se usa tanto en <button> (sin subrayado por
     defecto) como en <a> (Mi perfil, Mis dispositivos, Documentación) --
     sin esto, las versiones <a> salían con el subrayado azul por
     defecto del navegador, fuera de lugar en un panel de botones. */
  text-decoration: none;
}
.ajustes-panel-icono { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted); }
.ajustes-panel-btn:hover { background: var(--bg); }
/* Agrupación del panel (Apariencia / Cuenta / Ayuda y salida) -- mismo
   criterio que el icon-rail ya agrupado, adaptado a este dropdown claro
   (el rail es de fondo oscuro fijo, este panel sigue el tema). */
.ajustes-panel-separador {
  height: 1px;
  margin: var(--space-2) var(--space-1);
  background: var(--border);
}
.ajustes-panel-grupo-etiqueta {
  display: block;
  font-size: 0.68em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.75;
  padding: 2px 12px 4px;
}
.ajustes-idiomas { display: flex; gap: 4px; padding: 4px 12px 8px; }

.ajustes-idiomas form { flex: 1; }
.ajustes-idioma-btn {
  width: 100%;
  padding: 6px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78em;
  font-family: var(--font-mono);
  cursor: pointer;
}
.ajustes-idioma-btn:hover { background: var(--bg); color: var(--text); }
.ajustes-idioma-btn.is-activo { background: var(--primary); border-color: var(--primary); color: var(--on-accent); font-weight: 600; }
.ajustes-panel-shutdown { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
.ajustes-panel-shutdown .ajustes-panel-btn:hover { background: rgba(224,85,90,0.12); color: var(--danger-text); }

/* ---- Content ---- */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  max-width: min(1680px, 100%);
}
/* Pantallas de "shell" a pantalla completa (ej. Correo, con su propio grid
   de 3 paneles) no deben quedar recortadas por el max-width/padding
   pensados para el resto de páginas de texto — ocupan todo el hueco. */
.content:has(> .correo-shell) {
  padding: 0;
  max-width: none;
}

.page-header { margin-bottom: 28px; }
.page-header h1 {
  margin: 0 0 4px;
  font-size: 1.5em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.subtitle { margin: 0; color: var(--text-muted); font-size: 0.95em; }

/* Cabeceras de sección sueltas (sin clase propia) dentro del contenido —
   mismo lenguaje visual que .page-header h1/.tools-section-title, para que
   cualquier <h2>/<h3> de una tarjeta o formulario (Ajustes de correo,
   Backoffice, Estadísticas, IA...) no caiga en el h2/h3 crudo del
   navegador. Selectores de especificidad mínima (:where) para que
   cualquier clase concreta declarada más abajo en este archivo
   (.menu-card h2, .tools-section-title, .tool-card-name,
   .correo-lectura-asunto, .menu-grid-titulo...) siga ganando sin tocarlas. */
.content :where(h2) {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.content :where(h3) {
  margin: 0 0 var(--space-2);
  font-size: 0.95em;
  font-weight: 600;
  color: var(--text-muted);
}

.menu-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.menu-header > div:first-child { display: flex; align-items: center; gap: 10px; }
.menu-header-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, #7c8ba1);
  flex-shrink: 0;
}

.menu-settings { position: relative; }
.menu-settings summary {
  list-style: none;
  cursor: pointer;
}
.menu-settings summary::-webkit-details-marker { display: none; }
.menu-settings[open] summary { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.menu-settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 300px;
  z-index: 10;
}
.menu-settings-panel .inline-form { display: flex; gap: 8px; }
.menu-settings-panel form:last-child { border-top: 1px solid var(--border); padding-top: 10px; }
.menu-settings-panel .btn-stop { width: 100%; justify-content: center; }

/* ---- Dashboard (home) ---- */
.dash-header { display: flex; align-items: center; justify-content: space-between; }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
/* Tarjeta de estadística horizontal (icono en caja de color + cifra/etiqueta
   apiladas a la derecha) -- calco literal de .stat-card del canvas de
   diseño (Main.dc.html), antes era una columna icono-arriba/cifra-abajo. */
.dash-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.dash-stat-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--primary) 55%, transparent);
}
.dash-stat-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-text);
  margin-bottom: 0;
  flex-shrink: 0;
}
.dash-stat-icono svg { width: 17px; height: 17px; }
.dash-stat-valor { display: block; font-family: var(--font-mono); font-size: 21px; font-weight: 700; line-height: 1; }
.dash-stat-label { display: block; color: var(--text-muted); font-size: 12px; margin-top: 4px; }

.dash-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  /* Sin esto, "Nota rápida" (2-3 campos) y "Buscar" (una sola línea) se
     estiran a la misma altura por el stretch por defecto del grid --
     cada tarjeta pasa a medir lo que necesita su propio contenido. */
  align-items: start;
  margin-bottom: var(--space-6);
}
.dash-accion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.dash-accion label { font-weight: 600; font-size: var(--font-size-sm); }
.dash-accion .quick-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dash-accion .quick-row select, .dash-accion .quick-row input { min-width: 0; max-width: 100%; }
.dash-accion .quick-row input[type="text"] { flex: 1; }
.tarea-mas-clientes { position: relative; }
.tarea-mas-clientes > summary { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.tarea-mas-clientes > div { position: absolute; z-index: 5; margin-top: 4px; min-width: 220px; max-height: 240px; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px;
                            background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.dash-accion-buscar {
  justify-content: center;
  align-items: center;
  flex-direction: row;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.dash-accion-buscar:hover {
  border-color: var(--primary);
  color: var(--primary-text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Layout de dos columnas del dashboard: acciones+menús a la izquierda,
   columna secundaria fija a la derecha con "Hoy" + Asistente IA juntos
   (mismo criterio que el canvas de diseño: la columna secundaria es
   "actividad + asistente", no solo actividad). El ancho usa
   --detail-rail-width (ver :root) -- mismo token que .fiscal-layout,
   que es el mismo patrón "lista + panel fijo" implementado dos veces
   con anchos distintos antes de esto. */
.dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--detail-rail-width); gap: var(--space-5); align-items: start; }
.dash-main { min-width: 0; }
.dash-sidebar { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
/* "Hoy" y el Asistente IA en la barra lateral son tarjetas de verdad
   (antes: texto suelto sin borde) -- calco de .panel/.ia-teaser del
   canvas de diseño. .dash-ia usa exactamente el mismo tratamiento
   plano que el resto de tarjetas de esta columna (antes llevaba su
   propio degradado de acento, que la distinguía sin necesidad real). */
/* Fondo --bg (el mismo de la página) en vez de --surface (el de las
   tarjetas "importantes" como .menu-card/.dash-stat) -- da jerarquía
   real entre columna principal y secundaria sin añadir ningún
   componente nuevo: el contenido de gestión queda "elevado", el
   contexto del día + el chat quedan "al ras", visualmente secundarios. */
.dash-sidebar .log-section {
  margin-bottom: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}
@media (max-width: 900px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr); }
  .dash-sidebar { position: static; }
}

.dash-ia {
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
}
.dash-ia h3 { margin: 0 0 var(--space-3); display: flex; align-items: center; gap: 8px; }
.dash-ia .ia-chat { box-shadow: none; background: none; border: none; }

/* ---- Menu grid (home) ---- */
.menu-grid {
  display: grid;
  /* Tope superior (280px) en vez de 1fr: con pocos menús (2-3 es
     habitual al principio) las tarjetas ya no se estiran a ocupar
     todo el ancho disponible, así que justify-content puede centrar
     el bloque entero en vez de dejarlo pegado a la izquierda con un
     hueco enorme a la derecha. Con muchos menús, simplemente llenan
     varias filas completas -- mismo aspecto que antes. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}
/* Tarjeta de menú: borde superior de color plano, calco literal de
   .menu-card del canvas de diseño (antes: fondo con degradado + acento
   en el borde IZQUIERDO -- más "glass", menos nítido). */
.menu-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent, #7c8ba1);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.menu-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent, #7c8ba1) 55%, var(--border));
  border-top-color: var(--accent, #7c8ba1);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--accent, #7c8ba1) 60%, transparent);
}
.menu-card-link {
  display: block;
  padding: 18px;
  text-decoration: none;
  color: var(--text);
}
.menu-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.menu-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent, #7c8ba1) 16%, var(--glass-bg));
  color: var(--accent, #7c8ba1);
}
.menu-card-icon svg { width: 20px; height: 20px; }
.menu-card h2 { margin: 0; font-size: 1.05em; padding-right: 32px; }
.menu-card-stats { display: flex; gap: 8px; flex-wrap: wrap; }

.menu-card-reorder {
  position: absolute;
  top: 34px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-card-reorder-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  width: 22px;
  height: 18px;
  line-height: 1;
  border-radius: 4px;
  font-size: 0.85em;
}
.menu-card-reorder-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--text); }
.menu-card-reorder-btn:disabled { opacity: 0.25; cursor: default; }

.menu-card-favorito { position: absolute; top: 10px; right: 10px; }
.menu-card-favorito button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1em;
  padding: 2px 4px;
  opacity: 0.55;
}
.menu-card:hover .menu-card-favorito button { opacity: 1; }
.menu-card-favorito button:hover { color: #f5c518; }

.menu-grid-titulo {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

/* Selector de icono (crear/editar menú) -- rejilla de botones tipo radio,
   el valor elegido se guarda en un <input type="hidden" name="icono">. */
.menu-icono-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 6px;
  max-width: 340px;
  margin: var(--space-2) 0;
}
.menu-icono-opcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.menu-icono-opcion svg { width: 18px; height: 18px; }
.menu-icono-opcion:hover { border-color: var(--primary); color: var(--text); }
.menu-icono-opcion[aria-pressed="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-text);
}

/* Insignias/etiquetas cortas: monoespaciadas + fondo mezclado del color
   de estado sobre el propio tema (antes eran hex fijos tipo #eef0f3, que
   se veían mal en oscuro — corregido de paso en el rediseño global). */
.pill {
  font-family: var(--font-mono);
  font-size: 0.76em;
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  color: var(--text-muted);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
}
.pill-live {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  color: var(--success-text);
  font-weight: 600;
}

/* Mismo tratamiento plano que el resto del dashboard (.dash-stat,
   .dash-accion, .menu-card) -- antes usaba el "glass" de una fase de
   diseño anterior (superficie semitransparente, radio grande),
   inconsistente con el resto de tarjetas de esta misma pantalla. */
.onboarding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.onboarding-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.onboarding-card-header h3 { margin: 0; }
.onboarding-lista { list-style: none; margin: 0; padding: 0; }
.onboarding-paso {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.onboarding-paso:first-child { border-top: none; }
.onboarding-check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-muted) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  color: var(--success-text);
}
.onboarding-paso.is-hecho .onboarding-check {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}
.onboarding-paso.is-hecho span { color: var(--text-muted); text-decoration: line-through; }
.onboarding-ir { margin-left: auto; font-size: 0.85em; white-space: nowrap; }

.empty-state {
  background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  margin-bottom: 24px;
}
.empty-state .muted { color: var(--text-muted); font-size: 0.9em; }

/* Ilustración mínima para los estados vacíos "en seco" (.empty-lane,
   .empty-state) -- antes eran solo texto, sin ningún elemento visual.
   Una sola bandeja/carpeta abierta trazada (mismo lenguaje que
   iconos.svg: trazo, sin relleno) reutilizada en ambas clases via
   ::before, para no tener que tocar las 36 plantillas que las usan. */
.empty-lane::before, .empty-state::before {
  content: "";
  display: block;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9099' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.9 10.4 17 3.5c-.3-.5-.8-.9-1.5-.9H8.5c-.6 0-1.2.4-1.5.9l-3.9 6.9'/%3E%3Cpath d='M3 10.5v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7'/%3E%3Cpath d='M3 10.5h4.5l1.2 2.4c.2.4.6.6 1 .6h4.6c.4 0 .8-.2 1-.6l1.2-2.4H21'/%3E%3C/svg%3E");
  opacity: 0.6;
}
.empty-state::before { width: 40px; height: 40px; margin: 0 auto 12px; }
.empty-lane { text-align: center; padding: 18px 12px; }
.empty-lane::before { width: 26px; height: 26px; margin: 0 auto 8px; }

/* Onboarding (Fase 4): estado vacío guiado de un menú recién creado, con
   CTA directos a las acciones rápidas de arriba. */
.empty-state-guiado {
  background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  margin-bottom: var(--space-5);
}
.empty-state-guiado-icono { width: 28px; height: 28px; color: var(--text-muted); }
.empty-state-guiado p { margin: var(--space-2) 0; }
.empty-state-guiado .muted { color: var(--text-muted); font-size: var(--font-size-sm); }
.empty-state-guiado-botones {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

/* Ahora vive DENTRO de .dash-main, justo debajo de las tarjetas de
   menú (antes: fuera de .dash-layout, al final de la página, con su
   propio ancho fijo de 560px y el "glass" de una fase de diseño
   anterior -- parecía un añadido aparte en vez de parte del mismo
   flujo de gestión de menús). Mismo tratamiento plano que el resto. */
.new-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-top: var(--space-4);
}
.new-menu h3 { margin: 0 0 12px; font-size: 1em; color: var(--text-muted); }

.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95em;
}
.inline-form input[type="color"] {
  width: 42px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  background: none;
}
/* .menu-form envuelve un .inline-form (nombre + color + botón) y el
   selector de icono en filas SEPARADAS -- antes el selector de icono
   (hasta 3 filas de botones, ver .menu-icono-selector) vivía como un
   hijo más de .inline-form, y al ser flex sin align-items (por
   defecto "stretch") estiraba el input de texto y el botón a esa
   misma altura, y aplastaba el selector de color nativo a una tira
   fina casi invisible. */
.menu-form { display: flex; flex-direction: column; gap: var(--space-2); }
.menu-form-icono-label { display: block; font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: 4px; }

/* ---- Buttons ----
   Antes usaban colores fijos (white/#f2f3f5/#c94247) que no seguían el
   tema oscuro — corregido de paso al aplicar el rediseño global: todo
   sobre variables, con el brillo de acento al pasar el ratón/enfocar en
   vez de solo oscurecer el fondo. */
.btn {
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.82em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.btn:hover { background: var(--bg); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--primary) 65%, transparent);
}
.btn-primary:active { background: var(--primary-dark); box-shadow: 0 0 6px -1px color-mix(in srgb, var(--primary) 55%, transparent); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
}
.btn-stop { background: var(--danger); border-color: var(--danger); color: white; }
.btn-stop:hover {
  filter: brightness(0.92);
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--danger) 65%, transparent);
}
.btn-stop:active { filter: brightness(0.85); box-shadow: 0 0 6px -1px color-mix(in srgb, var(--danger) 55%, transparent); }
.btn-stop:focus-visible {
  outline: none;
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 40%, transparent);
}
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--primary) 18%, transparent); }

/* ---- Subir archivo (componente único) ----
   Antes cada pantalla con un <input type="file"> lo dejaba sin
   estilizar (control nativo del navegador, gris/blanco, no encaja
   con el resto del tema oscuro) -- este envoltorio da el mismo
   aspecto de botón .btn.btn-ghost en todas partes, con el nombre del
   archivo elegido a su lado (ver app/static/file_input.js). El
   <input> real sigue siendo el mismo elemento con su mismo name/
   accept/required/multiple -- el backend no cambia. */
.file-input {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.file-input-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.file-input-boton input[type="file"] {
  /* No display:none -- algunos lectores de pantalla lo ignoran del
     todo si el input queda inalcanzable; clip lo saca visualmente
     sin quitarlo del árbol de accesibilidad (mismo patrón que
     .skip-link usa a la inversa). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.file-input-nombre {
  color: var(--text-muted);
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

/* ---- Quick actions (menu page) ---- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
/* Para el caso de una única tarjeta que debe ocupar todo el ancho
   (antes: style="grid-column: 1 / -1" repetido suelto en 3 plantillas) */
.quick-card-full { grid-column: 1 / -1; }
.quick-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: none;
}
.quick-card label {
  display: block;
  font-size: 0.78em;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.quick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-row input[type="text"] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95em;
}

/* ---- Chips de frases favoritas ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.chip-btn:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }

.favoritas { margin-bottom: 28px; }
.favoritas-panel {
  margin-top: 10px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.favoritas-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.favoritas-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 0.9em;
}
.chip-del {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}
.chip-del:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); }

/* Icono SVG pequeño e inline, dentro de un botón/enlace de acción de
   contenido (editar, eliminar, restaurar, adjunto...) -- sustituye los
   emoji sueltos que había antes (✕/🗑/✏/📎...) en toda la app, mismo
   tamaño consistente sea cual sea el contexto donde se use. No
   confundir con .icon-rail-icono/.ajustes-panel-icono (esos son de la
   navegación global, este es de contenido). */
.icono-inline {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  vertical-align: -3px;
}

/* ---- Active tasks ---- */
.active-section { margin-bottom: 28px; }
.active-section h3 { font-size: 0.95em; color: var(--text-muted); margin-bottom: 10px; }
.active-tasks { display: flex; flex-direction: column; gap: 8px; }
.active-task {
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border-radius: var(--radius);
  padding: 10px 14px;
}
.task-name { flex: 1; font-weight: 500; }
.task-timer {
  font-variant-numeric: tabular-nums;
  color: var(--primary-text);
  font-weight: 700;
  font-size: 0.95em;
}
.active-task.is-paused { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
.task-timer-frozen { color: var(--warning-text); }
.active-task-buttons { display: flex; gap: 8px; }

.task-aviso {
  display: none;
  font-size: 0.78em;
  color: var(--danger-text);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.active-task.is-olvidada { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.active-task.is-olvidada .task-aviso { display: inline; }

/* ---- Log list (menu page) ---- */
.log-section h3 { font-size: 0.95em; color: var(--text-muted); margin-bottom: 10px; }
/* Calendario fiscal (vencimientos): master-detail -- lista a la
   izquierda, ficha rápida del cliente fija a la derecha, poblada por
   AJAX al pulsar un vencimiento (ver el <script> de
   fiscal_vencimientos.html y app/rutas_fiscal.py:resumen_cliente_json).
   No sustituye la ficha completa (facturas/EspoCRM/documentos), que
   sigue siendo su propia página -- esto es solo para no perder el
   contexto de la lista al mirar un dato rápido. */
.fiscal-layout { display: grid; grid-template-columns: 1fr var(--detail-rail-width); gap: var(--space-5); align-items: start; }
.fiscal-lista { min-width: 0; }
.fiscal-detalle {
  position: sticky;
  top: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: var(--space-4);
}
.fiscal-detalle-vacio { margin: 0; color: var(--text-muted); font-size: var(--font-size-sm); }
.fiscal-detalle-nombre { margin: 0 0 2px; font-weight: 700; font-size: 1.05em; }
.fiscal-detalle-nif { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: 0.85em; }
.fiscal-detalle-filas { display: flex; flex-direction: column; }
.fiscal-detalle-fila {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}
.fiscal-detalle-fila:last-child { border-bottom: none; }
.fiscal-detalle-fila span:first-child { color: var(--text-muted); }
.fiscal-detalle-acciones { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
/* Fila de vencimiento: la pastilla del periodo y la fecha llevan un
   ancho fijo (mismo criterio que .log-time/.log-menu) para que las
   columnas alineen entre filas en vez de moverse según lo que mida el
   texto de cada una. */
.vencimiento-fiscal-item .pill { min-width: 44px; text-align: center; }
.vencimiento-fiscal-item .log-duration { min-width: 84px; }

.fiscal-cliente-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.fiscal-cliente-btn:hover { color: var(--primary-text); text-decoration: underline; }

/* Bloque 2 del plan de reestructuración del calendario fiscal:
   agrupación por cliente en /fiscal/vencimientos (antes una única lista
   plana larga). Mismo patrón visual que .menu-settings/.correo-cuenta-editar
   (<details> sin marcador nativo, cabecera resaltada al abrir). */
.fiscal-grupo { margin-bottom: var(--space-3); }
.fiscal-grupo:last-child { margin-bottom: 0; }
.fiscal-grupo-resumen {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.fiscal-grupo-resumen::-webkit-details-marker { display: none; }
.fiscal-grupo[open] .fiscal-grupo-resumen { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.fiscal-grupo-nombre { flex: 1; min-width: 0; }
.fiscal-grupo .log-list { margin-top: var(--space-2); }

@media (max-width: 900px) {
  .fiscal-layout { grid-template-columns: 1fr; }
  .fiscal-detalle { position: static; }
}

/* Bloque 3 del plan de reestructuración del calendario fiscal: vista de
   calendario mensual, alternable con la lista (/fiscal/vencimientos.html
   tiene el mismo toggle "Lista"/"Calendario"). */
.fiscal-calendario-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.fiscal-calendario-titulo { font-weight: 700; font-size: 1.1em; min-width: 12ch; text-align: center; }
.fiscal-calendario { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.fiscal-calendario-semana { display: grid; grid-template-columns: repeat(7, 1fr); }
.fiscal-calendario-cabecera-dias { background: var(--surface); }
.fiscal-calendario-dia-nombre {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-muted);
}
.fiscal-calendario-celda {
  min-height: 84px;
  padding: var(--space-2);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fiscal-calendario-semana .fiscal-calendario-celda:first-child { border-left: none; }
.fiscal-calendario-celda-vacia { background: color-mix(in srgb, var(--border) 25%, transparent); }
.fiscal-calendario-celda-hoy { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.fiscal-calendario-dia-numero { font-size: var(--font-size-sm); color: var(--text-muted); font-weight: 600; }
.fiscal-calendario-item {
  display: block;
  font-size: 0.72em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
/* Clases propias del estado de un vencimiento en el calendario -- antes
   reutilizaban .log-badge-duracion/nota/error (pensadas para notas/
   tareas del histórico, nombres sin sentido semántico aquí). Mismos
   colores de antes (verde/gris/rojo), solo con nombres que describen lo
   que de verdad son. */
.fiscal-estado-presentado { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.fiscal-estado-pendiente { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); border-color: color-mix(in srgb, var(--text-muted) 22%, transparent); }
.fiscal-estado-vencido { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
/* "+N más": cuando un día tiene más vencimientos de los que caben sin
   que la celda crezca sin control -- enlaza a la Lista filtrada a ese
   día concreto, en vez de recortar la información sin dar forma de
   verla entera (antes: todos los items se pintaban igual, sin límite,
   la celda podía saturarse de texto denso). */
.fiscal-calendario-mas {
  display: block;
  font-size: 0.72em;
  padding: 2px 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
}
.fiscal-calendario-mas:hover { color: var(--primary-text); }
@media (max-width: 900px) {
  .fiscal-calendario-dia-nombre { font-size: 0.65em; }
  .fiscal-calendario-celda { min-height: 56px; padding: 4px; }
  .fiscal-calendario-item, .fiscal-calendario-mas { font-size: 0.65em; }
}

.log-list { list-style: none; padding: 0; margin: 0; }
/* Fila con borde real en vez de solo sombra -- afecta a Tareas, Fiscal,
   Histórico y "Hoy" del dashboard (todas reutilizan .log-item). Mismo
   fallo que .bar-chart: una fila que se recorta solo con sombra se ve
   difusa, no nítida como el .row del canvas de diseño (que sí lleva
   border: 1px solid var(--border)). */
.log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  box-shadow: none;
}
.log-time { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 0.85em; width: 42px; }
.log-menu { font-size: 0.82em; color: var(--text-muted); width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-text { flex: 1; }
.log-duration { color: var(--text-muted); font-size: 0.85em; }
.empty-lane { color: var(--text-muted); font-size: 0.9em; }

/* Densidad global (Fase 3): botón en el menú de ajustes (⚙) de la barra
   superior, localStorage, aplicado como atributo en <html> (mismo
   mecanismo que el tema). De momento solo
   afecta a la lista de Tareas (.tarea-outlook-item); el resto de listas se
   suman después sin cambios de arquitectura. La densidad de Correo es
   independiente y vive en Correo > Ajustes, sin tocar. */
:root[data-densidad="compacta"] .tarea-outlook-item {
  padding: var(--space-1) var(--space-3);
  gap: var(--space-2);
  margin-bottom: 2px;
}
:root[data-densidad="compacta"] .tarea-outlook-item .log-duration,
:root[data-densidad="compacta"] .tarea-outlook-item .pill {
  display: none;
}

.log-badge {
  font-family: var(--font-mono);
  font-size: 0.72em;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.log-badge-nota { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); border-color: color-mix(in srgb, var(--text-muted) 22%, transparent); }
.log-badge-instantanea { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.log-badge-duracion { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.log-badge-pausada { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.log-badge-error { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

/* ---- Backoffice: visibilidad de herramientas por tenant ---- */
.herramientas-toggle-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 320px;
}
.herramienta-toggle-pill {
  font-family: var(--font-mono);
  font-size: 0.7em;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success-text);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}
.herramienta-toggle-pill.is-oculta {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  color: var(--text-muted);
  border-color: color-mix(in srgb, var(--text-muted) 22%, transparent);
  text-decoration: line-through;
}

/* ---- Estadísticas ---- */
.stats-section { margin-bottom: 28px; }
.stats-section h3 { font-size: 0.95em; color: var(--text-muted); margin-bottom: 10px; }

/* ---- Historial ---- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.filters label { display: flex; flex-direction: column; font-size: 0.82em; color: var(--text-muted); gap: 4px; }
.filters input, .filters select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9em;
}

/* Grupo de acciones (Filtrar/Limpiar, Exportar CSV/JSON...) separado
   visualmente de los campos que preceden -- antes eran botones/enlaces
   sueltos al mismo nivel que los campos de filtro, sin nada que
   marcara "esto es una acción" frente a "esto es un criterio". */
.action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
@media (max-width: 640px) {
  .action-group { margin-left: 0; padding-left: 0; border-left: none; }
}

/* ---- Paginación (historial.html, tareas_lista.html) ---- */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.paginacion-actual { color: var(--text-muted); font-size: 0.88em; }
.paginacion .is-deshabilitado { opacity: 0.4; pointer-events: none; }
/* Checkboxes de eventos del formulario de Webhooks -- antes un
   <fieldset> con estilos en línea que no podía envolver sus propias
   casillas por separado del resto de la fila (Tenant/URL/botón), se
   veía todo apretado en una sola línea (encontrado en producción). */
.webhook-eventos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  border: none;
  padding: 0;
  margin: 0;
}
.webhook-eventos label { flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }

/* Histórico: tabla+paginación a la izquierda, resumen del periodo fijo
   a la derecha -- mismo criterio de "actividad en un lateral" que
   .dash-layout del dashboard. */
.historial-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-5); align-items: start; }
.historial-main { min-width: 0; }
.historial-resumen {
  position: sticky;
  top: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: var(--space-4);
}
.historial-resumen h3 { margin: 0 0 var(--space-3); font-size: 0.95em; color: var(--text-muted); }
.historial-resumen-kpi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm);
}
.historial-resumen-kpi:last-of-type { border-bottom: none; }
.historial-resumen-kpi strong { font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace; font-size: 1.1em; }
.historial-resumen-subtitulo { margin: var(--space-3) 0 var(--space-2); font-size: var(--font-size-sm); color: var(--text-muted); }
.historial-resumen-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.historial-resumen-barras li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.historial-resumen-barra-nombre { width: 70px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historial-resumen-barra-track { flex: 1; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.historial-resumen-barra-fill { display: block; height: 100%; border-radius: 3px; }
.historial-resumen-barra-pct { width: 32px; flex-shrink: 0; text-align: right; color: var(--text-muted); font-size: 0.85em; }
@media (max-width: 900px) {
  .historial-layout { grid-template-columns: 1fr; }
  .historial-resumen { position: static; }
}

/* Mismo fallo que .log-item/.bar-chart: solo sombra, sin borde --
   envuelve las tablas de Estadísticas/Histórico. */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  overflow-x: auto;
}
.historial-table { width: 100%; border-collapse: collapse; }
.historial-table th, .historial-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9em;
}
.historial-table th {
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.78em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.historial-table tr:last-child td { border-bottom: none; }
.mono { font-variant-numeric: tabular-nums; color: var(--text-muted); }

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}

.empty { color: var(--text-muted); text-align: center; padding: 24px; }

/* ---- Informe con IA local ---- */
.ia-section {
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 18px 20px;
}
.ia-section h3 { margin: 0 0 4px; font-size: 1em; }
.ia-section .muted { color: var(--text-muted); font-size: 0.85em; margin: 0 0 14px; }
.ia-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.ia-form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ia-form-row label, .ia-prompt-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82em;
  color: var(--text-muted);
  flex: 1;
}
.ia-form select, .ia-form input[type="text"], .ia-form textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9em;
  font-family: inherit;
  resize: vertical;
}
.ia-form button { align-self: flex-start; }

.ia-error {
  margin-top: 14px;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger-text);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.88em;
}

/* ---- Toasts (sistema único de aviso, sustituye a los .ia-error /
   burbujas JS sueltas que había repartidas por varias plantillas) ---- */
.toast-contenedor {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(360px, calc(100vw - 2 * var(--space-4)));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  font-size: 0.88em;
  color: var(--text);
  animation: toast-entrar 0.18s ease-out;
}
.toast-error { border-left-color: var(--danger); }
.toast-icono { flex-shrink: 0; line-height: 1.4; }
.toast-exito .toast-icono { color: var(--success-text); }
.toast-error .toast-icono { color: var(--danger-text); }
.toast-texto { flex: 1; line-height: 1.4; }
.toast-accion {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--primary-text);
  font-weight: 600;
  font-size: 0.95em;
  cursor: pointer;
  padding: 0;
}
.toast-accion:hover { text-decoration: underline; }
.toast-cerrar {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 4px;
}
.toast-cerrar:hover { color: var(--text); }
.toast-saliendo { animation: toast-salir 0.2s ease-in forwards; }
@keyframes toast-entrar {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-salir {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast-saliendo { animation: none; opacity: 0; }
}
.ia-result {
  margin-top: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  white-space: pre-wrap;
  font-size: 0.92em;
  line-height: 1.5;
}

/* ---- Genérico ---- */
.muted { color: var(--text-muted); font-size: 0.9em; }

/* ---- Buscador (menú y histórico) ---- */
.log-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.log-section-head h3 { margin: 0; }
.search-form { display: flex; align-items: center; gap: 6px; }
.search-form input[type="search"] {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85em;
  width: 200px;
}
.search-clear {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85em;
  padding: 4px;
}
.search-clear:hover { color: var(--text); }

/* ---- Editar/eliminar entradas ---- */
.log-edit {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.85em;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.6;
}
.log-item:hover .log-edit,
.historial-table tr:hover .log-edit { opacity: 1; }
.log-edit:hover { background: color-mix(in srgb, var(--text-muted) 14%, transparent); }

.edit-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 18px 20px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.edit-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85em;
  color: var(--text-muted);
}

/* Mi perfil usa dos columnas dentro del mismo .edit-form (identidad y
   cuenta a la izquierda, preferencias a la derecha) en vez de un único
   .max-width:520px apilado -- override solo para esta página, .edit-form
   sigue siendo de una columna en el resto de formularios de la app. */
.perfil-form { max-width: 760px; display: grid; grid-template-columns: 280px 1fr; gap: var(--space-5); align-items: start; }
.perfil-form-col { display: flex; flex-direction: column; gap: 14px; }
.perfil-cuenta-link { display: inline-flex; align-items: center; gap: var(--space-2); width: 100%; justify-content: center; }
@media (max-width: 640px) {
  .perfil-form { grid-template-columns: 1fr; }
}

/* Fila de avatar dentro de .edit-form (app/templates/ajustes_perfil.html)
   -- antes vivía en un .quick-card aparte con varios style="" inline;
   ahora es una sección más del propio formulario, sin salirse de su
   max-width ni inventar estilos sueltos. */
.perfil-avatar-fila {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.perfil-avatar-imagen {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.perfil-avatar-iniciales {
  width: 64px;
  height: 64px;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.edit-form input[type="text"],
.edit-form input[type="datetime-local"],
.edit-form textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95em;
  font-family: inherit;
  color: var(--text);
}
.edit-form-actions { display: flex; gap: 8px; }
/* Separado del formulario de guardar con una línea propia -- antes no
   llevaba ningún borde/espaciado que lo distinguiera de "otro bloque
   más" apilado debajo, pese a ser una acción irreversible. */
.edit-form-delete {
  max-width: 520px;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* ---- Preguntar a mis datos (chat con IA local) ---- */
.chat-config {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  max-width: 640px;
}
.chat-config select, .chat-config input[type="text"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9em;
  font-family: inherit;
}
.chat-config select { flex: 0 0 auto; }
.chat-config input[type="text"] { flex: 1; min-width: 0; }
.chat-config .btn { margin-left: auto; }

.chat-log {
  max-width: 640px;
  min-height: 60px;
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.chat-msg {
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 0.92em;
  line-height: 1.5;
  white-space: pre-wrap;
  max-width: 85%;
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--primary);
  color: var(--on-accent);
  border-bottom-right-radius: 4px;
}
.chat-msg-assistant {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-msg-error {
  align-self: flex-start;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger-text);
  border-bottom-left-radius: 4px;
}
.chat-pensando { opacity: 0.6; }

.chat-input-row { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
.chat-input-row input[type="text"] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95em;
}

/* ---- Gráfico de barras (Estadísticas) ---- */
/* Borde de 1px en vez de solo sombra -- coherente con el resto de
   tarjetas planas de la app (.panel, .tool-card...); una tarjeta que
   solo se recorta por sombra se ve más "flotante"/difusa que nítida. */
.bar-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 70px;
  align-items: center;
  gap: 12px;
}
.bar-label {
  font-size: 0.85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  background: var(--bg);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  min-width: 3px;
}
.bar-value { font-size: 0.82em; text-align: right; white-space: nowrap; }

/* ---- Papelera ---- */
.papelera-vaciar { margin-bottom: 16px; }
.log-item form { display: inline-flex; }

/* ---- Tareas (estilo Outlook) ---- */
.tarea-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--surface);
  font-size: 0.7em;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarea-check:hover:not(:disabled) { border-color: var(--primary); }
.tarea-outlook-item.is-completada .tarea-check {
  background: var(--success);
  border-color: var(--success);
}
.tarea-outlook-item.is-completada .log-text a {
  color: var(--text-muted);
  text-decoration: line-through;
}
.pill.prioridad-alta { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger-text); }
.pill.prioridad-normal { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.pill.prioridad-baja { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary-text); }

/* ---- Subnav Lista/Calendario de Tareas ---- */
.tareas-subnav {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tareas-subnav a {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}
.tareas-subnav a.active { color: var(--text); border-bottom-color: var(--primary); }

/* ---- Tareas unificadas: lista, Mi día, tablero, checklist ---- */
.tarea-outlook-item { flex-wrap: wrap; }
.tarea-outlook-item .log-text { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.pill.tarea-proyecto {
  border-color: color-mix(in srgb, var(--pill-color, var(--text-muted)) 55%, transparent);
  background: color-mix(in srgb, var(--pill-color, var(--text-muted)) 14%, transparent);
}
.pill.tarea-cliente, .pill.tarea-correo, .pill.tarea-asignada, .pill.tarea-checklist {
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
}
.tarea-cronometro { display: inline-flex; align-items: center; gap: 4px; }
.tarea-cronometro .btn, .tarea-cronometro-form .btn { padding: 4px 8px; }
.tarea-cronometro-form { display: inline-flex; align-items: center; gap: 6px; }
.tarea-cronometro-form select { max-width: 150px; }
.tarea-con-cronometro { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--text-muted); }
.tareas-dia-seccion { margin-bottom: var(--space-5); }
.tareas-dia-titulo { font-size: 1.05em; display: flex; align-items: center; gap: 8px; }
.tareas-dia-vencidas .tareas-dia-titulo { color: var(--danger-text); }
.tareas-tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; align-items: start; }
.tareas-columna { min-width: 0; display: grid; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tareas-columna-titulo { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; }
.tareas-columna-vacia { margin: 0; font-size: 0.85em; }
.tareas-tarjeta { min-width: 0; display: grid; gap: 8px; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* Reloj y progreso del checklist en la tarjeta (canvas Interfaces Guilda Work: Tablero). */
.tareas-tarjeta-reloj { display: flex; align-items: center; gap: 8px; font: 600 0.85em var(--font-mono); color: var(--primary-text); }
.tareas-tarjeta-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.tareas-tarjeta-checklist { display: grid; gap: 4px; font-size: 0.8em; color: var(--text-muted); }
.tareas-tarjeta-barra { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; }
.tareas-tarjeta-barra > span { display: block; height: 100%; background: var(--primary); }
.tareas-tarjeta-titulo { font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
.tareas-tarjeta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tareas-tarjeta-mover { display: flex; gap: 6px; }
.tareas-tarjeta-mover select { flex: 1; min-width: 0; width: 100%; }
.tarea-checklist-bloque, .tarea-tiempo-bloque { margin-top: var(--space-5); }
.tarea-bloque-titulo { font-size: 1em; }
.tarea-checklist-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.tarea-checklist-item { display: flex; align-items: center; gap: 10px; }
.tarea-checklist-texto { flex: 1; overflow-wrap: anywhere; }
.tarea-checklist-item.is-hecha .tarea-checklist-texto { text-decoration: line-through; color: var(--text-muted); }

/* ---- Notas: título, formato, fijadas y adjuntos ---- */
.nota-titulo { font-weight: 700; }
.nota-cuerpo p { display: inline; margin: 0; }
.nota-cuerpo p + p::before { content: " "; }
.nota-cuerpo ul, .nota-cuerpo ol { margin: 4px 0 4px 1.2em; padding: 0; }
.nota-cuerpo a { text-decoration: underline; text-underline-offset: 2px; }
.nota-fijada-icono { color: var(--primary-text); }
.nota-ayuda-formato { font-size: 0.85em; margin-top: -4px; }
.nota-fijar { display: inline-flex; align-items: center; gap: 8px; }
.nota-adjuntos-bloque { margin-top: var(--space-5); max-width: 640px; }
.nota-adjuntos-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.nota-adjunto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nota-adjunto-miniatura { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* ---- Calendario de Tareas ---- */
.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-titulo { font-weight: 600; margin-left: 8px; }
.cal-vistas { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; }
.cal-vistas a {
  padding: 6px 12px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  border-radius: calc(var(--radius) - 4px);
}
.cal-vistas a.active { background: var(--primary); color: var(--on-accent); font-weight: 600; }

.cal-grid { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cal-grid-mes { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekday {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.cal-cell {
  min-height: 108px;
  padding: 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-grid-mes .cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.is-fuera-de-mes { background: var(--bg); }
.cal-cell.is-fuera-de-mes .cal-cell-num { color: var(--text-muted); }
.cal-cell.is-hoy { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cal-cell-num { font-size: 13px; font-weight: 600; }
.cal-cell.is-hoy .cal-cell-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-accent);
  font-weight: 700;
}
.cal-cell-chips { display: flex; flex-direction: column; gap: 2px; }
.cal-mas { font-size: 11px; color: var(--text-muted); padding-left: 2px; }

.cal-chip {
  display: block;
  font-size: 11.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--chip-color) 16%, var(--surface));
  color: var(--chip-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid var(--chip-color);
}
.cal-chip.is-completada { opacity: 0.55; text-decoration: line-through; }
/* Vencimientos fiscales: color fijo (no depende de --chip-color, que en
   tareas viene de la categoría Outlook) para que se distingan de un vistazo
   de las tareas normales en el mismo día -- ámbar/alerta, consistente con
   el resto de "esto necesita atención" en la app (p.ej. .prioridad-alta). */
.cal-chip-fiscal {
  background: color-mix(in srgb, #d98c1f 16%, var(--surface));
  color: #d98c1f;
  border-left-color: #d98c1f;
  font-weight: 600;
}

.cal-grid-cols { display: grid; grid-template-columns: repeat(var(--cal-cols), 1fr); align-items: stretch; }
.cal-col { border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.cal-grid-cols .cal-col:last-child { border-right: none; }
.cal-col.is-hoy { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cal-col-header {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.cal-col.is-hoy .cal-col-header { background: transparent; }
.cal-col-weekday { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.cal-col-num { display: block; font-size: 18px; font-weight: 700; }
.cal-col-chips { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.cal-vacio { font-size: 12px; color: var(--text-muted); }

/* ---- Selección para crear tareas desde el calendario ---- */
.cal-seleccionable { cursor: pointer; user-select: none; }
.cal-cell.is-seleccionada, .cal-col.is-seleccionada, .cal-hour-cell.is-seleccionada {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.cal-day-tasks { margin-bottom: 16px; }
.cal-hours {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.cal-hour-row { display: flex; border-bottom: 1px solid var(--border); }
.cal-hour-row:last-child { border-bottom: none; }
.cal-hour-label {
  width: 64px;
  flex-shrink: 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.cal-hour-cell { flex: 1; min-height: 34px; }
.cal-hour-cell:hover { background: var(--bg); }

.cal-quick-create {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 300px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
  border: 1px solid var(--border);
  padding: 14px 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-quick-create[hidden] { display: none; }
.cal-quick-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.cal-quick-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}
.cal-quick-close:hover { color: var(--text); }
.cal-quick-create input[type="text"], .cal-quick-create select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9em;
}
.cal-quick-create .quick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-quick-create-actions { display: flex; justify-content: flex-end; }

/* ---- Correo ---- */
.correo-cuerpo-html {
  width: 100%;
  min-height: 400px;
  border: none;
  background: white;
}

.correo-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--bg);
}
.correo-editor-toolbar button {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.85em;
  cursor: pointer;
  color: var(--text);
}
.correo-editor-toolbar button:hover { background: var(--surface); border-color: var(--border); }
.correo-editor-separador { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.correo-editor {
  min-height: 260px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: var(--surface);
  font-size: 0.95em;
  line-height: 1.5;
}
.correo-editor:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.correo-editor blockquote { margin: 8px 0; }
.correo-editor img { max-width: 100%; }

/* ---- Avatar circular (correo) ---- */
.avatar-circulo {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--avatar-color, #7c8ba1) 70%, black);
}
.avatar-circulo.avatar-grande { width: 48px; height: 48px; font-size: 0.95em; }

/* ---- Correo: shell de 3 paneles (estilo New Outlook) ---- */
.correo-shell {
  flex: 1;
  display: grid;
  /* La lista crece con la ventana (320px en portátil, hasta 440px en
     pantallas anchas) para que el asunto no se corte tan pronto. Con
     poco hueco sigue valiendo el overflow-x:auto de abajo. */
  grid-template-columns: 220px clamp(320px, 28vw, 440px) minmax(280px, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 0;
  /* Las dos primeras columnas son de ancho fijo (220px+340px) -- si el
     hueco disponible no llega a esos 560px + el mínimo del panel de
     lectura, la rejilla se desbordaba SIN scroll (overflow visible por
     defecto), lo que se veía como texto de un panel solapado con el
     de al lado (encontrado en producción: "Eliminar"/el asunto del
     correo se veían fantasma detrás de la lista de mensajes). Con
     overflow-x:auto aquí, en vez de solapar aparece una barra de
     desplazamiento lateral para todo el shell -- justo lo pedido. */
  overflow-x: auto;
}

/* Doble clic en un mensaje (ver static/correo_seleccion.js): oculta el
   rail y la lista para leer a pantalla completa, sin las columnas
   laterales comiéndose el sitio. */
.correo-shell.es-pantalla-completa {
  grid-template-columns: 1fr;
}
.correo-shell.es-pantalla-completa .correo-rail,
.correo-shell.es-pantalla-completa .correo-lista-pane {
  display: none;
}
.correo-lectura-volver {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85em;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.correo-lectura-volver:hover { color: var(--text); border-color: var(--primary); }

/* Barra superior, al estilo del menú superior de New Outlook */
.correo-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
/* Aviso de sincronización fallida de la cuenta activa (auto-sync del servidor). */
.correo-sync-aviso {
  margin-right: auto;
  margin-left: 14px;
  font-size: 0.8em;
  color: var(--danger-text);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
}
.correo-sync-aviso:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.correo-sync-error {
  flex-basis: 100%;
  font-size: 0.82em;
  color: var(--danger-text);
  overflow-wrap: anywhere;
}
.correo-topbar-titulo {
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95em;
}

/* Rail de cuentas */
.correo-rail {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
}
.correo-nuevo-btn {
  display: block;
  text-align: center;
  background: var(--primary);
  color: var(--on-accent);
  text-decoration: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.82em;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.correo-nuevo-btn:hover { background: var(--primary-dark); }
.correo-rail-vacio { font-size: 0.85em; color: var(--text-muted); padding: 0 4px; }
.correo-cuentas-lista { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.correo-cuenta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
}
.correo-cuenta-item .avatar-circulo { width: 26px; height: 26px; font-size: 0.68em; }
.correo-cuenta-item:hover { background: var(--surface); }
.correo-cuenta-item.active { background: var(--surface); box-shadow: var(--shadow); font-weight: 600; }
.correo-cuenta-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9em; }
.correo-badge {
  background: var(--primary);
  color: var(--on-accent);
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 700;
  padding: 1px 7px;
}
.correo-carpeta-lista { margin: 2px 0 10px 30px; }
.correo-carpeta-item {
  display: block;
  font-size: 0.85em;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--text-muted);
}
.correo-carpeta-item.active { color: var(--text); font-weight: 600; background: var(--surface); }
.correo-rail-ajustes {
  font-size: 0.85em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.correo-rail-ajustes:hover { color: var(--text); }

/* Lista de mensajes */
.correo-lista-pane {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.correo-lista-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.correo-lista-toolbar input[type="search"] {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.88em;
}
.correo-toolbar-check { display: flex; align-items: center; gap: 4px; font-size: 0.8em; color: var(--text-muted); white-space: nowrap; }
.correo-toolbar-check input { width: auto; }
.correo-sync-form { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.correo-sync-btn { width: 100%; }
.correo-lista-vacio { padding: 16px; color: var(--text-muted); font-size: 0.9em; }
.correo-lista-mensajes { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.correo-fila-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.correo-fila-wrap:hover { background: var(--bg); }
/* Mezclado con var(--surface), no con "white" a secas -- mezclar con
   blanco literal ignoraba el tema: en oscuro daba un fondo casi blanco
   con el texto casi blanco (--text: #e8eae9) encima, ilegible
   (encontrado en producción, ver captura). */
.correo-fila-wrap.is-seleccionada { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.correo-fila-check { width: auto; flex-shrink: 0; cursor: pointer; }
.correo-fila-contenido {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.correo-fila-texto { flex: 1; min-width: 0; }
.correo-fila-top { display: flex; justify-content: space-between; gap: 8px; }
.correo-fila-remitente { font-size: 0.88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-fila-fecha { font-size: 0.75em; color: var(--text-muted); flex-shrink: 0; }
.correo-fila-asunto { font-size: 0.86em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-fila-preview { font-size: 0.8em; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-fila-wrap.is-no-leido .correo-fila-remitente,
.correo-fila-wrap.is-no-leido .correo-fila-asunto { font-weight: 700; }
.correo-fila-wrap.is-no-leido::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  align-self: center;
}

/* Barra de acciones en lote (selección múltiple) */
.correo-lista-bulkbar[hidden] { display: none; }
.correo-lista-bulkbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  font-size: 0.85em;
}
.correo-lista-bulkbar span { font-weight: 600; margin-right: 4px; }
.correo-lista-bulkbar button, .correo-lista-bulkbar select {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.95em;
  cursor: pointer;
}
.correo-lista-bulkbar button:hover { border-color: var(--primary); }
.correo-lista-bulkbar .correo-bulkbar-eliminar { color: var(--danger-text); border-color: var(--danger); }
#correo-bulkbar-cancelar { margin-left: auto; background: transparent; border: none; color: var(--text-muted); }

/* Panel de lectura */
.correo-lectura-pane { display: flex; flex-direction: column; overflow-y: auto; padding: 20px 28px; }
.correo-lectura-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.correo-lectura-remitente { display: flex; align-items: center; gap: 12px; }
.correo-lectura-nombre { font-weight: 600; }
.correo-lectura-meta { font-size: 0.82em; color: var(--text-muted); margin-top: 2px; }
.correo-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 1em;
}
.correo-icon-btn:hover { background: var(--bg); border-color: var(--primary); }
/* El asunto de un correo NO es una cabecera de sección -- se libra del
   mayúsculas+mono genérico de .content :where(h2) (pensado para títulos
   de sección tipo "Favoritos"/"Backoffice", no para texto real escrito
   por un remitente). Encontrado al comparar con el canvas de diseño:
   "PEDIDO DE MATERIAL - CONFIRMACIÓN" en vez de "Pedido de material —
   confirmación". */
.correo-lectura-asunto {
  margin: 18px 0 12px;
  font-size: 1.3em;
  font-family: inherit;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

.correo-adjuntos { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.correo-adjunto-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size-sm);
  text-decoration: none;
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.correo-adjunto-chip:hover { border-color: var(--primary); color: var(--primary-text); }
.correo-adjunto-tamano { color: var(--text-muted); }
.correo-adjunto.tiene-vista-previa { display: flex; flex-direction: column; gap: var(--space-1); }
.correo-adjunto-preview-imagen {
  display: block;
  max-width: 220px;
  max-height: 160px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.correo-adjunto-preview-pdf {
  width: 280px;
  height: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.correo-aviso-imagenes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.correo-aviso-imagenes form { display: inline; }
.correo-aviso-imagenes button {
  border: none;
  background: none;
  color: var(--primary-text);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}
.correo-aviso-imagenes a { color: var(--primary-text); }

.correo-compose-adjuntos input[type="file"] { font-size: var(--font-size-sm); }
.correo-lectura-cuerpo { flex: 1; white-space: pre-wrap; }
.correo-cuerpo-texto { font-size: 0.92em; line-height: 1.5; }
.correo-lectura-vacio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
}
.correo-lectura-vacio-icono { width: 40px; height: 40px; opacity: 0.4; }

/* Redactar: panel de composición estilo Outlook */
.correo-compose { max-width: 760px; }
.correo-compose-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.correo-compose-header h1 { margin: 0; font-size: 1.3em; }
.correo-compose-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.correo-compose-campo label { width: 56px; flex-shrink: 0; color: var(--text-muted); font-size: 0.85em; }
.correo-compose-campo input, .correo-compose-campo select {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: 0.95em;
  color: var(--text);
}
.correo-compose-campo input:focus-visible, .correo-compose-campo select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 4px;
}
.correo-compose .correo-editor-toolbar { margin-top: 14px; }
.correo-compose-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.correo-compose-cc-toggle { font-size: 0.82em; color: var(--primary-text); text-decoration: none; white-space: nowrap; }
.correo-compose-cc-toggle:hover { text-decoration: underline; }
.correo-compose-cc-cco[hidden] { display: none; }
.correo-compose-cc-cco { display: flex; flex-direction: column; }

.correo-autocomplete-wrap { position: relative; }
.correo-autocomplete-lista {
  position: absolute;
  top: 100%;
  left: 44px;
  right: 0;
  z-index: 20;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.12));
  max-height: 200px;
  overflow-y: auto;
}
.correo-autocomplete-lista[hidden] { display: none; }
.correo-autocomplete-item { padding: 8px 12px; font-size: 0.9em; cursor: pointer; }
.correo-autocomplete-item:hover { background: var(--bg); }
.correo-autocomplete-aviso { padding: 8px 12px; font-size: 0.85em; color: var(--text-muted); cursor: default; }

/* Densidad compacta de la lista de mensajes */
.correo-lista-mensajes.es-compacta .correo-fila-wrap { padding: 5px 12px; gap: 4px; }
.correo-lista-mensajes.es-compacta .avatar-circulo { width: 26px; height: 26px; font-size: 0.65em; }
.correo-lista-mensajes.es-compacta .correo-fila-preview { display: none; }

/* Categorías */
.correo-categoria-select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82em;
  background: var(--surface);
  color: var(--text);
}
.correo-categoria-punto {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Ajustes de correo */
.correo-ajustes-seccion {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  max-width: 640px;
}
.correo-ajustes-seccion h2 { margin: 0 0 12px; font-size: 1.1em; }
.correo-form-seccion { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.correo-form-subtitulo {
  margin: 12px 0 0;
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.correo-form-campo { display: flex; flex-direction: column; gap: 4px; }
.correo-form-campo label { font-size: 0.82em; color: var(--text-muted); font-weight: 600; }
.correo-form-campo input, .correo-form-campo select, .correo-form-campo textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95em;
  font-family: inherit;
}
.correo-form-campo textarea { resize: vertical; }
.correo-form-fila-doble { display: flex; gap: 12px; }
.correo-form-fila-doble .correo-form-campo { flex: 1; }
.correo-form-campo-estrecho { max-width: 110px; }
.correo-form-radios { display: flex; gap: 16px; font-size: 0.9em; }
.correo-form-radios label { display: flex; align-items: center; gap: 6px; font-weight: normal; }
.correo-form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  font-weight: normal;
  color: var(--text);
}
.correo-form-checkbox input { width: auto; }

/* Desplegable "Editar" de una cuenta de correo (correo_cuentas.html) --
   mismo patrón que .menu-settings/.menu-settings-panel (menu.html):
   <details> con el panel flotante en position:absolute, no un ancho
   fijo estirado dentro de la fila. */
.correo-cuenta-editar { position: relative; display: inline-block; }
.correo-cuenta-editar summary { list-style: none; cursor: pointer; }
.correo-cuenta-editar summary::-webkit-details-marker { display: none; }
.correo-cuenta-editar[open] summary { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.correo-cuenta-editar-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  width: min(360px, 90vw);
  z-index: 10;
}

/* Ribbon de acciones del mensaje abierto, al estilo del ribbon "Inicio" de Outlook */
/* Rediseño de la barra de acciones (dirección "A" aprobada tras comparar
   mockups): antes era una cinta estilo Office con botones apilados
   icono+etiqueta de 56px mínimo que desbordaba horizontalmente con
   muchas acciones habilitadas -- el componente menos "Nate Gentile" de
   la app. Ahora: toolbar compacta de SOLO icono (34px), con tooltip
   nativo (title=) en vez de etiqueta visible, y flex-wrap en vez de
   overflow-x -- a propósito, para que nunca recorte un icono: si no
   cabe todo en una línea, pasa a una segunda en vez de esconder nada
   tras un scroll lateral. */
.correo-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-top: 14px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.correo-ribbon-grupo {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 8px;
  margin-right: 6px;
  border-right: 1px solid var(--border);
}
.correo-ribbon-grupo:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.correo-ribbon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.correo-ribbon-btn:hover { background: var(--surface); color: var(--text); }
.correo-ribbon-btn.esta-activo { color: var(--primary-text); }
.correo-ribbon-icono { display: flex; line-height: 1; }
.correo-ribbon-icono svg { width: 18px; height: 18px; flex-shrink: 0; }
/* La etiqueta de texto se queda en el DOM (lectores de pantalla, y el
   title= del botón ya da el tooltip visual) pero no ocupa espacio --
   mismo patrón .sr-only que el resto de la app, no display:none (que
   algunos lectores de pantalla ignoran igual que lo visual). */
.correo-ribbon-etiqueta {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.correo-ribbon-select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8em;
  max-width: 130px;
}
/* .correo-categoria-select se reusa también en la fila de la lista de
   mensajes (fuera del ribbon) -- aquí solo se ajusta su tamaño dentro
   del ribbon compacto, sin tocar la regla general. */
.correo-ribbon .correo-categoria-select {
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 0.8em;
  max-width: 130px;
}
.correo-ribbon-fecha-aviso { margin-left: 2px; }
.correo-ribbon-fecha-aviso input {
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.78em;
}
.correo-ribbon-posponer { display: flex; align-items: center; gap: 4px; }
.correo-ribbon-posponer input {
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.78em;
  color: var(--text);
  background: var(--surface);
}

/* Impresión: solo el cuerpo del mensaje leído, a ancho completo */
@media print {
  .correo-topbar, .correo-rail, .correo-lista-pane, .correo-ribbon, .icon-rail, .top-bar { display: none; }
  .correo-shell { display: block; height: auto; margin: 0; }
  .correo-lectura-pane { padding: 0; overflow: visible; }
  .correo-lectura-asunto { margin-top: 0; }
}

/* --- Asistente IA (chat con OpenRouter) --------------------------------- */

/* La página completa /ia dejaba el chat con su tamaño mínimo
   (.ia-chat-mensajes: min-height 240px) aunque sobrara página entera
   de espacio debajo -- se veía diminuto sin mensajes (encontrado en
   producción). Mismo patrón que .ia-panel-flotante (que si ocupa bien
   su hueco): el contenedor se estira a toda la altura disponible del
   contenido y el chat crece dentro con flex:1. */
.ia-pagina { max-width: 760px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ia-pagina .ia-chat { flex: 1; min-height: 0; }
.ia-pagina .ia-chat-mensajes { flex: 1; max-height: none; }

/* El chat (a diferencia de ajustes.html, que también usa .ia-pagina pero
   es un formulario y debe quedarse estrecho) no tiene nada alrededor que
   necesite una columna de lectura corta -- que ocupe todo el hueco del
   área de contenido, igual que ya hace Correo (.content:has(> .correo-shell)). */
.content:has(> .ia-pagina-chat) { padding: 0; max-width: none; }
.ia-pagina-chat { max-width: none; margin: 0; padding: 24px 40px; }
.ia-conversaciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ia-conversaciones select { flex: 1 1 220px; min-width: 0; max-width: 440px; }
.ia-pagina-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ia-pagina-cabecera h1 {
  margin: 0;
  font-size: 1.5em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ia-aviso {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.9em;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.ia-aviso-modo-autonomo { margin-top: 4px; }

.ia-chat {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ia-chat-aviso {
  margin: 0;
  padding: 6px 14px;
  font-size: 0.76em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 6%, transparent);
  border-bottom: 1px solid var(--border);
}

.ia-chat-mensajes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow-y: auto;
  min-height: 240px;
  max-height: 55vh;
}

.ia-tabla-wrap { max-width: 100%; overflow-x: auto; margin: 6px 0; }
.ia-tabla { border-collapse: collapse; font-size: 0.9em; }
.ia-tabla th, .ia-tabla td { padding: 5px 10px; border: 1px solid var(--border); text-align: left; white-space: nowrap; }
.ia-tabla th { background: color-mix(in srgb, var(--text) 6%, transparent); font-weight: 600; }

.ia-msg {
  /* 85% por sí solo se vuelve enorme en una página a sangre completa
     en un monitor ancho -- tope absoluto añadido para que el texto
     siga siendo cómodo de leer sin reducir el ancho del contenedor
     del chat (que sí debe ocupar todo el hueco, ver comentario de
     .ia-pagina-chat más arriba). */
  max-width: min(85%, 720px);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.92em;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.ia-msg-user {
  align-self: flex-end;
  background: var(--primary);
  color: var(--on-accent);
  border-bottom-right-radius: 3px;
}
.ia-msg-assistant {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.ia-msg-assistant code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
}
.ia-msg-assistant a { color: inherit; text-decoration-thickness: 1px; }
.ia-msg-tool {
  align-self: center;
  background: none;
  color: var(--text-muted);
  font-size: 0.8em;
  font-style: italic;
  max-width: 100%;
}
/* Adjunto que una tool le manda al usuario por el chat (Drive, documento
   firmado...) -- mismo lenguaje visual que .correo-adjunto-*, ver
   app/static/style.css bloque de Correo, con su propio prefijo. */
.ia-adjunto {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-style: normal;
  font-size: 1em;
  max-width: 100%;
}
.ia-adjunto-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size-sm);
  text-decoration: none;
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ia-adjunto-chip:hover { border-color: var(--primary); color: var(--primary-text); }
.ia-adjunto-preview-imagen {
  display: block;
  max-width: 220px;
  max-height: 160px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ia-adjunto-preview-pdf {
  width: 280px;
  height: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ia-msg-error {
  align-self: center;
  background: none;
  color: var(--danger-text);
  font-size: 0.85em;
  max-width: 100%;
}

.ia-chat-pendiente[hidden] { display: none; }
.ia-chat-pendiente {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.ia-chat-pendiente-titulo { margin: 0; font-size: 0.9em; }
.ia-chat-pendiente-args {
  margin: 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8em;
  max-height: 140px;
  overflow: auto;
}
.ia-chat-pendiente-botones { display: flex; gap: 8px; }
.ia-chat-pendiente-botones .ia-chat-confirmar {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ia-chat-pendiente-botones .ia-chat-confirmar[data-aceptar="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-accent);
  font-weight: 600;
}

.ia-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.ia-chat-form textarea {
  /* Sin borde/fondo propios a propósito -- el contorno ya lo lleva
     .ia-chat (border + border-radius), así se evita el efecto "caja
     dentro de caja" que tenía antes. */
  flex: 1;
  resize: none;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
}
.ia-chat-form textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ia-chat-form button {
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--primary);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  cursor: pointer;
}

/* Botón de dictado por voz (icono redondo, no la píldora lima genérica de
   .ia-chat-form button) -- estado "escuchando" con pulso rojo sutil,
   mismo --danger que el resto de la marca para "grabando/en directo". */
.ia-chat-mic {
  flex: 0 0 auto;
  width: 38px;
  padding: 0 !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  text-transform: none !important;
  font-size: 1.1em !important;
}
.ia-chat-mic.escuchando {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: white !important;
  animation: ia-mic-pulso 1.1s ease-in-out infinite;
}
@keyframes ia-mic-pulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 0%, transparent); }
}
/* Si el navegador no soporta voz, ia_asistente.js oculta mic/live y no
   queda hueco raro en el formulario. */
.ia-chat-mic[hidden] { display: none; }

/* Botón de adjuntar (Fase G2) -- mismo tamaño/forma redonda que .ia-chat-mic,
   pero es un <label> envolviendo un <input type="file"> oculto, no un
   <button>, así que necesita sus propias reglas en vez de compartir clase. */
.ia-chat-adjuntar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.1em;
}
.ia-chat-adjunto {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 6px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85em;
  color: var(--text-muted);
}
.ia-chat-adjunto[hidden] { display: none; }
.ia-chat-adjunto-quitar {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1em;
}
.ia-chat-adjunto-quitar:hover { color: var(--danger-text); }

.ia-chat-pie { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 12px; }

.ia-chat-vaciar {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8em;
  cursor: pointer;
  text-decoration: underline;
}

.ia-chat-live {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.78em;
  padding: 4px 10px;
  cursor: pointer;
}
.ia-chat-live.activo {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
  font-weight: 600;
}
.ia-chat-live[hidden] { display: none; }
/* Punto de "grabando" cuando el modo Live está activo -- sustituye al
   emoji 🔴 (app/static/ia_asistente.js), un simple círculo CSS en vez
   de traer un icono Lucide solo para un punto de color. */
.ia-live-punto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

.ia-panel-flotante[hidden] { display: none; }
.ia-panel-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 360px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 24px -8px color-mix(in srgb, var(--primary) 45%, transparent);
  z-index: 1000;
  overflow: hidden;
}
.ia-panel-flotante .ia-chat { border: none; border-radius: 0; flex: 1; min-height: 0; }
.ia-panel-flotante-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.ia-panel-flotante-cabecera button {
  background: none;
  border: none;
  font-size: 1.1em;
  color: var(--text-muted);
  cursor: pointer;
}

/* ---- Login / registro (páginas independientes, sin app-shell) ---- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sin fondo propio: deja ver la micro-rejilla de `body` por debajo —
     el primer momento "rice" que ve cualquiera, antes incluso de entrar
     a la app. */
  position: relative;
  overflow: hidden;
}
.auth-shell::before {
  /* Resplandor centrado detrás de la tarjeta, sutil */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(480px 320px at 50% 42%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.auth-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.auth-logo { width: 48px; height: 48px; object-fit: contain; margin: 0 auto var(--space-2); }
/* El logotipo es blanco: en el tema claro sobre la tarjeta blanca casi no se veía. Va sobre una pastilla oscura (como en la barra lateral). */
:root[data-theme="light"] .auth-logo { background: var(--sidebar-bg); border-radius: 14px; padding: 9px; box-sizing: content-box; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .auth-logo { background: var(--sidebar-bg); border-radius: 14px; padding: 9px; box-sizing: content-box; } }
.auth-card h1 { margin: 0 0 var(--space-2); font-size: 1.3em; text-align: center; }
.auth-submit { width: 100%; justify-content: center; margin-top: var(--space-2); }
.auth-alterna { text-align: center; font-size: 0.88em; color: var(--text-muted); margin: var(--space-2) 0 0; }

/* ---- Portal de cliente (páginas independientes, sin app-shell) ----
   Dirección "B" del rediseño (comparada con otra en un canvas de
   mockups, aprobada por el usuario): identidad propia de "expediente
   fiscal" sobre papel cálido -- deliberadamente NO hereda el terminal
   lima/negro del resto de la app (ver tokens --portal-* más arriba).
   Mismo criterio de "página propia, sin app-shell" que .auth-shell. */
.portal-cliente-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  background: var(--portal-paper);
  color: var(--portal-ink);
  min-height: 100vh;
}
.portal-cliente-shell .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.portal-cliente-shell .page-header .subtitle { color: var(--portal-muted); }
.portal-cliente-shell .btn-ghost {
  border-color: var(--portal-line);
  color: var(--portal-muted);
  background: var(--portal-card);
}

/* Resumen con anillo de progreso (presentados/total) -- el cliente ve de
   un vistazo cuánto le queda sin tener que contar filas. El anillo es un
   conic-gradient puro, sin SVG ni librería de gráficos: solo dos colores
   (acento = presentados, línea = pendientes), nunca más de una métrica. */
.portal-resumen {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--portal-card);
  border: 1px solid var(--portal-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.portal-resumen-anillo {
  --pct: 0deg;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--portal-accent) var(--pct), var(--portal-line) var(--pct));
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-resumen-anillo span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--portal-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.portal-resumen-texto strong { display: block; font-size: 1.02em; }
.portal-resumen-texto span { font-size: 0.88em; color: var(--portal-muted); }

/* Aviso de documento pedido por la gestoría -- mismo tono de advertencia
   que .portal-carpeta.warn, para que el cliente reconozca el color antes
   de leer el texto. */
.portal-peticion {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--portal-warn-bg);
  border: 1px solid color-mix(in srgb, var(--portal-warn-ink) 35%, var(--portal-warn-bg));
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.portal-peticion svg { flex-shrink: 0; color: var(--portal-warn-ink); margin-top: 2px; }
.portal-peticion strong { display: block; color: var(--portal-warn-ink); font-size: 0.92em; margin-bottom: 2px; }
.portal-peticion a { color: var(--portal-ink); font-weight: 600; }

.portal-anio-titulo {
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--portal-muted);
  margin: var(--space-5) 0 var(--space-3);
}
.portal-anio-titulo:first-of-type { margin-top: 0; }

/* Cada vencimiento como una "carpeta" de expediente -- metáfora
   deliberada (pestaña con el modelo, estado como color de la propia
   pestaña) en vez de una fila de tabla genérica. */
.portal-carpeta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--portal-card);
  border: 1px solid var(--portal-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.portal-carpeta-tab {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72em;
  font-weight: 800;
  text-decoration: none;
}
.portal-carpeta.ok .portal-carpeta-tab { background: var(--portal-ok-bg); color: var(--portal-ok-ink); }
.portal-carpeta.warn .portal-carpeta-tab { background: var(--portal-warn-bg); color: var(--portal-warn-ink); }
.portal-carpeta-info {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.portal-carpeta-info strong { display: block; font-size: 0.95em; }
.portal-carpeta-info span { font-size: 0.85em; color: var(--portal-muted); }
.portal-estado {
  font-size: 0.78em;
  font-weight: 700;
  padding: 4px var(--space-2);
  border-radius: 999px;
  white-space: nowrap;
}
.portal-estado.ok { background: var(--portal-ok-bg); color: var(--portal-ok-ink); }
.portal-estado.warn { background: var(--portal-warn-bg); color: var(--portal-warn-ink); }
.portal-carpeta-iconos {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}
.portal-carpeta-iconos a {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--portal-muted);
  border-radius: var(--radius-sm);
}
.portal-carpeta-iconos a:hover { background: var(--portal-paper); color: var(--portal-ink); }

.portal-volver {
  display: inline-block;
  font-size: 0.85em;
  color: var(--portal-accent);
  font-weight: 700;
  margin-bottom: var(--space-4);
  text-decoration: none;
}

/* Subir documento: zona de soltar con borde discontinuo, mismo
   lenguaje visual que el resto del portal (tarjeta sobre papel) en vez
   de reusar .quick-card del panel interno. */
.portal-subir {
  background: var(--portal-card);
  border: 2px dashed var(--portal-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  margin-bottom: var(--space-4);
}
.portal-subir label:first-child { color: var(--portal-muted); font-size: 0.88em; display: block; margin-bottom: var(--space-3); }
.portal-subir .btn-primary { background: var(--portal-accent); color: #fff; border-color: var(--portal-accent); }
.portal-doc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--portal-accent-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  font-size: 0.9em;
}
.portal-doc .peso { margin-left: auto; color: var(--portal-muted); font-size: 0.82em; }

/* Mensajes del vencimiento: burbujas de chat simples, el cliente a la
   derecha (acento) y la gestoría a la izquierda (neutro) -- mismo
   patrón de lateralidad que cualquier chat reconocible, sin reusar
   .log-item genérico. */
.portal-hilo { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.portal-respuestas-rapidas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.portal-msg {
  max-width: 80%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: 0.92em;
}
.portal-msg .fecha { display: block; font-size: 0.78em; color: var(--portal-muted); margin-top: 4px; }
.portal-msg.cliente {
  align-self: flex-end;
  background: var(--portal-accent-bg);
  border-bottom-right-radius: var(--radius-sm);
}
.portal-msg.gestoria {
  align-self: flex-start;
  background: var(--portal-card);
  border: 1px solid var(--portal-line);
  border-bottom-left-radius: var(--radius-sm);
}

/* ---- Herramientas: tarjetas de app conectadas, estilo "rice" (Hyprland) ----
   Clases propias (.tools-*), NO reutiliza .menu-grid/.menu-card (esas las
   usa inicio.html para los menús/categorías del log) — así se puede tunear
   esto sin arrastrar cambios a la pantalla de inicio. La micro-rejilla de
   fondo ahora vive en `body` (Fase rediseño global) y ya se ve aquí sin
   nada adicional — esta sección solo pone las tarjetas en vidrio
   esmerilado con un acento de color por herramienta.*/

.tools-buscador {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 360px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  color: var(--text-muted);
}
.tools-buscador svg { width: 15px; height: 15px; flex-shrink: 0; }
.tools-buscador input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text);
  font-size: var(--font-size-sm);
  outline: none;
}
.tools-section { margin-bottom: var(--space-6); }
.tools-section:last-child { margin-bottom: 0; }
.tools-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}
.tools-section-title span {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--primary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 70%, transparent);
  flex-shrink: 0;
}

.tools-grid {
  display: grid;
  /* Mismo criterio que .menu-grid: tope superior (300px) en vez de
     1fr, + justify-content:center, para que una fila incompleta (ej.
     la última de una categoría) quede centrada en vez de pegada a la
     izquierda con un hueco vacío a la derecha. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 300px));
  justify-content: center;
  gap: var(--space-4);
}

.tool-card {
  --tool-accent: var(--primary);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Alto fijo (icono + nombre de 1 línea + descripción recortada a 2
     líneas + pastilla de estado + paddings) para que ninguna tarjeta
     dependa de cuánto texto tenga su vecina de fila -- antes, una
     descripción larga (p.ej. "Drive") estiraba toda la fila y dejaba
     un hueco vacío enorme en las tarjetas con descripción corta. */
  min-height: 200px;
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  /* Fondo plano y sin desenfoque -- calco de .tool-card del canvas de
     diseño (antes: degradado sutil + blur(14px), más "glass" que nítido). */
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tool-card::before {
  /* Filo superior de color, como el acento de un panel de rice */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tool-accent), transparent);
  opacity: 0.7;
}
.tool-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tool-accent) 55%, var(--border));
  box-shadow:
    0 10px 30px -12px color-mix(in srgb, var(--tool-accent) 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--tool-accent) 25%, transparent) inset;
}

.tool-card-top { display: flex; align-items: center; justify-content: space-between; }
.tool-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 7px;
  border-radius: var(--radius-md);
  /* Chip fijo casi blanco (no ligado al tema) — los logotipos son los
     reales de cada proyecto, con sus propios colores de marca (algunos
     monocromos en negro/blanco), así que necesitan un fondo neutro y
     constante para verse con contraste sea cual sea el tema. */
  background: #eef0e8;
  border: 1px solid color-mix(in srgb, var(--tool-accent) 30%, transparent);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.15s ease;
}
.tool-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tool-card:hover .tool-card-icon {
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--tool-accent) 65%, transparent);
}
.tool-card-go {
  display: inline-flex;
  color: var(--text-muted);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.tool-card:hover .tool-card-go { opacity: 1; transform: translate(0, 0); color: var(--tool-accent); }

/* Sin esto, .content :where(h3) (pensada para subtítulos discretos)
   pinta el nombre de la herramienta en gris apagado -- encontrado al
   comparar con el canvas: "Outline" debía verse en texto normal
   (var(--text)), no atenuado como si fuera metadata. */
.tool-card-name { margin: 0; font-size: 1.05em; font-weight: 700; color: var(--text); }
.tool-card-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9em;
  line-height: 1.4;
  /* Recorte a 2 líneas -- ver el comentario de min-height en .tool-card:
     limita cuánto puede crecer una descripción larga en vez de dejar
     que dicte la altura de toda la fila. Sin flex-grow a propósito:
     combinarlo con -webkit-line-clamp es poco fiable en Chromium (el
     recorte deja de aplicarse) -- la pastilla de estado se ancla al
     fondo con su propio margin-top:auto en vez de depender de que
     este bloque crezca. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tool-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  /* margin-top:auto (no var(--space-1)) empuja la pastilla al fondo
     de la tarjeta pase lo que pase con la altura de la descripción --
     antes dependía de que .tool-card-desc tuviera flex-grow:1, pero
     combinar flex-grow con -webkit-line-clamp (necesario para
     recortar descripciones largas a 2 líneas) es poco fiable en
     Chromium: el recorte dejaba de aplicarse y la tarjeta crecía sin
     límite. Desacoplado: la descripción solo se recorta, el hueco lo
     rellena este margen automático. */
  margin-top: auto;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 0.75em;
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text-muted);
}
.tool-card-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tool-card-status.is-sso .tool-card-status-dot {
  background: var(--success);
  box-shadow: 0 0 6px color-mix(in srgb, var(--success) 80%, transparent);
}
.tool-card-status.is-standalone .tool-card-status-dot {
  background: var(--warning);
  box-shadow: 0 0 6px color-mix(in srgb, var(--warning) 70%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .tool-card, .tool-card-icon, .tool-card-go { transition: none; }
}

/* ---- Buscador global (Ctrl/Cmd+K, app/static/busqueda.js) ---- */

.busqueda-boton-abrir {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  min-width: 220px;
}
.busqueda-boton-abrir:hover { border-color: var(--primary); }
.busqueda-boton-abrir svg { width: 15px; height: 15px; flex-shrink: 0; }
.busqueda-boton-abrir .busqueda-atajo {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.busqueda-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 1000;
}
.busqueda-overlay[hidden] { display: none; }

.busqueda-modal {
  width: min(560px, 92vw);
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.busqueda-campo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.busqueda-campo input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1em;
}
.busqueda-campo input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 4px;
}
/* Lupa/limpiar: mismo botón cambia de icono y función según si hay
   texto escrito (ver actualizarIcono() en busqueda.js) -- antes era un
   <span> puramente decorativo sin ningún comportamiento. */
.busqueda-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.busqueda-icono svg { width: 16px; height: 16px; }
.busqueda-icono:hover { color: var(--text); background: var(--bg); }
/* Botón que envuelve el <kbd>Esc</kbd> -- antes era solo texto
   informativo, ahora también cierra el buscador al pulsarlo. */
.busqueda-cerrar-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.busqueda-cerrar-btn kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.busqueda-cerrar-btn:hover kbd { color: var(--text); border-color: var(--text-muted); }
.busqueda-resultados { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; }
.busqueda-resultados li a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.busqueda-resultados li a:hover, .busqueda-resultados li a.is-activo { background: var(--bg); }
.busqueda-resultado-tipo {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--primary-text);
  margin-right: 6px;
}
.busqueda-resultado-texto { color: var(--text); font-size: 0.92em; }
.busqueda-resultado-texto mark {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--text);
  border-radius: 2px;
  padding: 0 1px;
}
.busqueda-vacio, .busqueda-error, .busqueda-cargando { padding: var(--space-5) var(--space-4); text-align: center; color: var(--text-muted); font-size: 0.9em; margin: 0; }
.busqueda-pie {
  padding: 6px var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78em;
  font-family: var(--font-mono);
  margin: 0;
}

/* ---- Ayuda de atajos de teclado ---- */
.atajos-ayuda-boton {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
}
.atajos-ayuda-boton:hover { border-color: var(--primary); color: var(--text); }
.atajos-ayuda-modal { max-height: 70vh; }
.atajos-ayuda-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.atajos-ayuda-cabecera h2 { margin: 0; font-size: 1.05em; }
.atajos-ayuda-cabecera button {
  background: none;
  border: none;
  font-size: 1.3em;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.atajos-ayuda-cabecera button:hover { color: var(--text); }
.atajos-ayuda-lista { list-style: none; margin: 0; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.atajos-ayuda-lista li { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9em; }
.atajos-ayuda-lista kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  background: var(--bg);
}
.atajos-ayuda-lista span { color: var(--text-muted); }

/* ---- Tiquets (soporte interno: errores/sugerencias) ---- */
.tiquets-seccion { margin-bottom: 32px; }
.tiquets-seccion h2 { margin-bottom: 12px; }
.tiquets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}
/* Fondo plano, sin desenfoque -- calco de .tiquet-card del canvas de
   diseño (antes: glass-bg/glass-border + blur(14px)). */
.tiquet-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}
.tiquet-card-top { display: flex; align-items: center; justify-content: space-between; }
.tiquet-card-numero { font-family: var(--font-mono); font-size: 0.8em; color: var(--text-muted); font-weight: 700; }
.tiquet-card-titulo { margin: 0; font-size: 1em; color: var(--text); }
.tiquet-card-desc { margin: 0; font-size: 0.85em; color: var(--text-muted); }
.tiquet-card-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.8em;
}
.tiquet-card-autor { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiquet-card-acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tiquet-card-acciones a { color: var(--text-muted); text-decoration: none; }
.tiquet-card-acciones a:hover { color: var(--primary-text); }
/* Los 2 formularios de acción (cambiar estado, asignar+prioridad) se
   agrupan en un bloque propio con su propio separador -- antes cada
   uno llevaba solo un margin-top:4px suelto, sin nada que los
   distinguiera del resto de la tarjeta como "zona de acciones". */
.tiquet-card-acciones-forms {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.tiquet-card-estado-form { display: flex; gap: 6px; }
.tiquet-card-estado-form select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82em;
  background: var(--surface);
  color: var(--text);
}

.pill.estado-sin_revisar { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.pill.estado-en_revision { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary-text); }
.pill.estado-finalizado { background: color-mix(in srgb, var(--success) 16%, transparent); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success-text); }
.pill.prioridad-alta { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger-text); }
.pill.prioridad-normal { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.pill.prioridad-baja { background: color-mix(in srgb, var(--border) 40%, transparent); color: var(--text-muted); }

.tiquets-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.tiquets-kanban-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: 120px;
}
.tiquets-kanban-col h2 { margin-top: 0; }
.tiquets-kanban-tarjetas { display: flex; flex-direction: column; gap: 10px; }

/* ---- Tablet ----
   Entre el escritorio (3 columnas fijas) y el corte a 1 columna de más
   abajo (640px, pensado para móvil en vertical) no había nada: en un
   ancho de tablet (~641-1024px) las 3 columnas del kanban de tiquets se
   quedaban demasiado estrechas para ser cómodas antes de que el apilado
   móvil entrara en juego. 2 columnas en ese rango medio. */
@media (max-width: 1024px) and (min-width: 641px) {
  .tiquets-kanban { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Móvil en vertical ----
   Hasta ahora no existía NINGUNA media query de ancho en toda la hoja
   (solo prefers-color-scheme/print/prefers-reduced-motion) — el layout
   entero (icon-rail + content con padding fijo de 40px, el shell de 3
   paneles de Correo con columnas fijas 220px+340px, filas de formulario
   sin flex-wrap...) estaba pensado solo para escritorio. En un móvil en
   vertical (~375-430px de ancho) eso no cabe y se solapa; en horizontal
   (~650px+) el ancho basta para que el mismo layout no reviente, por
   eso allí ya se veía bien. 640px como corte está por debajo del
   ancho en horizontal de cualquier móvil real
   (el más estrecho ronda 650-667px), así que este bloque solo entra en
   juego en vertical, nunca en horizontal — no se toca nada de la vista
   que el usuario ya confirmó que funciona.
   No es un rediseño completo para móvil (el shell de Correo, por
   ejemplo, pasa de 3 columnas a 3 franjas apiladas con scroll, en vez
   de un patrón "un panel a la vez con botón atrás" que requeriría JS) —
   es la reorganización mínima para que nada quede cortado ni solapado. */

/* ---- Fichaje (registro horario) ---- */
.fichaje-aviso {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* Fichar es la acción principal de esta pantalla -- tarjeta "hero"
   centrada a la izquierda, con el registro de hoy como referencia
   secundaria fija a la derecha (mismo criterio que .dash-layout /
   .historial-layout: lo accesorio va al lateral, no debajo). */
.fichaje-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-5); align-items: start; }
.fichaje-sidebar { margin-bottom: 0; position: sticky; top: var(--space-4); }
@media (max-width: 900px) {
  .fichaje-layout { grid-template-columns: 1fr; }
  .fichaje-sidebar { position: static; }
}

.fichaje-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.fichaje-estado {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fichaje-desde {
  font-size: 0.85em;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* Reloj grande de la jornada (canvas Interfaces Guilda Work: Fichaje). */
.fichaje-reloj { font-family: var(--font-mono); font-size: 3.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .fichaje-reloj { font-size: 2.6rem; } }
/* Barras de la semana en la barra lateral. */
.fichaje-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 150px; margin-bottom: var(--space-4); }
.fichaje-dia-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.fichaje-dia-col b { font: 600 10px var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.fichaje-dia-col small { font: 700 11px var(--font-mono); color: var(--text-muted); }
.fichaje-dia-barra { display: block; width: 100%; max-width: 30px; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.fichaje-dia-barra.is-hoy { background: var(--primary); }
.fichaje-dia-barra.is-futuro { opacity: 0.4; }
.pill.estado-fuera { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.pill.estado-dentro { background: color-mix(in srgb, var(--success) 16%, transparent); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success-text); }
.pill.estado-en-pausa { background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning-text); }
.fichaje-botones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.fichaje-btn { padding: 16px 28px; font-size: 1.05em; font-weight: 700; border-radius: var(--radius); }
.fichaje-btn-entrada { background: var(--success); border-color: var(--success); color: white; }
.fichaje-btn-entrada:hover { background: color-mix(in srgb, var(--success) 85%, black); }
.fichaje-btn-pausa { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); border-color: var(--warning); color: var(--warning-text); }
.fichaje-btn-salida { background: var(--danger); border-color: var(--danger); color: white; }
.fichaje-btn-salida:hover { background: color-mix(in srgb, var(--danger) 85%, black); }

/* Agrupación del historial por día (mismo patrón que .fiscal-grupo --
   clases propias para no acoplar los dos módulos, ver criterio ya
   establecido de "tools-grid no reusa menu-grid"). */
.fichaje-dia { margin-bottom: var(--space-3); }
.fichaje-dia:last-child { margin-bottom: 0; }
.fichaje-dia-resumen {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.fichaje-dia-resumen::-webkit-details-marker { display: none; }
.fichaje-dia[open] .fichaje-dia-resumen { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.fichaje-dia-fecha { flex: 1; min-width: 0; }
.fichaje-dia-horas { font-size: 0.82em; color: var(--text-muted); font-weight: 400; }
.fichaje-dia .table-wrap { margin-top: var(--space-2); }

@media (max-width: 640px) {
  .app-shell { padding: var(--space-1); gap: var(--space-1); }
  .content { padding: var(--space-4) var(--space-3); max-width: none; }

  .top-bar { padding: 0 var(--space-3); gap: var(--space-2); }
  .busqueda-boton-abrir { flex: 1 1 auto; min-width: 0; padding: 6px 8px; }
  .busqueda-atajo { display: none; }

  .menu-grid, .tools-grid { grid-template-columns: 1fr; }

  /* El shell de Correo (rail de cuentas + lista de mensajes + lectura)
     tenía columnas fijas de 220px y 340px — en un móvil de 375px eso
     por sí solo ya desborda y solapa el resto. Se apila en 3 franjas:
     rail y lista con una altura máxima navegable, lectura ocupando el
     resto. */
  .correo-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
  }
  .correo-rail { max-height: 160px; border-right: none; border-bottom: 1px solid var(--border); }
  .correo-lista-pane { max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }

  .cal-grid-cols, .cal-grid-mes { overflow-x: auto; }

  .filters, .ia-form-row, .quick-row { flex-direction: column; align-items: stretch; }
  .filters label, .ia-form-row label { width: 100%; }

  .tiquets-kanban { grid-template-columns: 1fr; }

  .fichaje-botones { flex-direction: column; }
  .fichaje-btn { width: 100%; }

  /* Rail de iconos siempre compacto: expandido (200px, el de
     Backoffice lo fija siempre) se comía la mitad de un móvil de 390px. */
  :root[data-rail-expandido="1"] .icon-rail { width: 64px; align-items: center; padding: var(--space-3) 0; }
  :root[data-rail-expandido="1"] .icon-rail-link { width: 44px; justify-content: center; padding: 0; }
  :root[data-rail-expandido="1"] .icon-rail-link.active::before { left: -1px; }
  :root[data-rail-expandido="1"] .icon-rail-separador { width: 32px; align-self: auto; margin: var(--space-2) 0; }
  :root[data-rail-expandido="1"] .icon-rail-grupo-etiqueta,
  :root[data-rail-expandido="1"] .icon-rail-etiqueta { display: none; }
  :root[data-rail-expandido="1"] .icon-rail-badge { position: absolute; margin-left: 0; }

  /* Botones con texto largo ("Generar vencimientos (todos los clientes)")
     parten línea en vez de ensanchar la página. */
  .log-item { flex-wrap: wrap; }
  .btn { white-space: normal; }
  .filters .btn { width: 100%; }
  fieldset { min-width: 0; }
}

/* Correo: filtros, acciones rápidas e IA bajo demanda */
.correo-filtros { flex-basis: 100%; }
.correo-filtros summary { cursor: pointer; font-size: .85rem; }
.correo-filtros-cuerpo { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: end; padding: .5rem 0; font-size: .85rem; }
.correo-filtros-cuerpo label { display: flex; flex-direction: column; gap: .15rem; }
.correo-filtros-cuerpo .correo-toolbar-check { flex-direction: row; align-items: center; }
.correo-aviso-accion { margin: .5rem 0; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 6px; font-size: .9rem; }
.correo-ia-panel { margin: .5rem 0 1rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.correo-ia-panel[hidden] { display: none; }
.correo-ia-privacidad { margin: 0 0 .5rem; font-size: .78rem; opacity: .75; }
.correo-ia-texto { white-space: pre-wrap; margin: 0 0 .6rem; }
.correo-ia-error { color: var(--danger-text); margin: 0 0 .6rem; }
.correo-ia-panel textarea { width: 100%; margin-bottom: .5rem; }
.correo-ia-tarea { display: block; margin-bottom: .3rem; }

/* Correo: conversaciones */
.correo-hilo-contador { display: inline-block; min-width: 1.3em; padding: 0 .35em; margin-left: .3em; border-radius: 999px; border: 1px solid var(--border); font-size: .72rem; text-align: center; font-weight: 600; }
.correo-hilo { margin: .5rem 0; font-size: .88rem; }
.correo-hilo summary { cursor: pointer; }
.correo-hilo ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.correo-hilo li { padding: .2rem 0; border-top: 1px solid var(--border); }
.correo-hilo li a { display: flex; justify-content: space-between; gap: .6rem; text-decoration: none; }

/* Correo: envío con deshacer/programado */
.correo-envio-banner { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem .9rem; margin-bottom: .6rem; border: 1px solid var(--border); border-radius: 8px; font-size: .9rem; }
.correo-envio-banner[hidden] { display: none; }
.correo-programar { display: inline-block; position: relative; }
.correo-programar summary { list-style: none; cursor: pointer; }
.correo-programar-cuerpo { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .5rem 0; }

/* Asistente IA: fuentes citadas y atajos */
.ia-fuentes { display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: center; margin: -.2rem 0 .6rem; font-size: .76rem; }
.ia-fuentes-etiqueta { opacity: .7; }
.ia-fuente { padding: .1rem .55rem; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-fuente:hover, .ia-fuente:focus-visible { text-decoration: underline; }
.ia-atajos { display: flex; gap: .35rem; overflow-x: auto; padding: .3rem 0 .45rem; scrollbar-width: thin; }
.ia-atajo { flex: 0 0 auto; padding: .25rem .7rem; font-size: .78rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.ia-atajo:hover, .ia-atajo:focus-visible { border-color: currentColor; }

/* Fichaje: horas de la semana frente a la jornada contratada */
.fichaje-semana { margin: 0 0 1rem; padding: .6rem .9rem; border: 1px solid var(--border); border-radius: 8px; }
.fichaje-semana-texto { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; font-size: .92rem; }
.fichaje-semana-barra { margin-top: .5rem; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.fichaje-semana-barra span { display: block; height: 100%; background: var(--primary); }

/* Portal: resultado de la subida de varios documentos */
.portal-resultados { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .9rem; }
.portal-resultados li { padding: .25rem 0; }
.portal-resultados li.ko { color: var(--danger-text); }

/* Alineación de filtros y formulario de nueva tarea */
.filters input, .filters select { height: 36px; box-sizing: border-box; }
.filters .action-group { flex-wrap: wrap; }
.quick-row { align-items: center; }
.quick-row input, .quick-row select { height: 38px; box-sizing: border-box; min-width: 0; }
.tarea-con-cronometro { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; }
.tarea-con-cronometro input { height: auto; }
.correo-form-seccion .ia-form-row { flex-wrap: wrap; align-items: center; }
.correo-form-seccion .ia-form-row input[type="text"] { flex: 1 1 220px; min-width: 0; }
.correo-form-seccion .ia-form-row select { flex: 0 1 auto; }

.correo-adjuntos-guardados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.correo-adjuntos-guardados li label { display: inline-flex; gap: .4rem; align-items: center; }
.correo-form-seccion .correo-toolbar-check, .correo-ajustes-seccion .correo-toolbar-check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.correo-form-seccion .ia-form-row select { min-width: 150px; }
.ia-atajos { padding: .5rem .75rem .55rem; }

/* ---- Dashboard: aprovecha el ancho disponible y se adapta al redimensionar ---- */
.content:has(.dash-layout) { max-width: min(1680px, 100%); }
.dash-stats { grid-template-columns: repeat(auto-fit, minmax(clamp(170px, 18vw, 230px), 1fr)); }
.dash-stat { min-width: 0; }
.dash-stat > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.dash-stat-valor { white-space: nowrap; }
.dash-acciones { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); align-items: stretch; }
.dash-accion .quick-row { flex-wrap: nowrap; align-items: center; }
.dash-accion .quick-row select { flex: 0 1 38%; min-width: 110px; }
.dash-accion .quick-row input[type="text"] { flex: 1 1 auto; min-width: 120px; }
.dash-accion .quick-row .btn { flex: 0 0 auto; }
.dash-layout { grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 440px); gap: var(--space-6, 32px); }
.menu-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); justify-content: stretch; }
.dash-main .menu-card { min-width: 0; }
@media (max-width: 1100px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr); }
  .dash-sidebar { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
}
@media (max-width: 700px) {
  .content:has(.dash-layout) { padding-inline: var(--space-4, 16px); }
  .dash-accion .quick-row { flex-wrap: wrap; }
  .dash-accion .quick-row select, .dash-accion .quick-row input[type="text"] { flex: 1 1 100%; }
}
.dash-accion-buscar { grid-column: 1 / -1; padding-block: 10px; }

/* Anchura global: las pantallas aprovechan el ancho; el texto corrido y los
   formularios sueltos conservan su propio tope de lectura. */
@media (max-width: 700px) { .content { padding-inline: var(--space-4, 16px); } }
.page-header + p, .subtitle { max-width: 78ch; }
.quick-card-full .quick-row { flex-wrap: wrap; }
.quick-card-full .quick-row input[name="asunto"] { flex: 3 1 260px; }
.quick-card-full .quick-row input[type="text"]:not([name="asunto"]) { flex: 1 1 160px; }
.quick-card-full .quick-row input[type="datetime-local"] { flex: 0 1 190px; }
.quick-card-full .quick-row select { flex: 0 1 170px; }

/* Casillas con su texto en línea (la clase se usaba sin estilo y las dejaba apiladas) y fieldsets coherentes */
.checkbox-label, .edit-form .checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.checkbox-label input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 0; }
.edit-form fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.edit-form fieldset legend { padding: 0 6px; font-size: 0.85em; font-weight: 600; color: var(--text-muted); }
.perfil-form { max-width: 960px; grid-template-columns: minmax(260px, 320px) 1fr; }
.edit-form .ia-form-row { align-items: end; flex-wrap: wrap; gap: 12px 20px; }
.nota-adjuntos-bloque .quick-row { align-items: center; }

/* ---- Dashboard: saludo, "Mi día" y "Próximos vencimientos" ----
   Del canvas "Interfaces Guilda Work" (Panel): paneles planos con borde,
   cabecera en mono mayúsculas y filas separadas por línea fina. */
.page-header .dash-saludo { font-family: inherit; text-transform: none; letter-spacing: -0.01em; font-size: 1.75em; font-weight: 700; }
.dash-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: var(--space-5); }
.dash-sidebar .dash-panel { margin-bottom: var(--space-4); }
.dash-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dash-panel-cab h2 { margin: 0; }
.dash-panel-cab a { font-size: 0.85em; }
.dash-mi-dia, .dash-venc { list-style: none; margin: 0; padding: 0; }
.dash-mi-dia li, .dash-venc li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.dash-mi-dia li:first-child, .dash-venc li:first-child { border-top: 0; }
.dash-mi-dia-pto { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-muted); flex-shrink: 0; }
.dash-mi-dia-txt, .dash-venc-txt { flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.dash-mi-dia-txt:hover { text-decoration: underline; }
.dash-mi-dia-txt small, .dash-venc-txt small { display: block; color: var(--text-muted); font-size: 0.82em; }

/* Chip de jornada en la barra superior (canvas: Panel). Verde dentro de
   jornada, ámbar en pausa; enlaza al panel de fichaje. */
.fichaje-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--text); text-decoration: none; white-space: nowrap; }
.fichaje-chip:hover { border-color: var(--text-muted); text-decoration: none; }
.fichaje-chip-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.fichaje-chip-en_pausa .fichaje-chip-punto { background: var(--warning); }
@media (max-width: 700px) { .fichaje-chip { font-size: 0; gap: 0; padding: 8px; } }

/* ---- Acceso: pantalla dividida (canvas Interfaces Guilda Work) ----
   Solo login: mensaje de valor a la izquierda (siempre oscuro, como el
   rail) y el formulario a la derecha. Por debajo de 820px se oculta el
   mensaje y queda la tarjeta de siempre. */
/* Inicio de sesión: la foto de montaña (CC0, ver static/fotos/CREDITOS.md) ocupa TODA la pantalla, con un velo liso (sin degradado direccional). Encima, dos
   paneles de cristal con desenfoque: el del texto (siempre oscuro) y la tarjeta del formulario (oscura o clara según el tema). Su contraste se mide sobre la
   foto real en tests/test_foto_login.py: no depende de qué haya detrás. */
.auth-dividido { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; justify-content: initial; min-height: 100vh; min-height: 100dvh; background-color: #0a0a0c; background-image: linear-gradient(rgba(5, 5, 6, 0.2), rgba(5, 5, 6, 0.2)), url("fotos/montana-login.jpg"); background-image: linear-gradient(rgba(5, 5, 6, 0.2), rgba(5, 5, 6, 0.2)), image-set(url("fotos/montana-login.webp") type("image/webp"), url("fotos/montana-login.jpg") type("image/jpeg")); background-size: cover; background-position: 32% 50%; }
.auth-dividido::before { display: none; }
.auth-hero { position: relative; color: #e8eae9; padding: 56px 64px; display: flex; align-items: center; }
.auth-hero-panel { width: min(100%, 580px); box-sizing: border-box; padding: 40px 44px; display: flex; flex-direction: column; gap: 32px; border-radius: 28px; background: rgba(7, 9, 13, 0.66); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.11); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .auth-hero-panel { background: rgba(7, 9, 13, 0.93); } }
.auth-hero-marca { display: flex; align-items: center; gap: 12px; font: 700 15px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.auth-hero-titulo { margin: 0; font-size: 2.6em; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; max-width: 14ch; }
.auth-hero-texto { margin: 18px 0 0; color: #c9cdd4; font-size: 1.1em; max-width: 42ch; }
.auth-hero-lista { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.10); display: flex; flex-direction: column; gap: 12px; color: #dfe2e6; }
.auth-hero-lista li { display: flex; align-items: center; gap: 12px; }
.auth-hero-lista svg { width: 18px; height: 18px; flex-shrink: 0; color: #ccff33; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
/* Tarjeta del formulario: cristal oscuro por defecto y claro en el tema claro. Dentro de ella se reajustan dos colores (gris de apoyo y enlaces) para que
   mantengan el contraste AA sobre el cristal, que deja pasar algo de la foto. */
.auth-dividido .auth-card { background: rgba(10, 12, 16, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 28px 70px -28px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06); --text-muted: #aab0b8; --primary-text: #ccff33; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .auth-dividido .auth-card { background: rgba(10, 12, 16, 0.96); } }
:root[data-theme="light"] .auth-dividido .auth-card { background: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 28px 70px -30px rgba(10, 20, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.8); --text: #1a1d23; --text-muted: #4b5563; --primary-text: #3d6200; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .auth-dividido .auth-card { background: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 28px 70px -30px rgba(10, 20, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.8); --text: #1a1d23; --text-muted: #4b5563; --primary-text: #3d6200; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] .auth-dividido .auth-card { background: rgba(255, 255, 255, 0.97); }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .auth-dividido .auth-card { background: rgba(255, 255, 255, 0.97); } }
}

@media (max-width: 820px) {
  .auth-dividido { display: flex; }
  .auth-hero { display: none; }
  .auth-panel { flex: 1; padding: 24px 16px; }
  .auth-dividido { background-position: 40% 50%; }
}

/* ---- Pantalla Notas: lista + editor (canvas Interfaces Guilda Work) ---- */
.notas-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .notas-layout { grid-template-columns: 1fr; } }
.notas-lista { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.notas-filtros { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
.notas-filtros input[type="search"] { grid-column: 1 / -1; }
.notas-filtros select { min-width: 0; }
.notas-items { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.notas-grupo { padding: 12px 16px 6px; font: 700 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.nota-item { display: grid; gap: 4px; padding: 12px 16px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.nota-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); text-decoration: none; }
.nota-item.is-activa { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.nota-item-titulo { overflow-wrap: anywhere; }
.nota-item-vista { color: var(--text-muted); font-size: 0.88em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nota-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.8em; color: var(--text-muted); }
.nota-item-proyecto { display: inline-flex; align-items: center; gap: 6px; }
.notas-editor { min-width: 0; display: grid; gap: var(--space-4); }
.notas-doc { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px 28px; }
.notas-doc-titulo { margin: 0 0 8px; font-family: inherit; text-transform: none; letter-spacing: -0.01em; font-size: 1.6em; color: var(--text); }
.notas-doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--text-muted); font-size: 0.85em; }
.notas-doc-cuerpo { line-height: 1.6; max-width: 70ch; }
.notas-doc-cuerpo p { display: block; margin: 0 0 0.8em; }
.notas-vinculos { display: flex; flex-wrap: wrap; gap: 10px; }
.notas-vinculo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; font-size: 0.9em; }
.notas-vinculo:hover { border-color: var(--text-muted); text-decoration: none; }
.notas-form { max-width: none; margin-bottom: 0; }
.notas-editor-titulo { margin: 0; }

/* ---- Barra lateral refinada (referencia: menús del producto hermano) ----
   Objetivo: que colapsada y expandida compartan la MISMA columna de
   iconos (centro a 32px del borde, sin saltos al expandir), etiquetas
   legibles (sans, no mono en mayúsculas), activo como píldora suave,
   grupos con chevron visible y submenús con guía, buscador arriba y la
   campana al lado de la marca. Va al final del fichero para ganar a las
   reglas anteriores del rail; las reglas "expandido" quedan dentro de
   min-width:641px para no pisar el rail siempre compacto del móvil. */
.icon-rail-cabecera { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.icon-rail-link.active {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  box-shadow: none;
}
.icon-rail-link.active::before { display: none; }
.icon-rail-brand-mark { width: 20px; height: 20px; }
/* Los grupos plegables (Correo, Fiscal) se quedaban a la izquierda al colapsar: 9px de descuadre. */
.icon-rail-grupo-plegable { align-items: center; }
.icon-rail-grupo-plegable > .icon-rail-link { width: 44px; }
.icon-rail-buscar { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.icon-rail-buscar:hover { background: rgba(255, 255, 255, 0.11); }
.icon-rail-atajo { display: none; margin-left: auto; font: 600 10px var(--font-mono); padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.18); color: var(--sidebar-text); background: transparent; }
.icon-rail-etiqueta { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 500; }
.icon-rail-chevron svg { width: 15px; height: 15px; }
.icon-rail-sublink { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 0.86rem; padding: 7px 12px; }
.icon-rail-sublink.active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.icon-rail-perfil-nombre { font-family: inherit; font-size: 0.88rem; font-weight: 600; }
.icon-rail-perfil-tenant { font-size: 0.76rem; }

@media (min-width: 641px) {
  :root[data-rail-expandido="1"] .icon-rail { width: 232px; padding: var(--space-3) 9px; }
  :root[data-rail-expandido="1"] .icon-rail-grupo-plegable { align-items: stretch; }
  :root[data-rail-expandido="1"] .icon-rail-grupo-plegable > .icon-rail-link { width: 100%; }
  :root[data-rail-expandido="1"] .icon-rail-link { padding: 0 12px; }
  :root[data-rail-expandido="1"] .icon-rail-cabecera { flex-direction: row; align-items: center; gap: var(--space-1); }
  :root[data-rail-expandido="1"] .icon-rail-cabecera .icon-rail-brand { flex: 1; min-width: 0; font-weight: 700; }
  :root[data-rail-expandido="1"] .icon-rail-cabecera .notificaciones-menu .icon-rail-link { width: 44px; padding: 0; justify-content: center; }
  :root[data-rail-expandido="1"] .icon-rail-cabecera .notificaciones-menu .icon-rail-etiqueta { display: none; }
  :root[data-rail-expandido="1"] .icon-rail-cabecera .icon-rail-badge { position: absolute; margin-left: 0; }
  :root[data-rail-expandido="1"] .icon-rail-buscar { padding-left: 11px; padding-right: 11px; }
  :root[data-rail-expandido="1"] .icon-rail-atajo { display: inline-block; }
  :root[data-rail-expandido="1"] .icon-rail-separador { margin: var(--space-3) 4px 0; }
  :root[data-rail-expandido="1"] .icon-rail-grupo-etiqueta {
    font-family: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap;
    opacity: 0.5; padding: 6px 12px 4px;
  }
  :root[data-rail-expandido="1"] .icon-rail-submenu {
    padding-left: 0; margin: 2px 0 4px 21px; border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
  :root[data-rail-expandido="1"] .icon-rail-sublink { margin-left: 10px; }
  :root[data-rail-expandido="1"] .icon-rail-perfil-card { padding: 6px 0; }
}
.icon-rail-nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }

/* Chips de categoría en Herramientas (canvas Interfaces Guilda Work). */
.tools-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.tools-chips:empty { display: none; }
.tools-chip { font: 600 12px var(--font-mono); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; }
.tools-chip:hover { border-color: var(--text-muted); color: var(--text); }
.tools-chip.is-activo { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }

/* ---- Barra superior: fecha, acciones rápidas y estado del día ---- */
.top-bar { justify-content: space-between; }
.top-bar-fecha { margin: 0; color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-bar-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-left: auto; min-width: 0; }
.top-bar-pildora { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.top-bar-pildora:hover { border-color: var(--text-muted); text-decoration: none; }
.top-bar-pildora svg { width: 14px; height: 14px; flex-shrink: 0; }
.top-bar-pildora.is-alerta { border-color: var(--danger, #f87171); color: var(--danger, #f87171); }
.top-bar-crono-nombre { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.top-bar-vivo { color: var(--text-muted); font-weight: 500; }
.top-bar-nuevo { position: relative; }
.top-bar-nuevo summary { list-style: none; cursor: pointer; padding: 6px 14px; font-size: 13px; }
.top-bar-nuevo summary::-webkit-details-marker { display: none; }
.top-bar-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 150px; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 30; }
.top-bar-menu a { padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 13px; text-decoration: none; }
.top-bar-menu a:hover { background: rgba(255,255,255,0.07); }
@media (max-width: 900px) { .top-bar-crono-nombre, .top-bar-fecha, .fichaje-chip .top-bar-vivo { display: none; } }
@media (max-width: 700px) { .top-bar-pildora { font-size: 0; gap: 0; padding: 8px; } .top-bar-pildora svg { width: 16px; height: 16px; } }
.top-bar .busqueda-boton-abrir[hidden] { display: none; }
.top-bar-fecha::first-letter { text-transform: uppercase; }
.top-bar-nuevo summary { font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 700; }
.top-bar-fecha-hora { margin-left: 8px; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.top-bar-sync { font-size: 12px; }
@media (max-width: 1100px) { .top-bar-sync { display: none; } }
.fichaje-chip-fuera .fichaje-chip-punto { background: var(--text-muted); }

/* ---- Compositor del chat IA: botones del mismo alto y alineados ---- */
.ia-chat-form { align-items: flex-end; gap: 10px; padding: 14px 16px; }
.ia-chat-form .ia-chat-adjuntar { order: 1; }
.ia-chat-form .ia-chat-mic { order: 2; }
.ia-chat-form textarea { order: 3; min-height: 40px; padding: 10px 6px; line-height: 1.4; }
.ia-chat-form button[type="submit"] { order: 4; }
.ia-chat-form .ia-chat-mic,
.ia-chat-form .ia-chat-adjuntar {
  width: 40px !important; height: 40px !important; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50% !important; padding: 0 !important;
  background: transparent !important; color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  transition: color .15s, border-color .15s, background .15s;
}
.ia-chat-form .ia-chat-mic:hover,
.ia-chat-form .ia-chat-adjuntar:hover { color: var(--text) !important; border-color: var(--text-muted) !important; }
.ia-chat-form .ia-chat-mic svg, .ia-chat-form .ia-chat-adjuntar svg { width: 18px; height: 18px; }
.ia-chat-form button[type="submit"] {
  height: 40px; padding: 0 22px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
  transition: filter .15s;
}
.ia-chat-form button[type="submit"]:hover { filter: brightness(1.08); }
.ia-chat-pie { margin: 0 16px 14px; }
.ia-chat-vaciar, .ia-chat-live {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s;
}
.ia-chat-vaciar:hover, .ia-chat-live:hover { color: var(--text); border-color: var(--text-muted); }
.ia-chat-live svg { width: 15px; height: 15px; }
.ia-chat-live.activo { background: var(--danger); border-color: var(--danger); color: #fff; }
.ia-chat-live[hidden], .ia-chat-mic[hidden] { display: none !important; }

/* ---- Tareas compartidas ---- */
.tarea-compartir-bloque { margin: var(--space-4) 0; }
.tarea-participantes { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tarea-participantes li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.tarea-participante-nombre { flex: 1; font-weight: 600; }
.pill.tarea-compartida { display: inline-flex; align-items: center; gap: 5px; }

/* ---- Comentarios de tarea ---- */
.tarea-comentarios { margin: var(--space-4) 0; }
.comentarios-lista { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comentario { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.comentario.es-mio { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.comentario-cabecera { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.comentario-borrar { margin-left: auto; }
.comentario-texto { margin: 6px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.mencion { color: var(--primary); font-weight: 700; background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 6px; padding: 0 4px; }
.comentario-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.comentario-acciones { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.comentario-menciones { display: flex; flex-wrap: wrap; gap: 6px; }
.comentario-mencionar { font-size: 12px; padding: 4px 10px; }
.tarea-comentarios-pill { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.tarea-tiempo-equipo, .tarea-actividad { margin: var(--space-4) 0; }
.actividad-lista { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.actividad-lista li { line-height: 1.45; }
.actividad-lista .mono { margin-right: 6px; font-size: 12px; }

/* ---- Panel del equipo (inicio) ---- */
.dash-equipo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dash-equipo li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; }
.dash-equipo-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-equipo-nombre small { color: var(--text-muted); font-weight: 500; }
.dash-equipo-barra { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
.dash-equipo-barra span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* ---- Plantillas de tareas ---- */
.plantillas-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.plantillas-lista { display: flex; flex-direction: column; gap: var(--space-3); }
.plantilla-tarjeta h2 { margin: 0; font-size: 1.05em; }
.plantilla-acciones { display: flex; gap: 8px; margin-top: 10px; }
.plantilla-form .edit-form textarea { font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 900px) { .plantillas-layout { grid-template-columns: 1fr; } }
.pill.tarea-bloqueada { display: inline-flex; align-items: center; gap: 5px; color: var(--warning-text); border-color: var(--warning); }
.recordatorio-canales { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.recordatorio-posponer select { font-size: 12px; padding: 4px 8px; }

/* ---- Calendario unificado: capas ---- */
.cal-capas { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 var(--space-3); font-size: 13px; }
.cal-capa { display: inline-flex; align-items: center; gap: 6px; }
.cal-chip-cita { background: color-mix(in srgb, #4a90d9 22%, transparent); color: var(--text); border-left: 3px solid #4a90d9; }
.cal-chip-fichaje { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); display: inline-flex; align-items: center; gap: 5px; }
.cal-dia-extra { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-3); }
[hidden].cal-chip { display: none !important; }

/* ---- Correo de equipo ---- */
.correo-equipo-panel { margin: 8px 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.correo-equipo-panel summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.correo-equipo-panel .quick-row { margin-top: 8px; }
.correo-equipo-cuerpo { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; line-height: 1.55; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }

/* Guardar un adjunto de correo en un vencimiento */
.correo-adjunto-guardar { margin-top: var(--space-2); font-size: .85rem; }
.correo-adjunto-guardar summary { cursor: pointer; color: var(--primary-text); }
.correo-adjunto-guardar form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.correo-adjunto-visible { display: inline-flex; gap: .4rem; align-items: center; }


/* ---- Accesibilidad ---------------------------------------------------------
   Foco de teclado siempre visible (2 px, >= 3:1 en claro y en oscuro), también
   en los controles que quitaban el contorno; y áreas táctiles de 44 px. */
:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px; }
.btn:focus-visible, .btn-primary:focus-visible, .btn-stop:focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (pointer: coarse), (max-width: 640px) {
  .btn, .chip-del, button.pill, .icon-rail-link, .correo-ribbon button, select, input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
  .chip-del { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}

/* ---- Página de proyecto ---- */
.proyecto-cabecera { align-items: flex-start; }
.proyecto-titulo { display: flex; gap: var(--space-3); align-items: center; }
.proyecto-icono { width: 40px; height: 40px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); flex: none; }
.proyecto-estado-activo { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success-text); }
.proyecto-estado-en_pausa { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning-text); }
.proyecto-estado-archivado, .proyecto-estado-completado { color: var(--text-muted); }
.proyecto-miembros { display: flex; }
.proyecto-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 2px solid var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; margin-left: -8px; color: var(--primary-text); box-shadow: 0 0 0 1px var(--border); }
.proyecto-avatar:first-child { margin-left: 0; }
.proyecto-progreso { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }
.proyecto-progreso-barra { flex: 1; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.proyecto-progreso-barra > span { display: block; height: 100%; background: var(--primary-dark); }
.proyecto-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.proyecto-metrica { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); display: grid; gap: 2px; }
.proyecto-metrica strong { font-size: 1.25rem; }
.texto-peligro { color: var(--danger-text); }
.proyecto-pestanas { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); overflow-x: auto; }
.proyecto-pestanas a { padding: var(--space-2) var(--space-4); text-decoration: none; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.proyecto-pestanas a.activa { color: var(--primary-text); border-bottom-color: var(--primary-dark); font-weight: 600; }
.proyecto-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
.proyecto-bloque h2 { margin-top: 0; }
.proyecto-descripcion { white-space: pre-wrap; color: var(--text-muted); max-width: 70ch; }
.proyecto-ajustes { margin: var(--space-5) 0; }
.proyecto-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; align-items: end; }
.proyecto-form label { display: grid; gap: 4px; }
.proyecto-form-ancha { grid-column: 1 / -1; }
.proyecto-miembro-form select { min-width: 130px; }
.proyecto-alta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.proyecto-alta input[type="text"] { flex: 1 1 260px; }
.proyecto-seccion { margin-bottom: var(--space-5); }
.proyecto-seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.proyecto-seccion-cab h2 { font-size: 1rem; margin: var(--space-2) 0; }
.proyecto-seccion-ajustes { position: relative; }
.proyecto-seccion-ajustes[open] { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.proyecto-mover select { max-width: 160px; }
.proyecto-nueva-seccion { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.proyecto-nueva-seccion input { flex: 1; max-width: 420px; }
.proyecto-salir { margin-top: var(--space-5); }

/* Arrastrar y soltar en la página de proyecto */
.is-arrastrando { opacity: .45; }
.proyecto-zona.is-destino { outline: 2px dashed var(--focus-ring); outline-offset: 2px; background: color-mix(in srgb, var(--primary) 10%, transparent); }
[draggable="true"] { cursor: grab; }
.proyecto-previa { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--primary-text); }
.proyecto-alta-ayuda { flex-basis: 100%; margin: 0; font-size: .8rem; }
.proyecto-zona:empty { min-height: 14px; }

/* Plan de carga del equipo */
.carga-envoltorio { overflow-x: auto; }
.carga-tabla { border-collapse: collapse; width: 100%; min-width: 900px; font-size: 0.85rem; }
.carga-tabla th, .carga-tabla td { border: 1px solid var(--border, #e2e5ea); padding: 6px 8px; vertical-align: top; text-align: left; }
.carga-tabla thead th { position: sticky; top: 0; background: var(--bg-elevated, var(--bg)); z-index: 1; }
.carga-persona { white-space: nowrap; min-width: 120px; }
.carga-hoy { box-shadow: inset 0 -3px 0 var(--accent, #4a90d9); }
.carga-finde, .carga-atrasadas { opacity: 0.85; }
.carga-celda { min-width: 110px; }
.carga-celda.carga-verde { background: color-mix(in srgb, #2e9e5b 14%, transparent); }
.carga-celda.carga-ambar { background: color-mix(in srgb, #e0a100 20%, transparent); }
.carga-celda.carga-roja { background: color-mix(in srgb, #d64545 22%, transparent); }
.carga-celda.is-destino { outline: 2px dashed var(--accent, #4a90d9); outline-offset: -2px; }
.carga-total { font-weight: 600; }
.carga-tareas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.carga-tarea { display: flex; gap: 6px; justify-content: space-between; padding: 2px 6px; border-radius: 4px; background: var(--bg, #fff); border: 1px solid var(--border, #e2e5ea); cursor: grab; }
.carga-tarea a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch; color: inherit; text-decoration: none; }
.carga-tarea.prioridad-alta { border-left: 3px solid #d64545; }
.carga-tarea.is-arrastrando { opacity: 0.45; }
.carga-semana { white-space: nowrap; }

/* Vistas guardadas de tareas */
.tareas-vistas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.tarea-vista { display: inline-flex; gap: 6px; align-items: center; }
.tarea-vista.activa { outline: 2px solid var(--accent, #4a90d9); }
.tarea-vista a { color: inherit; text-decoration: none; font-weight: 500; }
.tarea-vista-borrar { display: inline; margin: 0; }
.tareas-vista-nueva .inline-form { margin-top: 6px; }

/* Acciones en lote sobre tareas */
.lote-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin: 8px 0; border: 1px solid var(--border, #e2e5ea); border-radius: 8px; background: var(--bg-elevated, transparent); }
.lote-barra.lote-oculta [data-valor-para], .lote-barra.lote-oculta select#lote-accion, .lote-barra.lote-oculta button { display: none; }
.lote-casilla { margin-right: 6px; }

/* Comunicados del backoffice (banner superior) */
.comunicados { display: grid; gap: 8px; margin: 0 0 16px; }
.comunicado { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border, #d0d7de); border-left-width: 4px; background: var(--surface, #fff); }
.comunicado-info { border-left-color: var(--primary); }
.comunicado-aviso { border-left-color: var(--warning, #b8860b); }
.comunicado-critico { border-left-color: var(--danger, #e0555a); }
.comunicado-texto { min-width: 0; overflow-wrap: anywhere; }
.comunicado form { margin: 0; }
.comunicado-cerrar { background: none; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 4px; color: inherit; opacity: .7; }
.comunicado-cerrar:hover, .comunicado-cerrar:focus-visible { opacity: 1; }

/* Puesta en marcha del despacho (tarjeta de primeros pasos) */
.onboarding-subtitulo { margin: 18px 0 8px; font-size: .95rem; }
.onboarding-progreso { height: 6px; border-radius: 6px; background: var(--border); overflow: hidden; margin-bottom: 10px; }
.onboarding-progreso span { display: block; height: 100%; background: var(--primary); }

a.atajos-ayuda-boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Mensajes informativos de los flujos de acceso (Kratos): «te hemos mandado un código…» no es un error y no debe verse en rojo. */
.auth-info { margin: 8px 0; padding: 10px 14px; border-radius: 12px; font-size: 0.9em; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent); }

/* Ausencias y vacaciones (app/templates/ausencias*.html) */
.ausencias-saldo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 22px; }
.ausencias-cifra { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--linea, rgba(255, 255, 255, 0.12)); border-radius: 16px; }
.ausencias-cifra strong { font-size: 1.9rem; line-height: 1.1; }
.ausencias-cifra span { font-size: 0.85rem; opacity: 0.8; }
.ausencias-form { max-width: 560px; margin: 0 0 28px; }
.ausencias-decision { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ausencias-decision input[type="text"], .ausencias-decision input[type="number"] { min-width: 0; flex: 1 1 140px; }
.ausencias-hoy { margin: 0 0 22px; padding-left: 18px; }

/* Cuadrante de turnos */
.turnos-tabla td { vertical-align: middle; }
.turnos-tabla select { min-width: 8.5rem; }
.turno-pastilla { display: inline-flex; flex-direction: column; padding: 4px 10px; border-radius: 10px; border-left: 4px solid var(--turno, #6c8cff); background: rgba(127, 127, 127, 0.14); line-height: 1.25; }
.turno-pastilla small { opacity: 0.75; font-size: 0.75rem; }
.ds-inline { display: inline-block; margin-left: 8px; }

.ausencias-seccion { margin-top: 30px; }
.turnos-tabla td, .turnos-tabla th { padding-left: 8px; padding-right: 8px; }
.turnos-tabla select { min-width: 6.5rem; width: 100%; }
.turnos-tabla td:first-child { white-space: nowrap; }

/* Certificados digitales */
.pill.cert-vigente { border-color: var(--success, #4caf50); }
.pill.cert-caducado, .pill.cert-riesgo-caduca_antes, .pill.cert-riesgo-sin_alternativa { border-color: var(--danger, #e5484d); }
.pill.cert-todavia_no_vigente, .pill.cert-riesgo-cobertura_desconocida { border-color: var(--warning, #f5a524); }
.cert-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 22px; }
.cert-datos dt { opacity: 0.75; }
.cert-datos dd { margin: 0; overflow-wrap: anywhere; }

.ausencias-seccion { margin-bottom: 14px; }

/* Flujo de trabajo de las obligaciones fiscales */
.flujo-obligacion { margin: 0 0 24px; padding: 16px 18px; border: 1px solid var(--linea, rgba(255, 255, 255, 0.12)); border-radius: 16px; }
.flujo-obligacion h2 { margin-top: 0; }
.flujo-obligacion .flujo-form { max-width: 640px; margin-top: 12px; }
.pill.flujo-presentada, .pill.flujo-cerrada { border-color: var(--success, #4caf50); }
.pill.flujo-alerta { border-color: var(--danger, #e5484d); }
.pill.flujo-aviso { border-color: var(--warning, #f5a524); }
.flujo-presentacion { border: 1px dashed var(--linea, rgba(255, 255, 255, 0.2)); border-radius: 12px; margin: 10px 0; padding: 8px 12px; }

/* Certificados: panel, tarjetas y chips de caducidad */
.cert-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 22px; }
.cert-tarjeta-resumen { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--linea, rgba(255, 255, 255, 0.12)); border-left-width: 4px; border-radius: 16px; text-decoration: none; color: inherit; }
.cert-tarjeta-resumen strong { font-size: 1.9rem; line-height: 1.1; }
.cert-tarjeta-resumen span { font-size: 0.85rem; opacity: 0.8; }
.cert-tarjeta-resumen.activa { outline: 2px solid currentColor; outline-offset: 1px; }
.cert-tono-caducado { border-left-color: var(--danger, #e5484d); }
.cert-tono-urgente { border-left-color: #f5811f; }
.cert-tono-pronto { border-left-color: var(--warning, #f5a524); }
.cert-tono-ok { border-left-color: var(--success, #4caf50); }
.cert-dias { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.cert-dias-caducado { background: rgba(229, 72, 77, 0.16); border-color: var(--danger, #e5484d); }
.cert-dias-urgente { background: rgba(245, 129, 31, 0.16); border-color: #f5811f; }
.cert-dias-pronto { background: rgba(245, 165, 36, 0.16); border-color: var(--warning, #f5a524); }
.cert-dias-aviso { background: rgba(245, 220, 36, 0.12); border-color: rgba(245, 220, 36, 0.6); }
.cert-dias-ok { background: rgba(76, 175, 80, 0.14); border-color: var(--success, #4caf50); }
.cert-dias-nd { border-color: var(--linea, rgba(255, 255, 255, 0.2)); }
.cert-aviso-ok { color: var(--success-text, #2e7d32); font-weight: 600; }
.cert-aviso-falta { color: var(--danger-text, #c62828); font-weight: 600; }
.cert-riesgos { margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--warning, #f5a524); border-radius: 14px; }
.cert-vacio { padding: 28px 18px; text-align: center; border: 1px dashed var(--linea, rgba(255, 255, 255, 0.2)); border-radius: 16px; margin: 0 0 22px; }
.cert-form { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.cert-form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cert-form label:not(.ds-interruptor) { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.cert-mas { border: 1px solid var(--linea, rgba(255, 255, 255, 0.12)); border-radius: 12px; padding: 8px 14px; }
.cert-mas > summary { cursor: pointer; font-weight: 600; margin: 0 0 8px; }
.cert-alta { padding: 16px 18px; border: 1px solid var(--linea, rgba(255, 255, 255, 0.12)); border-radius: 18px; }
.cert-avanzado > summary { cursor: pointer; }
.cert-acciones { white-space: nowrap; }
@media (max-width: 720px) {
  .cert-tabla thead { display: none; }
  .cert-tabla tr { display: block; border: 1px solid var(--linea, rgba(255, 255, 255, 0.12)); border-radius: 14px; margin: 0 0 10px; padding: 8px 12px; }
  .cert-tabla td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; }
  .cert-tabla td[data-etiqueta]::before { content: attr(data-etiqueta); opacity: 0.7; font-size: 0.8rem; }
}

/* Ficha del certificado */
.cert-estado { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--linea, rgba(255, 255, 255, 0.12)); border-left-width: 6px; border-radius: 16px; margin: 0 0 18px; }
.cert-estado-caducado { border-left-color: var(--danger, #e5484d); }
.cert-estado-vigente { border-left-color: var(--success, #4caf50); }
.cert-estado-todavia_no_vigente, .cert-estado-desconocido { border-left-color: var(--warning, #f5a524); }
.cert-bloque { margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--linea, rgba(255, 255, 255, 0.12)); border-radius: 16px; }
.cert-bloque > h2 { margin-top: 0; }
.cert-banda-ayuda { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--warning, #f5a524); background: rgba(245, 165, 36, 0.12); }
.cert-pasos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 14px; list-style: none; counter-reset: paso; }
.cert-pasos li { counter-increment: paso; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--linea, rgba(255, 255, 255, 0.2)); font-size: 0.85rem; opacity: 0.7; }
.cert-pasos li::before { content: counter(paso) ". "; }
.cert-pasos li.hecho { opacity: 1; border-color: var(--success, #4caf50); }
.cert-pasos li.actual { opacity: 1; font-weight: 700; border-color: currentColor; }
.cert-check { flex-direction: row !important; align-items: center; gap: 8px; }
.cert-lista-simple { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }

/* Portal del cliente: su certificado digital */
.portal-certificado { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 16px 18px; margin: 0 0 16px; border: 1px solid var(--linea, rgba(255, 255, 255, 0.14)); border-left-width: 6px; border-radius: 18px; }
.portal-certificado-vigente { border-left-color: var(--success, #4caf50); }
.portal-certificado-pronto { border-left-color: var(--warning, #f5a524); }
.portal-certificado-caducado { border-left-color: var(--danger, #e5484d); }
.portal-certificado-fecha { font-weight: 700; margin-top: 2px; }

/* --- Portal de cliente unificado: barra de secciones, «Para hacer», tablero del trimestre y facturas devueltas --- */
.portal-nav, .portal-trimestres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.portal-nav a, .portal-trimestres a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--portal-line); background: var(--portal-card); color: var(--portal-ink); font-weight: 700; text-decoration: none; }
.portal-nav a:hover, .portal-trimestres a:hover { border-color: var(--portal-accent); }
.portal-nav a[aria-current="page"], .portal-trimestres a[aria-current="page"] { background: var(--portal-accent-bg); border-color: var(--portal-accent); }
.portal-trimestres a { min-height: 38px; padding: 0 12px; font-size: 0.92em; }
.portal-nav-insignia { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger, #e5484d); color: #fff; font-size: 0.78em; font-weight: 800; }
.portal-hoy { margin: 0 0 var(--space-5); }
.portal-hoy h2, .portal-devueltas h2, .portal-tablero h2 { margin: 0 0 10px; font-size: 1.15em; }
.portal-hoy-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.portal-hoy-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--portal-line); border-left-width: 6px; border-radius: var(--radius-lg); background: var(--portal-card); }
.portal-hoy-item.urgente { border-left-color: var(--portal-warn-ink); background: var(--portal-warn-bg); }
.portal-hoy-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.portal-hoy-texto span { color: var(--portal-muted); font-size: 0.9em; }
.portal-hoy-vacio { margin: 0; padding: 14px 16px; border: 1px solid var(--portal-line); border-left: 6px solid var(--portal-ok-ink); border-radius: var(--radius-lg); background: var(--portal-ok-bg); color: var(--portal-ok-ink); font-weight: 600; }
.portal-estado.ko { background: color-mix(in srgb, var(--danger, #e5484d) 14%, var(--portal-card)); color: var(--danger-text, #b3262b); }
.portal-carpeta-iconos a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.portal-volver { display: inline-flex; align-items: center; min-height: 44px; }
.portal-carpeta-iconos a.con-novedad { position: relative; color: var(--portal-accent); }
.portal-carpeta-iconos a.con-novedad::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger, #e5484d); }
.portal-tablero { margin: 0 0 var(--space-5); padding: 18px 20px; border: 1px solid var(--portal-line); border-radius: var(--radius-lg); background: var(--portal-card); }
.portal-tablero-corregir { border-color: var(--portal-warn-ink); }
.portal-tablero-frase { margin: 0 0 12px; font-weight: 700; }
.portal-tablero-barra { display: block; width: 100%; height: 10px; margin: 0 0 6px; accent-color: var(--portal-accent); }
.portal-tablero-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 14px 0; }
.portal-tablero-cifras > div { padding: 10px 12px; border: 1px solid var(--portal-line); border-radius: var(--radius-md, 12px); }
.portal-tablero-cifras > div.aviso { border-color: var(--portal-warn-ink); background: var(--portal-warn-bg); }
.portal-tablero-cifras dt { color: var(--portal-muted); font-size: 0.82em; }
.portal-tablero-cifras dd { margin: 0; font-size: 1.5em; font-weight: 800; font-variant-numeric: tabular-nums; }
.portal-tablero-modelos { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.portal-devueltas { margin: 0 0 var(--space-5); }
.portal-devuelta { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--portal-warn-ink); border-radius: var(--radius-lg); background: var(--portal-warn-bg); }
.portal-devuelta header { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; overflow-wrap: anywhere; }
.portal-devuelta-motivo { margin: 8px 0 12px; overflow-wrap: anywhere; }
.portal-devuelta-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 8px; }
.portal-devuelta-form label { flex-basis: 100%; font-weight: 600; }
.portal-anotar summary { cursor: pointer; }
.portal-anotar summary h2 { display: inline; }
.panel-indicadores { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.panel-indicadores li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 14px; border: 1px solid var(--linea, rgba(255, 255, 255, 0.12)); border-radius: 12px; }
.panel-indicadores li strong { font-size: 1.4rem; }
.panel-indicadores .subtitle { flex-basis: 100%; }
.form-en-linea { display: inline-flex; gap: 6px; align-items: center; margin: 2px 4px 2px 0; }
.cert-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ds-estado-aviso { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--warning, #f5a524); margin: 0 0 16px; }

/* --- Correo: vistas personalizables (tamaño de letra, disposición, ancho de lista; app/correo_vista.py) --- */
.correo-shell[data-letra="grande"] { font-size: 1.15em; }
.correo-shell[data-letra="muy_grande"] { font-size: 1.3em; }
@media (min-width: 641px) { .correo-shell:not(.es-pantalla-completa) { grid-template-columns: 220px var(--correo-ancho-lista, clamp(320px, 28vw, 440px)) minmax(280px, 1fr); } }
.correo-divisor { display: none; }
@media (min-width: 901px) {
  .correo-divisor { display: block; position: relative; grid-column: 2; grid-row: 2; width: 8px; margin-left: auto; margin-right: -4px; cursor: col-resize; z-index: 2; }
  .correo-divisor:hover, .correo-divisor:focus-visible { background: var(--primary); opacity: 0.35; outline: none; }
}
.correo-cuerpo-html { min-height: 60vh; }
.correo-lista-mensajes.sin-vista-previa .correo-fila-preview { display: none; }
@media (min-width: 641px) {
/* Lista arriba, lectura debajo */
.correo-shell[data-disposicion="inferior"]:not(.es-pantalla-completa) { grid-template-columns: 220px 1fr; grid-template-rows: auto minmax(180px, 38%) 1fr; }
.correo-shell[data-disposicion="inferior"]:not(.es-pantalla-completa) .correo-rail { grid-row: 2 / span 2; }
.correo-shell[data-disposicion="inferior"]:not(.es-pantalla-completa) .correo-lista-pane { grid-column: 2; grid-row: 2; border-right: none; border-bottom: 1px solid var(--border); }
.correo-shell[data-disposicion="inferior"]:not(.es-pantalla-completa) .correo-lectura-pane { grid-column: 2; grid-row: 3; }
.correo-shell[data-disposicion="inferior"] .correo-divisor { display: none; }
/* Solo lista: sin panel de lectura hasta abrir un mensaje (entonces es pantalla completa) */
.correo-shell[data-disposicion="lista"]:not(.es-pantalla-completa) { grid-template-columns: 220px 1fr; }
.correo-shell[data-disposicion="lista"]:not(.es-pantalla-completa) .correo-lectura-pane, .correo-shell[data-disposicion="lista"] .correo-divisor { display: none; }
}
.correo-shell.es-pantalla-completa .correo-divisor { display: none; }

/* --- Correo C2: arrastrar a carpetas, gestión de carpetas y respuesta rápida --- */
.correo-fila-wrap.is-arrastrando { opacity: 0.5; }
.correo-carpeta-item.es-destino { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--surface); }
.correo-carpetas-gestion { margin: 6px 4px; font-size: 0.82em; }
.correo-carpetas-gestion summary { cursor: pointer; color: var(--text-muted); }
.correo-carpetas-gestion form { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.correo-carpetas-gestion input[type="text"], .correo-carpetas-gestion select { flex: 1 1 100%; min-width: 0; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; }
.correo-respuesta-rapida { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.correo-respuesta-rapida textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; font: inherit; }
.correo-respuesta-rapida-acciones { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.correo-adjuntos-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.88em; }
.correo-compose.es-destino-archivos { outline: 2px dashed var(--primary); outline-offset: 4px; }

/* --- Correo C4: contexto del mensaje y «Escribir» desde otras pantallas --- */
.correo-contexto { margin: 8px 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 0.88em; }
.correo-contexto summary { cursor: pointer; font-weight: 600; }
.correo-contexto-fila { margin: 6px 0; }
.correo-contexto-titulo { margin: 8px 0 2px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.correo-contexto-lista { margin: 0; padding-left: 18px; }

/* Correo: colocación explícita de las columnas (el divisor es un hijo más de la rejilla y descolocaba la lista) */
.correo-carpeta-item { text-decoration: none; }
@media (min-width: 641px) {
  .correo-shell:not(.es-pantalla-completa) .correo-rail { grid-column: 1; grid-row: 2; }
  .correo-shell:not(.es-pantalla-completa) .correo-lista-pane { grid-column: 2; grid-row: 2; }
  .correo-shell:not(.es-pantalla-completa) .correo-lectura-pane { grid-column: 3; grid-row: 2; }
  .correo-shell.es-pantalla-completa .correo-lectura-pane { grid-column: 1; grid-row: 2; }
}

/* --- Contactos (libreta del despacho) --- */
.contactos-rejilla { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-4, 20px); align-items: start; }
.contactos-grupos .log-item { display: flex; align-items: center; gap: 6px; }
.contactos-grupos a[aria-current="page"] { font-weight: 700; }
@media (max-width: 640px) { .contactos-rejilla { grid-template-columns: minmax(0, 1fr); } }

/* --- Correo C6: salud del dominio --- */
.pill.dominio-ok { background: var(--success-bg, #12351f); color: var(--success, #6ee7a0); }
.pill.dominio-aviso { background: var(--warning-bg, #3a2d0c); color: var(--warning, #f5c04a); }
.pill.dominio-error { background: var(--danger-bg, #3a1212); color: var(--danger, #ff8a8a); }
.marca-vista-previa { border-radius: 12px; object-fit: contain; background: var(--surface); border: 1px solid var(--border); vertical-align: middle; margin-right: 12px; }
.icon-rail-brand-mark.es-marca-propia { object-fit: contain; border-radius: 8px; }

/* --- Correo C6: móvil. Una sola vista cada vez (lista o mensaje), con «Volver», y controles que se pueden tocar --- */
.correo-lectura-volver { display: none; }
.correo-shell.es-pantalla-completa .correo-lectura-volver { display: inline-flex; }
@media (max-width: 640px) {
  .correo-shell { grid-template-rows: auto 1fr; overflow-x: hidden; }
  .correo-shell .correo-topbar { grid-column: 1; grid-row: 1; }
  .correo-lectura-volver { display: inline-flex; min-height: 44px; align-items: center; }
  /* sin mensaje abierto: carpetas en una tira horizontal y la lista debajo; el panel de lectura vacío no se enseña */
  .correo-shell:not(.con-mensaje) .correo-lectura-pane { display: none; }
  .correo-shell:not(.con-mensaje) .correo-rail { grid-row: 2; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none; padding: 8px; gap: 6px; align-items: center; }
  .correo-shell:not(.con-mensaje) .correo-rail .correo-carpeta-lista { display: flex; flex-direction: row; gap: 4px; }
  .correo-shell:not(.con-mensaje) .correo-rail { padding: 6px 8px; align-self: start; }
  .correo-shell:not(.con-mensaje) .correo-rail > *, .correo-shell:not(.con-mensaje) .correo-cuentas-lista > * { flex: 0 0 auto; white-space: nowrap; }
  .correo-shell:not(.con-mensaje) .correo-cuentas-lista { display: flex; flex-direction: row; align-items: center; gap: 6px; }
  .correo-shell:not(.con-mensaje) .correo-nuevo-btn { padding: 8px 12px; margin: 0; }
  .correo-shell:not(.con-mensaje) .correo-cuenta-nombre { max-width: 9em; }
  .correo-shell:not(.con-mensaje) .correo-rail .correo-carpetas-gestion, .correo-shell:not(.con-mensaje) .correo-rail .correo-rail-ajustes { display: none; }
  .correo-shell:not(.con-mensaje) { grid-template-rows: auto auto 1fr; }
  .correo-shell:not(.con-mensaje) .correo-lista-pane { grid-row: 3; max-height: none; overflow-y: auto; }
  /* con mensaje abierto: solo el mensaje */
  .correo-shell.con-mensaje .correo-rail, .correo-shell.con-mensaje .correo-lista-pane, .correo-shell.con-mensaje .correo-divisor { display: none; }
  .correo-shell.con-mensaje .correo-lectura-pane { grid-row: 2; padding: 12px; }
  .correo-fila-wrap { padding: 12px; min-height: 56px; }
  .correo-fila-check { width: 22px; height: 22px; }
  .correo-ribbon { overflow-x: auto; flex-wrap: nowrap; }
  .correo-ribbon-btn, .correo-ribbon select, .correo-ribbon-select { min-height: 44px; flex: 0 0 auto; }
  .correo-lectura-header { flex-direction: column; gap: 8px; }
  .correo-lectura-asunto { font-size: 1.15em; }
  .correo-cuerpo-html { min-height: 50vh; }
  .correo-respuesta-rapida textarea { font-size: 16px; }
  .correo-compose { max-width: none; padding: 0 4px; }
  .correo-compose-campo { flex-wrap: wrap; }
  .correo-compose-campo > input, .correo-compose-campo > select { flex: 1 1 100%; min-height: 44px; font-size: 16px; }
  .correo-editor { min-height: 40vh; font-size: 16px; }
  .correo-editor-toolbar { overflow-x: auto; flex-wrap: nowrap; }
  .correo-editor-boton { min-width: 44px; min-height: 44px; }
  .correo-compose-acciones { flex-wrap: wrap; }
  .correo-compose-acciones .btn { min-height: 44px; }
  .contactos-rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* --- Correo: cada panel con su propio desplazamiento. La página no se mueve: la lista corre arriba/abajo y el mensaje queda con su cabecera y su barra de acciones fijas. --- */
@media (min-width: 641px) {
  .app-shell:has(.correo-shell) { height: 100vh; min-height: 0; overflow: hidden; }
  .app-main:has(.correo-shell) { min-height: 0; overflow: hidden; }
  .content:has(> .correo-shell) { min-height: 0; overflow: hidden; }
  .correo-shell { min-height: 0; height: 100%; grid-template-rows: auto minmax(0, 1fr); overflow-x: auto; overflow-y: hidden; }
  .correo-rail, .correo-lista-pane, .correo-lectura-pane { min-height: 0; }
  .correo-lista-pane { overflow: hidden; }
  .correo-lista-mensajes { min-height: 0; }
  .correo-lectura-pane { overflow-y: auto; overscroll-behavior: contain; }
  .correo-shell[data-disposicion="inferior"]:not(.es-pantalla-completa) { grid-template-rows: auto minmax(320px, 50%) minmax(0, 1fr); }
}
/* La cabecera y la barra de acciones se desplazan con el mensaje (antes quedaban pegadas arriba y tapaban el texto). */
.correo-lectura-fija { position: static; margin: 0; padding: 0 0 8px; }
.correo-lectura-fija .correo-ribbon { margin-top: 10px; }
.correo-cuerpo-html { width: 100%; min-height: 200px; border: none; display: block; }
@media (max-width: 640px) {
  .correo-cuerpo-html { min-height: 40vh; }
}

/* Barra compacta (static/correo_barra_compacta.js): ancla de altura cero pegada arriba, la barra cuelga de ella y solo se ve al haber desplazado el mensaje */
.correo-barra-compacta-ancla { position: sticky; top: 0; height: 0; z-index: 6; overflow: visible; }
.correo-barra-compacta { display: none; align-items: center; gap: 4px; margin: 0 -28px; padding: 6px 28px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.15)); }
.correo-barra-compacta-ancla[data-visible="1"] .correo-barra-compacta { display: flex; }
.correo-barra-compacta .avatar-circulo { width: 28px; height: 28px; font-size: 0.7em; flex-shrink: 0; }
.correo-barra-compacta-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9em; }
.correo-barra-compacta form { display: inline-flex; margin: 0; }
@media (max-width: 640px) { .correo-barra-compacta-ancla { display: none; } }   /* en móvil se desplaza la página, no el panel: no hay barra compacta */

/* El relleno del panel de lectura pasa a un contenedor interior, para que la barra compacta pegada arriba quede a ras del borde del panel */
.correo-lectura-pane { padding: 0; }
.correo-lectura-interior { display: flex; flex-direction: column; flex: 1; padding: 20px 28px; }
.correo-lectura-pane > .correo-lectura-vacio { margin: 20px 28px; }
@media (max-width: 640px) { .correo-lectura-interior { padding: 12px; } .correo-shell.con-mensaje .correo-lectura-pane { padding: 0; } }

/* Redactar: la nota y la lista de adjuntos van en su propia línea (en la misma fila aplastaban el botón «Elegir archivos») */
.correo-compose-adjuntos { flex-wrap: wrap; }
.correo-compose-adjuntos .file-input { flex-shrink: 0; }
.correo-compose-adjuntos > p, .correo-compose-adjuntos > ul { flex: 1 1 100%; margin: 4px 0 0; }
.correo-compose-campo label.file-input-boton { width: auto; font-size: inherit; color: var(--text); }

/* «Hoy»: bandeja única de lo que necesita a la persona */
.hoy-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); align-items: start; }
.hoy-rejilla .dash-panel { margin-bottom: 0; }
.hoy-lista { list-style: none; margin: 0; padding: 0; }
.hoy-item { padding: 10px 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.hoy-item:first-child { border-top: 0; }
.hoy-item a { color: var(--text); text-decoration: none; }
.hoy-item a:hover { text-decoration: underline; }
.hoy-vencido { box-shadow: inset 3px 0 0 var(--danger, #e5484d); padding-left: 10px; }
.hoy-fecha { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 0.85em; }
.ficha-volver { margin: 0 0 var(--space-3, 12px); font-size: 0.9em; }
.ficha-volver a { color: var(--text-muted); text-decoration: none; }
.ficha-volver a:hover { text-decoration: underline; }

/* Textos largos sin espacios (URLs, ECLI, títulos del BOE) y tablas anchas: no ensanchan la página, se parten o se desplazan dentro de su caja. */
.page-header .subtitle, .dash-panel, .log-text, .ds-chip { overflow-wrap: anywhere; }
.ds-chip.ds-chip { max-width: 100%; white-space: normal; }
.tabla-scroll { max-width: 100%; overflow-x: auto; }

/* Selector de color de acento (Perfil → Apariencia): la muestra enseña el color; el texto va en el color normal, así que se lee siempre. */
.acentos { display: flex; flex-wrap: wrap; gap: 8px; }
.acento-opcion { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--glass-border, var(--border)); background: var(--panel-2, transparent); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.acento-opcion:hover { background: var(--panel-2-hover, var(--panel-2)); }
.acento-opcion[aria-checked="true"] { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.acento-opcion:focus-visible { outline: 2px solid var(--focus-ring, var(--primary)); outline-offset: 2px; }
.acento-muestra { width: 18px; height: 18px; border-radius: 50%; background: var(--muestra); border: 1px solid color-mix(in srgb, var(--text) 35%, transparent); }
.acento-opcion[aria-checked="true"] .acento-muestra { box-shadow: inset 0 0 0 3px var(--bg, #fff); }

/* Formularios en rejilla (Asistente jurídico): dos columnas en pantalla ancha, una en móvil; cada campo con su etiqueta encima. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.form-grid > .span-2 { grid-column: 1 / -1; }
.form-grid label:not(.inline):not(.checkbox-label) { display: flex; flex-direction: column; gap: 6px; font-size: 0.85em; color: var(--text-muted); min-width: 0; }
.form-grid label.inline { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; color: var(--text); }
.form-grid input:not([type="checkbox"]), .form-grid select, .form-grid textarea { width: 100%; box-sizing: border-box; min-width: 0; font: inherit; }
.form-grid textarea { resize: vertical; min-height: 110px; }
.form-grid fieldset { min-width: 0; margin: 0; padding: 10px 14px 12px; border: 1px solid var(--glass-border, var(--border)); border-radius: 12px; }
.form-grid fieldset legend { padding: 0 6px; font-size: 0.85em; color: var(--text-muted); }
.form-grid p { margin: 0; }
@media (max-width: 720px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* «Hoy»: marcar como hecho, uno a uno o en conjunto. */
.hoy-hecho { display: inline; margin: 0 0 0 auto; }
.hoy-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hoy-item .hoy-fecha { margin-left: auto; }
.hoy-item .hoy-fecha + .hoy-hecho { margin-left: 0; }
.hoy-todo { margin: 0 0 var(--space-3, 12px); }
.hoy-seccion .dash-panel-cab form { margin: 0; }

/* Aviso «Novedades en la ayuda» (menú de ajustes) */
.ayuda-novedad-punto { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--primary); vertical-align: middle; }
.ayuda-novedad[hidden] { display: none !important; }

/* Cuentas de correo: la fila envuelve; el texto de la cuenta nunca se queda en una columna de una letra y el error de sincronización va debajo. */
.correo-cuenta-fila { flex-wrap: wrap; }
.correo-cuenta-fila .avatar-circulo { flex: none; }
.correo-cuenta-fila .log-text { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.correo-cuenta-fila .log-duration { flex: 0 1 auto; }
.correo-cuenta-fila .correo-cuenta-editar { flex: none; }

/* Bandeja de correo: «seleccionar todo» sobre la lista y desplegables de la barra de acciones en lote sin ensancharla. */
.correo-seleccionar-todo { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 0.82em; color: var(--text-muted); border-bottom: 1px solid var(--border); cursor: pointer; }
.correo-lista-bulkbar select { max-width: 170px; min-width: 0; }
.correo-contexto-en-linea { display: inline; margin-left: 8px; }

/* Búsquedas guardadas del correo */
.correo-busquedas-panel { padding: 10px; margin: 6px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.correo-busquedas-panel[hidden] { display: none; }
.correo-busquedas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.correo-busquedas-lista li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.correo-busquedas-ir { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-busquedas-ir:hover { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.correo-busquedas-quitar { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--text-muted); }
.portal-avisos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.portal-avisos li { padding: 8px 12px; border-radius: var(--radius-md, 12px); background: var(--portal-warn-bg); color: var(--portal-warn-ink); font-size: 0.92em; overflow-wrap: anywhere; }
.portal-avisos:empty { display: none; }
.portal-factura-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 12px; }
.portal-factura-datos > div { padding: 10px 12px; border: 1px solid var(--portal-line); border-radius: var(--radius-md, 12px); }
.portal-factura-datos dt { color: var(--portal-muted); font-size: 0.82em; }
.portal-factura-datos dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.portal-conversacion { margin: 0 0 var(--space-5); }
.portal-peticion[hidden] { display: none; }
.portal-cliente-shell .historial-table td a { display: inline-flex; align-items: center; min-height: 32px; min-width: 32px; }
.portal-carpeta-extra { margin: -6px 0 14px; padding: 10px 16px; border: 1px solid var(--portal-line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--portal-card); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.portal-doc a { display: inline-flex; align-items: center; min-height: 32px; }
.portal-vista-previa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--portal-warn-ink); border-radius: var(--radius-lg); background: var(--portal-warn-bg); color: var(--portal-warn-ink); font-weight: 600; overflow-wrap: anywhere; }
.portal-vista-previa span { flex: 1 1 260px; min-width: 0; }
.portal-solo-lectura button, .portal-solo-lectura input, .portal-solo-lectura textarea, .portal-solo-lectura select { pointer-events: none; opacity: 0.55; }
.portal-buzon { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.portal-buzon-item a { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; min-height: 44px; border: 1px solid var(--portal-line); border-radius: var(--radius-lg); background: var(--portal-card); color: var(--portal-ink); text-decoration: none; overflow-wrap: anywhere; }
.portal-buzon-item a:hover { border-color: var(--portal-accent); }
.portal-buzon-item.sin-leer a { border-left: 6px solid var(--danger, #e5484d); }
.portal-buzon-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.portal-buzon-texto { color: var(--portal-muted); }
.portal-nav-salir { margin-left: auto; }
.portal-nav-salir-boton { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--portal-muted); font: inherit; font-weight: 700; cursor: pointer; }
.portal-nav-salir-boton:hover { border-color: var(--portal-line); color: var(--portal-ink); }
/* En móvil el modelo ocupa su fila y el estado y los iconos pasan debajo (el texto del modelo no se parte en cuatro líneas). */
@media (max-width: 480px) {
  .portal-carpeta { flex-wrap: wrap; }
  .portal-carpeta-info { flex: 1 1 calc(100% - 64px); }
  .portal-carpeta-iconos { margin-left: auto; }
}

/* --- Portal de cliente: Mi cuenta, personas con acceso, plazos, panel de situación, búsqueda y subida desde el móvil --- */
.portal-recordar { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 14px; font-size: 0.92em; color: var(--portal-muted); }
.portal-recordar input { margin-top: 3px; }
.portal-cambiar-titular { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.portal-cambiar-titular select { min-height: 44px; max-width: 100%; }
.portal-bienvenida, .portal-plazos, .portal-cuenta-bloque, .portal-situacion, .portal-resultados { margin: 0 0 var(--space-5); padding: 16px 18px; border: 1px solid var(--portal-line); border-radius: 18px; background: var(--portal-card); }
.portal-bienvenida { border-color: var(--portal-accent); background: var(--portal-accent-bg); }
.portal-bienvenida h2, .portal-plazos h2, .portal-cuenta-bloque h2, .portal-situacion h2, .portal-resultados h2 { margin: 0 0 10px; font-size: 1.15em; }
.portal-bienvenida-pasos { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; }
.portal-bienvenida-pasos span { display: block; color: var(--portal-muted); }
/* «Para empezar»: lista viva de primeros pasos con su barra de progreso */
.portal-empezar { margin: 0 0 14px; }
.portal-empezar-cab { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.portal-empezar-barra { width: 100%; height: 8px; margin: 0 0 10px; accent-color: var(--portal-accent); }
.portal-empezar-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.portal-empezar-lista li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--portal-border, var(--border)); border-radius: 10px; background: var(--portal-panel, var(--panel)); }
.portal-empezar-lista li.hecho { opacity: 0.7; }
.portal-empezar-marca { flex: none; width: 22px; text-align: center; font-weight: 700; color: var(--portal-accent); }
.portal-empezar-texto { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.portal-empezar-texto span { color: var(--portal-muted); font-size: 0.9em; }
@media (max-width: 520px) { .portal-empezar-lista li { flex-wrap: wrap; } .portal-empezar-lista li .btn { width: 100%; } }
.portal-bienvenida-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.portal-plazos-lista, .portal-personas, .portal-resultados-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.portal-plazo { padding: 12px 14px; border: 1px solid var(--portal-line); border-left-width: 6px; border-radius: 14px; border-left-color: var(--warning, #f5a524); }
.portal-plazo.urgente { border-left-color: var(--danger, #e5484d); }
.portal-plazo.en-orden { border-left-color: var(--success, #4caf50); }
.portal-plazo-cab { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: baseline; margin: 0 0 6px; }
.portal-plazo-faltan { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.portal-plazo-faltan a { display: inline-block; min-height: 32px; line-height: 32px; }
.portal-fases { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; padding: 0; }
.portal-fase { padding: 3px 12px; border-radius: 999px; border: 1px solid var(--portal-line); font-size: 0.85em; color: var(--portal-muted); }
.portal-fase.hecha { border-color: var(--success, #4caf50); color: var(--portal-ink); }
.portal-fase.actual { border-color: var(--portal-accent); background: var(--portal-accent-bg); color: var(--portal-ink); font-weight: 700; }
.portal-fase-detalle { display: block; margin: 0 0 6px; }
.portal-cuenta-form { display: grid; gap: 10px; margin: 0 0 10px; }
.portal-opcion { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--portal-line); border-radius: 12px; min-height: 44px; }
.portal-opcion span { display: grid; gap: 2px; }
.portal-persona { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--portal-line); border-radius: 12px; }
.portal-persona-datos { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.portal-persona-form { display: flex; gap: 6px; align-items: center; }
.portal-persona select, .portal-cuenta-form select { min-height: 44px; }
.portal-qr svg { width: min(100%, 260px); height: auto; border-radius: 12px; border: 1px solid var(--portal-line); }
.portal-dir, .portal-dir a { overflow-wrap: anywhere; word-break: break-all; }
.portal-plazo .portal-estado { white-space: normal; }
.portal-buscar { display: flex; gap: 8px; margin: 0 0 16px; }
.portal-buscar input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.portal-resultados-lista a { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; min-height: 44px; padding: 8px 4px; text-decoration: none; overflow-wrap: anywhere; }
.portal-tipo { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.portal-tipo label { display: flex; gap: 8px; align-items: center; min-height: 44px; }
.portal-grafica { width: 100%; height: auto; max-height: 220px; }
.portal-barra-ingreso { fill: var(--portal-accent); opacity: 0.55; }
.portal-barra-gasto { fill: var(--danger, #e5484d); opacity: 0.45; }
.portal-barra-ingreso.actual, .portal-barra-gasto.actual { opacity: 1; }
.portal-grafica-eje { fill: var(--portal-muted); font-size: 11px; }
.portal-leyenda { display: flex; gap: 14px; margin: 0 0 10px; font-size: 0.88em; }
.portal-leyenda-ingreso::before, .portal-leyenda-gasto::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--portal-accent); }
.portal-leyenda-gasto::before { background: var(--danger, #e5484d); }
.portal-tabla-situacion { width: 100%; border-collapse: collapse; }
.portal-tabla-situacion th, .portal-tabla-situacion td { padding: 8px 10px; border-bottom: 1px solid var(--portal-line); text-align: right; }
.portal-tabla-situacion th:first-child, .portal-tabla-situacion tbody th { text-align: left; }
@media (max-width: 480px) {
  .portal-persona-form { flex-wrap: wrap; }
  .portal-tabla-situacion th, .portal-tabla-situacion td { padding: 6px 4px; font-size: 0.9em; }
}
.portal-persona-datos .pill { justify-self: start; }
.portal-resumen .log-item { flex-wrap: wrap; align-items: flex-start; }
.portal-resumen .log-item .log-text { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }
.portal-resumen .log-item .portal-fases, .portal-resumen .log-item .portal-fase-detalle, .portal-resumen .log-item .portal-hilo, .portal-resumen .log-item .portal-subir { flex: 1 1 100%; min-width: 0; }
.portal-resumen > div { min-width: 0; flex: 1 1 0; }
.portal-resumen .log-item form.portal-subir { display: block; }
.portal-resumen .log-item form.portal-subir textarea { width: 100%; }
.portal-codigos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.portal-codigos code { font-size: 1rem; }
.portal-lectura { list-style: none; }
.portal-lectura-dudosa { font-weight: 600; }
.portal-esqueleto, .visor-hoja.cargando::before { display: block; border-radius: 7px; background: linear-gradient(90deg, rgba(127, 127, 127, 0.12) 25%, rgba(127, 127, 127, 0.24) 50%, rgba(127, 127, 127, 0.12) 75%); background-size: 200% 100%; animation: portal-brillo 1.3s ease-in-out infinite; }
.portal-esqueleto { height: 10px; width: 70%; margin-top: 6px; }
.visor-hoja.cargando::before { content: ""; position: absolute; inset: 0; min-height: 320px; z-index: 1; pointer-events: none; }
.visor-hoja.cargando { min-height: 320px; }
@keyframes portal-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .portal-esqueleto, .visor-hoja.cargando::before { animation: none; } }
.portal-valoracion { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 0; padding: 0; margin: 0 0 8px; }
.portal-valoracion legend { padding: 0; margin-bottom: 4px; }
.portal-saltar { position: absolute; left: 8px; top: -48px; z-index: 100; padding: 10px 14px; background: var(--primary); color: #fff; border-radius: var(--radius-sm); text-decoration: none; }
.portal-saltar:focus { top: 8px; }
.portal-cliente-shell a:focus-visible, .portal-cliente-shell button:focus-visible, .portal-cliente-shell summary:focus-visible { outline: 2px solid var(--focus-ring, var(--primary)); outline-offset: 2px; }
html[data-letra="grande"] .portal-cliente-shell { zoom: 1.15; }
html[data-letra="muy-grande"] .portal-cliente-shell { zoom: 1.3; }
/* Pantallas sencillas (K11): solo lo principal en la barra de arriba y en la de abajo; el resto sigue en «Más» y en Mi cuenta */
html[data-sencillo] .portal-nav a:not([data-atajo="i"]):not([data-atajo="f"]):not([data-atajo="m"]):not([data-atajo="u"]) { display: none; }
html[data-sencillo] .portal-nav a, html[data-sencillo] .portal-tabs a { min-height: 56px; font-size: 1.05em; }
.portal-cuenta-form .correo-form-campo { min-width: 0; }
.portal-cuenta-form input[type="file"], .portal-cuenta-form input[type="text"], .portal-cuenta-form select { max-width: 100%; box-sizing: border-box; }

/* Ajustes de IA: una tarjeta por proveedor del despacho */
.ia-proveedor { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.ia-proveedor.activo { border-color: var(--accent, #7c8ba1); }
.ia-proveedor h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ia-probar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.ia-proveedor .ia-form-row > .correo-form-campo { flex: 1 1 220px; }

/* Revisión de facturas: el documento a la vista junto a los datos extraídos */
.revision-visor { display: block; }
.revision-visor.con-documento { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
.visor-documento { position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg, transparent); overflow: hidden; }
.visor-barra { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px; border-bottom: 1px solid var(--border); }
.visor-barra .btn { min-width: 36px; }
.visor-lienzo { overflow: auto; flex: 1 1 auto; min-height: 280px; padding: 8px; background: rgba(127, 127, 127, 0.08); }
.visor-lienzo:focus-visible { outline: 2px solid var(--accent, #7c8ba1); outline-offset: -2px; }
.visor-hoja { position: relative; margin: 0 auto; transition: width 0.12s; }
.visor-hoja img { display: block; width: 100%; height: auto; background: #fff; }
.visor-caja { position: absolute; border: 3px solid #d9822b; background: rgba(217, 130, 43, 0.18); border-radius: 3px; pointer-events: none; }
.visor-xml { padding: 14px 16px; overflow: auto; }
.visor-xml dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.visor-xml dt { font-weight: 600; }
.visor-xml dd { margin: 0; }
.confianza { display: inline-block; font-size: 0.75rem; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 999px; vertical-align: middle; }
.confianza-alta { background: rgba(46, 160, 67, 0.18); color: #1a7f37; }
.confianza-media { background: rgba(217, 130, 43, 0.2); color: #9a5b0b; }
.confianza-baja { background: rgba(207, 34, 46, 0.16); color: #b3261e; }
.lectura-resumen { border: 1px solid var(--border); border-left-width: 5px; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.lectura-resumen.lectura-alta { border-left-color: #2ea043; }
.lectura-resumen.lectura-media { border-left-color: #d9822b; }
.lectura-resumen.lectura-baja { border-left-color: #cf222e; }
.lectura-resumen small { flex-basis: 100%; }
@media (prefers-color-scheme: dark) {
  .confianza-alta { color: #56d364; } .confianza-media { color: #e3b341; } .confianza-baja { color: #ff7b72; }
}
@media (max-width: 1100px) {
  .revision-visor.con-documento { grid-template-columns: minmax(0, 1fr); }
  .visor-documento { position: static; max-height: none; }
  .visor-lienzo { max-height: 70vh; }
}

/* Portal: el camino de cada factura (recibida → leída → revisada → contabilizada) */
.portal-pasos { list-style: none; display: flex; gap: 2px; margin: 6px 0 0; padding: 0; flex-wrap: wrap; font-size: 0.72rem; }
.portal-pasos li { position: relative; padding: 2px 8px; border-radius: 999px; background: rgba(127, 127, 127, 0.14); color: var(--muted, #6b7480); white-space: nowrap; }
.portal-pasos li.hecho { background: rgba(46, 160, 67, 0.2); color: #1a7f37; }
.portal-pasos li.actual { background: rgba(217, 130, 43, 0.22); color: #9a5b0b; font-weight: 600; }
@media (prefers-color-scheme: dark) { .portal-pasos li.hecho { color: #56d364; } .portal-pasos li.actual { color: #e3b341; } }

/* Portal, inicio: una sola cosa principal y el resto recogido */
.portal-hoy-principal { border: 1px solid var(--border); border-left-width: 6px; border-left-color: var(--portal-accent, var(--accent, #7c8ba1)); border-radius: 14px; padding: 18px 20px; margin: 0 0 12px; }
.portal-hoy-principal.urgente { border-left-color: #cf222e; }
.portal-hoy-principal h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.portal-hoy-etiqueta { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #6b7480); }
.portal-hoy-boton { margin-top: 8px; min-height: 44px; padding-inline: 22px; font-size: 1rem; }
.portal-hoy-otras { margin: 0 0 12px; }
.portal-hoy-otras > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.portal-al-dia { border: 1px solid rgba(46, 160, 67, 0.4); background: rgba(46, 160, 67, 0.08); border-radius: 14px; padding: 16px 20px; }
.portal-al-dia p { margin: 2px 0; }

/* Portal: centro de avisos */
.portal-avisos-lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.portal-aviso-item { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.portal-aviso-item.nuevo { border-left: 5px solid var(--portal-accent, var(--accent, #7c8ba1)); }
.portal-aviso-item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.portal-aviso-item { min-width: 0; }
.portal-aviso-item a, .portal-aviso-item strong, .portal-aviso-item span { overflow-wrap: anywhere; min-width: 0; }
.portal-aviso-item time { white-space: nowrap; font-size: 0.8rem; }
.portal-adjunto { display: inline-block; margin: 6px 8px 0 0; font-size: 0.9rem; word-break: break-all; }
.visor-xml-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; } .visor-xml-dl dt { font-weight: 600; } .visor-xml-dl dd { margin: 0; }

/* Glosario y «¿Qué es esto?» del portal */
.portal-que-es { margin: 4px 0 8px; padding: 8px 12px; border: 1px solid var(--portal-border, var(--border)); border-radius: 10px; }
.portal-que-es summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.portal-que-es p { margin: 8px 0 0; overflow-wrap: anywhere; }
.portal-glosario-buscar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-4, 16px); }
.portal-glosario-buscar input { flex: 1 1 220px; min-width: 0; }
.portal-glosario-lista dt { font-weight: 700; margin-top: 12px; }
.portal-glosario-lista dd { margin: 2px 0 0; color: var(--portal-muted); overflow-wrap: anywhere; }

.portal-no-se { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 0 8px; padding-inline: 6px; font-size: 0.9em; color: var(--portal-muted); text-decoration: underline; }

.portal-actividad { list-style: none; margin: 0 0 8px; padding: 0 0 0 14px; border-left: 2px solid var(--portal-border, var(--border)); display: grid; gap: 10px; }
.portal-actividad li { display: grid; gap: 2px; position: relative; overflow-wrap: anywhere; }
.portal-actividad li::before { content: ""; position: absolute; left: -20px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--portal-accent); }
.portal-actividad time { color: var(--portal-muted); font-size: 0.85em; }

.portal-enderezar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; list-style: none; }
.portal-enderezar-vista { height: 110px; width: auto; max-width: 40%; object-fit: contain; border: 1px solid var(--portal-border, var(--border)); border-radius: 6px; background: #fff; }
.portal-enderezar span { flex: 1 1 200px; overflow-wrap: anywhere; }

.portal-progreso { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.portal-progreso progress { flex: 1; height: 10px; accent-color: var(--portal-accent); }

.portal-carpeta-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center; }
.portal-carpeta-filtros input { flex: 1 1 200px; min-width: 0; }
.portal-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; overflow-wrap: anywhere; }
.portal-doc[hidden] { display: none; }
.portal-compartir { flex-basis: 100%; }
.portal-compartir summary { cursor: pointer; color: var(--portal-muted); }
.portal-vista-documento { width: min(900px, 96vw); height: min(85vh, 900px); padding: 12px; border: 1px solid var(--portal-border, var(--border)); border-radius: 12px; background: var(--portal-panel, var(--panel)); color: inherit; }
.portal-vista-documento[open] { display: flex; flex-direction: column; gap: 8px; }
.portal-vista-documento iframe { flex: 1; width: 100%; border: 0; background: #fff; }

.portal-valoracion-rapida { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 var(--space-4, 16px); }

.portal-embudo { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.portal-embudo li { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(120px, 2fr) auto auto; gap: 8px 12px; align-items: center; }
.portal-embudo progress { width: 100%; height: 12px; }
@media (max-width: 640px) { .portal-embudo li { grid-template-columns: 1fr auto; } .portal-embudo progress { grid-column: 1 / -1; } }

/* Barra de carga al navegar por el portal (rapidez percibida) */
.portal-barra-carga { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: linear-gradient(90deg, transparent, var(--portal-accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; }
.portal-barra-carga[hidden] { display: none; }
.portal-barra-carga.en-marcha { animation: portal-barra 1s ease-in-out infinite; }
@keyframes portal-barra { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .portal-barra-carga.en-marcha { animation: none; background-size: 100% 100%; } }

/* Barra de pestañas inferior (móvil y app instalada): lo esencial a un pulgar de distancia; el resto, en «Más» */
.portal-tabs { display: none; }
@media (max-width: 720px) {
  .portal-nav { display: none; }
  .portal-cliente-shell { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .portal-tabs { display: flex; position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--portal-panel, var(--panel, #fff)); border-top: 1px solid var(--portal-line, var(--border)); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06); }
  .portal-tabs > a, .portal-tabs > details > summary { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 2px; border-radius: 12px; color: var(--portal-muted); font-size: 0.72rem; text-decoration: none; position: relative; list-style: none; cursor: pointer; }
  .portal-tabs > details > summary::-webkit-details-marker { display: none; }
  .portal-tabs .icono-inline { width: 24px; height: 24px; }
  .portal-tabs a[aria-current="page"] { color: var(--portal-accent); background: var(--portal-accent-bg); font-weight: 700; }
  .portal-tabs .portal-nav-insignia { position: absolute; top: 2px; left: 55%; }
  .portal-tabs-subir { flex: 0 0 auto !important; width: 64px; margin-top: -18px; border-radius: 50% !important; min-height: 64px !important; background: var(--portal-accent); color: #fff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
  .portal-tabs-mas { flex: 1 1 0; position: relative; }
  .portal-tabs-panel { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 200px; max-width: 80vw; display: grid; gap: 2px; padding: 8px; background: var(--portal-panel, var(--panel, #fff)); border: 1px solid var(--portal-line, var(--border)); border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
  .portal-tabs-panel a, .portal-tabs-panel button { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--portal-ink); background: transparent; border: 0; font: inherit; text-align: left; text-decoration: none; width: 100%; cursor: pointer; }
  .portal-tabs-panel a:hover, .portal-tabs-panel button:hover { background: var(--portal-accent-bg); }
}
@media (display-mode: standalone) { .portal-cliente-shell { padding-top: env(safe-area-inset-top, 0px); } }

.portal-instalar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 var(--space-4, 16px); padding: 12px 14px; border: 1px solid var(--portal-accent); border-radius: 12px; background: var(--portal-accent-bg); }
.portal-instalar[hidden] { display: none; }
.portal-instalar > span { flex: 1 1 220px; overflow-wrap: anywhere; }

/* En pantallas anchas la portada se reparte en dos columnas y el portal aprovecha el ancho */
.portal-rejilla { display: block; }
@media (min-width: 1100px) {
  .portal-cliente-shell { max-width: 1120px; }
  .portal-rejilla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--space-5, 24px); align-items: start; }
  .portal-col > section:first-child { margin-top: 0; }
  .portal-col-lateral { position: sticky; top: 16px; }
}

.portal-pista-pc { margin: 4px 0 8px; }
.edit-form.arrastrando { outline: 2px dashed var(--portal-accent); outline-offset: 6px; background: var(--portal-accent-bg); }
.portal-pie { text-align: center; margin: var(--space-5, 24px) 0 0; }
.portal-atajos { max-height: 80vh; height: auto; width: min(420px, 94vw); }
.portal-atajos kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--portal-line, var(--border)); border-bottom-width: 2px; border-radius: 6px; background: var(--portal-panel, var(--panel)); font: inherit; font-size: 0.85em; text-align: center; }
@media (pointer: coarse) { .portal-pista-pc, .portal-pie { display: none; } }

.portal-gestiones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.portal-gestion { display: flex; gap: 12px; align-items: flex-start; min-height: 64px; padding: 12px 14px; border: 1px solid var(--portal-line, var(--border)); border-radius: 12px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.portal-gestion:hover { border-color: var(--portal-accent); background: var(--portal-accent-bg); }
.portal-gestion .icono-inline { width: 26px; height: 26px; flex: none; color: var(--portal-accent); }
.portal-gestion span { display: grid; gap: 2px; min-width: 0; }

.portal-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.portal-datos dt { color: var(--portal-muted); }
.portal-datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .portal-datos { grid-template-columns: 1fr; gap: 0; } .portal-datos dd { margin-bottom: 8px; } }

.portal-explicacion { margin: 4px 0 0; font-size: 0.88em; max-width: 46ch; overflow-wrap: anywhere; }

.portal-pasos-guia { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.portal-compartir input[type="number"], .portal-compartir input[maxlength="4"] { width: 6em; }