: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;
  --on-accent: #0a0a0a;
  --danger: #e0555a;
  --success: #1f9d55;
  --warning: #b8860b;
  --radius: 4px;
  --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 casi rectas a propósito (Fase rediseño "Nate Gentile") — nada
     de tarjetas muy redondeadas, es parte central de ese look terminal. */
  --radius-sm: 3px;
  --radius-md: var(--radius);
  --radius-lg: 6px;

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

/* 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;
    --danger: #ff6b70;
    --warning: #eab308;
    --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);
  }
}
:root[data-theme="dark"] {
  --bg: #0a0a0c;
  --surface: #101113;
  --border: #2a2d33;
  --text: #e8eae9;
  --text-muted: #8a9099;
  --sidebar-bg: #050506;
  --primary: #ccff33;
  --primary-dark: #a6e600;
  --danger: #ff6b70;
  --warning: #eab308;
  --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);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "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-dark);
  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-dark);
  text-decoration-color: var(--primary-dark);
  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-dark);
  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-dark);
  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;
  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;
  overflow: hidden;
}
:root[data-rail-expandido="1"] .icon-rail { width: 200px; align-items: stretch; padding: var(--space-3) var(--space-2); }
.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-2); }
.icon-rail-captura { margin-top: auto; }
.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; }

/* ---- Top bar (marca + menú de ajustes) ---- */
.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: space-between;
  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);
}
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.brand-mark { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.brand-name {
  color: var(--text);
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ajustes-menu { position: relative; }
.ajustes-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ajustes-toggle svg { width: 18px; height: 18px; }
.ajustes-toggle:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.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); }

/* ---- Content ---- */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  max-width: 1100px;
}
/* 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);
}
.dash-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  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-sm);
  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(--glass-border));
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--primary) 55%, transparent);
}
.dash-stat-valor { font-size: var(--font-size-xl); font-weight: 700; line-height: 1; }
.dash-stat-label { color: var(--text-muted); font-size: var(--font-size-sm); }

.dash-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.dash-accion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  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-sm);
}
.dash-accion label { font-weight: 600; font-size: var(--font-size-sm); }
.dash-accion .quick-row { display: flex; gap: var(--space-2); }
.dash-accion .quick-row input[type="text"] { flex: 1; }
.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);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
}

.dash-ia { margin: var(--space-6) 0; }
.dash-ia h3 { margin-bottom: var(--space-3); }
.dash-ia .ia-chat { box-shadow: var(--shadow-sm); }

/* ---- Menu grid (home) ---- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.menu-card {
  position: relative;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--accent, #7c8ba1) 8%, var(--glass-bg)) 0%, var(--glass-bg) 55%);
  -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-sm);
  border-left: 3px solid var(--accent, #7c8ba1);
  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(--glass-border));
  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: 8px; margin-bottom: 12px; }
.menu-card-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent, #7c8ba1);
}
.menu-card h2 { margin: 0; font-size: 1.05em; padding-right: 44px; }
.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);
}

/* 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);
  font-weight: 600;
}

.onboarding-card {
  background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  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(--glass-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);
}
.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; }

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

.new-menu {
  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);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  max-width: 560px;
}
.new-menu h3 { margin: 0 0 12px; font-size: 1em; color: var(--text-muted); }

.inline-form { display: flex; gap: 8px; }
.inline-form input[type="text"] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95em;
}
.inline-form input[type="color"] {
  width: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  background: none;
}

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

/* ---- Quick actions (menu page) ---- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.quick-card {
  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);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.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); }

/* 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);
  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); }
.active-task-buttons { display: flex; gap: 8px; }

.task-aviso {
  display: none;
  font-size: 0.78em;
  color: var(--danger);
  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; }
.log-list { list-style: none; padding: 0; margin: 0; }
.log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 6px;
  box-shadow: var(--shadow);
}
.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); 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); 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); 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); 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);
  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);
  padding: 14px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.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;
}

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

.table-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  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-radius: var(--radius);
  box-shadow: var(--shadow);
  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);
  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); }
.toast-error .toast-icono { color: var(--danger); }
.toast-texto { flex: 1; line-height: 1.4; }
.toast-accion {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--primary);
  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-radius: 8px;
  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-radius: var(--radius);
  box-shadow: var(--shadow);
  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);
}

/* 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; }
.edit-form-delete { max-width: 520px; }

/* ---- Preguntar a mis datos (chat con IA local) ---- */
.chat-config {
  display: flex;
  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; }
.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);
  border-bottom-left-radius: 4px;
}
.chat-pensando { opacity: 0.6; }

.chat-input-row { display: flex; 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) ---- */
.bar-chart {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  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); }
.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); }

/* ---- Subnav Lista/Calendario de Tareas ---- */
.tareas-subnav {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tareas-subnav a {
  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); }

/* ---- 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;
  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) 85%, black 0%);
}
.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;
  grid-template-columns: 220px 340px 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 fijas
   de 220px+340px 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);
}
.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); 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); }
.correo-lectura-asunto { margin: 18px 0 12px; font-size: 1.3em; }

.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); }
.correo-adjunto-tamano { color: var(--text-muted); }

.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);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}
.correo-aviso-imagenes a { color: var(--primary); }

.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: 44px; flex-shrink: 0; color: var(--text-muted); font-size: 0.85em; }
.correo-compose-campo input, .correo-compose-campo select {
  flex: 1;
  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; gap: 10px; margin-top: 16px; }
.correo-compose-cc-toggle { font-size: 0.82em; color: var(--primary); 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; }

/* Ribbon de acciones del mensaje abierto, al estilo del ribbon "Inicio" de Outlook */
.correo-ribbon {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 14px;
  padding: 8px 4px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.correo-ribbon-grupo {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 10px;
  border-right: 1px solid var(--border);
}
.correo-ribbon-grupo:last-child { border-right: none; }
.correo-ribbon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-size: 0.78em;
  font-family: inherit;
}
.correo-ribbon-btn:hover { background: var(--bg); border-color: var(--border); }
.correo-ribbon-icono { line-height: 1; }
.correo-ribbon-icono svg { width: 17px; height: 17px; vertical-align: -3px; }
.correo-ribbon-etiqueta { white-space: nowrap; }
.correo-ribbon-select {
  align-self: center;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85em;
}
.correo-ribbon-fecha-aviso { align-self: center; margin-left: 4px; }
.correo-ribbon-fecha-aviso input {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8em;
}
.correo-ribbon-posponer { display: flex; align-items: center; gap: 6px; }
.correo-ribbon-posponer input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8em;
  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-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 {
  max-width: 85%;
  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%;
}
.ia-msg-error {
  align-self: center;
  background: none;
  color: var(--danger);
  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; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.ia-chat-form textarea {
  flex: 1;
  resize: none;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}
.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); }

.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); }
.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) ----
   Mismo criterio que .auth-shell: página propia, no hereda el layout de
   base.html (sin icon-rail/top-bar), pero con contenido normal (listas,
   formularios) en vez de una tarjeta de login centrada -- por eso un
   contenedor ancho con margen, no .auth-shell/.auth-card. */
.portal-cliente-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.portal-cliente-shell .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ---- 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-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;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.tool-card {
  --tool-accent: var(--primary);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--tool-accent) 7%, var(--surface)) 0%, var(--surface) 55%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  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); }

.tool-card-name { margin: 0; font-size: 1.05em; font-weight: 700; }
.tool-card-desc { margin: 0; color: var(--text-muted); font-size: 0.9em; line-height: 1.4; flex-grow: 1; }

.tool-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: var(--space-1);
  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);
}
.tool-card-status.is-pendiente .tool-card-status-dot {
  background: var(--text-muted);
}
.tool-card.is-pendiente {
  cursor: default;
  opacity: 0.6;
}
.tool-card.is-pendiente:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

@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-dark);
  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);
}
.tiquet-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.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; }
.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); }
.tiquet-card-estado-form { margin-top: 4px; }
.tiquet-card-estado-form select {
  width: 100%;
  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); }
.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); }

.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;
}
.fichaje-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 24px;
}
.fichaje-estado { margin-bottom: 18px; }
.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); }
.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); }
.fichaje-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.fichaje-btn { padding: 16px 28px; font-size: 1.05em; font-weight: 700; border-radius: var(--radius); }
.fichaje-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fichaje-btn-entrada { background: var(--success); border-color: var(--success); color: white; }
.fichaje-btn-entrada:hover:not(:disabled) { 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); }
.fichaje-btn-salida { background: var(--danger); border-color: var(--danger); color: white; }
.fichaje-btn-salida:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 85%, black); }

@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); }
  .brand-name { display: none; }
  .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%; }
}