:root {
  color-scheme: light;
  --topbar-height: 66px;
  /* Navy profundo para CTAs principales y textos oscuros */
  --navy-950: #0a1020;
  --navy-900: #131d38;
  --navy-800: #1d294a;
  /* Acento primario CLARO: dorado/bronce (look juridico premium) */
  --blue-600: #d99a0b;
  --blue-700: #a87405;
  --blue-500: #e5aa16;
  --blue-100: #f6e7bf;
  --on-accent: #051735;
  /* Fin del gradiente y brillo del acento (se sobreescriben en dark) */
  --accent-2: #e5aa16;
  --accent-glow: rgba(229, 170, 22, 0.28);
  /* Acentos secundarios (estados) */
  --cyan-500: #1391a6;
  --green-500: #2f7d4f;
  --green-100: #e9f1e2;
  --amber-500: #b9822f;
  --amber-100: #f7edd8;
  --violet-500: #6356e6;
  --violet-100: #ecebfb;
  --red-500: #c34b46;
  --red-100: #f7e6dd;
  /* Neutros CALIDOS: marfil/crema y tinta calida (clave del look premium) */
  --ink: #051735;
  --muted: #5d6a82;
  --line: #e8d2b0;
  --panel: #fdf8ec;
  --surface-2: #f4e6c6;
  --bg: #f1e2c1;
  /* Sombras calidas y discretas */
  --shadow-soft: 0 10px 30px rgba(96, 72, 33, 0.07);
  --shadow-card: 0 2px 10px rgba(96, 72, 33, 0.05);
  --ring: 0 0 0 3px rgba(161, 123, 52, 0.25);
}

/* ====== MODO OSCURO ====== */
[data-theme="dark"] {
  color-scheme: dark;
  /* navy se mantiene OSCURO (es fondo del sidebar). Los pocos textos que lo
     usaban se cambiaron a --ink, que si se aclara en dark. */
  /* Acento mas luminoso para resaltar sobre fondo oscuro */
  --blue-600: #1a5fd0;
  --blue-700: #0a3f96;
  --blue-500: #5b8ee6;
  --blue-100: #0d2a5c;
  --on-accent: #ffffff;
  /* gradiente/brillo del acento: se mantienen AZULES en oscuro */
  --accent-2: #0a3f96;
  --accent-glow: rgba(10, 63, 150, 0.35);
  --green-100: #14241d;
  --amber-100: #2a2113;
  --violet-100: #1d1b33;
  --red-500: #f06277;
  --red-100: #2c1820;
  /* Neutros oscuros */
  --ink: #e8edf8;
  --muted: #9fb0cf;
  --line: #17356f;
  --panel: #0a2048;
  --surface-2: #0d2a5c;
  --bg: #051735;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4);
  --ring: 0 0 0 3px rgba(90, 106, 230, 0.35);
}

html,
body {
  background: var(--bg);
}
body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--blue-600);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Superficies translucidas que en dark deben oscurecerse */
[data-theme="dark"] .topbar {
  background: rgba(16, 21, 32, 0.9);
  border-bottom-color: var(--line);
}

/* Navegacion lateral tipo ChatGPT y composicion limpia */
.layout {
  display: block;
}

.sidebar {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  width: 292px;
  height: 100dvh;
  transform: translateX(-104%);
  transition: transform 180ms ease;
  box-shadow: 24px 0 60px rgba(5, 20, 48, 0.24);
}

body.sidebar-open {
  overflow: hidden;
}

body.sidebar-open .sidebar {
  transform: translateX(0);
}

.sidebar-close {
  display: grid;
  width: 38px;
  height: 38px;
  margin-left: auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-accent);
}

.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.sidebar-close svg {
  width: 19px;
  height: 19px;
}

.sidebar-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  visibility: hidden;
  border: 0;
  background: rgba(7, 20, 43, 0.42);
  opacity: 0;
  cursor: default;
  transition: opacity 180ms ease, visibility 180ms ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

body.sidebar-open .sidebar-backdrop {
  visibility: visible;
  opacity: 1;
}

.workspace {
  width: 100%;
}

.topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: var(--topbar-height);
  padding: 9px 24px;
  background: rgba(255, 255, 255, 0.96);
}

.topbar-navigation,
.topbar-brand {
  display: flex;
  min-width: 0;
  align-items: center;
}

.topbar-navigation {
  gap: 14px;
}

.sidebar-toggle {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #dbe3f0;
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

.sidebar-toggle:hover,
.sidebar-toggle[aria-expanded="true"] {
  border-color: #b9cdf1;
  background: var(--blue-100);
  color: var(--blue-600);
}

.sidebar-toggle svg {
  width: 22px;
  height: 22px;
}

.topbar-brand {
  gap: 10px;
}

.topbar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--blue-600);
  overflow: hidden;
  line-height: 0;
}

.topbar-brand strong,
.topbar-brand span {
  display: block;
}

.topbar-brand strong {
  font-size: 14px;
}

.topbar-brand > div > span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.top-actions {
  gap: 12px;
}

.view {
  max-width: 1600px;
}

#ai-view {
  max-width: none;
}

#ai-view .ai-conversation-layout {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(10, 31, 68, 0.06);
}

#ai-view .conversation-history {
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}

#ai-view .history-head,
#ai-view .history-note {
  background: var(--bg);
}

#ai-view .history-search input {
  background: var(--panel);
}

#ai-view .conversation-item {
  background: transparent;
}

#ai-view .conversation-item.active {
  border-color: #c9d9f7;
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--blue-600);
}

#ai-view .conversation-main {
  background: var(--panel);
}

#ai-view .conversation-titlebar {
  min-height: 68px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 18px;
  box-shadow: none;
}

#ai-view .enhanced-chat {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#ai-view .assistant-intro {
  min-height: 56px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

#ai-view .intro-mode-switch {
  width: min(440px, 100%);
}

#ai-view .intro-mode-switch button {
  min-height: 40px;
  box-shadow: none;
}

#ai-view .intro-mode-switch button.active {
  border-color: var(--blue-600);
  background: var(--blue-600);
  color: var(--on-accent);
  box-shadow: none;
}

/* Comandos como pills compactos (no una barra de 6 cajas grandes) */
#ai-view .command-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

#ai-view .command-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#ai-view .command-chip:hover {
  border-color: #cdd2e0;
  background: var(--surface-2);
  color: var(--ink);
  transform: none;
}

#ai-view .command-chip svg {
  width: 15px;
  height: 15px;
}

#ai-view .command-chip strong {
  color: inherit;
  font-size: 12.5px;
  font-weight: 600;
}

#ai-view .command-chip small {
  display: none;
}

#ai-view .command-chip.success {
  color: var(--green-500);
}

#ai-view .command-chip.danger {
  color: var(--red-500);
}

#ai-view .messages {
  gap: 26px;
  padding: 34px 44px;
  background: var(--panel);
}

#ai-view .message {
  max-width: min(1040px, 94%);
}

#ai-view .message.user {
  max-width: min(720px, 82%);
}

#ai-view .message .bubble {
  border-radius: 13px;
}

#ai-view .message.assistant .bubble {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: none;
}

#ai-view .message.user .bubble {
  border-color: transparent;
  background: var(--blue-100);
  color: var(--ink);
  box-shadow: none;
}

#ai-view .feedback-panel,
#ai-view .source-card {
  box-shadow: none;
}

#ai-view .chat-bottom {
  gap: 12px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

#ai-view .composer textarea {
  background: var(--panel);
  box-shadow: none;
}

#ai-view .prompt-actions button {
  min-height: 34px;
  background: var(--panel);
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    width: min(292px, calc(100vw - 44px));
    max-width: none;
    height: 100dvh;
  }

  .topbar {
    position: sticky;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: none;
    padding: 9px 14px;
  }

  .top-profile > div:last-child,
  .notification-dot {
    display: none;
  }

  #ai-view .ai-conversation-layout {
    display: block;
    border: 0;
    box-shadow: none;
  }

  #ai-view .conversation-history {
    max-height: 240px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  #ai-view .messages {
    padding: 24px 16px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(18, 105, 255, 0.08), transparent 28rem),
    linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 58%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

html,
body {
  overflow-x: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.layout {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 24px 18px;
  background:
    linear-gradient(180deg, rgba(18, 105, 255, 0.12), transparent 24rem),
    linear-gradient(160deg, var(--navy-950), var(--navy-900) 55%, #05152d);
  color: white;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin-bottom: 24px;
}

.brand-seal {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-accent);
  font-weight: 900;
}

.brand-seal svg {
  width: 28px;
  height: 28px;
}

.brand-copy strong,
.brand-copy span {
  display: block;
}

.brand-copy strong {
  font-size: 28px;
  line-height: 1;
}

.brand-copy span {
  margin-top: 2px;
  color: #b8c9e8;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 9px;
}

.nav-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #d9e6ff;
  text-align: left;
  font-weight: 750;
}

.nav-item.active {
  background: linear-gradient(135deg, var(--blue-600), var(--accent-2));
  color: white;
  box-shadow: 0 12px 28px var(--accent-glow);
}

.nav-item:not(.locked):hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-item.locked {
  color: rgba(217, 230, 255, 0.54);
  cursor: not-allowed;
}

.nav-glyph {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: currentColor;
  font-size: 11px;
  font-weight: 900;
}

.nav-glyph svg {
  width: 17px;
  height: 17px;
}

.nav-item small {
  display: grid;
  min-height: 22px;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #c4d4ee;
  font-size: 11px;
}

.sidebar-footer {
  display: grid;
  gap: 0;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.sidebar-footer .sidebar-help { width: 100%; }

.mini-status,
.sidebar-user,
.top-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

#sidebar-status-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--amber-500);
  box-shadow: 0 0 0 4px rgba(245, 154, 50, 0.14);
}

#sidebar-status-dot.ok {
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 166, 107, 0.15);
}

#sidebar-status-dot.bad {
  background: var(--red-500);
  box-shadow: 0 0 0 4px rgba(238, 75, 95, 0.15);
}

.mini-status strong,
.mini-status small,
.sidebar-user strong,
.sidebar-user span {
  display: block;
}

.mini-status strong,
.sidebar-user strong {
  font-size: 13px;
}

.mini-status small,
.sidebar-user span {
  color: #b8c9e8;
  font-size: 12px;
}

.user-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: white;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.user-avatar.compact {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #6d8cff, var(--blue-600));
  color: white;
}

.workspace {
  width: 100%;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: var(--topbar-height);
  padding: 12px 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.global-search {
  position: relative;
  display: flex;
  align-items: center;
}

.global-search input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 18px 0 46px;
  background: white;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(16, 26, 52, 0.04);
}

.global-search input:focus,
.composer textarea:focus,
.login-row input:focus {
  border-color: var(--blue-600);
  outline: 3px solid rgba(18, 105, 255, 0.12);
}

.search-icon {
  position: absolute;
  left: 18px;
  width: 14px;
  height: 14px;
  border: 2px solid #667899;
  border-radius: 999px;
}

.search-icon::after {
  position: absolute;
  right: -7px;
  bottom: -5px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: #667899;
  content: "";
  transform: rotate(45deg);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sync-button,
.primary-action,
.secondary-action,
.send-button,
.chat-actions button,
.segmented button,
.text-action,
.action-card,
.login-row button {
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 800;
}

.sync-button,
.primary-action,
.send-button {
  min-height: 46px;
  padding: 0 18px;
  border-color: var(--blue-600);
  background: linear-gradient(135deg, var(--blue-600), var(--accent-2));
  color: white;
  box-shadow: 0 12px 26px var(--accent-glow);
}

.sync-button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-button svg,
.primary-action svg,
.secondary-action svg,
.send-button svg,
.chat-actions svg,
.segmented svg {
  width: 18px;
  height: 18px;
}

.primary-action,
.secondary-action,
.send-button,
.chat-actions button,
.segmented button,
.text-action,
.login-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.secondary-action,
.chat-actions button,
.text-action {
  min-height: 40px;
  padding: 0 14px;
  background: white;
  color: var(--blue-600);
}

.top-profile strong,
.top-profile span {
  display: block;
}

.top-profile strong {
  font-size: 14px;
}

.top-profile span {
  color: var(--muted);
  font-size: 12px;
}

.notification-dot {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.notification-dot:hover {
  background: var(--panel);
  color: var(--blue-600);
}

.notification-dot.has-unread {
  color: var(--blue-600);
}

.notification-dot svg {
  width: 18px;
  height: 18px;
}

.notif-wrap {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--red-500);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 320px;
  max-width: 84vw;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.notif-head strong {
  font-size: 14px;
  color: var(--ink);
}

.notif-head button {
  border: 0;
  background: transparent;
  color: var(--blue-600);
  font: 600 12px Inter, sans-serif;
  cursor: pointer;
}

.notif-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
}

.notif-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.notif-item:hover {
  background: var(--surface-2);
}

.notif-item.unread {
  background: var(--blue-100);
}

.notif-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--blue-600);
}

.notif-icon svg {
  width: 18px;
  height: 18px;
}

.notif-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.notif-copy strong {
  font-size: 13px;
  color: var(--ink);
}

.notif-copy small {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
}

.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--blue-600);
  vertical-align: middle;
}

.conversation-item.unread .conversation-copy strong {
  color: var(--ink);
  font-weight: 800;
}

.view {
  display: none;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 36px 42px;
}

.view.active {
  display: block;
}

.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 26px;
}

.home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100vw;
  min-height: clamp(560px, calc(100vh - 92px), 780px);
  margin: -32px calc(50% - 50vw) 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(176, 132, 44, 0.22);
  background: #15100a;
}

.home-hero-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.05) brightness(0.82);
}

.home-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(12, 17, 31, 0.82) 0%, rgba(15, 20, 33, 0.66) 36%, rgba(74, 55, 28, 0.22) 70%, rgba(237, 222, 188, 0.2) 100%),
    linear-gradient(180deg, rgba(255, 251, 242, 0.18) 0%, rgba(12, 17, 31, 0.14) 42%, rgba(248, 239, 219, 0.58) 100%);
}

.home-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 34%;
  background: linear-gradient(180deg, transparent, var(--bg));
  content: "";
}

.home-hero-inner {
  display: flex;
  width: min(1500px, calc(100% - 72px));
  min-height: inherit;
  align-items: center;
  margin: 0 auto;
  padding: clamp(54px, 8vh, 90px) 0 clamp(110px, 15vh, 150px);
}

.home-hero-copy {
  display: flex;
  min-width: 0;
  max-width: 650px;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: white;
}

.home-hero-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(234, 209, 150, 0.42);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(8, 13, 25, 0.26);
  color: #f1d999;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.home-hero-copy h1 {
  margin: 0;
  color: #fff7e6;
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 0.98;
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  overflow-wrap: anywhere;
}

.home-hero-copy p {
  margin: 0;
  max-width: 54ch;
  color: rgba(255, 248, 231, 0.88);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.home-drive-action {
  min-height: 46px;
  padding: 0 18px;
  border-color: rgba(232, 202, 135, 0.48);
  background: rgba(255, 246, 224, 0.14);
  color: #fff3d2;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.home-drive-action:hover {
  border-color: rgba(248, 221, 158, 0.75);
  background: rgba(255, 246, 224, 0.2);
  color: white;
}

#home-view .flow-cards {
  position: relative;
  z-index: 2;
  /* Antes se montaban 76px sobre el video y le tapaban la parte baja, que es
     justo donde termina la escena. Ahora quedan debajo, con aire, y el video
     se ve completo. */
  margin-top: 20px;
}

@media (max-width: 920px) {
  .home-hero {
    min-height: calc(100vh - 82px);
  }

  .home-hero-inner {
    width: min(100% - 36px, 720px);
    padding: 58px 0 118px;
  }

  .home-hero-shade {
    background:
      linear-gradient(180deg, rgba(10, 16, 30, 0.84) 0%, rgba(11, 17, 31, 0.74) 48%, rgba(248, 239, 219, 0.54) 100%);
  }

  #home-view .flow-cards {
    margin-top: 16px;
  }
}

.page-heading > div {
  min-width: 0;
}

.page-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.page-heading p {
  max-width: 820px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.compact-heading h1 {
  font-size: clamp(28px, 3vw, 40px);
}

.ai-title-line {
  display: inline;
}

.ai-subtitle-line {
  display: inline;
}

.flow-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
  align-items: start;
}

.flow-card,
.summary-panel,
.status-panel,
.recommend-panel,
.documents-panel,
.activity-panel,
.chat-shell,
.help-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.flow-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  align-items: start;
  gap: 14px;
  padding: 18px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.flow-card:hover {
  border-color: var(--blue-600);
  box-shadow: var(--shadow-soft);
}

.step-visual {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--blue-600);
}

.step-visual svg {
  width: 20px;
  height: 20px;
}

.flow-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 2px;
}

.flow-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.flow-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.flow-detail {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}

.flow-card.expanded .flow-detail {
  max-height: 320px;
  opacity: 1;
  margin-top: 6px;
}

.flow-desc {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.flow-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.flow-note svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--blue-600);
}

.flow-chevron {
  display: grid;
  place-items: center;
  padding-top: 4px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.flow-chevron svg {
  width: 18px;
  height: 18px;
}

.flow-card.expanded .flow-chevron {
  transform: rotate(180deg);
}

.panel-title h2,
.help-card h2 {
  margin: 0;
  font-size: 18px;
}

.panel-title h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.panel-title h2 svg {
  width: 18px;
  height: 18px;
  color: var(--blue-600);
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
  gap: 20px;
}

.summary-panel,
.status-panel,
.recommend-panel,
.documents-panel,
.activity-panel,
.help-card {
  padding: 22px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.action-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.action-card {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 10px;
  min-height: 130px;
  padding: 18px 14px;
  background: linear-gradient(180deg, var(--panel), var(--surface-2));
  color: var(--ink);
  text-align: left;
  align-items: center;
  align-content: start;
}

.action-card:hover,
.source-card:hover {
  border-color: var(--blue-500);
  transform: translateY(-1px);
}

.card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--blue-600);
}

.card-icon svg {
  width: 20px;
  height: 20px;
}

.action-card strong {
  color: var(--blue-600);
}

.action-card small {
  display: block;
  grid-column: 1 / -1;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.status-metrics {
  display: grid;
  gap: 16px;
}

.status-metrics div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.status-metrics span,
.platform-ok small {
  color: var(--muted);
}

.status-metrics strong {
  font-size: 24px;
}

.platform-ok {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.platform-ok small {
  grid-column: 2;
  font-size: 12px;
}

.check {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--amber-500);
}

.check.ok {
  background: var(--green-500);
}

.check.bad {
  background: var(--red-500);
}

.recommend-panel ul {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.drive-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.drive-heading-actions a {
  text-decoration: none;
}

.drive-browser {
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.drive-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(540px, 700px);
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.drive-toolbar-actions {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(300px, 1fr);
  gap: 10px;
  align-items: center;
}

.drive-sort {
  position: relative;
  min-width: 0;
}

.drive-sort > svg {
  position: absolute;
  z-index: 1;
  top: 13px;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.drive-sort select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 34px 0 38px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
}

.drive-sort select:focus {
  border-color: var(--blue-600);
  outline: none;
  box-shadow: var(--ring);
}

.drive-breadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.drive-breadcrumb > svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.drive-breadcrumb button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.drive-breadcrumb button:hover {
  background: var(--surface-2);
  color: var(--blue-600);
}

.drive-breadcrumb button[aria-current="page"] {
  background: var(--blue-100);
  color: var(--blue-600);
}

.drive-breadcrumb button svg {
  width: 17px;
  height: 17px;
}

.drive-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
}

.drive-search > svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.drive-search input {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px 0 0 8px;
  padding: 0 14px 0 42px;
  color: var(--ink);
}

.drive-search input:focus {
  z-index: 1;
  border-color: var(--blue-600);
  outline: none;
  box-shadow: var(--ring);
}

.drive-search button {
  min-height: 44px;
  border: 1px solid var(--blue-600);
  border-radius: 0 8px 8px 0;
  background: var(--blue-600);
  color: var(--on-accent);
  font-weight: 700;
}

.drive-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.drive-statusbar > div:first-child {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 2px 9px;
  align-items: center;
}

.drive-statusbar small {
  grid-column: 2;
  color: var(--muted);
}

.drive-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--amber-500);
  box-shadow: 0 0 0 4px rgba(245, 154, 50, 0.12);
}

.drive-live-dot.live {
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 166, 107, 0.12);
}

.drive-status-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  color: var(--muted);
  font-size: 13px;
}

.drive-status-metrics strong {
  color: var(--ink);
}

.drive-list-head,
.drive-item {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 190px 140px 120px;
  gap: 14px;
  align-items: center;
}

/* Columna "Tipo" oculta: el icono ya indica que es carpeta/documento */
.drive-list-head span:nth-child(2),
.drive-item-type {
  display: none;
}

.drive-list-head {
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.drive-items {
  min-height: 340px;
  max-height: 620px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.drive-item {
  min-height: 72px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--surface-2);
  background: var(--panel);
}

.drive-item:last-child {
  border-bottom: 0;
}

.drive-item:hover {
  background: var(--surface-2);
}

.drive-item.folder {
  background: var(--panel);
}

.drive-item-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.drive-item-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
}

.drive-item-icon {
  border: 1px solid var(--line);
}

.drive-item-icon.folder {
  background: var(--surface-2);
  color: var(--blue-600);
}

.drive-item-icon.document {
  background: var(--surface-2);
  color: var(--muted);
}

.drive-item-icon svg {
  width: 22px;
  height: 22px;
}

.drive-item-name {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.drive-item-name strong,
.drive-item-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-item-name strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.drive-item-name small,
.drive-item-type,
.drive-item-date {
  color: var(--muted);
  font-size: 12px;
}

.drive-availability {
  display: inline-grid;
  min-height: 26px;
  place-items: center;
  border-radius: 999px;
  padding: 0 11px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.drive-availability.live {
  background: var(--green-100);
  color: var(--green-500);
}

.drive-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.drive-item-actions button,
.drive-item-actions a,
.drive-pagination button,
.drive-preview-head button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--blue-600);
  text-decoration: none;
}

.drive-item-actions button:hover,
.drive-item-actions a:hover,
.drive-pagination button:hover,
.drive-preview-head button:hover {
  border-color: var(--line);
  background: var(--blue-100);
}

.drive-item-actions svg,
.drive-pagination svg,
.drive-preview-head button svg {
  width: 17px;
  height: 17px;
}

.drive-loading,
.drive-empty {
  display: grid;
  min-height: 340px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.drive-loading svg {
  color: var(--blue-600);
  animation: drive-spin 900ms linear infinite;
}

.drive-empty svg {
  width: 38px;
  height: 38px;
  color: #7d8da8;
}

.drive-empty strong {
  color: var(--ink);
}

.drive-empty.error svg {
  color: var(--red-500);
}

@keyframes drive-spin {
  to {
    transform: rotate(360deg);
  }
}

.drive-pagination {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.drive-pagination > div {
  display: flex;
  gap: 8px;
}

.drive-pagination button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.drive-preview-dialog {
  width: min(1280px, calc(100vw - 54px));
  height: min(880px, calc(100vh - 54px));
  max-width: none;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(5, 20, 48, 0.28);
}

.drive-preview-dialog::backdrop {
  background: rgba(5, 20, 48, 0.58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.drive-preview-head {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid var(--line);
}

.drive-preview-head span,
.drive-preview-head strong {
  display: block;
}

.drive-preview-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.drive-preview-head strong {
  max-width: 780px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-preview-head > div:last-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.drive-preview-head a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.drive-preview-head a svg {
  width: 17px;
  height: 17px;
}

.drive-preview-body {
  height: calc(100% - 72px);
  background: var(--surface-2);
}

.drive-preview-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--panel);
}

.documents-panel,
.activity-panel {
  margin-top: 20px;
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.source-card {
  display: grid;
  gap: 10px;
  min-height: 170px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  transition: transform 140ms ease, border-color 140ms ease;
}

.pdf-badge {
  display: grid;
  width: 42px;
  height: 48px;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 6px;
  background: var(--red-100);
  color: var(--red-500);
  font-size: 11px;
  font-weight: 900;
}

.pdf-badge svg {
  width: 18px;
  height: 18px;
}

.source-card strong {
  line-height: 1.35;
}

.source-card small {
  color: var(--muted);
}

.source-card a {
  color: var(--blue-600);
  font-weight: 850;
  text-decoration: none;
}

.empty-state,
.empty-row {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px dashed #cbd6ea;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
}

.empty-state strong {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
}

.activity-table {
  overflow-x: auto;
}

.table-head,
.table-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) 90px 90px 126px 112px;
  gap: 14px;
  align-items: center;
  min-width: 760px;
}

.table-head {
  padding-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.table-row {
  min-height: 50px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.table-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill {
  display: inline-grid;
  min-height: 26px;
  place-items: center;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-500);
  font-size: 12px;
  font-weight: 900;
}

.ai-view {
  max-width: none;
}

@media (min-width: 901px) {
  body.is-ai-view,
  body:has(#ai-view.active) {
    height: 100vh;
    overflow: hidden;
  }

  body.is-ai-view .layout,
  body:has(#ai-view.active) .layout {
    height: 100vh;
    overflow: hidden;
  }

  body.is-ai-view .workspace,
  body:has(#ai-view.active) .workspace {
    display: flex;
    height: 100vh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  body.is-ai-view .topbar,
  body:has(#ai-view.active) .topbar {
    flex: 0 0 auto;
  }

  body.is-ai-view .ai-view.active,
  body:has(#ai-view.active) .ai-view.active {
    display: flex;
    width: 100%;
    height: calc(100vh - var(--topbar-height));
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    padding-top: 22px;
    padding-bottom: 16px;
    overflow: hidden;
  }
}

.ai-heading {
  align-items: center;
  flex: 0 0 auto;
  margin-bottom: 16px;
}

.ai-heading h1 {
  font-size: clamp(30px, 3.2vw, 42px);
}

.ai-heading p {
  margin-top: 8px;
}

.ai-conversation-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  flex: 1 1 auto;
  min-height: 0;
}

.conversation-history,
.conversation-main,
.conversation-titlebar {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.conversation-history {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.history-head strong,
.history-head span {
  display: block;
}

.history-head strong {
  font-size: 17px;
}

.history-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.history-head button,
.conversation-title-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 900;
}

.history-head button {
  width: 38px;
  padding: 0;
  background: var(--blue-600);
  color: var(--on-accent);
}

.history-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 12px;
}

.history-search svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: #667899;
}

.history-search input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px 0 36px;
  color: var(--ink);
}

.conversation-list {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 0 14px 14px;
}

.conversation-list::-webkit-scrollbar {
  width: 10px;
}

.conversation-list::-webkit-scrollbar-thumb {
  border: 3px solid var(--panel);
  border-radius: 999px;
  background: #a7b8d2;
}

.conversation-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: start;
  width: 100%;
  min-height: 100px;
  padding: 7px;
  border: 1px solid #e1e8f5;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.conversation-item.active {
  border-color: var(--line);
  background: var(--blue-100);
  box-shadow: inset 3px 0 0 var(--blue-600);
}

.conversation-open {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  width: 100%;
  min-width: 0;
  padding: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.conversation-delete {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #f3d7dc;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--red-500);
}

.conversation-delete:hover {
  border-color: #ffd3d9;
  background: var(--red-100);
  color: var(--red-500);
}

.conversation-delete svg {
  width: 16px;
  height: 16px;
}

.conversation-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: var(--panel);
  color: var(--blue-600);
}

.conversation-icon svg {
  width: 17px;
  height: 17px;
}

.conversation-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.conversation-copy strong,
.conversation-copy small,
.conversation-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-copy strong {
  white-space: nowrap;
  font-size: 13px;
}

.conversation-copy small {
  display: -webkit-box;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.conversation-copy em {
  color: var(--blue-600);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.history-empty {
  padding: 18px;
  border: 1px dashed #cbd6ea;
  border-radius: 8px;
  color: var(--muted);
  line-height: 1.4;
}

.history-clear-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin: 4px 14px 12px;
  border: 1px solid #f2cbd1;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--red-500);
  font-size: 12px;
  font-weight: 900;
}

.history-clear-all:hover {
  border-color: #f2aeb8;
  background: var(--red-100);
}

.history-clear-all:disabled {
  border-color: #e3e9f5;
  background: var(--surface-2);
  color: #9aa8bd;
  cursor: not-allowed;
}

.history-clear-all svg {
  width: 16px;
  height: 16px;
}

.history-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: #435673;
  font-size: 12px;
  line-height: 1.35;
}

.history-note svg {
  width: 17px;
  height: 17px;
  color: var(--green-500);
}

.conversation-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.conversation-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 15px 18px;
  flex: 0 0 auto;
}

.conversation-titlebar span,
.conversation-titlebar strong,
.conversation-titlebar small {
  display: block;
}

.conversation-titlebar span {
  color: var(--blue-600);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.conversation-titlebar strong {
  max-width: 680px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}

.conversation-titlebar small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.conversation-title-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.conversation-title-actions button {
  padding: 0 11px;
}

.conversation-title-actions button.danger {
  color: var(--red-500);
}

.conversation-title-actions button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.ai-mode-card {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-width: 170px;
}

.ai-mode-card svg {
  grid-row: 1 / span 2;
  width: 25px;
  height: 25px;
  color: var(--blue-600);
}

.chat-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body.is-ai-view .chat-shell,
body:has(#ai-view.active) .chat-shell {
  flex: 1 1 auto;
  min-height: 0;
}

.enhanced-chat {
  border-color: var(--line);
  box-shadow: 0 24px 60px rgba(7, 26, 56, 0.09);
}

.assistant-intro {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 74px minmax(0, 1fr) 280px;
  gap: 22px;
  align-items: center;
  padding: 20px 26px;
  border-bottom: 1px solid #dce7f7;
  background:
    linear-gradient(135deg, rgba(18, 105, 255, 0.09), rgba(18, 183, 214, 0.05)),
    var(--panel);
  overflow: visible;
}

.assistant-orb {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-100), #eff8ff);
  color: var(--blue-600);
  box-shadow: inset 0 0 0 1px #d2e2ff;
}

.assistant-orb svg {
  width: 31px;
  height: 31px;
}

.assistant-copy strong {
  display: block;
  font-size: 17px;
}

.assistant-copy p {
  max-width: 760px;
  margin: 5px 0 10px;
  color: var(--muted);
  line-height: 1.45;
}

.assistant-copy ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #314464;
}

.assistant-copy li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.assistant-copy li svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--blue-600);
}

@media (min-width: 1501px) {
  .assistant-copy ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
  }

  .assistant-copy li {
    padding-right: 10px;
    border-right: 1px solid rgba(18, 105, 255, 0.14);
    line-height: 1.35;
  }

  .assistant-copy li:last-child {
    border-right: 0;
  }
}

.intro-mode-switch {
  display: grid;
  gap: 10px;
}

.intro-mode-switch button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 900;
  text-align: left;
}

.intro-mode-switch button svg {
  width: 20px;
  height: 20px;
}

.intro-mode-switch button.active {
  border-color: var(--blue-600);
  background: linear-gradient(135deg, var(--blue-600), #0b57d6);
  color: var(--on-accent);
  box-shadow: 0 14px 30px rgba(18, 105, 255, 0.23);
}

.command-bar {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  overflow: visible;
}

.command-chip {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  min-height: 54px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--blue-600);
  text-align: left;
  box-shadow: 0 8px 18px rgba(16, 26, 52, 0.04);
}

.command-chip:hover {
  border-color: var(--line);
  transform: translateY(-1px);
}

.command-chip svg {
  width: 19px;
  height: 19px;
}

.command-chip strong,
.command-chip small {
  display: block;
}

.command-chip strong {
  color: var(--ink);
  font-size: 13px;
}

.command-chip small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.command-chip.success {
  color: var(--green-500);
}

.command-chip.danger {
  color: var(--red-500);
}

.command-chip.ghost {
  color: #4e607d;
}

.login-box {
  display: grid;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.login-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
}

.login-row input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
}

.login-row button {
  background: var(--blue-600);
  color: white;
}

.messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 32px;
  scrollbar-gutter: stable;
  background:
    radial-gradient(circle at top right, rgba(18, 105, 255, 0.06), transparent 24rem),
    linear-gradient(180deg, var(--surface-2), var(--surface-2));
}

.messages::-webkit-scrollbar {
  width: 12px;
}

.messages::-webkit-scrollbar-track {
  background: var(--surface-2);
}

.messages::-webkit-scrollbar-thumb {
  border: 3px solid var(--surface-2);
  border-radius: 999px;
  background: #9db2d1;
}

.messages::-webkit-scrollbar-thumb:hover {
  background: #7389ac;
}

.message {
  display: flex;
  gap: 14px;
  max-width: min(1080px, 96%);
}

.message.user {
  align-self: end;
  flex-direction: row-reverse;
  max-width: min(760px, 86%);
}

.message.assistant {
  align-self: start;
}

.message-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--panel);
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px #dbe7f8;
}

.message.assistant .message-avatar {
  background: linear-gradient(135deg, var(--blue-100), #e9fbff);
}

.message.user .message-avatar {
  background: linear-gradient(135deg, #6d8cff, var(--blue-600));
  color: var(--on-accent);
}

.message-avatar svg {
  width: 20px;
  height: 20px;
}

.message-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.message .bubble {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 21px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.62;
  box-shadow: 0 8px 22px rgba(16, 26, 52, 0.04);
}

.message.user .bubble {
  border-color: #d7e4ff;
  background: linear-gradient(135deg, var(--blue-100), #edf5ff);
}

.message.assistant .bubble {
  background: white;
}

.bubble a {
  color: var(--blue-600);
  font-weight: 850;
}

.message-time {
  color: var(--muted);
  font-size: 12px;
}

.message.user .message-time {
  justify-self: end;
  text-align: right;
}

.answer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.answer-meta span {
  display: inline-grid;
  min-height: 26px;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 900;
}

.message-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.message-sources .source-card {
  min-height: 126px;
  padding: 12px;
  font-size: 13px;
}

.feedback-panel {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.feedback-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.feedback-row strong {
  margin-right: 6px;
  color: var(--ink);
  font-size: 13px;
}

.feedback-panel button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 900;
}

.feedback-panel button svg {
  width: 16px;
  height: 16px;
}

.feedback-panel button.good {
  color: var(--green-500);
}

.feedback-panel button.bad {
  color: var(--red-500);
}

.feedback-panel .feedback-saved {
  color: var(--green-500);
  font-size: 13px;
  font-weight: 900;
}

.correction-box {
  display: grid;
  gap: 9px;
}

.correction-box textarea {
  min-height: 86px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
}

.correction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-bottom {
  display: grid;
  flex: 0 0 auto;
  gap: 12px;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 14px;
  align-items: end;
  padding: 0;
  border-top: 0;
  background: transparent;
}

.composer-input {
  position: relative;
}

.composer textarea {
  width: 100%;
  min-height: 58px;
  max-height: 140px;
  overflow-y: hidden;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 17px 18px;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(16, 26, 52, 0.04);
}

.send-button {
  min-height: 58px;
  height: 58px;
  padding: 0 18px;
  border-radius: 8px;
  white-space: nowrap;
  align-self: end;
  box-shadow: 0 14px 30px rgba(18, 105, 255, 0.24);
}

.send-button:disabled {
  opacity: 0.72;
  cursor: wait;
}

.prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  order: -1;
}

.prompt-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  align-self: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 900;
}

.prompt-actions button:hover {
  border-color: var(--line);
  background: var(--surface-2);
}

.prompt-actions svg {
  width: 17px;
  height: 17px;
}

.info-strip {
  flex: 0 0 auto;
  margin-top: 10px;
  padding: 11px 14px;
  border: 1px solid #d6e3ff;
  border-radius: 8px;
  background: var(--blue-100);
  color: #27446f;
  line-height: 1.4;
  font-size: 13px;
}

.mode-card {
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow-card);
}

.mode-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.mode-card strong {
  color: var(--blue-600);
  font-size: 18px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.help-card {
  min-height: 230px;
}

.help-card p {
  color: var(--muted);
  line-height: 1.55;
}

.hidden {
  display: none;
}

@media (max-width: 1200px) {
  .home-grid,
  .flow-cards,
  .help-grid,
  .source-grid {
    grid-template-columns: 1fr;
  }

  .ai-conversation-layout {
    grid-template-columns: 1fr;
  }

  .conversation-history {
    max-height: 260px;
  }

  .conversation-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .assistant-intro {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .intro-mode-switch {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .action-cards,
  .message-sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) and (max-width: 1500px) {
  .ai-conversation-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 12px;
  }

  .conversation-titlebar {
    padding: 10px 12px;
  }

  .conversation-titlebar strong {
    max-width: 430px;
  }

  .conversation-title-actions button {
    min-height: 32px;
    padding: 0 9px;
  }

  .assistant-intro {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 16px;
  }

  .assistant-orb {
    width: 42px;
    height: 42px;
  }

  .assistant-orb svg {
    width: 23px;
    height: 23px;
  }

  .assistant-copy strong {
    font-size: 15px;
  }

  .assistant-copy p {
    margin: 3px 0 6px;
    font-size: 13px;
    line-height: 1.35;
  }

  .assistant-copy ul {
    gap: 2px;
    font-size: 13px;
  }

  .intro-mode-switch {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-mode-switch button {
    min-height: 40px;
  }

  .command-bar {
    gap: 8px;
    padding: 8px 10px;
  }

  .command-chip {
    min-height: 44px;
    padding: 7px 8px;
  }

  .command-chip small {
    display: none;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  body.is-ai-view .ai-view.active,
  body:has(#ai-view.active) .ai-view.active {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .ai-heading {
    margin-bottom: 10px;
  }

  .ai-heading h1 {
    font-size: 32px;
    line-height: 1.05;
  }

  .ai-heading p {
    margin-top: 6px;
    font-size: 14px;
  }

  .ai-mode-card {
    min-width: 132px;
    padding: 10px 12px;
  }

  .assistant-intro {
    grid-template-columns: 54px minmax(0, 1fr) 274px;
    gap: 12px;
    padding: 10px 16px;
  }

  .assistant-orb {
    width: 44px;
    height: 44px;
  }

  .assistant-orb svg {
    width: 24px;
    height: 24px;
  }

  .assistant-copy strong {
    font-size: 15px;
  }

  .assistant-copy p {
    display: block;
    max-width: 720px;
    margin: 3px 0 5px;
    font-size: 13px;
    line-height: 1.3;
  }

  .assistant-copy ul {
    gap: 2px;
    margin-top: 3px;
    font-size: 13px;
  }

  .assistant-copy li:nth-child(3) {
    display: flex;
  }

  .intro-mode-switch {
    gap: 8px;
  }

  .intro-mode-switch button {
    min-height: 40px;
    padding: 0 12px;
  }

  .command-bar {
    gap: 8px;
    padding: 8px 14px;
  }

  .command-chip {
    min-height: 44px;
    padding: 7px 10px;
  }

  .command-chip small {
    display: none;
  }

  .messages {
    gap: 12px;
    padding: 14px 18px;
  }

  .message .bubble {
    padding: 13px 16px;
  }

  .prompt-actions button {
    min-height: 32px;
  }

  .composer textarea {
    padding: 12px 14px;
  }

  .chat-bottom {
    gap: 8px;
    padding: 9px 14px 10px;
  }

  .composer textarea,
  .send-button {
    min-height: 48px;
    height: 48px;
  }

  .info-strip {
    display: none;
  }
}

/* Estado definitivo: estas reglas deben permanecer al final del archivo. */
.layout {
  display: block;
  grid-template-columns: none;
}

.sidebar {
  position: fixed;
  z-index: 100;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 292px;
  max-width: calc(100vw - 44px);
  height: 100dvh;
  transform: translateX(-104%);
  transition: transform 180ms ease;
  box-shadow: 24px 0 60px rgba(5, 20, 48, 0.24);
}

body.sidebar-open .sidebar {
  transform: translateX(0);
}

.workspace {
  width: 100%;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: var(--topbar-height);
  max-width: none;
  padding: 9px 24px;
}

#ai-view .ai-conversation-layout {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(10, 31, 68, 0.06);
}

#ai-view .conversation-history {
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}

#ai-view .conversation-titlebar {
  min-height: 68px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 18px;
  box-shadow: none;
}

#ai-view .enhanced-chat {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#ai-view .assistant-intro,
#ai-view .command-bar,
#ai-view .chat-bottom {
  background: var(--panel);
}

#ai-view .assistant-intro {
  min-height: 56px;
  padding: 8px 18px;
}

#ai-view .command-bar {
  gap: 7px;
  padding: 8px 18px;
}

#ai-view .command-chip {
  min-height: 42px;
  padding: 6px 9px;
  background: var(--panel);
  box-shadow: none;
}

#ai-view .command-chip small {
  display: none;
}

#ai-view .messages {
  gap: 26px;
  padding: 34px 44px;
  background: var(--panel);
}

#ai-view .message.assistant .bubble {
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: none;
}

#ai-view .message.user .bubble {
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: none;
}

#ai-view .chat-bottom {
  padding: 14px 20px 16px;
}

@media (max-width: 900px) {
  .layout {
    display: block;
  }

  .sidebar {
    position: fixed;
    width: min(292px, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
    height: 100dvh;
  }

  .topbar {
    position: sticky;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: none;
    padding: 9px 14px;
  }

  #ai-view .ai-conversation-layout {
    display: block;
    border: 0;
    box-shadow: none;
  }

  #ai-view .conversation-history {
    max-height: 240px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  #ai-view .messages {
    padding: 24px 16px;
  }
}

/* Overrides finales del cajon lateral y la vista de consulta */
.layout {
  display: block;
  grid-template-columns: none;
}

.sidebar {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  width: 292px;
  max-width: calc(100vw - 44px);
  height: 100dvh;
  transform: translateX(-104%);
  transition: transform 180ms ease;
  box-shadow: 24px 0 60px rgba(5, 20, 48, 0.24);
}

body.sidebar-open .sidebar {
  transform: translateX(0);
}

.sidebar-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
}

.workspace {
  width: 100%;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: var(--topbar-height);
  max-width: none;
  padding: 9px 24px;
}

#ai-view .ai-conversation-layout {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 36px rgba(10, 31, 68, 0.06);
}

#ai-view .conversation-history {
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}

#ai-view .conversation-titlebar {
  min-height: 68px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 18px;
  box-shadow: none;
}

#ai-view .enhanced-chat {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#ai-view .assistant-intro {
  min-height: 56px;
  padding: 8px 18px;
  background: var(--panel);
}

#ai-view .command-bar {
  gap: 7px;
  padding: 8px 18px;
  background: var(--panel);
}

#ai-view .command-chip {
  min-height: 42px;
  padding: 6px 9px;
  background: var(--panel);
  box-shadow: none;
}

#ai-view .command-chip small {
  display: none;
}

#ai-view .messages {
  gap: 26px;
  padding: 34px 44px;
  background: var(--panel);
}

#ai-view .message.assistant .bubble {
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: none;
}

#ai-view .message.user .bubble {
  border-color: var(--line);
  background: var(--surface-2);
  box-shadow: none;
}

#ai-view .chat-bottom {
  padding: 14px 20px 16px;
  background: var(--panel);
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    width: min(292px, calc(100vw - 44px));
    height: 100dvh;
  }

  .topbar {
    position: sticky;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 9px 14px;
  }

  #ai-view .ai-conversation-layout {
    display: block;
    border: 0;
    box-shadow: none;
  }

  #ai-view .conversation-history {
    max-height: 240px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  #ai-view .messages {
    padding: 24px 16px;
  }
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    max-width: 100vw;
    overflow: hidden;
  }

  .sidebar {
    position: static;
    max-width: 100vw;
    height: auto;
  }

  /* Una opcion por fila. En dos columnas los nombres largos ("Clasificacion
     automatica", "Indexacion y entrenamiento") se partian en varias lineas y
     el menu se leia como un mosaico en vez de una lista. */
  .nav-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .nav-item {
    /* 48px es el minimo comodo para tocar con el dedo. */
    min-height: 48px;
    padding: 10px 14px;
  }

  .topbar {
    position: static;
    grid-template-columns: 1fr;
    max-width: 100vw;
    padding: 14px 18px;
  }

  .top-actions,
  .page-heading,
  .chat-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .view {
    width: 100vw;
    padding: 22px 18px 34px;
    max-width: 100vw;
    overflow: hidden;
  }

  .page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .page-heading h1,
  .page-heading p {
    max-width: 260px;
  }

  .ai-title-line {
    display: block;
  }

  .ai-subtitle-line {
    display: block;
  }

  .flow-card {
    grid-template-columns: 1fr;
  }

  .global-search,
  .top-actions,
  .assistant-copy,
  .command-chip,
  .chat-shell {
    min-width: 0;
  }

  .assistant-copy p,
  .assistant-copy li,
  .command-chip strong,
  .command-chip small {
    overflow-wrap: anywhere;
  }

  .assistant-intro {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .conversation-history {
    max-height: none;
  }

  .conversation-list {
    grid-template-columns: 1fr;
  }

  .conversation-titlebar {
    align-items: stretch;
    flex-direction: column;
  }

  .assistant-orb {
    width: 64px;
    height: 64px;
  }

  .intro-mode-switch,
  .command-bar {
    grid-template-columns: 1fr;
  }

  .messages {
    padding: 20px 16px;
  }

  .message,
  .message.user {
    max-width: 100%;
  }

  .action-cards,
  .message-sources,
  .composer {
    grid-template-columns: 1fr;
  }

  .send-button {
    width: 100%;
  }

  .segmented {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .page-heading > div,
  .page-heading h1,
  .page-heading p,
  .ai-mode-card,
  .chat-shell {
    width: 100%;
    max-width: 354px;
    max-width: calc(100dvw - 36px);
  }

  .page-heading h1 {
    font-size: 28px;
    line-height: 1.12;
  }
}

@media (max-width: 1380px) and (min-width: 901px) {
  .drive-list-head,
  .drive-item {
    grid-template-columns: minmax(320px, 1fr) 130px 120px;
  }

  .drive-list-head span:nth-child(3),
  .drive-item-date {
    display: none;
  }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .drive-toolbar {
    grid-template-columns: 1fr;
  }

  .drive-list-head,
  .drive-item {
    grid-template-columns: minmax(300px, 1fr) 120px 132px;
  }

  .drive-list-head span:nth-child(2),
  .drive-item-type {
    display: none;
  }
}

@media (max-width: 900px) {
  .drive-heading-actions,
  .drive-statusbar {
    align-items: stretch;
    flex-direction: column;
  }

  .drive-heading-actions .primary-action,
  .drive-heading-actions .secondary-action {
    width: 100%;
  }

  .drive-toolbar {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .drive-toolbar-actions {
    grid-template-columns: 1fr;
  }

  .drive-search {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  .drive-statusbar {
    display: flex;
    padding: 14px;
  }

  .drive-status-metrics {
    display: grid;
  }

  .drive-list-head {
    display: none;
  }

  .drive-items {
    max-height: none;
    padding: 10px;
    background: var(--surface-2);
  }

  .drive-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
  }

  .drive-item-type,
  .drive-item-date,
  .drive-item-status {
    display: none;
  }

  .drive-item-actions {
    align-self: center;
  }

  .drive-item-actions button[data-drive-ask],
  .drive-item-actions button[data-drive-preview] {
    display: none;
  }

  .drive-preview-dialog {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
  }

  .drive-preview-head strong {
    max-width: 46vw;
  }

  .drive-preview-head a {
    width: 38px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
}

@media (min-width: 901px) {
  body.is-ai-view .ai-view.active,
  body:has(#ai-view.active) .ai-view.active {
    padding-top: 14px;
    padding-right: 24px;
    padding-bottom: 14px;
    padding-left: 24px;
  }

  body.is-ai-view .ai-heading,
  body:has(#ai-view.active) .ai-heading {
    display: none;
  }

  .conversation-titlebar {
    min-height: 62px;
    margin-bottom: 10px;
    padding: 10px 16px;
  }

  .assistant-intro {
    display: flex;
    min-height: 60px;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 16px;
    background: var(--surface-2);
  }

  .assistant-orb,
  .assistant-copy {
    display: none;
  }

  .intro-mode-switch {
    display: grid;
    width: min(470px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .intro-mode-switch button {
    min-height: 42px;
    padding: 0 14px;
  }

  .command-bar {
    padding: 10px 16px;
  }

  .messages {
    gap: 24px;
    padding: 30px 38px;
  }

  .chat-bottom {
    padding: 14px 18px 16px;
  }

  .info-strip {
    display: none;
  }
}

@media (max-width: 900px) {
  .layout {
    display: block;
  }

  .sidebar {
    position: fixed;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(292px, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
    height: 100dvh;
    transform: translateX(-104%);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .topbar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: none;
    padding: 9px 14px;
  }

  #ai-view .ai-conversation-layout {
    display: block;
    border: 0;
    box-shadow: none;
  }

  #ai-view .conversation-history {
    max-height: 240px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  #ai-view .messages {
    padding: 24px 16px;
  }

  body.is-ai-view .ai-view.active,
  body:has(#ai-view.active) .ai-view.active {
    padding: 12px;
  }

  #ai-view .ai-heading {
    display: none;
  }

  #ai-view .assistant-intro {
    display: block;
    min-height: 0;
    padding: 10px;
  }

  #ai-view .assistant-orb,
  #ai-view .assistant-copy {
    display: none;
  }

  #ai-view .intro-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  #ai-view .intro-mode-switch button {
    min-height: 42px;
  }

  #ai-view .command-bar {
    display: flex;
    overflow-x: auto;
    padding: 8px 10px;
    scrollbar-width: thin;
  }

  #ai-view .command-chip {
    min-width: 140px;
    flex: 0 0 auto;
  }
}

/* Panel tecnico */
.role-toggle {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--panel);
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 900;
}

.role-toggle:hover,
body.is-admin-view .role-toggle {
  border-color: var(--blue-600);
  background: var(--blue-100);
}

.role-toggle svg {
  width: 17px;
  height: 17px;
}

.admin-nav-item {
  margin-top: 8px;
  border-top-color: rgba(255, 255, 255, 0.12);
}

.drive-monitor-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.drive-monitor-summary article {
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.drive-monitor-summary article > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.drive-monitor-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.drive-monitor-summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-monitor-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #1769aa;
  background: #e8f3fb;
}

.drive-monitor-icon.green {
  color: #1e7a4b;
  background: #e5f4ea;
}

.drive-monitor-icon.amber {
  color: #9b6818;
  background: #f8eed8;
}

.drive-monitor-icon.violet {
  color: #6651aa;
  background: #eee9fb;
}

.drive-monitor-icon svg {
  width: 20px;
  height: 20px;
}

.drive-monitor-panel {
  min-height: 500px;
}

.drive-monitor-head {
  gap: 20px;
}

.drive-monitor-filter {
  width: min(380px, 42vw);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.drive-monitor-filter svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.drive-monitor-filter input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.drive-monitor-table-wrap {
  overflow: auto;
}

.drive-monitor-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

.drive-monitor-table th,
.drive-monitor-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.drive-monitor-table th {
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.drive-monitor-name {
  min-width: 310px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drive-monitor-name > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #b74137;
  background: #f8e9e6;
}

.drive-monitor-name > span.folder {
  color: #9b6818;
  background: #f8eed8;
}

.drive-monitor-name svg {
  width: 17px;
  height: 17px;
}

.drive-monitor-name > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.drive-monitor-name strong {
  max-width: 410px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-monitor-name small {
  color: var(--muted);
}

.drive-monitor-path {
  display: block;
  max-width: 330px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-monitor-event {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #6f603e;
  background: #f3ead7;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.drive-monitor-event.created {
  color: #17623d;
  background: #e3f2e8;
}

.drive-monitor-event.modified {
  color: #315f8b;
  background: #e6f0f8;
}

.drive-monitor-actions {
  display: flex;
  gap: 7px;
}

.drive-monitor-actions button,
.drive-monitor-actions a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--blue-600);
  background: var(--panel);
  cursor: pointer;
}

.drive-monitor-actions button:hover,
.drive-monitor-actions a:hover {
  border-color: var(--blue-600);
  background: var(--surface-2);
}

.drive-monitor-actions svg {
  width: 16px;
  height: 16px;
}

.drive-monitor-empty {
  height: 220px;
  color: var(--muted);
  text-align: center !important;
}

.drive-monitor-empty.error {
  color: var(--red-500);
}

[data-theme="dark"] .drive-monitor-icon {
  background: #182b3d;
}

[data-theme="dark"] .drive-monitor-icon.green {
  background: #183226;
}

[data-theme="dark"] .drive-monitor-icon.amber,
[data-theme="dark"] .drive-monitor-name > span.folder {
  background: #352a18;
}

[data-theme="dark"] .drive-monitor-icon.violet {
  background: #25213e;
}

[data-theme="dark"] .drive-monitor-name > span {
  background: #351e21;
}

@media (max-width: 1100px) {
  .drive-monitor-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .drive-monitor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .drive-monitor-filter {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .drive-monitor-summary {
    grid-template-columns: 1fr;
  }

  .drive-monitor-summary article {
    min-height: 78px;
  }
}

.admin-view {
  max-width: 1680px;
  padding-top: 26px;
}

.admin-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.admin-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-heading h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
}

.admin-heading p {
  margin: 7px 0 0;
  color: var(--muted);
}

.admin-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.admin-environment,
.admin-refresh-control,
.admin-controls button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce4f1;
  border-radius: 8px;
  padding: 0 12px;
  background: var(--panel);
  color: var(--ink);
}

.admin-environment select,
.admin-refresh-control select {
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-weight: 800;
}

.admin-controls button {
  border-color: var(--blue-600);
  background: var(--blue-600);
  color: var(--on-accent);
  font-weight: 900;
}

.admin-controls svg {
  width: 17px;
  height: 17px;
}

.admin-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 166, 107, 0.12);
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.admin-metric-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  min-height: 154px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(10, 31, 68, 0.045);
}

.admin-metric-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-100);
  color: var(--blue-600);
}

.admin-metric-card.green .admin-metric-icon {
  background: var(--green-100);
  color: var(--green-500);
}

.admin-metric-card.violet .admin-metric-icon {
  background: var(--violet-100);
  color: var(--violet-500);
}

.admin-metric-card.cyan .admin-metric-icon {
  background: var(--surface-2);
  color: var(--cyan-500);
}

.admin-metric-card.teal .admin-metric-icon {
  background: var(--green-100);
  color: var(--green-500);
}

.admin-metric-card.amber .admin-metric-icon {
  background: var(--amber-100);
  color: var(--amber-500);
}

.admin-metric-card.red .admin-metric-icon {
  background: var(--red-100);
  color: var(--red-500);
}

.admin-metric-card > div > span,
.admin-metric-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.admin-metric-card strong {
  display: block;
  margin: 7px 0 3px;
  font-size: 26px;
  line-height: 1;
}

.admin-metric-card canvas {
  position: absolute;
  right: 12px;
  bottom: 9px;
  left: 12px;
  width: calc(100% - 24px);
  height: 34px;
}

.admin-progress {
  position: absolute;
  right: 15px;
  bottom: 18px;
  left: 15px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.admin-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--cyan-500);
}

.admin-metric-card.teal .admin-progress span {
  background: var(--green-500);
}

.admin-health-label {
  position: absolute;
  right: 15px;
  bottom: 15px;
  left: 15px;
  display: grid;
  min-height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: #52627f;
  font-size: 11px;
  font-weight: 900;
}

.admin-health-label.healthy {
  background: var(--green-100);
  color: var(--green-500);
}

.admin-health-label.warning {
  background: var(--amber-100);
  color: #b56805;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: 1.25fr 1.25fr 0.9fr;
  gap: 14px;
}

.admin-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 20px rgba(10, 31, 68, 0.045);
}

.admin-panel-head {
  display: flex;
  min-height: 66px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
}

.admin-panel-head h2 {
  margin: 0;
  font-size: 16px;
}

.admin-panel-head p,
.admin-panel-head > span {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.admin-panel-state {
  color: var(--green-500) !important;
  font-weight: 900;
}

.admin-pipeline-panel {
  grid-column: span 2;
}

.admin-health-panel {
  grid-column: span 1;
}

.admin-chart-panel {
  grid-column: span 2;
}

.admin-mode-panel {
  grid-column: span 1;
}

.admin-activity-panel {
  grid-column: span 2;
}

.admin-alerts-panel {
  grid-column: span 1;
}

.admin-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 24px 16px;
}

.admin-pipeline-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 0 8px;
  text-align: center;
}

.admin-pipeline-step:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 22px;
  right: -50%;
  width: 100%;
  border-top: 2px dashed #d2dbe9;
  content: "";
}

.admin-pipeline-icon {
  z-index: 1;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #dbe4f1;
  border-radius: 999px;
  background: var(--panel);
  color: var(--blue-600);
}

.admin-pipeline-icon.healthy {
  border-color: #bde6d2;
  background: var(--green-100);
  color: var(--green-500);
}

.admin-pipeline-icon.unknown {
  background: #f2f4f8;
  color: #7f8ba1;
}

.admin-pipeline-step strong {
  font-size: 12px;
}

.admin-pipeline-step small {
  max-width: 150px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.admin-services {
  display: grid;
}

.admin-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 78px;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 8px 15px;
  border-bottom: 1px solid var(--line);
}

.admin-service-row:last-child {
  border-bottom: 0;
}

.admin-service-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.admin-service-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--red-500);
}

.admin-service-dot.healthy {
  background: var(--green-500);
}

.admin-service-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.admin-service-row span,
.admin-service-row small {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.admin-chart-panel canvas {
  display: block;
  width: 100%;
  height: 290px;
  padding: 12px 15px 14px;
}

.admin-chart-legend {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.admin-chart-legend span::before {
  display: inline-block;
  width: 9px;
  height: 3px;
  margin-right: 5px;
  border-radius: 999px;
  background: var(--blue-600);
  content: "";
}

.admin-chart-legend .claw::before {
  background: var(--violet-500);
}

.admin-mode-content {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 270px;
  padding: 18px;
}

.admin-mode-content canvas {
  width: 190px;
  height: 190px;
}

.admin-mode-legend {
  display: grid;
  gap: 12px;
}

.admin-mode-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.admin-mode-legend-row i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--blue-600);
}

.admin-mode-legend-row.claw i {
  background: var(--violet-500);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
  text-align: left;
}

.admin-table th {
  background: #fafbfd;
  color: #64738d;
  font-size: 11px;
  text-transform: uppercase;
}

.admin-table td:first-child {
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.admin-mode-badge,
.admin-confidence-badge {
  display: inline-grid;
  min-height: 25px;
  place-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--blue-100);
  color: var(--blue-600);
  font-size: 10px;
  font-weight: 900;
}

.admin-mode-badge.claw {
  background: var(--violet-100);
  color: var(--violet-500);
}

.admin-confidence-badge.low {
  background: var(--red-100);
  color: var(--red-500);
}

.admin-alerts {
  display: grid;
}

.admin-alert {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  min-height: 66px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}

.admin-alert:last-child {
  border-bottom: 0;
}

.admin-alert-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--amber-100);
  color: #c87505;
}

.admin-alert.error .admin-alert-icon {
  background: var(--red-100);
  color: var(--red-500);
}

.admin-alert.success .admin-alert-icon {
  background: var(--green-100);
  color: var(--green-500);
}

.admin-alert strong,
.admin-alert span {
  display: block;
}

.admin-alert strong {
  font-size: 12px;
}

.admin-alert span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.admin-feedback-panel {
  grid-column: 1 / -1;
}

.admin-feedback-head {
  align-items: center;
}

.admin-feedback-filters {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.admin-feedback-filters button {
  min-height: 32px;
  border: 0;
  border-radius: 5px;
  padding: 0 12px;
  background: transparent;
  color: #65738a;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.admin-feedback-filters button.active {
  background: var(--panel);
  color: var(--blue-600);
  box-shadow: 0 2px 8px rgba(18, 62, 130, 0.1);
}

.admin-feedback-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.admin-feedback-summary > div {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 12px 17px;
  background: var(--panel);
  color: #4f5f78;
  font-size: 12px;
}

.admin-feedback-summary svg {
  width: 19px;
  height: 19px;
}

.admin-feedback-summary strong {
  margin-right: 3px;
  color: var(--ink);
  font-size: 20px;
}

.admin-feedback-summary .good svg {
  color: var(--green-500);
}

.admin-feedback-summary .bad svg {
  color: var(--red-500);
}

.admin-feedback-summary .correction svg {
  color: var(--blue-600);
}

.admin-feedback-summary .learned-summary svg {
  color: var(--green-500);
}

.admin-feedback-summary .pending-summary svg {
  color: var(--amber-500);
}

.admin-feedback-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  background: var(--surface-2);
}

.admin-feedback-learning-state {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px 17px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
}

.admin-feedback-learning-state strong {
  color: var(--ink);
}

.admin-feedback-learning-state svg {
  width: 16px;
  height: 16px;
  color: var(--amber-600);
}

.admin-feedback-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red-500);
  border-radius: 7px;
  padding: 14px;
  background: var(--panel);
}

.admin-feedback-item.bien {
  border-left-color: var(--green-500);
}

.admin-feedback-item.correccion {
  border-left-color: var(--blue-600);
}

.admin-feedback-item-top,
.admin-feedback-item footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.admin-feedback-type,
.admin-feedback-item footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-feedback-type {
  color: var(--red-500);
  font-weight: 900;
}

.admin-feedback-item.bien .admin-feedback-type {
  color: var(--green-500);
}

.admin-feedback-item.correccion .admin-feedback-type {
  color: var(--blue-600);
}

.admin-feedback-type svg,
.admin-feedback-item footer svg {
  width: 15px;
  height: 15px;
}

.admin-feedback-item h3 {
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.4;
}

.admin-feedback-correction {
  border: 1px solid #cfe0ff;
  border-radius: 6px;
  padding: 10px 12px;
  background: #f3f7ff;
}

.admin-feedback-correction strong {
  color: var(--blue-600);
  font-size: 11px;
  text-transform: uppercase;
}

.admin-feedback-correction p,
.admin-feedback-item details p {
  margin: 7px 0 0;
  color: #34445d;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.admin-feedback-learning-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  border: 1px solid #cfe8dc;
  border-radius: 6px;
  padding: 9px 11px;
  background: #f0fbf5;
  color: var(--green-700);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.admin-feedback-learning-note svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.admin-feedback-item details {
  margin: 11px 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.admin-feedback-item summary {
  color: var(--blue-600);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.admin-feedback-item footer {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  flex-wrap: wrap;
}

.admin-feedback-item footer .learned {
  color: var(--green-500);
  font-weight: 800;
}

.admin-feedback-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.admin-feedback-empty svg {
  width: 30px;
  height: 30px;
  color: #8ca0be;
}

.admin-feedback-empty strong {
  color: var(--ink);
}

@media (max-width: 1380px) {
  .admin-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .admin-pipeline-panel,
  .admin-health-panel,
  .admin-chart-panel,
  .admin-mode-panel,
  .admin-activity-panel,
  .admin-alerts-panel {
    grid-column: span 1;
  }

  .admin-feedback-panel {
    grid-column: span 1;
  }
}

@media (max-width: 700px) {
  .role-toggle span {
    display: none;
  }

  .role-toggle {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .admin-view {
    padding: 18px 12px 30px;
  }

  .admin-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-metric-grid {
    grid-template-columns: 1fr;
  }

  .admin-feedback-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-feedback-filters {
    overflow-x: auto;
  }

  .admin-feedback-summary,
  .admin-feedback-list {
    grid-template-columns: 1fr;
  }

  .admin-pipeline {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .admin-pipeline-step {
    grid-template-columns: 46px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .admin-pipeline-step:not(:last-child)::after {
    display: none;
  }

  .admin-mode-content {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* El modo se cambia por comandos (/rag, /claw) y se muestra en el encabezado.
   Ocultamos el toggle e intro para una UI mas limpia. */
#ai-view .assistant-intro { display: none; }

/* ============================================================
   MINIMALISTA estilo ChatGPT (limpieza del chat)
   ============================================================ */

/* Selector de modo junto al input */
.mode-select {
  align-self: center;
  height: 36px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a7080' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    no-repeat right 10px center;
  color: var(--ink);
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.mode-select:focus { outline: none; box-shadow: var(--ring); }

/* Barra de comandos del top y acciones: fuera (ChatGPT no las tiene arriba) */
#ai-view .command-bar { display: none; }
#ai-view .prompt-actions { display: none; }

/* Encabezado del chat mas liviano */
#ai-view .conversation-titlebar { border-bottom: 0; }

/* Mensajes: asistente sin caja (texto plano), usuario burbuja sutil.
   Ocupan TODO el ancho disponible (no columna angosta). */
#ai-view .messages { padding: 28px 48px; gap: 30px; }
#ai-view .message { max-width: 100%; width: auto; margin: 0; }
#ai-view .message.assistant { max-width: 100%; }
#ai-view .message.user { max-width: min(760px, 76%); margin: 0; }
#ai-view .message.assistant .bubble {
  border: 0;
  background: transparent;
  padding: 2px 0;
  box-shadow: none;
}
#ai-view .message.user .bubble {
  border: 0;
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px 16px;
}
#ai-view .message-avatar { width: 30px; height: 30px; box-shadow: inset 0 0 0 1px var(--line); }
#ai-view .answer-meta {
  font-size: 11.5px;
  color: var(--muted);
  opacity: 0.8;
}

/* Input estilo ChatGPT: barra redondeada que ocupa el ancho disponible */
#ai-view .chat-bottom { border-top: 0; padding: 8px 48px 18px; background: transparent; }
#ai-view .composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 7px 7px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--panel);
  box-shadow: var(--shadow-card);
}
#ai-view .composer:focus-within { border-color: var(--blue-600); box-shadow: var(--ring); }
#ai-view .composer-input { flex: 1 1 auto; }
#ai-view .composer textarea {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 9px 6px;
  resize: none;
  max-height: 200px;
}
#ai-view .send-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  background: var(--blue-600);
  color: var(--on-accent);
}
#ai-view .send-button .button-label { display: none; }
#ai-view .send-button svg { width: 18px; height: 18px; }

/* Seleccion multiple del historial */
.history-actions { display: grid; gap: 8px; }
.selection-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.select-cancel,
.select-confirm {
  height: 38px;
  border-radius: 10px;
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
  border: 1px solid var(--line);
}
.select-cancel { background: var(--panel); color: var(--ink); }
.select-cancel:hover { background: var(--surface-2); }
.select-confirm { background: var(--red-500); color: #fff; border-color: transparent; }
.select-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.conversation-check { display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); margin-right: 2px; }
.conversation-check svg { width: 18px; height: 18px; }
.conversation-item.selected { outline: 2px solid var(--blue-600); outline-offset: -2px; border-radius: 12px; }
.conversation-item.selected .conversation-check { color: var(--blue-600); }
/* En modo seleccion el checkbox reemplaza al icono (mas espacio para el texto) */
.conversation-item.selectable .conversation-icon { display: none; }

/* Menu de tres puntos por conversacion (estilo ChatGPT) */
.conversation-item { position: relative; display: flex; align-items: stretch; }
.conversation-item .conversation-open { flex: 1 1 auto; min-width: 0; }
.conversation-menu-wrap { position: relative; display: flex; align-items: center; }
.conversation-menu-button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--muted); border-radius: 8px;
  opacity: 0; cursor: pointer;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.conversation-item:hover .conversation-menu-button,
.conversation-menu-button:focus-visible { opacity: 1; }
.conversation-menu-button:hover { background: var(--surface-2); color: var(--ink); }
.conversation-menu-button svg { width: 17px; height: 17px; }

.conversation-menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 4px;
  z-index: 40;
  min-width: 168px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.conversation-menu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: 500 13px Inter, sans-serif;
  text-align: left; cursor: pointer;
}
.conversation-menu button:hover { background: var(--surface-2); }
.conversation-menu button svg { width: 15px; height: 15px; color: var(--muted); }
.conversation-menu button.danger { color: var(--red-500); }
.conversation-menu button.danger svg { color: var(--red-500); }

/* Toggle "ver archivadas" minimalista */
.archived-toggle {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 8px 10px;
  border: 0; background: transparent;
  color: var(--muted);
  font: 600 12.5px Inter, sans-serif;
  border-radius: 8px; cursor: pointer;
}
.archived-toggle:hover { background: var(--surface-2); color: var(--ink); }
.archived-toggle.active { color: var(--blue-600); }
.archived-toggle svg { width: 15px; height: 15px; }

.conversation-menu.hidden { display: none; }

/* ====== AYUDA: comentarios de usuarios ====== */
.help-comment-section {
  margin-top: 18px;
}
.help-comment-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-comment-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.help-comment-card h2 i {
  width: 20px;
  height: 20px;
  color: var(--blue-600);
}
.help-comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-comment-form input,
.help-comment-form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  resize: vertical;
}
.help-comment-form input::placeholder,
.help-comment-form textarea::placeholder {
  color: var(--muted);
}
.help-comment-form input:focus,
.help-comment-form textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: var(--ring);
}
.help-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.help-comment-status {
  font-size: 0.9rem;
  color: var(--muted);
}
.help-comment-status.ok {
  color: var(--green-500);
}
.help-comment-status.error {
  color: var(--red-500);
}

/* ====== ADMIN: panel de comentarios ====== */
.admin-comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
}
.admin-comment-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.admin-comment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}
.admin-comment-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
}
.admin-comment-author i {
  width: 15px;
  height: 15px;
}
.admin-comment-item p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* "Panel tecnico" solo visible en vista administrador */
/* "Panel tecnico" en el sidebar: visible siempre que haya sesion admin
   (el admin navega por toda la app con su rol elevado). */
body:not(.is-admin) .admin-nav-item { display: none; }
body.is-admin .reviewer-nav-item { display: flex; }
body.is-reviewer-mode .admin-nav-item,
body.is-reviewer-mode .admin-profile-action { display: none !important; }
body.is-reviewer-mode .reviewer-nav-item { display: flex !important; }
body:not(.can-review) [data-view="providencias-view"],
body:not(.can-review) [data-view="review-view"],
body:not(.can-review) [data-view-jump="providencias-view"] { display: none !important; }
body:not(.can-use-rag-mode) .admin-mode-controls,
body:not(.can-use-rag-mode) .admin-only-mode-help { display: none !important; }

/* Modal de acceso administrador */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 11, 20, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.modal-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--blue-100);
  color: var(--blue-600);
}
.modal-icon svg { width: 19px; height: 19px; }
.modal-head > div { flex: 1 1 auto; min-width: 0; }
.modal-head strong { display: block; font-size: 15px; color: var(--ink); }
.modal-head small { color: var(--muted); font-size: 12.5px; }
.modal-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal-close svg { width: 17px; height: 17px; }
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 20px;
}
.modal-form label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 6px;
}
.modal-form input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font: 400 14px Inter, sans-serif;
}
.modal-form input:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: var(--ring);
}
.modal-error {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--red-100);
  color: var(--red-500);
  font-size: 12.5px;
  font-weight: 600;
}
.modal-submit {
  justify-content: center;
  margin-top: 14px;
  width: 100%;
}

/* El cierre de sesion forma parte del encabezado mientras exista una sesion. */
.role-toggle { display: none !important; }
body.is-authed .role-toggle { display: inline-flex !important; }

/* FIX CRITICO: el overlay del modal debe ocultarse con .hidden (gana a display:grid) */
.modal-overlay.hidden { display: none !important; }

/* ===== Panel admin dinamico: KPIs y servicios clickeables + popup de detalle ===== */
.admin-metric-card[data-metric] {
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.admin-metric-card[data-metric]:hover {
  transform: translateY(-2px);
  border-color: var(--blue-600);
  box-shadow: var(--shadow-soft);
}
.admin-metric-card[data-metric]:focus-visible {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: var(--ring);
}
.admin-metric-card[data-metric]::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  opacity: 0.35;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M7 17 17 7M9 7h8v8'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M7 17 17 7M9 7h8v8'/></svg>") center/contain no-repeat;
  color: var(--muted);
  transition: opacity 0.12s ease;
}
.admin-metric-card[data-metric]:hover::after { opacity: 0.8; color: var(--blue-600); }

.admin-service-row[data-service] {
  cursor: pointer;
  transition: background 0.12s ease;
}
.admin-service-row[data-service]:hover { background: var(--surface-2); }
.admin-service-row[data-service]:focus-visible { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--blue-600); }

/* Popup de detalle */
.detail-card { max-width: 470px; }
.detail-body {
  padding: 14px 18px 20px;
  max-height: 68vh;
  overflow-y: auto;
}
.detail-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.detail-stat:last-child { border-bottom: 0; }
.detail-stat-label { color: var(--muted); }
.detail-stat-value { color: var(--ink); font-weight: 600; text-align: right; }
.detail-stat-value em { color: var(--muted); font-weight: 400; font-style: normal; }
.detail-section-title {
  margin: 16px 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-history-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 14px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.detail-history-button:hover {
  border-color: var(--blue-600);
  background: var(--panel);
}
.detail-history-button i { width: 15px; height: 15px; }
.detail-bar { margin-bottom: 10px; }
.detail-bar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 12px;
}
.detail-bar-top span { color: var(--muted); }
.detail-bar-top strong { color: var(--ink); }
.detail-bar-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.detail-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue-600);
}
.detail-alert {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.detail-alert strong { font-size: 13px; color: var(--ink); }
.detail-alert small { font-size: 12px; color: var(--muted); }
.detail-alert.error { border-color: var(--red-500); }
.detail-alert.error strong { color: var(--red-500); }
.detail-alert.warning strong { color: #c07d12; }
.detail-alert.success strong { color: var(--green-500); }
.detail-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }

/* ===== Revision juridica (sesion de abogado) ===== */
.review-view {
  max-width: 1320px;
  margin: 0 auto;
}
.review-heading {
  align-items: end;
}
.review-heading-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}
.review-heading-actions label {
  display: grid;
  gap: 6px;
}
.review-heading-actions label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.review-heading-actions select {
  width: 230px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: 700 13px Inter, sans-serif;
}
.review-auto-action {
  border-color: var(--blue-600) !important;
  color: var(--blue-700) !important;
}
.review-auto-action:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}
.review-source-switch {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.review-source-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 700 12px Inter, sans-serif;
  cursor: pointer;
}
.review-source-switch button.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.review-source-switch svg { width: 16px; height: 16px; }
.review-view .hidden { display: none; }
.review-lawyer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.review-lawyer-summary > div:first-child > span,
.review-lawyer-count span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.review-lawyer-summary h2 { margin: 5px 0; font: 700 26px/1.15 Georgia, serif; }
.review-lawyer-summary p { margin: 0; color: var(--muted); font-size: 12px; }
.review-lawyer-count { display: grid; min-width: 145px; padding-left: 20px; border-left: 1px solid var(--line); }
.review-lawyer-count strong { color: var(--ink); font-size: 26px; line-height: 1.1; }
.review-lawyer-toolbar > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.review-lawyer-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(140px, 220px) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
}
.review-lawyer-file { min-width: 0; }
.review-lawyer-file strong { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; }
.review-lawyer-file > span { display: block; margin-top: 4px; color: var(--muted); font: 12px ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.review-lawyer-cross { color: var(--muted); font-size: 12px; }
.review-lawyer-row > a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-700); font-size: 12px; font-weight: 700; white-space: nowrap; }
.review-lawyer-row > a svg { width: 15px; height: 15px; }
.review-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 1.7fr);
  gap: 28px;
  align-items: center;
  margin-bottom: 18px;
  padding: 20px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.review-summary-main > span,
.review-proposal > span,
.review-reason > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.review-summary-main h2 {
  margin: 0;
  color: var(--ink);
  font: 700 26px/1.15 Georgia, serif;
  letter-spacing: 0;
}
.review-summary-main p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.review-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.review-metrics > div {
  min-width: 0;
  padding: 4px 18px;
  border-left: 1px solid var(--line);
}
.review-metrics span,
.review-metrics strong {
  display: block;
  letter-spacing: 0;
}
.review-metrics span {
  min-height: 30px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.review-metrics strong {
  color: var(--ink);
  font-size: 25px;
}
.review-complete-notice {
  margin-bottom: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.review-complete-notice.success {
  border-color: var(--green-500);
  background: var(--green-100);
  color: var(--green-500);
}
.review-complete-notice.warning {
  border-color: var(--amber-500);
  background: var(--amber-100);
}
.review-complete-notice.error {
  border-color: var(--red-500);
  background: var(--red-100);
  color: var(--red-500);
}
.review-workspace {
  border-top: 1px solid var(--line);
}
.review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.review-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.review-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font: 700 12px Inter, sans-serif;
  cursor: pointer;
}
.review-filters button span {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: center;
}
.review-filters button.active {
  border-color: var(--blue-600);
  background: var(--blue-600);
  color: var(--on-accent);
}
.review-filters button.active span {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.review-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.review-select-all,
.review-selection-count,
.review-bulk-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font: 700 12px Inter, sans-serif;
}
.review-bulk-toolbar button { cursor: pointer; }
.review-bulk-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.review-bulk-approve { color: var(--green-500) !important; border-color: var(--green-500) !important; }
.review-bulk-reject { color: var(--red-500) !important; border-color: var(--red-500) !important; }
.review-bulk-reset { color: var(--amber-500) !important; border-color: var(--amber-500) !important; }
.review-selection-count { background: var(--surface-2); }
.review-items {
  display: grid;
}
.review-item {
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}
.review-item-head {
  display: grid;
  grid-template-columns: 26px 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.review-item-select { display: grid; place-items: center; min-height: 32px; }
.review-item-select input { width: 17px; height: 17px; accent-color: var(--blue-600); }
.review-order {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.review-item-head > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.review-item-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.review-status {
  min-height: 26px;
  max-width: 160px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--amber-100);
  color: var(--amber-500);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  white-space: normal;
}
.review-status.approved {
  background: var(--green-100);
  color: var(--green-500);
}
.review-status.rejected {
  background: var(--red-100);
  color: var(--red-500);
}
.review-item-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
  gap: 22px;
  margin: 14px 0 14px 48px;
}
.review-proposal,
.review-reason {
  min-width: 0;
  padding-left: 12px;
  border-left: 3px solid var(--line);
}
.review-proposal {
  border-left-color: var(--blue-600);
}
.review-proposal strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.review-proposal small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.review-reason p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.review-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 48px;
  flex-wrap: wrap;
}
.review-actions button,
.review-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: 700 12px Inter, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.review-actions svg,
.review-correction svg {
  width: 15px;
  height: 15px;
}
.review-open {
  color: var(--blue-700);
}
.review-open.disabled {
  color: var(--muted);
  cursor: default;
}
.review-approve {
  border-color: var(--green-500) !important;
  color: var(--green-500) !important;
}
.review-correct {
  border-color: var(--amber-500) !important;
  color: var(--amber-500) !important;
}
.review-reject {
  border-color: var(--red-500) !important;
  color: var(--red-500) !important;
}
.review-correction {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  margin: 14px 0 14px 48px;
  padding: 12px;
  border: 1px solid var(--amber-500);
  border-radius: 8px;
  background: var(--amber-100);
}
.review-correction.hidden {
  display: none;
}
.review-correction label {
  display: grid;
  gap: 5px;
}
.review-correction label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.review-correction select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}
.review-finish-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 -8px 24px rgba(35, 28, 17, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.review-finish-bar > div {
  display: grid;
  gap: 3px;
}
.review-finish-bar strong {
  color: var(--ink);
  font-size: 14px;
}
.review-finish-bar span {
  color: var(--muted);
  font-size: 12px;
}
.review-finish-bar .primary-action span {
  color: inherit;
}
.review-finish-bar button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

/* ===== Vista Web scraping (panel admin) ===== */
.scraping-index-handoff {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(79, 102, 232, 0.42);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(79, 102, 232, 0.09), rgba(20, 31, 55, 0.03));
}
.scraping-index-handoff-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.scraping-stage-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-600);
  color: #fff;
  font: 800 18px Inter, sans-serif;
  box-shadow: 0 10px 24px rgba(51, 82, 210, 0.22);
}
.scraping-index-handoff-head > div:nth-child(2) {
  display: grid;
  gap: 4px;
}
.scraping-index-handoff-head h2,
.scraping-index-handoff-head p {
  margin: 0;
}
.scraping-index-handoff-head h2 {
  color: var(--ink);
  font-size: 19px;
}
.scraping-index-handoff-head p {
  max-width: 820px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.scraping-handoff-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}
.scraping-index-handoff #scraping-apply-all:disabled,
.scraping-index-handoff #scraping-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.scraping-ready-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
.scraping-ready-chip {
  padding: 3px 9px;
  border: 1px solid var(--green-500);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 12px Inter, sans-serif;
}
button.scraping-ready-chip {
  cursor: pointer;
}
button.scraping-ready-chip:hover,
button.scraping-ready-chip.active {
  background: var(--green-500);
  color: #fff;
}
@media (max-width: 900px) {
  .scraping-index-handoff-head {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .scraping-index-handoff-head .scraping-handoff-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}
.scraping-review-ready {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 0;
  padding: 13px 15px;
  border: 1px solid var(--green-500);
  border-radius: 8px;
  background: var(--green-100);
}
.scraping-review-ready-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--green-500);
}
.scraping-review-ready-icon svg {
  width: 18px;
  height: 18px;
}
.scraping-review-ready > div:nth-child(2) {
  display: grid;
  gap: 3px;
}
.scraping-review-ready span {
  color: var(--green-500);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}
.scraping-review-ready strong {
  color: var(--ink);
  font-size: 14px;
}
.scraping-review-ready p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.scraping-review-ready-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel);
  white-space: nowrap;
}

.scraping-apply-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
  padding: 11px 13px;
  border: 1px solid var(--green-500);
  border-radius: 8px;
  background: var(--green-100);
}
.scraping-apply-summary.warning {
  border-color: var(--amber-500);
  background: var(--amber-100);
}
.scraping-apply-summary.success {
  box-shadow: 0 10px 26px rgba(43, 130, 86, 0.08);
}
.scraping-apply-summary-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.scraping-apply-summary-head > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--green-500);
  flex: 0 0 auto;
}
.scraping-apply-summary.warning .scraping-apply-summary-head > span {
  color: var(--amber-500);
}
.scraping-apply-summary-head svg {
  width: 17px;
  height: 17px;
}
.scraping-apply-summary-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.scraping-apply-summary-head strong,
.scraping-apply-summary-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scraping-apply-summary-head strong {
  color: var(--ink);
  font-size: 13px;
}
.scraping-apply-summary-head small {
  color: var(--muted);
  font-size: 11px;
}
.scraping-apply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--blue-600);
  font: 800 12px Inter, sans-serif;
  cursor: pointer;
}
.scraping-apply-toggle svg {
  width: 14px;
  height: 14px;
}
.scraping-apply-summary-details {
  display: grid;
  gap: 8px;
}
/* Al expandir, el titulo con los estados se muestra completo en varias lineas. */
.scraping-apply-summary:not(.collapsed) .scraping-apply-summary-head strong {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}
.scraping-apply-estados,
.scraping-apply-alertas,
.scraping-apply-log {
  display: grid;
  gap: 6px;
}
.scraping-apply-estados > span,
.scraping-apply-alertas > span,
.scraping-apply-log > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.scraping-apply-estados > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 180px;
  overflow-y: auto;
}
.scraping-apply-estados em {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}
.scraping-apply-alertas ul {
  color: var(--ink);
}
.scraping-apply-log ul {
  max-height: 340px;
  overflow-y: auto;
}
.scraping-apply-summary.collapsed .scraping-apply-summary-details {
  display: none;
}
.scraping-apply-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.scraping-apply-summary-grid span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
}
.scraping-apply-summary-grid strong {
  color: var(--ink);
}
.scraping-apply-next-step {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(43, 130, 86, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 700;
}
.scraping-apply-summary ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.scraping-control-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(300px, 1.4fr) repeat(3, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(180, 125, 34, 0.10), rgba(255,255,255,0.58));
}
.scraping-control-panel label,
.scraping-status-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scraping-control-panel label span,
.scraping-status-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scraping-control-panel input[type="number"],
.scraping-reprocess-wrap select {
  height: 38px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font: 700 13px Inter, sans-serif;
}
.scraping-portal-live input[readonly] {
  border-color: #75a978;
  background: #eef8ef;
  color: #27653b;
  cursor: default;
}
.scraping-portal-live small {
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}
.scraping-portal-live small.has-updates { color: var(--blue-600); font-weight: 700; }
.scraping-portal-live small.is-current { color: #2e7d46; font-weight: 700; }
.scraping-portal-live small.has-error { color: var(--red-500); font-weight: 700; }
.drive-heading-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.scraping-control-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: end;
  gap: 8px;
  margin-top: 8px;
}
.scraping-control-edit button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--blue-600);
  cursor: pointer;
}
.scraping-control-edit button:hover {
  border-color: var(--blue-600);
  background: var(--blue-100);
}
.scraping-control-edit svg {
  width: 16px;
  height: 16px;
}
.scraping-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.scraping-mode-options button {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.scraping-mode-options button.active {
  border-color: var(--blue-600);
  background: var(--blue-100);
  box-shadow: var(--ring);
}
.scraping-mode-options svg {
  width: 18px;
  height: 18px;
  color: var(--blue-600);
  flex: 0 0 auto;
}
.scraping-mode-options span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.scraping-mode-options strong {
  font-size: 13px;
  color: var(--ink);
}
.scraping-mode-options small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.25;
}
.scraping-plan {
  grid-column: 1 / -1;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.scraping-ai-status {
  grid-column: 1 / -1;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.scraping-ai-status.ready {
  border-color: #75a978;
  background: #eef8ef;
}
.scraping-ai-status.error {
  border-color: var(--red-500);
  background: #fff3f1;
}
.scraping-ai-status svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--blue-600);
}
.scraping-ai-status.error svg {
  color: var(--red-500);
}
.scraping-ai-status span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.scraping-ai-status strong {
  color: var(--ink);
  font-size: 13px;
}
.scraping-ai-status small {
  color: var(--muted);
  font-size: 11.5px;
}
.scraping-status-card strong {
  color: var(--ink);
  font-size: 15px;
}
.scraping-status-card small {
  color: var(--muted);
  line-height: 1.35;
}
.scraping-check {
  min-height: 38px;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.scraping-check input {
  width: 16px;
  height: 16px;
}
.scraping-check {
  flex-direction: row !important;
  align-items: center;
}
.scraping-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.scraping-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.scraping-filters button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--muted);
  font: 600 12.5px Inter, sans-serif; cursor: pointer;
}
.scraping-filters button span {
  background: var(--surface-2); color: var(--ink);
  border-radius: 999px; padding: 0 7px; font-size: 11px;
}
.scraping-filters button.active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.scraping-filters button.active span { background: rgba(255,255,255,0.25); color: #fff; }
.scraping-search { position: relative; display: flex; align-items: center; }
.scraping-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--muted); }
.scraping-search input {
  height: 38px; min-width: 220px; padding: 0 12px 0 34px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink);
}
.scraping-search input:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--ring); }

.drive-list-head.scraping-head,
.scraping-row {
  grid-template-columns: minmax(280px, 1fr) 190px 92px 110px 116px;
}
.scraping-doc { display: flex; align-items: center; gap: 11px; min-width: 0; }
.scraping-doc .conversation-copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.scraping-doc strong { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scraping-doc small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scraping-group {
  height: 34px; max-width: 100%; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
  font: 500 12.5px Inter, sans-serif;
}
.scraping-conf { font-weight: 700; color: var(--ink); font-size: 13px; }
.scrap-badge {
  display: inline-grid; place-items: center; min-height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
}
.scrap-badge.approved { color: var(--green-500); border-color: transparent; background: var(--green-100); }
.scrap-badge.rejected { color: var(--red-500); border-color: transparent; background: var(--red-100); }
.scraping-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.scraping-actions a,
.scraping-actions button {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--muted); cursor: pointer; text-decoration: none;
}
.scraping-actions svg { width: 16px; height: 16px; }
.scraping-actions .scrap-approve:hover { border-color: var(--green-500); color: var(--green-500); background: var(--green-100); }
.scraping-actions .scrap-reject:hover { border-color: var(--red-500); color: var(--red-500); background: var(--red-100); }
.scraping-actions a:hover { border-color: var(--blue-600); color: var(--blue-600); background: var(--blue-100); }

.scraping-findings {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--blue-600);
  border-radius: 14px;
  background: var(--blue-100);
}
.scraping-findings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.scraping-findings-head span {
  color: var(--blue-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scraping-findings-head strong {
  color: var(--ink);
  font-size: 14px;
}
.scraping-findings p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.scraping-findings.collapsed .scraping-findings-head {
  margin-bottom: 0;
}
.scraping-findings.collapsed .scraping-findings-list {
  display: none;
}
.scraping-findings-head strong {
  margin-right: auto;
}
.scraping-findings-toggle {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--blue-600);
  font: 800 12px Inter, sans-serif;
  cursor: pointer;
}
/* Estos bloques declaran su propio display: sin esta regla, "hidden" no los ocultaba
   y quedaba visible un recuadro vacio. */
.scraping-findings.hidden,
.scraping-review-ready.hidden,
.scraping-apply-summary.hidden {
  display: none;
}
.scraping-index-handoff .drive-browser {
  margin: 0;
}
.scraping-findings-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.scraping-findings-list article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.scraping-findings-list strong,
.scraping-findings-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scraping-findings-list strong {
  color: var(--ink);
  font-size: 13px;
}
.scraping-findings-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.scraping-job { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.scraping-job.error { border-color: var(--red-500); }
.scraping-job pre {
  margin: 0; padding: 12px 14px; max-height: min(420px, 45vh); overflow-y: auto; overflow-x: hidden;
  font: 12px ui-monospace, Menlo, Consolas, monospace; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; overscroll-behavior: contain; scroll-behavior: auto;
}

/* kicker reutilizable (por si no existe) */
.admin-kicker { display: inline-block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-600); }

.scraping-estado-wrap { display: flex; align-items: center; gap: 8px; }
.scraping-estado-wrap span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.scraping-estado-wrap select {
  height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink); font: 600 13px Inter, sans-serif; cursor: pointer;
}
.scraping-estado-wrap select:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--ring); }

@media (max-width: 1100px) {
  .review-summary {
    grid-template-columns: 1fr;
  }
  .scraping-control-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scraping-status-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .review-source-switch { width: 100%; }
  .review-source-switch button { flex: 1; min-width: 0; padding: 0 6px; }
  .review-lawyer-summary { padding: 16px 12px; }
  .review-lawyer-count { min-width: 90px; padding-left: 12px; }
  .review-lawyer-row { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 10px; }
  .review-lawyer-cross { grid-column: 2; }
  .review-lawyer-row > a { grid-column: 2; }
  .review-heading,
  .review-heading-actions,
  .review-toolbar,
  .review-finish-bar {
    align-items: stretch;
  }
  .review-heading-actions,
  .review-toolbar,
  .review-finish-bar {
    flex-direction: column;
  }
  .review-heading-actions label,
  .review-heading-actions select,
  .review-search,
  .review-search input {
    width: 100%;
  }
  .review-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }
  .review-item-head {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .review-status {
    grid-column: 2;
    justify-self: start;
  }
  .review-item-body,
  .review-correction {
    grid-template-columns: 1fr;
    margin-left: 0;
  }
  .review-actions {
    margin-left: 0;
  }
  .review-actions button,
  .review-open {
    flex: 1 1 140px;
  }
  .scraping-review-ready {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .scraping-review-ready-badge {
    grid-column: 2;
    justify-self: start;
  }
  .scraping-apply-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scraping-apply-summary-head strong,
  .scraping-apply-summary-head small {
    white-space: normal;
  }
}

/* ===== Vista Indexacion y entrenamiento ===== */
.index-summary { margin-bottom: 14px; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.index-summary svg { width: 17px; height: 17px; color: #2f855a; }
.index-summary strong { color: var(--ink); }
.index-state-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.index-state-toolbar label { flex: 1 1 360px; max-width: 520px; display: grid; gap: 6px; }
.index-state-toolbar label > span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.index-state-toolbar select { width: 100%; min-height: 42px; padding: 0 36px 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; }
.index-state-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.index-state-actions button:disabled { opacity: .48; cursor: not-allowed; }
.index-telemetry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.index-metric { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.index-metric.healthy { border-bottom-color: #3a8b62; }
.index-metric.warning { border-bottom-color: #b18129; }
.index-metric.error { border-bottom-color: #c94a4a; }
.index-metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--blue-600); }
.index-metric-icon svg { width: 19px; height: 19px; }
.index-metric div { min-width: 0; display: grid; gap: 2px; }
.index-metric small { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 700; }
.index-metric strong { color: var(--ink); font-size: 20px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-metric span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-items { padding: 10px; display: grid; gap: 10px; }
.index-group { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.index-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.index-group-icon { display: grid; place-items: center; color: var(--blue-600); }
.index-group-icon svg { width: 18px; height: 18px; }
.index-group-head strong { flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-group-count { flex: 0 0 auto; background: var(--blue-100); color: var(--blue-600); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.index-document-list { display: grid; }
.index-document-row { display: grid; grid-template-columns: 32px minmax(280px, 1fr) 130px 146px; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.index-document-row:last-child { border-bottom: 0; }
.index-document-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); color: var(--blue-600); }
.index-document-icon svg { width: 16px; height: 16px; }
.index-document-main { min-width: 0; display: grid; gap: 3px; }
.index-document-main strong { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; line-height: 1.35; }
.index-document-main > span { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-document-main b { color: var(--ink); font-weight: 600; }
.index-document-main small { margin-left: 5px; color: var(--muted); }
.index-document-main .index-document-error { color: var(--red-600); white-space: normal; }
.index-approval-badge { justify-self: start; padding: 4px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.index-approval-badge.approved { background: #e7f4e9; color: #2f855a; }
.index-approval-badge.held { background: #fff3d7; color: #9a681c; }
.index-approval-badge.excluded { background: #fde9e7; color: #c94a4a; }
.index-document-actions { display: flex; justify-content: end; gap: 5px; }
.index-document-actions button { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--blue-600); cursor: pointer; }
.index-document-actions button:hover:not(:disabled) { border-color: var(--blue-600); background: var(--blue-100); }
.index-document-actions button:disabled { opacity: .38; cursor: not-allowed; }
.index-document-actions svg { width: 15px; height: 15px; }
.index-correction-form { grid-column: 2 / -1; display: flex; align-items: end; gap: 8px; padding-top: 8px; }
.index-correction-form.hidden { display: none; }
.index-correction-form label { flex: 1 1 auto; display: grid; gap: 5px; }
.index-correction-form label > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.index-correction-form select { min-height: 40px; padding: 0 34px 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); }
.index-correction-form button { min-height: 40px; }
.index-group-files { list-style: none; margin: 0; padding: 8px 14px; display: grid; gap: 6px; }
.index-group-files li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.index-group-files li svg { width: 15px; height: 15px; flex: 0 0 auto; }
.index-group-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.index-group-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--blue-600); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.index-group-btn:hover { background: var(--blue-100); border-color: var(--blue-600); }
.index-group-btn:disabled { opacity: .42; cursor: not-allowed; }
.index-group-btn:disabled:hover { background: var(--surface); border-color: var(--line); }
.index-group-btn svg { width: 14px; height: 14px; }
.index-history-panel { margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.index-history-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.index-history-head h2 { margin: 2px 0 0; color: var(--ink); font-size: 17px; letter-spacing: 0; }
.index-history-head > span { color: var(--muted); font-size: 12px; }
.index-history { display: grid; }
.index-history-row { display: grid; grid-template-columns: 30px minmax(180px, 1fr) 100px 110px 64px 72px; gap: 12px; align-items: center; min-height: 54px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.index-history-row:last-child { border-bottom: 0; }
.index-history-row > div { min-width: 0; display: grid; gap: 2px; }
.index-history-row strong { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-history-row span { color: var(--muted); }
.index-history-row b { color: var(--ink); font-size: 12px; }
.index-history-log { color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.index-history-log:hover { opacity: 0.75; }
.index-history-state { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); }
.index-history-state svg { width: 16px; height: 16px; }
.index-history-state.healthy { color: #2f855a; }
.index-history-state.error { color: #c94a4a; }
.index-history-state.running { color: var(--ink); }
.index-history-state.running svg { animation: index-spin 1s linear infinite; }
@keyframes index-spin { to { transform: rotate(360deg); } }
.index-job-logbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); }
.index-job-logbar a { text-decoration: none; }

@media (max-width: 1050px) {
  .index-telemetry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-document-row { grid-template-columns: 32px minmax(0, 1fr) 126px; }
  .index-document-actions { grid-column: 2 / -1; justify-content: start; }
  .index-correction-form { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .index-telemetry { grid-template-columns: 1fr; }
  .index-state-toolbar { align-items: stretch; flex-direction: column; }
  .index-state-toolbar label { flex-basis: auto; max-width: none; }
  .index-state-actions { display: grid; grid-template-columns: 1fr; }
  .index-state-actions button { width: 100%; justify-content: center; }
  .index-document-row { grid-template-columns: 30px minmax(0, 1fr); }
  .index-approval-badge { grid-column: 2; }
  .index-document-actions { grid-column: 2; }
  .index-correction-form { flex-direction: column; align-items: stretch; }
  .index-history-row { grid-template-columns: 30px minmax(0, 1fr) 74px; }
  .index-history-row > span:nth-of-type(2),
  .index-history-row > b { display: none; }
  .index-history-row > span:empty { display: none; }
  .index-history-row > .index-history-log { grid-column: 2 / -1; }
}

/* ============================================================
   MODO CLARO PREMIUM — crema + dorado + serif
   (refs de Inicio, Providencias y Consultas IA).
   Solo aplica en claro; el modo oscuro queda intacto.
   ============================================================ */
html:not([data-theme="dark"]) body {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(193, 158, 90, 0.12), transparent 62%),
    radial-gradient(900px 500px at 0% 0%, rgba(193, 158, 90, 0.06), transparent 55%),
    var(--bg);
}

/* Titulos display en serif elegante (como las referencias) */
html:not([data-theme="dark"]) .home-hero-copy h1,
html:not([data-theme="dark"]) .page-heading h1,
html:not([data-theme="dark"]) .compact-heading h1,
html:not([data-theme="dark"]) .topbar-brand strong {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.005em;
}
html:not([data-theme="dark"]) .home-hero-copy h1 {
  color: #fff7e6;
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 0.98;
}

/* CTA principal del hero en NAVY, como la referencia de Inicio */
html:not([data-theme="dark"]) .home-hero-copy .primary-action {
  border-color: rgba(246, 220, 160, 0.44);
  background: linear-gradient(135deg, rgba(19, 28, 52, 0.96), rgba(5, 10, 25, 0.98));
  box-shadow: 0 18px 38px rgba(6, 10, 22, 0.36);
}
html:not([data-theme="dark"]) .home-hero-copy .primary-action:hover {
  border-color: rgba(248, 221, 158, 0.72);
  box-shadow: 0 20px 42px rgba(6, 10, 22, 0.42);
}

/* Tarjetas y paneles con esquinas mas suaves y calidas */
html:not([data-theme="dark"]) .flow-card,
html:not([data-theme="dark"]) .summary-panel,
html:not([data-theme="dark"]) .status-panel,
html:not([data-theme="dark"]) .recommend-panel,
html:not([data-theme="dark"]) .documents-panel,
html:not([data-theme="dark"]) .activity-panel,
html:not([data-theme="dark"]) .chat-shell,
html:not([data-theme="dark"]) .help-card,
html:not([data-theme="dark"]) .home-hero-art {
  border-radius: 16px;
}

/* Iconos de paso/marca con leve halo dorado */
html:not([data-theme="dark"]) .step-visual {
  background: var(--blue-100);
  border-color: #e7d6b0;
}

/* ============================================================
   NAVEGACION SUPERIOR (top-nav) estilo referencia
   logo izquierda · secciones centro · acciones derecha
   ============================================================ */
.topbar-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  padding-left: 16px;
  flex-wrap: nowrap;
}
.topnav-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}
.topnav-item:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.topnav-item.active {
  color: var(--ink);
  font-weight: 760;
}
.topnav-item.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-600);
}

/* Marca "AI JPD Providencias" en linea, mas presente */
.topbar-brand > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.topbar-brand strong,
.topbar-brand span {
  display: inline;
}
.topbar-brand strong {
  font-size: 20px;
  line-height: 1;
}
.topbar-brand > div > span {
  margin-top: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
html:not([data-theme="dark"]) .topbar-brand strong {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -0.01em;
}
/* Logo: aro dorado con la balanza centrada (como la referencia) */
.topbar-brand-mark {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--blue-600);
  border-radius: 999px;
  background: transparent;
  color: var(--blue-600);
  overflow: visible;
}
/* Hamburguesa: se CONSERVA para abrir el panel lateral izquierdo */
.topbar .sidebar-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
}
.topbar .sidebar-toggle:hover,
.topbar .sidebar-toggle[aria-expanded="true"] {
  border-color: var(--blue-600);
  background: var(--surface-2);
  color: var(--blue-600);
}
/* Movil/tablet: se oculta el top-nav y vuelve el hamburguesa */
@media (max-width: 900px) {
  .topbar-nav {
    display: none;
  }
  .topbar-brand > div > span {
    font-size: 14px;
  }
  .topbar-brand strong {
    font-size: 17px;
  }
}
/* Pantallas medianas: nav un poco mas compacta */
@media (min-width: 901px) and (max-width: 1180px) {
  .topnav-item {
    font-size: 14px;
    padding: 7px 10px;
  }
  .topbar {
    padding: 12px 18px;
    gap: 12px;
  }
}

/* Perfil con chevron + boton Cerrar sesion estilo referencia */
.profile-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--muted);
}
.top-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
html:not([data-theme="dark"]) .role-toggle {
  color: var(--ink);
  font-weight: 700;
}
html:not([data-theme="dark"]) .role-toggle svg {
  color: var(--ink);
}

/* ============================================================
   ENCABEZADO INSTITUCIONAL
   Marca, navegacion, acciones y perfil en una sola composicion.
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(380px, 1fr) auto;
  gap: 22px;
  min-height: 76px;
  padding: 10px clamp(18px, 2.2vw, 38px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, var(--blue-600));
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 6px 24px rgba(74, 53, 20, 0.055);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(161, 123, 52, 0.38) 50%, transparent 96%);
  content: "";
  pointer-events: none;
}

.topbar-navigation {
  gap: 12px;
  padding-right: 22px;
  border-right: 1px solid var(--line);
}

.topbar-brand {
  gap: 11px;
  min-width: 218px;
}

.topbar-brand-mark {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  align-self: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  line-height: 0;
}

.topbar-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.topbar-navigation,
.topbar-brand {
  align-items: center;
}

.topbar-brand {
  min-height: 48px;
}

.sidebar-toggle {
  align-self: center;
}

.topbar-brand > div {
  gap: 6px;
}

.topbar-brand strong {
  color: var(--ink);
  font-size: 21px;
}

.topbar-brand > div > span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 650;
}

.topbar-nav {
  justify-content: center;
  gap: 5px;
  padding: 0;
}

.topnav-item {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 650;
}

.topnav-item:hover {
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.topnav-item.active {
  background: color-mix(in srgb, var(--blue-100) 52%, transparent);
  color: var(--ink);
}

.topnav-item.active::after {
  right: 15px;
  bottom: 3px;
  left: 15px;
  height: 2px;
}

.top-actions {
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

.theme-toggle,
.notification-dot {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 3px 10px rgba(77, 55, 22, 0.035);
}

.theme-toggle:hover,
.notification-dot:hover {
  border-color: color-mix(in srgb, var(--blue-600) 58%, var(--line));
  background: var(--surface-2);
  color: var(--blue-700);
}

.role-toggle {
  min-height: 42px;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 3px 10px rgba(77, 55, 22, 0.035);
  color: var(--ink);
  font: 700 12px Inter, sans-serif;
}

.role-toggle:hover {
  border-color: color-mix(in srgb, var(--blue-600) 58%, var(--line));
  background: var(--surface-2);
}

.role-toggle svg {
  width: 17px;
  height: 17px;
  color: currentColor;
}

@media (min-width: 901px) {
  body.is-home-view .topbar-brand {
    min-width: 230px;
  }
}

.profile-wrap {
  position: relative;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.top-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.top-profile:hover,
.top-profile[aria-expanded="true"] {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.top-profile[aria-expanded="true"] .profile-chevron {
  transform: rotate(180deg);
}

.top-profile .user-avatar.compact {
  width: 40px;
  height: 40px;
  background:
    linear-gradient(145deg, #8198dc 0%, #6579b5 42%, #9b7636 100%);
  box-shadow: 0 4px 12px rgba(36, 43, 72, 0.18);
  color: #fff;
  font-size: 12px;
}

.top-user-meta {
  gap: 2px;
  max-width: 154px;
}

.top-user-meta strong,
.top-user-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-user-meta strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.top-user-meta span {
  color: var(--muted);
  font-size: 11px;
}

.profile-chevron {
  transition: transform 0.16s ease;
}

/* Antes de autenticar, el acceso es un boton de texto limpio. */
body:not(.is-authed) #top-user-avatar,
body:not(.is-authed) #top-user-role,
body:not(.is-authed) #sidebar-user-avatar,
body:not(.is-authed) #sidebar-user-role,
body:not(.is-authed) #profile-button .profile-chevron {
  display: none;
}

body:not(.is-authed) .top-profile {
  min-height: 40px;
  padding: 8px 12px;
}

.profile-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  width: 238px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 22px 50px rgba(61, 43, 16, 0.16);
}

.profile-panel-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
  padding: 9px 10px 12px;
  border-bottom: 1px solid var(--line);
}

.profile-panel-head > div {
  display: grid;
  gap: 2px;
}

.profile-panel-head strong {
  color: var(--ink);
  font-size: 12px;
}

.profile-panel-head small {
  color: var(--muted);
  font-size: 11px;
}

.profile-panel-status {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-100) 84%, transparent);
}

.profile-panel button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: 650 12px Inter, sans-serif;
  text-align: left;
  cursor: pointer;
}

.profile-panel button:hover {
  background: var(--surface-2);
}

.profile-panel button svg {
  width: 16px;
  height: 16px;
  color: var(--blue-600);
}

.profile-panel-logout {
  color: var(--red-500) !important;
}

.profile-panel-logout svg {
  color: currentColor !important;
}

body:not(.is-admin) .admin-profile-action {
  display: none;
}

[data-theme="dark"] .topbar {
  background: color-mix(in srgb, var(--panel) 91%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .topbar-brand-mark {
  background: var(--surface-2);
}

@media (max-width: 1320px) {
  .topbar {
    grid-template-columns: auto minmax(330px, 1fr) auto;
    gap: 14px;
    padding-inline: 18px;
  }

  .topbar-navigation {
    padding-right: 14px;
  }

  .topbar-brand {
    min-width: auto;
  }

  .topbar-brand > div > span,
  .top-user-meta span {
    display: none;
  }

  .topnav-item {
    padding-inline: 11px;
  }
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: auto minmax(280px, 1fr) auto;
  }

  .topbar-brand strong {
    font-size: 18px;
  }

  .top-user-meta {
    display: none;
  }

  .role-toggle span {
    display: none;
  }

  .role-toggle {
    width: 42px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 68px;
    gap: 10px;
    padding: 8px 14px;
  }

  .topbar-navigation {
    min-width: 0;
    padding-right: 0;
    border-right: 0;
  }

  .top-actions {
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  .topbar-brand-mark {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
  }

  .profile-wrap {
    padding-left: 8px;
  }
}

@media (max-width: 560px) {
  .topbar {
    padding-inline: 10px;
  }

  .topbar-navigation {
    gap: 8px;
  }

  .topbar-brand {
    gap: 8px;
  }

  .topbar-brand strong {
    font-size: 16px;
  }

  .top-actions {
    gap: 5px;
  }

  .role-toggle,
  .theme-toggle {
    display: none !important;
  }

  .profile-wrap {
    margin-left: 0;
    border-left: 0;
  }

  .top-profile {
    padding-right: 4px;
  }

  .profile-chevron {
    display: none;
  }

  .notification-dot,
  .top-profile .user-avatar.compact {
    width: 38px;
    height: 38px;
  }
}

/* ====== Chat history + PDF cards polish ====== */
#ai-view .history-head {
  padding: 14px 14px 10px;
}

#ai-view .history-head strong {
  font-size: 15px;
  letter-spacing: -0.01em;
}

#ai-view .history-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

#ai-view .history-head .new-chat-button {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}

#ai-view .history-head .new-chat-button span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: 12px;
}

#ai-view .conversation-list {
  gap: 3px;
  padding: 4px 8px 10px;
}

#ai-view .conversation-item {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

#ai-view .conversation-item:hover {
  background: rgba(40, 36, 29, 0.055);
}

#ai-view .conversation-item.active {
  border-color: transparent;
  background: rgba(178, 124, 35, 0.14);
  box-shadow: none;
}

#ai-view .conversation-open {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px 8px 12px;
}

#ai-view .conversation-copy-compact {
  display: block;
  min-width: 0;
  width: 100%;
}

#ai-view .conversation-copy-compact strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ai-view .conversation-copy-compact small,
#ai-view .conversation-copy-compact em {
  display: none;
}

#ai-view .conversation-menu-wrap {
  padding-right: 5px;
}

#ai-view .conversation-menu-button {
  opacity: 0.35;
}

#ai-view .conversation-item:hover .conversation-menu-button,
#ai-view .conversation-item.active .conversation-menu-button,
#ai-view .conversation-menu-button:focus-visible {
  opacity: 1;
}

#ai-view .history-note {
  margin: 6px 10px 10px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 11px;
}

#ai-view .source-grid {
  gap: 12px;
}

#ai-view .source-card {
  align-content: start;
  min-height: 154px;
  padding: 16px;
  border-radius: 14px;
}

#ai-view .source-card strong {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.55em;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.28;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#ai-view .source-card small {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ====== Consultas: historial plegable y citas limpias ====== */
#ai-view .ai-conversation-layout.history-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

#ai-view .ai-conversation-layout.history-collapsed .conversation-history {
  display: none;
}

#ai-view .history-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#ai-view .history-head .history-collapse-button,
#ai-view .show-history-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
}

#ai-view .history-head .history-collapse-button:hover,
#ai-view .show-history-button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

#ai-view .show-history-button {
  margin-right: 8px;
  flex: 0 0 auto;
}

#ai-view .show-history-button.hidden {
  display: none;
}

#ai-view .conversation-menu-button {
  opacity: 0.72;
}

#ai-view .conversation-item:hover .conversation-menu-button,
#ai-view .conversation-item.active .conversation-menu-button,
#ai-view .conversation-menu-button:focus-visible {
  opacity: 1;
}

#ai-view .conversation-menu {
  right: 8px;
}

#ai-view .message .bubble a[href^="/pdf-viewer.html"] {
  display: inline;
  color: var(--gold-700);
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* ====== Consultas: sin scroll horizontal en historial ====== */
#ai-view .conversation-history,
#ai-view .conversation-list,
#ai-view .history-search,
#ai-view .history-head,
#ai-view .archived-toggle,
#ai-view .history-note {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#ai-view .conversation-list {
  scrollbar-gutter: stable;
}

#ai-view .conversation-item,
#ai-view .conversation-open,
#ai-view .conversation-copy-compact {
  min-width: 0;
  max-width: 100%;
}

#ai-view .conversation-copy-compact strong {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#ai-view .history-head .new-chat-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* En oscuro --ink es casi blanco: el texto blanco del boton desaparecia. Se usa el acento azul, como Enviar. */
[data-theme="dark"] #ai-view .history-head .new-chat-button {
  border-color: var(--blue-600);
  background: linear-gradient(135deg, var(--blue-600), var(--accent-2));
  color: var(--on-accent);
}

#ai-view .history-search input {
  min-width: 0;
  text-overflow: ellipsis;
}

/* ====== Feedback juridico guiado ====== */
.correction-guided-head {
  display: grid;
  gap: 3px;
}

.correction-guided-head strong {
  color: var(--ink);
  font-size: 14px;
}

.correction-guided-head span,
.correction-reason-group > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.correction-reason-group {
  display: grid;
  gap: 7px;
}

.correction-reason-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.correction-reason-group button {
  min-height: 31px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 11.5px;
}

.correction-reason-group button.active {
  border-color: var(--gold-700);
  background: rgba(178, 124, 35, 0.14);
  color: var(--gold-700);
}

/* ==========================================================================
   AJUSTES PARA CELULARES  (Android e iOS)
   Va al final a proposito: estas reglas deben ganarle a los bloques previos.
   ========================================================================== */

/* --- 1. Nada debe desbordar a lo ancho --- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  /* Evita que iOS agrande el texto solo al girar el telefono. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 900px) {
  /* --- 2. iOS hace zoom al enfocar un campo con letra < 16px.
         Fijarla en 16px evita ese salto brusco al escribir. --- */
  input,
  select,
  textarea,
  .scraping-group,
  .global-search input {
    font-size: 16px !important;
  }

  /* --- 3. Respetar el notch y la barra inferior del iPhone --- */
  .sidebar {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .topbar {
    padding-top: max(9px, env(safe-area-inset-top));
  }

  .view {
    padding-bottom: max(34px, calc(24px + env(safe-area-inset-bottom)));
  }

  /* --- 4. Areas tocables: 44px es el minimo comodo para el dedo --- */
  .primary-action,
  .secondary-action,
  .ghost-action,
  .send-button,
  .icon-button,
  .scrap-approve,
  .scrap-reject {
    min-height: 44px;
    min-width: 44px;
  }

  /* --- 5. Aprovechar el ancho real del telefono.
         Habia topes fijos (260px / 354px) pensados para pantallas chicas que
         desperdiciaban espacio en los celulares actuales, de 390 a 430px. --- */
  .page-heading h1,
  .page-heading p {
    max-width: none;
  }

  .page-heading h1 {
    font-size: clamp(22px, 6.4vw, 30px);
    line-height: 1.15;
  }

  /* --- 6. Panel admin: una tarjeta por fila, legible de un vistazo --- */
  .admin-metric-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* --- 7. Tablas anchas: se apilan como ficha en vez de desbordarse.
         .scraping-row pedia 788px minimos; en un telefono de 390px eso
         obligaba a arrastrar la pantalla de lado para leer o aprobar. --- */
  .scraping-row,
  .drive-list-head,
  .drive-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .drive-list-head {
    display: none;
  }

  .scraping-row {
    padding: 14px;
    border-radius: 12px;
  }

  /* El titulo puede ocupar dos lineas: cortarlo con puntos suspensivos en
     una sola dejaba documentos indistinguibles entre si. */
  .scraping-doc strong {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .scraping-doc small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .scraping-actions {
    justify-content: flex-start;
    gap: 10px;
  }

  .scraping-conf {
    justify-self: start;
  }

  /* --- 8. Cualquier tabla o contenedor ancho se desplaza dentro de si mismo,
         nunca arrastrando toda la pagina --- */
  .table-wrap,
  .drive-list,
  .conversation-history {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- 9. Modales y ventanas de detalle: casi a pantalla completa --- */
  .modal-card,
  .detail-card {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- 10. Barras de herramientas y filtros en columna --- */
  .drive-toolbar,
  .scraping-toolbar,
  .review-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* --- 11. Telefonos angostos (iPhone SE, Android de gama baja) --- */
@media (max-width: 480px) {
  .page-heading > div,
  .page-heading h1,
  .page-heading p,
  .ai-mode-card,
  .chat-shell {
    max-width: 100%;
  }

  .view {
    padding-left: 14px;
    padding-right: 14px;
  }

  .segmented {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 12. Pantallas tactiles: quitar efectos de hover que se quedan pegados
       tras tocar, porque en tactil no existe el "salir del elemento" --- */
@media (hover: none) {
  .nav-item:not(.locked):hover,
  .admin-metric-card:hover {
    background: inherit;
    transform: none;
  }
}

/* ==========================================================================
   CHAT DEL ASISTENTE EN CELULAR
   El objetivo: que el texto use todo el ancho y que escribir sea comodo.
   ========================================================================== */
@media (max-width: 900px) {
  /* --- Campo de escritura: la caja de texto se lleva toda una linea ---
     Compartiendo fila con el selector de modo y el boton de enviar, al
     textarea le quedaban unos 180px y escribir una pregunta larga era
     incomodo. Ahora ocupa el ancho completo y los controles bajan debajo. */
  #ai-view .composer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
  }

  #ai-view .composer-input {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  #ai-view .composer textarea {
    width: 100%;
    /* 16px evita que iOS haga zoom al enfocar el campo. */
    min-height: 46px;
    max-height: 34dvh;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 16px;
    line-height: 1.4;
  }

  #ai-view .composer .mode-select {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    height: 38px;
    margin-right: auto;
    padding: 0 26px 0 12px;
    background-position: right 8px center;
    font-size: 13px;
  }

  #ai-view .send-button {
    order: 3;
    flex: 0 0 auto;
    width: 46px;
    min-width: 46px;
    height: 38px;
    border-radius: 999px;
  }

  /* --- Mensajes: ancho completo ---
     Venian con margenes que dejaban el texto en una columna angosta, partiendo
     palabras a la mitad ("...las p / rescripciones"). */
  #ai-view .messages {
    padding: 16px 12px;
  }

  #ai-view .message,
  #ai-view .message.user {
    max-width: 100%;
    width: 100%;
  }

  #ai-view .message-body,
  #ai-view .message-text,
  #ai-view .message p,
  #ai-view .message li {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  /* --- Fichas de fuentes: una por fila y a ancho completo --- */
  #ai-view .message-sources {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* --- Historial: panel lateral deslizante ---
     Antes se pegaba al borde inferior y se veia como una gaveta a medias.
     Ahora entra desde la izquierda a pantalla completa, con el mismo gesto
     que el menu principal, y la lista tiene todo el alto para desplazarse. */
  #ai-view .conversation-history {
    position: fixed;
    z-index: 55; /* por debajo de la barra superior (60), que sigue accesible */
    /* Arranca justo debajo del encabezado: tapar la barra dejaba sin salida
       (ni menu, ni notificaciones) mientras el panel estuviera abierto. */
    top: calc(var(--topbar-height, 66px) + env(safe-area-inset-top, 0px));
    bottom: 0;
    left: 0;
    width: min(330px, calc(100vw - 52px));
    max-height: none;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0 16px 0 0;
    background: var(--panel);
    box-shadow: 12px 0 36px rgba(16, 26, 52, 0.24);
    transform: translateX(0);
    transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: flex;
    flex-direction: column;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  /* Cerrado se desliza hacia afuera en vez de desaparecer de golpe. */
  #ai-view .ai-conversation-layout.history-collapsed .conversation-history {
    transform: translateX(-104%);
    box-shadow: none;
  }

  #ai-view .history-head {
    flex: 0 0 auto;
    gap: 10px;
    padding: 14px 14px 10px;
  }

  #ai-view .history-head strong {
    font-size: 16px;
  }

  #ai-view .history-search {
    flex: 0 0 auto;
    margin: 0 14px 10px;
  }

  /* La lista toma todo el alto sobrante: es la que debe desplazarse. */
  #ai-view .conversation-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 14px;
    gap: 8px;
  }

  #ai-view .history-actions,
  #ai-view .conversation-history > *:last-child {
    flex: 0 0 auto;
  }

  #ai-view .conversation-item {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    padding: 10px 8px;
  }

  #ai-view .conversation-open {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 4px;
  }

  /* Una sola linea con puntos suspensivos: los titulos largos crecian y se
     montaban unos sobre otros. */
  #ai-view .conversation-copy strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13.5px;
  }

  #ai-view .conversation-copy small,
  #ai-view .conversation-copy span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.5px;
  }

  #ai-view .conversation-icon {
    width: 26px;
    height: 26px;
  }

  /* --- Encabezado del chat mas compacto, para dejar sitio a los mensajes --- */
  #ai-view .conversation-titlebar {
    gap: 8px;
    padding: 10px 12px;
  }

  #ai-view .conversation-titlebar h2,
  #ai-view .conversation-titlebar strong {
    font-size: 15px;
    line-height: 1.25;
  }

  /* Renombrar y Eliminar caben lado a lado sin ocupar toda la pantalla. */
  #ai-view .conversation-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* ==========================================================================
   CHAT: APROVECHAR EL ANCHO EN CELULAR
   Se acumulaban margenes de cuatro contenedores (vista + chat + lista de
   mensajes + tarjeta), y entre todos se comian unos 70px de los ~390px de
   pantalla. Se recortan para que el texto respire a lo ancho y ocupe menos
   a lo alto, dejando solo el margen justo para no pegarse al borde.
   ========================================================================== */
@media (max-width: 900px) {
  body.is-ai-view .ai-view.active,
  body:has(#ai-view.active) .ai-view.active {
    padding: 8px 8px 10px;
  }

  #ai-view .messages {
    padding: 12px 8px;
    gap: 14px;
  }

  /* La burbuja ya no se limita a un porcentaje: en pantalla chica ese tope
     dejaba una franja muerta a un costado. */
  #ai-view .message {
    max-width: 100%;
    gap: 9px;
  }

  #ai-view .message.user {
    max-width: 92%;
  }

  #ai-view .message.assistant {
    max-width: 100%;
  }

  /* El avatar del asistente ocupaba ancho util en cada respuesta. */
  #ai-view .message .message-avatar,
  #ai-view .message .avatar {
    width: 26px;
    min-width: 26px;
    height: 26px;
  }

  #ai-view .message-body,
  #ai-view .message-bubble,
  #ai-view .message-text {
    padding: 11px 13px;
  }

  /* Compositor pegado a los bordes utiles, sin verse apretado. */
  #ai-view .composer {
    padding: 8px;
  }

  #ai-view .composer textarea {
    padding: 10px 11px;
  }

  /* Fichas de fuentes y aviso inferior, al mismo ancho que los mensajes. */
  #ai-view .message-sources,
  #ai-view .composer-hint,
  #ai-view .chat-disclaimer {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   COMPOSITOR A ANCHO COMPLETO EN CELULAR
   La capsula exterior (borde + fondo + sombra) sumaba su propio margen encima
   del que ya tenia el textarea, restandole ancho dos veces. En celular se
   quita esa envoltura y el textarea pasa a ser la caja visible, con lo que
   gana todo ese espacio.
   ========================================================================== */
@media (max-width: 900px) {
  #ai-view .composer {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 8px;
  }

  /* El foco se resalta en el propio campo, no en la envoltura. */
  #ai-view .composer:focus-within {
    border: 0;
    box-shadow: none;
  }

  #ai-view .composer textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 2px 10px rgba(16, 26, 52, 0.05);
  }

  #ai-view .composer textarea:focus {
    border-color: var(--blue-600);
    box-shadow: var(--ring);
    outline: none;
  }

  /* Margen minimo al borde de la pantalla: a cero se ve descuidado y en
     pantallas curvas el texto queda sobre el filo. */
  body.is-ai-view .ai-view.active,
  body:has(#ai-view.active) .ai-view.active {
    padding: 6px 6px 8px;
  }

  #ai-view .messages {
    padding: 12px 6px;
  }
}

/* ==========================================================================
   ACTIVIDAD RECIENTE EN CELULAR
   La tabla pedia 760px minimos con 5 columnas: en un telefono se desbordaba y
   quedaba una barra de desplazamiento horizontal, con los encabezados
   cortados. Se convierte en fichas, una consulta por bloque, usando el
   data-label de cada celda como titulo del dato.
   ========================================================================== */
@media (max-width: 900px) {
  .activity-table {
    overflow-x: visible;
  }

  /* Los encabezados de columna no aplican en formato ficha. */
  .activity-table .table-head {
    display: none;
  }

  .activity-table .table-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 10px;
    background: var(--surface-2);
  }

  .activity-table .table-row strong {
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* Cada dato lleva su etiqueta al frente, para que se entienda sin
     encabezado de columna. */
  .activity-table .table-row span[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-weight: 600;
  }

  .activity-table .table-row .status-pill {
    justify-self: start;
  }

  .activity-table .table-row .status-pill::before {
    content: none;
  }

  /* El panel tambien debe caber: el titulo y el subtitulo iban en una sola
     fila y se salian de la pantalla. */
  .panel-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
  }

  .activity-panel {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ==========================================================================
   ENCABEZADO FIJO + LISTAS CON DESPLAZAMIENTO PROPIO
   ========================================================================== */

/* --- Encabezado que no se pierde al bajar ---
   position: sticky deja de funcionar si CUALQUIER ancestro tiene overflow
   distinto de visible: el elemento pasa a pegarse a ese contenedor recortado
   en vez de a la ventana, y se va con el scroll. Aqui lo rompian el
   overflow-x: hidden de html/body y el overflow: hidden de .layout.
   overflow-x: clip recorta igual pero NO crea contenedor de scroll, asi que
   evita el desborde horizontal sin romper el sticky. */
html,
body {
  overflow-x: clip;
}

.layout {
  overflow: visible;
  overflow-x: clip;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
}

@media (max-width: 900px) {
  .layout,
  .view {
    overflow: visible;
    overflow-x: clip;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
  }
}

/* --- Actividad reciente: altura acotada y desplazamiento interno ---
   Mostraba todas las consultas seguidas y estiraba la pagina. Ahora se ven
   unas pocas y el resto se recorre dentro del propio bloque, igual que la
   lista de carpetas. --- */
#activity-rows {
  max-height: 340px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

@media (max-width: 900px) {
  #activity-rows {
    max-height: 300px;
  }
}

/* ==========================================================================
   CHAT MAS ANCHO EN CELULAR
   Los mensajes cargaban doble margen (el de la vista mas el de la lista) y
   quedaban mas angostos que el campo de escribir. Se igualan y se reducen,
   dejando solo el minimo para no pegar el texto al borde.
   ========================================================================== */
@media (max-width: 900px) {
  body.is-ai-view .ai-view.active,
  body:has(#ai-view.active) .ai-view.active {
    padding: 4px 4px 6px;
  }

  #ai-view .messages {
    /* Sin margen horizontal propio: el de la vista ya separa del borde. */
    padding: 10px 0;
  }

  /* La burbuja aporta su propio espacio interior, que es el que hace legible
     el texto; el margen exterior no aporta nada util. */
  #ai-view .message-body,
  #ai-view .message-bubble,
  #ai-view .message-text {
    padding: 10px 12px;
  }

  #ai-view .message.user {
    max-width: 96%;
  }

  /* Fichas de fuentes y evaluacion, al mismo ancho que los mensajes. */
  #ai-view .message-sources,
  #ai-view .feedback-card,
  #ai-view .source-card {
    margin-left: 0;
    margin-right: 0;
  }

  /* El aviso del pie no debe ser mas ancho que el resto. */
  #ai-view .chat-disclaimer,
  #ai-view .composer-hint {
    margin-left: 0;
    margin-right: 0;
    padding: 10px 12px;
  }
}

/* Telefonos angostos: se aprovecha cada pixel disponible. */
@media (max-width: 420px) {
  body.is-ai-view .ai-view.active,
  body:has(#ai-view.active) .ai-view.active {
    padding: 3px 3px 5px;
  }

  #ai-view .message-body,
  #ai-view .message-bubble,
  #ai-view .message-text {
    padding: 9px 10px;
  }
}

/* ==========================================================================
   CAJA DE ESCRITURA MAS ALTA, TARJETAS MAS COMPACTAS Y FLECHA PARA BAJAR
   ========================================================================== */

/* --- Flecha flotante para volver al final ---
   Al subir a releer una respuesta larga no habia forma de regresar rapido al
   campo de escritura. Se muestra solo cuando uno se alejo del final. --- */
.scroll-bottom-button {
  position: absolute;
  z-index: 40;
  top: -52px;
  left: 50%;
  display: grid;
  width: 40px;
  height: 40px;
  transform: translateX(-50%);
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(16, 26, 52, 0.18);
  cursor: pointer;
}

.scroll-bottom-button:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.scroll-bottom-button svg {
  width: 19px;
  height: 19px;
}

.scroll-bottom-button.hidden {
  display: none;
}

/* El contenedor debe ser referencia de posicion para la flecha. */
.chat-bottom {
  position: relative;
}

@media (max-width: 900px) {
  /* --- Caja de escritura mas alta ---
     Con una sola linea visible no se alcanzaba a leer lo que uno escribia;
     ahora entran unas tres lineas de entrada y crece hasta media pantalla. --- */
  #ai-view .composer textarea {
    min-height: 96px;
    max-height: 46dvh;
    padding: 12px;
    line-height: 1.45;
  }

  /* --- Tarjetas de fuentes mas compactas, para que quepa mas contenido --- */
  #ai-view .source-card,
  #ai-view .message-sources > * {
    padding: 10px 11px;
    gap: 6px;
  }

  #ai-view .source-card strong,
  #ai-view .message-sources strong {
    font-size: 12.5px;
    line-height: 1.3;
  }

  #ai-view .source-card small,
  #ai-view .message-sources small {
    font-size: 11px;
    line-height: 1.3;
  }

  /* El icono grande de PDF ocupaba una franja entera sin aportar informacion. */
  #ai-view .source-card .drive-item-icon,
  #ai-view .message-sources .drive-item-icon {
    width: 30px;
    height: 30px;
  }

  /* --- Bloque de evaluacion en una sola fila --- */
  #ai-view .feedback-card {
    padding: 10px;
    gap: 6px;
  }

  #ai-view .feedback-card button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* ==========================================================================
   CHAT DE BORDE A BORDE EN CELULAR
   Se acumulaban margenes de la vista, la tarjeta contenedora, el area de
   mensajes y cada burbuja. Aqui se anulan TODOS de una vez y el unico espacio
   que queda es el interior de la burbuja, que es el que hace legible el texto.
   Se usa !important porque estas reglas tienen que ganarle a las definiciones
   previas repartidas en varios bloques del archivo.
   ========================================================================== */
@media (max-width: 900px) {
  #ai-view,
  #ai-view.view,
  #ai-view.view.active,
  body.is-ai-view .ai-view.active,
  body:has(#ai-view.active) .ai-view.active {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #ai-view .ai-conversation-layout,
  #ai-view .chat-shell,
  #ai-view .messages,
  #ai-view .chat-bottom {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Las burbujas ocupan todo el ancho; el respiro va por dentro. */
  #ai-view .message,
  #ai-view .message.assistant,
  #ai-view .message.user {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #ai-view .message-body,
  #ai-view .message-bubble,
  #ai-view .message-text {
    max-width: 100% !important;
    padding: 10px 10px !important;
  }

  /* Fichas de fuentes, evaluacion y compositor: mismo borde que el texto. */
  #ai-view .message-sources,
  #ai-view .source-card,
  #ai-view .feedback-card,
  #ai-view .composer,
  #ai-view .chat-disclaimer,
  #ai-view .composer-hint {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Unico margen al borde de la pantalla, para no pegar el texto al filo. */
  #ai-view .messages,
  #ai-view .chat-bottom {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ==========================================================================
   FLECHA FLOTANTE Y MENSAJES SIN ESPACIO DESPERDICIADO
   ========================================================================== */

/* --- Flecha centrada, flotando sobre la conversacion ---
   Antes iba dentro de .chat-bottom, que tiene fondo propio y la tapaba.
   Fija sobre la pantalla se comporta como la de ChatGPT: siempre centrada,
   justo encima del campo de escritura. --- */
.scroll-bottom-button {
  position: fixed;
  z-index: 70;
  top: auto;
  bottom: calc(150px + env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  width: 38px;
  height: 38px;
  transform: translateX(-50%);
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(16, 26, 52, 0.22);
  cursor: pointer;
}

.scroll-bottom-button.hidden {
  display: none !important;
}

@media (max-width: 900px) {
  /* --- El avatar indentaba cada respuesta unos 44px ---
     En pantalla chica ese espacio vale mas como texto. El emisor ya se
     distingue por el fondo y la alineacion de la burbuja. --- */
  #ai-view .message-avatar {
    display: none !important;
  }

  #ai-view .message {
    gap: 0 !important;
  }

  /* Burbujas al ancho completo, con el minimo respiro interior. */
  #ai-view .message-body,
  #ai-view .message-bubble,
  #ai-view .message-text {
    padding: 9px 10px !important;
  }

  /* El mensaje propio ya no se encoge: ocupaba 76% y dejaba una franja muerta. */
  #ai-view .message.user {
    max-width: 100% !important;
  }

  #ai-view .messages {
    gap: 10px !important;
  }
}

/* Un poco mas de aire: a 6px el texto quedaba practicamente sobre el filo. */
@media (max-width: 900px) {
  #ai-view .messages,
  #ai-view .chat-bottom {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #ai-view .message-body,
  #ai-view .message-bubble,
  #ai-view .message-text {
    padding: 11px 13px !important;
    line-height: 1.55 !important;
  }

  /* Separacion entre parrafos dentro de una respuesta. */
  #ai-view .message-text p,
  #ai-view .message-body p {
    margin: 0 0 10px;
  }

  #ai-view .message-text p:last-child,
  #ai-view .message-body p:last-child {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   FICHAS DE PDF EN DOS COLUMNAS + CAJA DE ESCRITURA MAS BAJA
   ========================================================================== */
@media (max-width: 900px) {
  /* --- Dos fuentes por fila ---
     Apiladas ocupaban media pantalla para mostrar dos documentos. Al ponerlas
     lado a lado se ve el soporte completo sin desplazarse. --- */
  #ai-view .message-sources {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch;
  }

  #ai-view .message-sources > * {
    min-width: 0;
    padding: 9px !important;
  }

  /* En dos columnas el titulo no cabe entero: se limita a tres lineas y el
     nombre completo queda en el title del elemento. */
  #ai-view .message-sources strong {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px !important;
    line-height: 1.28 !important;
  }

  #ai-view .message-sources small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  /* El icono grande de PDF no cabe en media columna. */
  #ai-view .message-sources .drive-item-icon {
    width: 24px !important;
    height: 24px !important;
  }

  #ai-view .message-sources .drive-item-icon svg {
    width: 13px;
    height: 13px;
  }

  /* Enlace de la cita, compacto pero tocable. */
  #ai-view .message-sources a,
  #ai-view .message-sources button {
    font-size: 11px !important;
    padding-top: 4px;
  }

  /* --- Caja de escritura mas baja ---
     A 96px ocupaba demasiado alto en reposo. Con dos lineas basta para ver lo
     que se escribe, y sigue creciendo sola al redactar textos largos. --- */
  #ai-view .composer textarea {
    min-height: 62px !important;
    max-height: 42dvh !important;
    padding: 10px 12px !important;
  }
}

/* Telefonos muy angostos: una sola columna, dos no caben legibles. */
@media (max-width: 360px) {
  #ai-view .message-sources {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================================
   BOTON DE HISTORIAL SIEMPRE VISIBLE
   Vivia dentro de la barra de titulo del chat, asi que al bajar en una
   conversacion larga se iba con el scroll y tocaba subir hasta arriba solo
   para volver a abrir el historial.
   ========================================================================== */
@media (max-width: 900px) {
  #ai-view .show-history-button {
    position: fixed;
    z-index: 70;
    /* Justo debajo de la barra superior, que es sticky. */
    top: calc(var(--topbar-height, 56px) + 10px);
    left: 10px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(16, 26, 52, 0.22);
  }

  /* La barra de titulo ya no reserva el hueco del boton. */
  #ai-view .conversation-titlebar {
    padding-left: 12px;
  }
}

/* Fondo del panel lateral de historial: permite cerrarlo tocando afuera,
   que es lo que uno espera de una gaveta. */
.history-backdrop {
  position: fixed;
  z-index: 54;
  /* Igual que el panel: por debajo del encabezado, que queda utilizable. */
  top: calc(var(--topbar-height, 66px) + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
  background: rgba(16, 26, 52, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.history-backdrop.hidden {
  display: none !important;
}

/* En escritorio el historial es una columna fija, no una gaveta. */
@media (min-width: 901px) {
  .history-backdrop {
    display: none !important;
  }
}

/* Tema en el menu de perfil. Se separa de "Cerrar sesion" con una linea:
   una preferencia y una accion destructiva no deben leerse como vecinas. */
.profile-panel-theme {
  color: var(--ink);
}

.profile-panel-theme + .profile-panel-logout {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 9px 9px;
}

/* La flecha de bajar tambien sirve en escritorio, pero ahi no puede fijarse al
   centro de la ventana: la conversacion es una columna a la derecha del
   historial, y el boton quedaba descolgado sobre el area equivocada. Se ancla
   al contenedor del compositor, que si esta dentro de esa columna. */
@media (min-width: 901px) {
  .scroll-bottom-button {
    position: absolute;
    top: -50px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}


/* El historial del chat siempre va en una sola columna.
   Una regla general para ventanas de menos de 1200px pone .conversation-list
   en dos columnas; eso sirve donde la lista ocupa el ancho de la pagina, pero
   aqui vive en una barra lateral de 300px y partirla dejaba cada titulo en
   unos 130px, con el texto encimado e ilegible. */
#ai-view .conversation-list {
  grid-template-columns: minmax(0, 1fr);
}

/* Titulo del historial: una sola linea con puntos suspensivos.
   Habia dos reglas contradictorias sobre este mismo elemento: una lo dejaba
   en una linea (nowrap + ellipsis) y otra, mas abajo y por eso ganadora, lo
   recortaba a dos con -webkit-line-clamp. Ese recorte no calcula bien su
   altura dentro de un contenedor flex, asi que la fila quedaba del alto de
   una linea con el texto de dos, y cada titulo se montaba sobre el siguiente.
   Se elige una linea: en una barra de 300px la segunda aportaba poco y el
   nombre completo sigue disponible en el title del elemento. */
#ai-view .conversation-copy-compact strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.35;
  -webkit-line-clamp: none;
}
/* Gestion de accesos por modulo */
.access-create-card { margin-bottom: 1rem; }
.remember-session { display: flex !important; grid-template-columns: none !important; align-items: center; gap: .5rem; color: var(--muted, #747b8f); font-size: .85rem; font-weight: 600; cursor: pointer; }
.remember-session input { width: 17px; height: 17px; accent-color: var(--blue-600, #315bea); }
.access-password-note { grid-column: 1 / -1; margin: 0; color: var(--muted, #747b8f); font-size: .85rem; }
.access-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.access-form label { display: grid; gap: .4rem; color: var(--muted, #747b8f); font-size: .82rem; font-weight: 700; }
.access-form input[type="text"], .access-form input[type="email"], .access-form input[type="password"] { width: 100%; min-height: 44px; border: 1px solid var(--line, #dfe3eb); border-radius: 10px; padding: .7rem .8rem; background: var(--surface, #fff); color: inherit; }
.access-form fieldset { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; border: 1px solid var(--line, #dfe3eb); border-radius: 10px; padding: .8rem 1rem; }
.access-form fieldset label { display: flex; align-items: center; gap: .35rem; }
.access-form .primary-action { justify-self: start; }
.form-status { min-height: 1.2rem; margin: .75rem 0 0; color: var(--muted, #747b8f); }
.access-users { display: grid; gap: .65rem; }
.access-user-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--line, #dfe3eb); border-radius: 12px; padding: .85rem 1rem; }
.access-user-row > div:first-child { display: grid; gap: .15rem; }
.access-user-row small, .access-user-row span { color: var(--muted, #747b8f); font-size: .82rem; }
.access-user-actions { display: flex; align-items: center; gap: .65rem; }
.access-reset-dialog { width: min(480px, calc(100% - 2rem)); max-width: none; padding: 0; border: 1px solid var(--line, #dfe3eb); border-radius: 16px; background: var(--surface, #fff); color: inherit; box-shadow: 0 24px 70px #0004; }
.access-reset-dialog::backdrop { background: #09142abb; }
.access-reset-content { display: grid; gap: 1rem; padding: 1.5rem; }
.access-reset-content h2, .access-reset-content p { margin: 0; }
.access-reset-content label { font-weight: 700; }
.access-reset-copy-row { display: flex; gap: .6rem; }
.access-reset-copy-row input { flex: 1; min-width: 0; padding: .7rem; border: 1px solid var(--line, #dfe3eb); border-radius: 9px; font: inherit; }
.access-reset-copy-row button { flex: 0 0 auto; }
.access-reset-content > .primary-action { justify-self: end; }
@media (max-width: 480px) { .access-reset-copy-row { flex-direction: column; } }
.status-pill { border-radius: 999px; padding: .3rem .65rem; font-size: .75rem; font-weight: 800; }
.status-pill.ok { color: #157347; background: #e1f5e9; }
.status-pill.muted { color: #747b8f; background: #eef0f4; }
@media (max-width: 900px) { .access-form { grid-template-columns: 1fr; } .access-user-row { align-items: flex-start; flex-direction: column; } }

/* Perfil de cuenta */
.profile-page-shell { max-width: 1120px; margin: 0 auto; }
.profile-page-heading { align-items: center; }
.profile-page-avatar {
  display: grid; place-items: center; width: 74px; height: 74px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--gold-500, #b88a35) 48%, var(--line));
  border-radius: 24px; background: linear-gradient(145deg, #17315f, #687db9 64%, #a47a32);
  box-shadow: 0 14px 34px rgba(31, 48, 88, .2); color: #fff; font-family: Georgia, serif;
  font-size: 1.3rem; font-weight: 800; letter-spacing: .04em;
}
.profile-page-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: 1rem; }
.profile-card {
  padding: 1.35rem; border: 1px solid var(--line); border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 96%, var(--gold-50, #f8f1e2));
  box-shadow: 0 12px 30px rgba(43, 48, 67, .07);
}
.profile-card-heading { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.2rem; }
.profile-card-heading h2 { margin: 0 0 .25rem; color: var(--ink); font-family: Georgia, serif; font-size: 1.2rem; }
.profile-card-heading p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.profile-card-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--gold-500, #b88a35) 28%, var(--line));
  border-radius: 12px; background: color-mix(in srgb, var(--gold-50, #f7eedb) 72%, var(--panel)); color: var(--gold-700, #8b651f);
}
.profile-card-icon svg { width: 19px; height: 19px; }
.profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.profile-form label { display: grid; gap: .42rem; color: var(--muted); font-size: .8rem; font-weight: 750; }
.profile-form input {
  width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 11px;
  padding: .72rem .82rem; background: var(--surface, var(--panel)); color: var(--ink); font: inherit;
}
.profile-form input:focus { border-color: var(--blue-500, #4f6fe8); outline: 3px solid color-mix(in srgb, var(--blue-500, #4f6fe8) 15%, transparent); }
.profile-form input:disabled { opacity: .68; cursor: not-allowed; }
.profile-form-wide { grid-column: 1 / -1; }
.profile-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .15rem; }
.profile-form-actions .form-status { margin: 0; }
.profile-form-actions .form-status.ok { color: var(--green-600, #23824c); }
.profile-form-actions .form-status.error { color: var(--red-500, #c3474d); }
.profile-account-details { display: grid; gap: .2rem; margin: 0; }
.profile-account-details > div { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.profile-account-details > div:last-child { border-bottom: 0; }
.profile-account-details dt { margin-bottom: .25rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.profile-account-details dd { margin: 0; color: var(--ink); font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.profile-password-card { grid-column: 1 / -1; }
.profile-password-help { margin: -.2rem 0 0; color: var(--muted); font-size: .8rem; }
.profile-managed-notice { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--muted); }
.profile-managed-notice.hidden, .profile-form .hidden { display: none; }
.profile-managed-notice svg { width: 18px; color: var(--blue-600); }
@media (max-width: 780px) {
  .profile-page-grid, .profile-form { grid-template-columns: 1fr; }
  .profile-form-wide, .profile-password-card { grid-column: 1; }
  .profile-form-actions { align-items: stretch; flex-direction: column; }
  .profile-form-actions .primary-action { width: 100%; justify-content: center; }
  .profile-page-avatar { width: 58px; height: 58px; border-radius: 18px; }
}

/* El menu lateral tiene su propio desplazamiento. Cuando esta abierto se
   bloquea el scroll de la pagina y el cursor debe poder recorrer todos sus
   modulos sin mover el contenido del fondo. */
.sidebar {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sidebar .nav-list { flex: 0 0 auto; }
.sidebar .sidebar-footer { margin-top: auto; flex: 0 0 auto; }

/* ===== Historial de chats estilo ChatGPT =====
   Lista limpia agrupada por fecha: titulos en peso normal y una linea,
   sin tarjetas, hover suave y colores del tema (claro y oscuro). */
#ai-view .conversation-list {
  gap: 3px;
  padding: 2px 8px 14px;
  /* Cada fila mide siempre lo que su contenido. Sin esto, con la lista de alto
     fijo y sin espacio libre (zoom, celular), las filas con overflow oculto
     quedaban de altura cero y los titulos se montaban unos sobre otros. */
  grid-auto-rows: max-content;
  align-content: start;
  overflow-y: auto;
}

#ai-view .conversation-list > * {
  flex-shrink: 0;
  min-height: max-content;
}

#ai-view .conversation-group {
  padding: 22px 12px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#ai-view .conversation-group:first-child {
  padding-top: 6px;
}

#ai-view .conversation-item {
  margin: 0;
  padding: 0;
  border-radius: 8px;
}

#ai-view .conversation-item:hover {
  background: var(--surface-2);
}

#ai-view .conversation-item.active {
  background: var(--surface-2);
  box-shadow: none;
}

#ai-view .conversation-open {
  min-height: 40px;
  padding: 9px 12px;
}

#ai-view .conversation-copy-compact strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 22px;
}

#ai-view .conversation-item.active .conversation-copy-compact strong {
  font-weight: 500;
}

#ai-view .conversation-item.unread .conversation-copy-compact strong {
  font-weight: 600;
}

#ai-view .conversation-menu-button {
  width: 28px;
  height: 28px;
  opacity: 0;
}

#ai-view .conversation-item:hover .conversation-menu-button,
#ai-view .conversation-item.active .conversation-menu-button,
#ai-view .conversation-menu-button:focus-visible {
  opacity: 1;
}

/* Formulario de correccion: campos guiados y error en linea */
.correction-field { display: grid; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.correction-field textarea, .correction-field input[type="text"] { width: 100%; box-sizing: border-box; }
.correction-field input[type="text"] { min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; }
.correction-field input[type="text"]:disabled { opacity: .5; }
.correction-check { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.correction-error { min-height: 16px; margin: 8px 0 0; font-size: 12px; font-weight: 600; color: #c94a4a; }


/* Selector del proveedor y progreso del agente investigador. */
.provider-picker { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 7px; color: var(--muted, #5b6472); white-space: nowrap; }
.provider-picker > span { font-size: 0.68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.provider-picker select { min-width: 90px; border: 1px solid var(--line, #d0d7e2); border-radius: 9px; background: var(--panel, #fff); color: var(--ink, #1d2430); padding: 6px 25px 6px 9px; font: inherit; font-size: .82rem; font-weight: 700; }
.provider-picker small { grid-column: 1 / -1; max-width: 155px; overflow: hidden; text-overflow: ellipsis; font-size: .66rem; }
.investigacion-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9rem; }
.investigacion-pasos .paso { display: flex; align-items: flex-start; gap: 8px; color: var(--muted, #5b6472); }
.investigacion-pasos .paso.activo { color: var(--text, #1d2430); font-weight: 500; }
.paso-indicador { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.55; box-sizing: border-box; }
.paso.activo .paso-indicador { border-color: var(--primary, #1f4e78); border-right-color: transparent; opacity: 1; animation: paso-girar 0.8s linear infinite; }
.paso.hecho .paso-indicador { background: currentColor; opacity: 0.35; }
@keyframes paso-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .paso.activo .paso-indicador { animation: none; } }
.investigacion-resumen { font-size: 0.8rem; color: var(--muted, #5b6472); margin-bottom: 6px; }
.investigacion-resumen summary { cursor: pointer; }
.investigacion-resumen .investigacion-pasos { margin-top: 6px; font-size: 0.8rem; }
@media (max-width: 640px) { .provider-picker small, .provider-picker > span { display: none; } }
.investigacion-detener { margin-top: 10px; font-size: 0.8rem; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--border, #d0d7e2); background: transparent; color: var(--text, #1d2430); cursor: pointer; }
.investigacion-detener:hover:not(:disabled) { background: var(--primary-soft, #e6eef7); }
.investigacion-detener:disabled { opacity: 0.6; cursor: default; }

/* Motivo real cuando el modelo elegido no esta disponible: visible, no truncado. */
.provider-picker small.provider-usage-alerta { color: #f59e0b; max-width: 260px; white-space: normal; overflow: visible; }
.detail-model-row { padding: 6px 0 6px 14px; border-left: 2px solid rgba(99,102,241,.35); margin: 4px 0 8px; }
.detail-model-row strong { display: block; font-size: .8rem; }
.detail-model-row small { display: block; opacity: .8; line-height: 1.45; font-size: .72rem; }

/* Documentos consultados sin cita verificada: visibles para revision, distintos del respaldo verificado. */
.source-group-title { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; margin: 6px 0 2px; }
.source-group-sin-cita { color: #b45309; }
.source-card-sin-cita { border-style: dashed; opacity: .92; }
.source-card-sin-cita .pdf-badge { background: rgba(245,158,11,.14); color: #b45309; }
.source-card-motivo { font-style: italic; }

/* Dashboard de Costos: panel amplio (≈90 % del ancho en escritorio, pantalla completa en movil). */
body.costos-abierto { overflow: hidden; }
.provider-usage-enlace { cursor: pointer; text-decoration: underline dotted; }
.costos-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; }
.costos-overlay.hidden { display: none; }
.costos-panel { width: min(1500px, 90vw); height: 88vh; display: flex; flex-direction: column; background: var(--surface, #fff); color: var(--text, #0f172a);
  border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden; }
[data-theme="dark"] .costos-panel { background: #111827; color: #e5e7eb; }
.costos-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid rgba(148, 163, 184, .25); }
.costos-head strong { font-size: 1.15rem; display: block; }
.costos-head small { opacity: .7; }
.costos-cerrar { font-size: 1.6rem; line-height: 1; background: none; border: 0; color: inherit; cursor: pointer; padding: 4px 10px; }
.costos-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 12px 22px; border-bottom: 1px solid rgba(148, 163, 184, .2); }
.costos-filtros label { display: flex; flex-direction: column; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .9; gap: 4px; }
.costos-filtros label[hidden] { display: none; }
.costos-filtros select, .costos-filtros input { font: inherit; font-size: .85rem; text-transform: none; padding: 6px 8px; border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .45); background: transparent; color: inherit; min-width: 120px; }
[data-theme="dark"] .costos-filtros select option { background: #111827; }
.costos-boton { font-size: .8rem; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(99, 102, 241, .5); background: transparent; color: inherit; cursor: pointer; text-decoration: none; }
.costos-tabs { display: flex; gap: 4px; padding: 8px 22px 0; border-bottom: 1px solid rgba(148, 163, 184, .2); overflow-x: auto; }
.costos-tabs button { border: 0; background: none; color: inherit; padding: 9px 14px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; opacity: .7; white-space: nowrap; }
.costos-tabs button[aria-selected="true"] { opacity: 1; border-bottom-color: #6366f1; }
.costos-cuerpo { flex: 1; overflow: auto; padding: 18px 22px 26px; }
.costos-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.costos-tarjeta { border: 1px solid rgba(148, 163, 184, .3); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.costos-tarjeta small { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.costos-tarjeta strong { font-size: 1.25rem; }
.costos-tarjeta span { font-size: .75rem; opacity: .8; line-height: 1.4; }
.costos-principal { border-color: rgba(99, 102, 241, .6); }
.costos-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.costos-ancho { grid-column: 1 / -1; }
.costos-bloque { border: 1px solid rgba(148, 163, 184, .25); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.costos-bloque h3 { font-size: .85rem; margin: 0 0 10px; }
.costos-grafica { position: relative; width: 100%; }
.costos-tabla-scroll { overflow-x: auto; }
.costos-tabla { width: 100%; border-collapse: collapse; font-size: .8rem; }
.costos-tabla th, .costos-tabla td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(148, 163, 184, .2); vertical-align: top; }
.costos-tabla th { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
.costos-ordenable { cursor: pointer; user-select: none; }
.costos-clicables tbody tr { cursor: pointer; }
.costos-clicables tbody tr:hover { background: rgba(99, 102, 241, .08); }
.costos-total td { font-weight: 700; }
.costos-nota, .costos-notas { font-size: .75rem; opacity: .8; }
.costos-vacio { padding: 26px; text-align: center; opacity: .75; }
@media (max-width: 760px) {
  .costos-panel { width: 100vw; height: 100dvh; border-radius: 0; }
  .costos-rejilla { grid-template-columns: 1fr; }
  .costos-filtros { max-height: 32vh; overflow-y: auto; }
  .costos-filtros label { flex: 1 1 42%; }
}

/* Banco de evaluacion */
.banco-respuesta { border-top: 1px solid rgba(148,163,184,.2); padding: 8px 0; }
.banco-texto { white-space: pre-wrap; font-size: .78rem; max-height: 260px; overflow: auto; background: rgba(148,163,184,.08); padding: 8px; border-radius: 8px; }
.banco-evaluaciones-resumen { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: rgba(99,102,241,.08); }
.banco-evaluaciones-resumen span { font-size: .78rem; opacity: .72; }
.banco-evaluaciones-lista { display: grid; gap: 16px; }
.banco-evaluacion-card { border: 1px solid rgba(148,163,184,.3); border-radius: 16px; padding: 18px; background: rgba(148,163,184,.035); }
.banco-evaluacion-card > header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid rgba(148,163,184,.22); }
.banco-evaluacion-card > header > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.banco-evaluacion-card time, .banco-evaluacion-card header small { font-size: .74rem; opacity: .7; }
.banco-evaluacion-card section { margin-top: 14px; }
.banco-evaluacion-card h3 { margin: 0 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .055em; opacity: .72; }
.banco-evaluacion-card p { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.banco-evaluacion-tipo { border-radius: 999px; padding: 5px 9px; font-size: .72rem; font-weight: 750; }
.banco-evaluacion-tipo.positiva { color: #15803d; background: rgba(34,197,94,.14); }
.banco-evaluacion-tipo.negativa { color: #b91c1c; background: rgba(239,68,68,.13); }
.banco-evaluacion-tipo.correccion { color: #a16207; background: rgba(245,158,11,.15); }
.banco-evaluacion-datos { display: grid; gap: 8px; margin: 0; }
.banco-evaluacion-datos div { display: grid; grid-template-columns: minmax(130px, 190px) 1fr; gap: 12px; }
.banco-evaluacion-datos dt { font-size: .74rem; font-weight: 700; opacity: .7; }
.banco-evaluacion-datos dd { margin: 0; white-space: pre-wrap; }
.banco-texto-completo { max-height: none; line-height: 1.5; }
.banco-evaluacion-card details { margin-top: 14px; }
.banco-evaluacion-card summary { cursor: pointer; font-weight: 700; font-size: .8rem; }
.banco-evaluacion-fuentes { display: grid; gap: 8px; margin-top: 10px; }
.banco-evaluacion-fuentes article { padding: 10px 12px; border-radius: 10px; background: rgba(148,163,184,.08); display: grid; gap: 5px; }
.banco-evaluacion-fuentes span { font-size: .72rem; opacity: .72; }
.banco-evaluacion-fuentes blockquote { margin: 4px 0; padding-left: 10px; border-left: 2px solid rgba(99,102,241,.55); font-size: .78rem; }
.banco-evaluaciones-vacio { min-height: 45vh; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }
.banco-evaluaciones-vacio strong { font-family: var(--font-display, serif); font-size: clamp(1.45rem, 3vw, 2.2rem); }
.banco-evaluaciones-vacio span { max-width: 480px; opacity: .7; line-height: 1.5; }
.banco-evaluacion-retirada { margin-top: 14px !important; padding: 12px; border-radius: 10px; background: rgba(148,163,184,.1); opacity: .75; }
@media (max-width: 760px) {
  .banco-evaluacion-card > header, .banco-evaluaciones-resumen { align-items: flex-start; flex-direction: column; }
  .banco-evaluacion-datos div { grid-template-columns: 1fr; gap: 3px; }
}

/* Historial de envios a Drive: una notificacion por envio, la mas reciente arriba. */
.scraping-apply-history {
  display: grid;
  gap: 10px;
}
.scraping-apply-summary-head .scraping-apply-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scraping-apply-dismiss {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}
.scraping-apply-dismiss:hover {
  color: var(--ink);
}
.scraping-apply-dismiss svg {
  width: 15px;
  height: 15px;
}
/* Avance del envio junto a los botones de la etapa 2. */
.scraping-apply-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--blue-600);
  border-radius: 10px;
  background: var(--blue-100);
  color: var(--ink);
  font-size: 12px;
}
.scraping-apply-progress div {
  display: grid;
  gap: 2px;
}
.scraping-apply-progress small {
  color: var(--muted);
}
.scraping-apply-progress svg {
  width: 18px;
  height: 18px;
  animation: scraping-giro 1s linear infinite;
}
@keyframes scraping-giro {
  to {
    transform: rotate(360deg);
  }
}

/* Aviso del modelo elegido y consumo propio frente al tope mensual. */
.composer-avisos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 6px 2px 0;
}
.modelo-aviso {
  flex: 1 1 320px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.modelo-aviso.modelo-aviso-pesado {
  color: var(--amber-500);
  font-weight: 600;
}
.mi-consumo {
  position: relative;
  display: inline-block;
}
.mi-consumo-icono {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.mi-consumo-icono svg {
  width: 18px;
  height: 18px;
}
/* Punto de aviso sobre el icono cuando el consumo se acerca al tope o ya lo alcanzo. */
.mi-consumo.nivel-aviso .mi-consumo-icono::after,
.mi-consumo.nivel-bloqueado .mi-consumo-icono::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  background: var(--amber-500);
}
.mi-consumo.nivel-bloqueado .mi-consumo-icono::after {
  background: var(--red-500, #e5484d);
}
.mi-consumo-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  display: grid;
  gap: 6px;
  width: min(330px, 88vw);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.mi-consumo-panel.hidden {
  display: none;
}
.mi-consumo-panel small {
  color: var(--muted);
}
.mi-consumo-ver {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.mi-consumo-barra {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.mi-consumo-barra > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--green-500);
}
.mi-consumo.nivel-aviso .mi-consumo-barra > span {
  background: var(--amber-500);
}
.mi-consumo.nivel-bloqueado .mi-consumo-panel {
  border-color: var(--red-500, #e5484d);
}
.mi-consumo.nivel-bloqueado .mi-consumo-barra > span {
  background: var(--red-500, #e5484d);
}
.access-tope-info {
  color: var(--muted);
}

/* Con el boton de tope la fila de accesos tiene mas acciones: se acomodan en varias lineas si hace falta. */
.access-user-row > div:first-child { flex: 1 1 260px; min-width: 0; }
.access-user-actions { flex-wrap: wrap; justify-content: flex-end; }
.access-user-actions button { white-space: nowrap; }

/* El boton de crear acceso lleva un texto largo: se muestra en una sola linea. */
#access-create-form button[type="submit"] { justify-self: start; width: auto; white-space: nowrap; padding-inline: 1.3rem; }

/* Seguimiento del correo de bienvenida de cada cuenta. */
.access-user-row span.access-bienvenida.ok { color: var(--green-500); }
.access-user-row span.access-bienvenida.alerta { color: var(--red-500); font-weight: 600; }

/* ====== MARCA JurisprudenciaColombiana.co: navbar flotante, beige (claro) y azul marino (oscuro) ====== */
:root {
  --marca-marino: #051735;
  --marca-libro: #0a3f96;
  --marca-dorado: #e5aa16;
  --marca-beige: #efd79c;
  --marca-beige-calido: #e8d2b0;
  --marca-rojo: #d91e28;
}

.topbar {
  top: 10px;
  margin: 10px clamp(12px, 1.8vw, 28px) 0;
  min-height: 72px;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--marca-beige-calido) 70%, #fff);
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 14px 34px rgba(5, 23, 53, 0.12);
}

.topbar::after {
  display: none;
}

[data-theme="dark"] .topbar {
  border-color: #17356f;
  background: color-mix(in srgb, #0a2048 94%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.topbar-brand {
  min-width: 0;
  gap: 14px;
}

.topbar-brand-mark,
[data-theme="dark"] .topbar-brand-mark {
  flex-basis: auto;
  width: 84px;
  height: 48px;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

/* El logo es azul marino: sobre fondo oscuro se apoya en una pastilla beige para no perderse. */
[data-theme="dark"] .topbar-brand-mark {
  width: 92px;
  padding: 4px 8px;
  border-radius: 12px;
  background: var(--marca-beige);
}

.topbar-wordmark {
  display: block;
}

.topbar-brand .topbar-wordmark strong {
  color: var(--ink);
  font: 700 21px/1.1 Lora, "Playfair Display", Georgia, serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.topbar-brand .topbar-wordmark strong em {
  color: var(--marca-dorado);
  font-style: normal;
}

[data-theme="dark"] .topbar-brand .topbar-wordmark strong em {
  color: #f3bb3a;
}

.topbar-navigation {
  padding-right: 18px;
  border-right-color: color-mix(in srgb, var(--marca-beige-calido) 80%, transparent);
}

[data-theme="dark"] .topbar-navigation {
  border-right-color: #17356f;
}

.topnav-item {
  background: transparent;
  color: var(--ink);
  font-family: Lora, Georgia, serif;
  font-size: 15px;
  font-weight: 600;
}

.topnav-item:hover {
  background: color-mix(in srgb, var(--marca-beige) 45%, transparent);
}

[data-theme="dark"] .topnav-item:hover {
  background: rgba(10, 63, 150, 0.35);
}

.topnav-item.active,
[data-theme="dark"] .topnav-item.active {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

.topnav-item.active::after {
  right: 12px;
  bottom: 2px;
  left: 12px;
  height: 3px;
  background: var(--marca-dorado);
}

.topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--marca-marino);
  border-radius: 999px;
  background: transparent;
  color: var(--marca-marino);
  font: 700 14px Inter, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.topbar-cta svg {
  width: 17px;
  height: 17px;
}

.topbar-cta:hover {
  background: var(--marca-marino);
  color: #fff;
}

[data-theme="dark"] .topbar-cta {
  border-color: #5b8ee6;
  color: #e8edf8;
}

[data-theme="dark"] .topbar-cta:hover {
  background: var(--marca-libro);
  border-color: var(--marca-libro);
}

html:not([data-theme="dark"]) body {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(229, 170, 22, 0.16), transparent 62%),
    radial-gradient(900px 500px at 0% 0%, rgba(239, 215, 156, 0.4), transparent 55%),
    var(--bg);
}

html:not([data-theme="dark"]) .topbar-brand strong {
  color: var(--marca-marino);
}

@media (max-width: 1100px) {
  .topbar-cta span {
    display: none;
  }

  .topbar-cta {
    padding: 0 12px;
  }
}

@media (max-width: 900px) {
  .topbar {
    top: 6px;
    margin: 6px 8px 0;
    border-radius: 16px;
  }

  .topbar-brand .topbar-wordmark strong {
    font-size: 16px;
  }

  .topbar-brand-mark,
  [data-theme="dark"] .topbar-brand-mark {
    width: 60px;
    height: 36px;
  }
}

/* Sin sesion no hay notificaciones que mostrar. */
body:not(.is-authed) .notif-wrap {
  display: none;
}

/* Fondo del banner de referencia: columna jonica tenue a la derecha y una ola suave al pie. */
.topbar {
  overflow: hidden;
}

.topbar > * {
  position: relative;
  z-index: 1;
}

.topbar::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='xMidYMax meet'><g fill='%230a3f96' fill-opacity='.10'><rect x='24' y='8' width='72' height='10' rx='3'/><circle cx='22' cy='28' r='13'/><circle cx='98' cy='28' r='13'/><rect x='26' y='16' width='68' height='20' rx='6'/><rect x='34' y='36' width='52' height='64'/></g><g stroke='%23ffffff' stroke-opacity='.55' stroke-width='2'><path d='M46 38v62M60 38v62M74 38v62'/></g><g fill='none' stroke='%230a3f96' stroke-opacity='.18' stroke-width='2'><circle cx='22' cy='28' r='7'/><circle cx='98' cy='28' r='7'/></g></svg>") no-repeat right 365px bottom 0 / 120px 100%,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'><path d='M0 40C120 4 260 4 380 22S560 36 600 40Z' fill='%230a3f96' fill-opacity='.07'/></svg>") no-repeat left 22% bottom 0 / 46% 38%;
}

[data-theme="dark"] .topbar::before {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100' preserveAspectRatio='xMidYMax meet'><g fill='%235b8ee6' fill-opacity='.13'><rect x='24' y='8' width='72' height='10' rx='3'/><circle cx='22' cy='28' r='13'/><circle cx='98' cy='28' r='13'/><rect x='26' y='16' width='68' height='20' rx='6'/><rect x='34' y='36' width='52' height='64'/></g><g stroke='%23051735' stroke-opacity='.5' stroke-width='2'><path d='M46 38v62M60 38v62M74 38v62'/></g></svg>") no-repeat right 365px bottom 0 / 120px 100%,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'><path d='M0 40C120 4 260 4 380 22S560 36 600 40Z' fill='%235b8ee6' fill-opacity='.09'/></svg>") no-repeat left 22% bottom 0 / 46% 38%;
}

@media (max-width: 1100px) {
  .topbar::before {
    display: none;
  }
}

/* Con sesion hay campana y el bloque de acciones es mas ancho: la columna se corre para no quedar bajo el boton. */
body.is-authed .topbar::before {
  background-position: right 440px bottom 0, left 22% bottom 0;
}

/* Fondo del banner: imagen de marca (ola y columna jonica) en lugar del dibujo provisional. */
.topbar::before,
[data-theme="dark"] .topbar::before,
body.is-authed .topbar::before {
  background: url("/assets/topbar-fondo.png?v=1") no-repeat center bottom / 100% 100%;
  opacity: 0.9;
}

[data-theme="dark"] .topbar::before {
  opacity: 0.38;
}

/* Sin deformar: la imagen conserva su proporcion (alto del banner, ancho automatico) y se desvanece hacia la izquierda;
   una ola simple cubre el resto del ancho. */
.topbar::before,
[data-theme="dark"] .topbar::before,
body.is-authed .topbar::before {
  background:
    url("/assets/topbar-fondo.png?v=1") no-repeat right 190px bottom / auto 100%,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'><path d='M0 40C120 4 260 4 380 22S560 36 600 40Z' fill='%23b9c7ee' fill-opacity='.55'/></svg>") no-repeat left 8% bottom 0 / 40% 36%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
}

body.is-authed .topbar::before {
  background-position: right 240px bottom, left 8% bottom 0;
}

/* Banner con esquinas mas rectas. */
.topbar {
  border-radius: 8px;
}

@media (max-width: 900px) {
  .topbar {
    border-radius: 6px;
  }
}

/* Fondo del banner en dos piezas: la ola se estira a lo ancho (no se nota) y la columna conserva su proporcion. */
.topbar::before,
[data-theme="dark"] .topbar::before,
body.is-authed .topbar::before {
  background: url("/assets/topbar-ola.png?v=1") no-repeat center bottom / 100% 70%;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0.16;
  filter: none;
}

.topbar::after {
  display: block;
  position: absolute;
  top: 8px;
  right: 405px;
  bottom: auto;
  left: auto;
  z-index: 0;
  width: 44px;
  height: 96px;
  content: "";
  pointer-events: none;
  background: url("/assets/topbar-columna.png?v=1") no-repeat center top / contain;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 85%);
}

body.is-authed .topbar::after {
  right: 455px;
}

/* En oscuro las piezas azul marino se aclaran para verse sobre el fondo marino. */
[data-theme="dark"] .topbar::before,
[data-theme="dark"] .topbar::after {
  filter: brightness(0) invert(1);
  opacity: 0.12;
}

@media (max-width: 1100px) {
  .topbar::after {
    display: none;
  }
}

/* Columna mas cercana y protagonista: capitel grande ocupando el alto del banner, fuste cortado por el borde inferior. */
.topbar::after {
  top: 2px;
  right: 372px;
  width: 112px;
  height: 230px;
  background-size: 100% auto;
  filter: brightness(2.7) saturate(0.75) drop-shadow(0 0 10px rgba(120, 150, 220, 0.35));
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 34%);
  mask-image: linear-gradient(180deg, #000 18%, transparent 34%);
}

body.is-authed .topbar::after {
  right: 422px;
}

[data-theme="dark"] .topbar::after {
  filter: brightness(2.2) saturate(0.8);
  opacity: 0.32;
}

/* Mas palida (como la referencia) y con espacio propio entre el menu y las acciones. */
.topbar::after {
  right: 417px;
  width: 100px;
  filter: brightness(3.3) saturate(0.45) drop-shadow(0 0 12px rgba(150, 175, 230, 0.4));
  opacity: 0.5;
}

body.is-authed .topbar::after {
  right: 467px;
}

@media (min-width: 1101px) {
  .topbar-nav {
    padding-right: 130px;
  }
}

/* Logo segun el tema: letras azul marino en claro, letras blancas en oscuro (sin pastilla beige). */
.topbar-brand-mark .logo-oscuro,
[data-theme="dark"] .topbar-brand-mark .logo-claro {
  display: none;
}

[data-theme="dark"] .topbar-brand-mark .logo-oscuro {
  display: block;
}

[data-theme="dark"] .topbar-brand-mark {
  width: 84px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Nombre de marca: Playfair Display en ambos temas (antes el claro y el oscuro mostraban fuentes distintas). */
html .topbar-brand .topbar-wordmark strong,
html:not([data-theme="dark"]) .topbar-brand .topbar-wordmark strong {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ====== INICIO (marca JurisprudenciaColombiana.co): portada clara, modulos, valores y pie con ola tricolor ====== */
#home-view {
  max-width: 1320px;
  padding-bottom: 0;
}

.inicio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 4vw, 56px) 0 clamp(28px, 3vw, 44px);
}

.inicio-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  font: 800 12px/1 Inter, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.inicio-kicker::before {
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--marca-dorado);
  content: "";
}

.inicio-hero-copy h1 {
  margin: 22px 0 14px;
  color: var(--ink);
  font: 700 clamp(38px, 4.6vw, 62px)/1.06 "Playfair Display", Georgia, serif;
  letter-spacing: -0.015em;
}

.inicio-marca {
  display: block;
}

.inicio-marca em,
.inicio-footer-logo strong em {
  color: var(--marca-dorado);
  font-style: normal;
}

.inicio-slogan {
  margin: 0 0 14px;
  color: var(--marca-libro);
  font: 600 italic clamp(18px, 1.6vw, 22px)/1.3 "Playfair Display", Georgia, serif;
}

[data-theme="dark"] .inicio-slogan {
  color: #f3bb3a;
}

.inicio-lead {
  max-width: 520px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.inicio-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.inicio-boton-principal,
.inicio-boton-secundario {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font: 700 16px Inter, sans-serif;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.inicio-boton-principal {
  border: 0;
  background: var(--marca-marino);
  color: #fff;
  box-shadow: 0 12px 26px rgba(5, 23, 53, 0.25);
}

.inicio-boton-secundario {
  border: 1.5px solid var(--marca-marino);
  background: transparent;
  color: var(--marca-marino);
}

.inicio-boton-principal:hover,
.inicio-boton-secundario:hover {
  transform: translateY(-1px);
}

.inicio-boton-secundario:hover {
  background: color-mix(in srgb, var(--marca-beige) 40%, transparent);
}

[data-theme="dark"] .inicio-boton-principal {
  background: var(--marca-dorado);
  color: var(--marca-marino);
  box-shadow: 0 12px 26px rgba(229, 170, 22, 0.22);
}

[data-theme="dark"] .inicio-boton-secundario {
  border-color: #5b8ee6;
  color: #e8edf8;
}

[data-theme="dark"] .inicio-boton-secundario:hover {
  background: rgba(10, 63, 150, 0.35);
}

.inicio-boton-principal svg,
.inicio-boton-secundario svg {
  width: 19px;
  height: 19px;
}

.inicio-hero-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(5, 23, 53, 0.18);
}

.inicio-hero-visual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inicio-hero-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(5, 23, 53, 0.35));
  content: "";
}

/* Modulos: cuatro tarjetas con icono, titulo, texto y flecha */
.inicio-modulos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.inicio-modulo {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 8px;
  min-height: 150px;
  padding: 22px 22px 46px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(5, 23, 53, 0.07);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.inicio-modulo:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--marca-dorado) 55%, var(--line));
  box-shadow: 0 16px 36px rgba(5, 23, 53, 0.12);
}

.inicio-modulo-icono {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--marca-beige) 65%, transparent);
  color: var(--marca-marino);
}

[data-theme="dark"] .inicio-modulo-icono {
  background: rgba(229, 170, 22, 0.16);
  color: #f3bb3a;
}

.inicio-modulo-icono svg {
  width: 24px;
  height: 24px;
}

.inicio-modulo strong {
  font: 700 19px/1.2 "Playfair Display", Georgia, serif;
}

.inicio-modulo small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.inicio-modulo-flecha {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 20px;
  height: 20px;
  color: var(--ink);
  transition: transform 0.15s ease;
}

.inicio-modulo:hover .inicio-modulo-flecha {
  transform: translateX(3px);
}

/* Valores (como funciona): tres columnas separadas por lineas verticales */
.inicio-valores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 40px 0 0;
}

.inicio-valor {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 6px 28px;
  text-align: center;
}

.inicio-valor + .inicio-valor {
  border-left: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}

.inicio-valor svg {
  width: 30px;
  height: 30px;
  color: var(--marca-libro);
}

[data-theme="dark"] .inicio-valor svg {
  color: #5b8ee6;
}

.inicio-valor strong {
  color: var(--ink);
  font: 700 22px/1.2 "Playfair Display", Georgia, serif;
}

.inicio-valor span {
  max-width: 320px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.inicio-recomendaciones {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 36px auto 0;
  padding: 16px 20px;
  max-width: 980px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--marca-beige) 32%, transparent);
  color: var(--muted);
}

[data-theme="dark"] .inicio-recomendaciones {
  background: rgba(10, 63, 150, 0.22);
}

.inicio-recomendaciones svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--marca-dorado);
}

.inicio-recomendaciones p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.inicio-recomendaciones strong {
  color: var(--ink);
}

/* Pie: integrado al fondo (sin linea separadora), con la ola tricolor arriba */
.inicio-footer {
  position: relative;
  width: 100vw;
  margin: 48px calc(50% - 50vw) 0;
  color: var(--muted);
}

.inicio-footer-ola {
  height: clamp(70px, 8vw, 130px);
  background: url("/assets/footer-ola.png?v=1") no-repeat center bottom / 100% 100%;
}

.inicio-footer-cuerpo,
.inicio-footer-base {
  background: var(--marca-marino);
}

[data-theme="dark"] .inicio-footer-cuerpo,
[data-theme="dark"] .inicio-footer-base {
  background: #030f24;
}

.inicio-footer-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 36px max(36px, calc(50vw - 624px)) 28px;
  color: #b9c4da;
}

.inicio-footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inicio-footer-logo img {
  width: 64px;
  height: auto;
}

/* El pie siempre es azul marino: va el logo de letras blancas en ambos temas. */
.inicio-footer-logo .logo-claro {
  display: none;
}

.inicio-footer-logo .logo-oscuro {
  display: block;
}

.inicio-footer-logo strong {
  color: #fff;
  font: 700 20px "Playfair Display", Georgia, serif;
}

.inicio-footer-slogan {
  margin: 14px 0 6px;
  color: #f3bb3a;
  font: 600 italic 17px "Playfair Display", Georgia, serif;
}

.inicio-footer-marca p:last-child {
  max-width: 340px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.inicio-footer-columna {
  display: grid;
  align-content: start;
  gap: 10px;
}

.inicio-footer-columna h3 {
  margin: 0 0 4px;
  color: #fff;
  font: 800 12px Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.inicio-footer-columna button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: #b9c4da;
  font: 500 14px Inter, sans-serif;
  text-align: left;
  cursor: pointer;
}

.inicio-footer-columna button:hover {
  color: #f3bb3a;
}

.inicio-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px max(36px, calc(50vw - 624px)) 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #8e9bb8;
  font-size: 13px;
}

/* Dialogo legal */
.legal-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 28px 28px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(5, 23, 53, 0.3);
}

.legal-dialog::backdrop {
  background: rgba(5, 23, 53, 0.45);
}

.legal-dialog h2 {
  margin: 0 0 12px;
  font: 700 24px "Playfair Display", Georgia, serif;
}

.legal-dialog p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.legal-dialog-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
}

.legal-dialog-cerrar button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.legal-dialog-cerrar button:hover {
  background: var(--surface-2);
}

@media (max-width: 1100px) {
  .inicio-modulos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inicio-footer-cuerpo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inicio-footer-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .inicio-hero {
    grid-template-columns: 1fr;
  }

  .inicio-modulos,
  .inicio-valores {
    grid-template-columns: 1fr;
  }

  .inicio-valor + .inicio-valor {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    padding-top: 20px;
    margin-top: 14px;
  }

  .inicio-footer-cuerpo {
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }

  .inicio-footer-base {
    padding-inline: 16px;
  }
}

/* Las tarjetas de modulos ocultas por permisos (p. ej. Providencias sin sesion) no dejan hueco. */
@media (min-width: 761px) {
  .inicio-modulos {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}

/* Celular: en la barra solo cabe el logo; el nombre completo ya aparece en la portada y en el pie. */
@media (max-width: 560px) {
  .topbar-brand > .topbar-wordmark {
    display: none;
  }

  .topbar-brand {
    min-width: 0;
  }
}

/* Celular sin sesion: el tema y "Iniciar sesion" deben verse (antes quedaban ocultos y no habia como entrar). */
@media (max-width: 900px) {
  .top-actions .theme-toggle {
    display: inline-grid !important;
    width: 38px;
    height: 38px;
  }

  body:not(.is-authed) .top-user-meta {
    display: block;
  }

  body:not(.is-authed) .top-user-meta strong {
    font-size: 13px;
    white-space: nowrap;
  }

  body:not(.is-authed) .profile-chevron {
    display: none;
  }
}

/* ====== INICIO v2: video de fondo de lado a lado, tarjetas expandibles y movimiento ====== */
.inicio-escenario {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin: calc(-32px - 96px) calc(50% - 50vw) 0;
  padding: calc(96px + clamp(28px, 5vw, 72px)) 0 clamp(36px, 4vw, 56px);
  overflow: hidden;
}

.inicio-escenario-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
  animation: escenario-acercar 28s ease-in-out infinite alternate;
}

.inicio-escenario-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(241, 226, 193, 0.97) 0%, rgba(241, 226, 193, 0.9) 34%, rgba(241, 226, 193, 0.45) 62%, rgba(241, 226, 193, 0.12) 100%),
    linear-gradient(180deg, rgba(241, 226, 193, 0.5) 0%, transparent 22%, transparent 48%, var(--bg) 97%);
}

[data-theme="dark"] .inicio-escenario-velo {
  background:
    linear-gradient(90deg, rgba(5, 23, 53, 0.97) 0%, rgba(5, 23, 53, 0.88) 34%, rgba(5, 23, 53, 0.5) 62%, rgba(5, 23, 53, 0.2) 100%),
    linear-gradient(180deg, rgba(5, 23, 53, 0.55) 0%, transparent 22%, transparent 48%, var(--bg) 97%);
}

.inicio-escenario-contenido {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 36px;
}

.inicio-hero {
  display: block;
  padding: 0 0 clamp(40px, 6vw, 88px);
}

.inicio-hero-copy {
  max-width: 640px;
}

.inicio-slogan span {
  display: inline-block;
  animation: slogan-palabra 0.7s ease both;
}

.inicio-slogan span:nth-child(2) { animation-delay: 0.25s; }
.inicio-slogan span:nth-child(3) { animation-delay: 0.5s; }

.inicio-kicker::before {
  animation: kicker-linea 0.9s ease both 0.2s;
  transform-origin: left center;
}

/* Tarjetas de modulos: vidrio sobre el video, se expanden al clic */
.inicio-modulos {
  align-items: start;
}

.inicio-modulo {
  display: block;
  min-height: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  cursor: default;
  overflow: hidden;
}

[data-theme="dark"] .inicio-modulo {
  background: rgba(10, 32, 72, 0.72);
}

.inicio-modulo:hover {
  transform: translateY(-3px);
}

.inicio-modulo-cabeza {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 8px;
  width: 100%;
  min-height: 140px;
  padding: 22px 22px 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.inicio-modulo-cabeza strong {
  font: 700 19px/1.2 "Playfair Display", Georgia, serif;
}

.inicio-modulo-cabeza small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.inicio-modulo .inicio-modulo-flecha {
  transition: transform 0.25s ease;
}

.inicio-modulo:hover .inicio-modulo-flecha {
  transform: translateY(2px);
}

.inicio-modulo.abierta .inicio-modulo-flecha {
  transform: rotate(180deg);
}

.inicio-modulo-detalle {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.inicio-modulo-detalle > * {
  overflow: hidden;
}

.inicio-modulo.abierta .inicio-modulo-detalle {
  grid-template-rows: 1fr;
}

.inicio-modulo-detalle p {
  min-height: 0;
  margin: 0;
  padding: 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.inicio-modulo-detalle .inicio-modulo-ir {
  min-height: 0;
}

.inicio-modulo.abierta .inicio-modulo-ir {
  margin: 14px 22px 20px;
}

.inicio-modulo-ir {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 8px;
  margin: 0 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--marca-libro);
  font: 700 14px Inter, sans-serif;
  cursor: pointer;
}

[data-theme="dark"] .inicio-modulo-ir {
  color: #f3bb3a;
}

.inicio-modulo-ir svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.inicio-modulo-ir:hover svg {
  transform: translateX(3px);
}

/* Providencias: sin sesion se ve la informacion; con sesion sin permiso de revision, la tarjeta no aparece. */
body.is-authed:not(.can-review) .inicio-modulo-revision {
  display: none;
}

/* Aparicion al entrar en pantalla */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease var(--retraso, 0ms), transform 0.7s ease var(--retraso, 0ms);
}

.revelar.visible {
  opacity: 1;
  transform: none;
}

.inicio-modulo.revelar.visible:hover {
  transform: translateY(-3px);
}

/* Banner dinamico: la columna flota suave y la ola se desplaza */
.topbar::after {
  animation: columna-flotar 6s ease-in-out infinite;
}

.topbar::before {
  animation: ola-deriva 18s ease-in-out infinite alternate;
}

.inicio-footer-ola {
  background-size: 110% 100%;
  animation: ola-deriva-pie 16s ease-in-out infinite alternate;
}

@keyframes escenario-acercar {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes slogan-palabra {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes kicker-linea {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes columna-flotar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes ola-deriva {
  from { background-position: 0% bottom; }
  to { background-position: 100% bottom; }
}

@keyframes ola-deriva-pie {
  from { background-position: 0% bottom; }
  to { background-position: 100% bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .inicio-escenario-video,
  .inicio-slogan span,
  .inicio-kicker::before,
  .topbar::after,
  .topbar::before,
  .inicio-footer-ola {
    animation: none;
  }

  .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .inicio-escenario {
    margin-top: calc(-32px - 84px);
    padding-top: calc(84px + 24px);
  }

  .inicio-escenario-velo {
    background:
      linear-gradient(180deg, rgba(241, 226, 193, 0.92) 0%, rgba(241, 226, 193, 0.8) 55%, var(--bg) 100%);
  }

  [data-theme="dark"] .inicio-escenario-velo {
    background:
      linear-gradient(180deg, rgba(5, 23, 53, 0.9) 0%, rgba(5, 23, 53, 0.8) 55%, var(--bg) 100%);
  }

  .inicio-escenario-contenido {
    padding: 0 16px;
  }
}

.topbar::before,
[data-theme="dark"] .topbar::before,
body.is-authed .topbar::before {
  background-size: 115% 70%;
}

/* El detalle tiene dos filas (texto y boton): ambas se pliegan hasta abrir la tarjeta. */
.inicio-modulo-detalle {
  grid-template-rows: 0fr 0fr;
}

.inicio-modulo.abierta .inicio-modulo-detalle {
  grid-template-rows: 1fr 1fr;
}

/* La ola tricolor queda fija al pie de la pantalla mientras se recorre el inicio y, al llegar al pie, se apoya sobre el. */
.inicio-footer-ola {
  position: sticky;
  bottom: 0;
  z-index: 5;
  width: 100vw;
  margin: 48px calc(50% - 50vw) 0;
  pointer-events: none;
}

.inicio-footer {
  margin-top: 0;
}

/* Tarjetas de modulos del mismo tamaño cerradas (la descripcion mas larga ocupa tres lineas). */
.inicio-modulo-cabeza {
  min-height: 176px;
}

@media (min-width: 761px) and (max-width: 1220px) {
  .inicio-modulo-cabeza {
    min-height: 204px;
  }
}

/* Pie segun el tema: beige con tinta azul marino en claro, azul marino en oscuro. Sin linea entre la ola y el pie. */
.inicio-footer-ola {
  margin-bottom: -3px;
}

html:not([data-theme="dark"]) .inicio-footer-cuerpo,
html:not([data-theme="dark"]) .inicio-footer-base {
  background: #ead6ad;
  color: #3d4a63;
}

html:not([data-theme="dark"]) .inicio-footer-base {
  border-top-color: rgba(5, 23, 53, 0.1);
  color: #5d6a82;
}

html:not([data-theme="dark"]) .inicio-footer-logo strong,
html:not([data-theme="dark"]) .inicio-footer-columna h3 {
  color: var(--marca-marino);
}

html:not([data-theme="dark"]) .inicio-footer-columna button {
  color: #3d4a63;
}

html:not([data-theme="dark"]) .inicio-footer-columna button:hover {
  color: var(--marca-libro);
}

html:not([data-theme="dark"]) .inicio-footer-slogan {
  color: var(--marca-libro);
}

html:not([data-theme="dark"]) .inicio-footer-logo .logo-claro {
  display: block;
}

html:not([data-theme="dark"]) .inicio-footer-logo .logo-oscuro {
  display: none;
}

/* ====== Barra lateral con la marca JC.ai: beige en claro, azul marino en oscuro ====== */
.sidebar {
  background: linear-gradient(180deg, #f7ecd3 0%, #f1e2c1 60%, #ead6ad 100%);
  color: var(--marca-marino);
  border-right: 1px solid var(--marca-beige-calido);
}

[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #0a2048 0%, #051735 60%, #030f24 100%);
  color: #e8edf8;
  border-right-color: #17356f;
}

.brand-seal.brand-logo {
  width: 64px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-logo .logo-oscuro,
[data-theme="dark"] .brand-logo .logo-claro {
  display: none;
}

[data-theme="dark"] .brand-logo .logo-oscuro {
  display: block;
}

.sidebar .brand-copy strong {
  color: var(--marca-marino);
  font: 700 28px/1 "Playfair Display", Georgia, serif;
}

.sidebar .brand-copy strong em {
  color: var(--marca-dorado);
  font-style: normal;
}

.sidebar .brand-copy span {
  margin-top: 4px;
  color: #5d6a82;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

[data-theme="dark"] .sidebar .brand-copy strong {
  color: #fff;
}

[data-theme="dark"] .sidebar .brand-copy span {
  color: #9fb0cf;
}

.sidebar .sidebar-close {
  border-color: var(--marca-beige-calido);
  background: rgba(255, 255, 255, 0.5);
  color: var(--marca-marino);
}

[data-theme="dark"] .sidebar .sidebar-close {
  border-color: #17356f;
  background: rgba(255, 255, 255, 0.06);
  color: #e8edf8;
}

.sidebar .nav-item {
  color: #2b3955;
  font-family: Inter, sans-serif;
}

.sidebar .nav-glyph {
  background: rgba(5, 23, 53, 0.07);
  color: var(--marca-marino);
}

.sidebar .nav-item small {
  background: rgba(5, 23, 53, 0.08);
  color: #5d6a82;
}

.sidebar .nav-item:not(.locked):hover {
  background: rgba(239, 215, 156, 0.6);
}

.sidebar .nav-item.active {
  background: var(--marca-marino);
  color: #fff;
  box-shadow: 0 10px 24px rgba(5, 23, 53, 0.22);
}

.sidebar .nav-item.active .nav-glyph {
  background: rgba(229, 170, 22, 0.22);
  color: #f3bb3a;
}

[data-theme="dark"] .sidebar .nav-item {
  color: #d3ddf0;
}

[data-theme="dark"] .sidebar .nav-glyph,
[data-theme="dark"] .sidebar .nav-item small {
  background: rgba(255, 255, 255, 0.08);
  color: #c4d4ee;
}

[data-theme="dark"] .sidebar .nav-item:not(.locked):hover {
  background: rgba(10, 63, 150, 0.4);
}

[data-theme="dark"] .sidebar .nav-item.active {
  background: var(--marca-dorado);
  color: var(--marca-marino);
  box-shadow: 0 10px 24px rgba(229, 170, 22, 0.2);
}

[data-theme="dark"] .sidebar .nav-item.active .nav-glyph {
  background: rgba(5, 23, 53, 0.15);
  color: var(--marca-marino);
}

.sidebar .sidebar-footer {
  border-top-color: var(--marca-beige-calido);
}

[data-theme="dark"] .sidebar .sidebar-footer {
  border-top-color: #17356f;
}

/* ====== Ajuste de tonos ======
   Oscuro: el azul marino mas profundo como base (#030b18 / #051735).
   Claro: los botones azules usan el azul mas claro de la marca (azul del libro #0A3F96). */
[data-theme="dark"] {
  --bg: #030b18;
  --panel: #051735;
  --surface-2: #08204a;
  --line: #10295a;
}

[data-theme="dark"] .topbar {
  border-color: #10295a;
  background: color-mix(in srgb, #051735 94%, transparent);
}

[data-theme="dark"] .inicio-escenario-velo {
  background:
    linear-gradient(90deg, rgba(3, 11, 24, 0.97) 0%, rgba(3, 11, 24, 0.9) 34%, rgba(3, 11, 24, 0.55) 62%, rgba(3, 11, 24, 0.25) 100%),
    linear-gradient(180deg, rgba(3, 11, 24, 0.6) 0%, transparent 22%, transparent 48%, var(--bg) 97%);
}

[data-theme="dark"] .inicio-modulo {
  background: rgba(5, 23, 53, 0.78);
}

[data-theme="dark"] .inicio-footer-cuerpo,
[data-theme="dark"] .inicio-footer-base {
  background: #010714;
}

[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #051735 0%, #030f24 60%, #030b18 100%);
  border-right-color: #10295a;
}

@media (max-width: 900px) {
  [data-theme="dark"] .inicio-escenario-velo {
    background: linear-gradient(180deg, rgba(3, 11, 24, 0.92) 0%, rgba(3, 11, 24, 0.82) 55%, var(--bg) 100%);
  }
}

html:not([data-theme="dark"]) .inicio-boton-principal {
  background: var(--marca-libro);
  box-shadow: 0 12px 26px rgba(10, 63, 150, 0.28);
}

html:not([data-theme="dark"]) .inicio-boton-principal:hover {
  background: #0b4fbd;
}

html:not([data-theme="dark"]) .inicio-boton-secundario,
html:not([data-theme="dark"]) .topbar-cta {
  border-color: var(--marca-libro);
  color: var(--marca-libro);
}

html:not([data-theme="dark"]) .topbar-cta:hover {
  background: var(--marca-libro);
  color: #fff;
}

html:not([data-theme="dark"]) .sidebar .nav-item.active {
  background: var(--marca-libro);
  box-shadow: 0 10px 24px rgba(10, 63, 150, 0.25);
}

/* La ola ya no queda anclada a la pantalla: cierra la pagina, al final del pie y sobre su mismo color. */
.inicio-footer-ola {
  position: static;
  width: auto;
  margin: 0;
  background-color: #010714;
}

html:not([data-theme="dark"]) .inicio-footer-ola {
  background-color: #ead6ad;
}

.inicio-footer {
  margin-top: 56px;
}

/* Pie compacto: la ola va detras de la franja inferior (el texto puede quedar encima). */
.inicio-footer {
  position: relative;
  margin-top: 40px;
  background: #010714;
}

html:not([data-theme="dark"]) .inicio-footer {
  background: #ead6ad;
}

.inicio-footer-cuerpo,
.inicio-footer-base,
html:not([data-theme="dark"]) .inicio-footer-cuerpo,
html:not([data-theme="dark"]) .inicio-footer-base,
[data-theme="dark"] .inicio-footer-cuerpo,
[data-theme="dark"] .inicio-footer-base {
  position: relative;
  z-index: 1;
  background: transparent;
}

.inicio-footer-cuerpo {
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 14px;
}

.inicio-footer-base {
  padding-top: 10px;
  padding-bottom: 14px;
  border-top: 0;
}

.inicio-footer-slogan {
  margin: 8px 0 4px;
}

.inicio-footer-columna {
  gap: 7px;
}

.inicio-footer .inicio-footer-ola,
html:not([data-theme="dark"]) .inicio-footer .inicio-footer-ola {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: clamp(54px, 6vw, 96px);
  background-color: transparent;
}

.inicio-footer-base span {
  text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg);
}

/* Aviso legal junto a la marca (no sobre la bandera) y contenido mas ancho en pantallas grandes. */
.inicio-footer-marca p.inicio-footer-aviso,
.inicio-footer-marca p:last-child {
  max-width: 380px;
  margin: 6px 0 0;
  font-size: 13px;
  font-style: italic;
  opacity: 0.85;
}

.inicio-footer-marca p:not(.inicio-footer-slogan):not(.inicio-footer-aviso) {
  max-width: 380px;
  margin: 0;
  font-size: 14px;
  font-style: normal;
  opacity: 1;
  line-height: 1.55;
}

#home-view,
.inicio-escenario-contenido {
  max-width: 1800px;
}

.inicio-escenario-contenido {
  padding-inline: clamp(24px, 4vw, 72px);
}

.inicio-footer-cuerpo,
.inicio-footer-base {
  padding-left: max(clamp(24px, 4vw, 72px), calc(50vw - 900px + clamp(24px, 4vw, 72px)));
  padding-right: max(clamp(24px, 4vw, 72px), calc(50vw - 900px + clamp(24px, 4vw, 72px)));
}

.inicio-footer-base {
  padding-bottom: 22px;
}

@media (min-width: 1500px) {
  .inicio-modulos {
    gap: 28px;
  }

  .inicio-hero-copy {
    max-width: 720px;
  }

  .inicio-hero-copy h1 {
    font-size: 68px;
  }

  .inicio-recomendaciones {
    max-width: 1200px;
  }
}

/* ====== Fondo del inicio: video del mapa de Colombia ======
   Oscuro: el video tal cual, fundido con el azul marino (screen elimina su fondo negro).
   Claro: el video invertido (fondo claro, mapa azul) y multiplicado sobre el beige. */
.inicio-escenario-video {
  object-position: 78% 50%;
  animation: none;
  mix-blend-mode: screen;
  opacity: 0.95;
}

html:not([data-theme="dark"]) .inicio-escenario-video {
  filter: invert(1) hue-rotate(180deg) saturate(1.3) brightness(1.04);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.inicio-escenario {
  background: var(--bg);
}

.inicio-escenario-velo,
[data-theme="dark"] .inicio-escenario-velo {
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 30%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 50%, transparent) 0%, transparent 18%, transparent 62%, var(--bg) 98%);
}

@media (max-width: 900px) {
  .inicio-escenario-velo,
  [data-theme="dark"] .inicio-escenario-velo {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 55%, var(--bg) 100%);
  }
}

html:not([data-theme="dark"]) .inicio-escenario-video {
  filter: invert(1) hue-rotate(180deg) saturate(1.1) brightness(1.18) contrast(0.78);
  opacity: 0.62;
}

/* Un video por tema: el claro (fondo blanco, mapa azul marino) se multiplica sobre el beige sin filtros. */
.inicio-escenario-video.video-claro,
[data-theme="dark"] .inicio-escenario-video.video-claro {
  display: none;
}

html:not([data-theme="dark"]) .inicio-escenario-video.video-oscuro {
  display: none;
}

html:not([data-theme="dark"]) .inicio-escenario-video.video-claro {
  display: block;
  filter: none;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

html:not([data-theme="dark"]) .inicio-escenario-video.video-claro {
  opacity: 0.42;
}

/* Derechos centrados en la franja inferior, sobre la parte baja de la ola. */
.inicio-footer-base {
  justify-content: center;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 12px;
}

/* Modo claro: vuelve el video del mapa invertido (un solo video para ambos temas). */
html:not([data-theme="dark"]) .inicio-escenario-video.video-oscuro {
  display: block;
}

/* Pie mas bajo: menos relleno, ola mas delgada y los derechos pegados al contenido. */
.inicio-footer-cuerpo {
  padding-top: 20px;
  padding-bottom: 0;
}

.inicio-footer-base {
  padding-top: 0;
  padding-bottom: 10px;
  margin-top: -6px;
}

.inicio-footer .inicio-footer-ola,
html:not([data-theme="dark"]) .inicio-footer .inicio-footer-ola {
  height: clamp(40px, 4.2vw, 68px);
}

/* Los derechos suben al hueco bajo las columnas centrales (no chocan con la columna de la marca). */
@media (min-width: 1500px) {
  .inicio-footer-base {
    margin-top: -40px;
    padding-bottom: 26px;
  }
}

/* Modo claro: la pagina en crema claro y el banner en beige (se invierten los dos tonos). */
:root:not([data-theme="dark"]) {
  --bg: #fbf5e8;
  --panel: #fffdf8;
  --surface-2: #f4e6c6;
}

html:not([data-theme="dark"]) body {
  background: var(--bg);
}

html:not([data-theme="dark"]) .topbar {
  border-color: #e2c993;
  background: color-mix(in srgb, #efdcaf 95%, transparent);
  box-shadow: 0 14px 34px rgba(5, 23, 53, 0.1);
}

html:not([data-theme="dark"]) .topbar {
  border-color: #ecdcb6;
  background: color-mix(in srgb, #f7ecd4 95%, transparent);
}

/* Chat con esquinas mas rectas (se conservan redondos solo los avatares). */
#ai-view .ai-conversation-layout,
#ai-view .conversation-main {
  border-radius: 6px;
}

#ai-view .composer {
  border-radius: 8px;
}

#ai-view .new-chat-button,
#ai-view .send-button,
#ai-view .history-collapse-button,
#ai-view .mi-consumo-icono,
#ai-view .history-note,
#ai-view .bubble {
  border-radius: 6px;
}

#ai-view input,
#ai-view textarea,
#ai-view select,
#ai-view button:not(.new-chat-button):not(.send-button),
#ai-view .history-empty {
  border-radius: 4px;
}

#ai-view .history-head .new-chat-button,
[data-theme="dark"] #ai-view .history-head .new-chat-button,
#ai-view .composer .send-button {
  border-radius: 6px;
}

/* Con sesion (campana y perfil) la columna del banner se corre mas para no quedar bajo "Consultar con IA". */
body.is-authed .topbar::after {
  right: 530px;
}

/* ====== Chat: barra de acciones bajo la respuesta y caja de consulta con lupa ====== */
.message-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.accion-mensaje {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.accion-mensaje:hover {
  border-color: color-mix(in srgb, var(--marca-dorado) 60%, var(--line));
  background: var(--surface-2);
}

.accion-mensaje svg {
  width: 16px;
  height: 16px;
}

.message-acciones-separador {
  width: 1px;
  height: 24px;
  margin: 0 8px;
  background: var(--line);
}

.message-acciones .feedback-panel {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Al abrir "explicar" o "Corregir" el formulario ocupa todo el ancho bajo la barra. */
.message-acciones .feedback-panel:has(.correction-box) {
  flex-basis: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.feedback-pregunta {
  margin-right: 4px;
  color: var(--ink);
  font: 600 13px Inter, sans-serif;
}

.message-acciones .feedback-panel button.feedback-icono {
  justify-content: center;
  width: 38px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(5, 23, 53, 0.08);
}

.message-acciones .feedback-panel button.feedback-icono svg {
  width: 19px;
  height: 19px;
}

.message-acciones .feedback-panel button.good:hover {
  color: var(--green-500);
}

.message-acciones .feedback-panel button.bad:hover {
  color: var(--red-500);
}

.message-acciones .feedback-panel button.feedback-corregir {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 600 12px Inter, sans-serif;
}

.message-acciones .feedback-panel button.feedback-corregir:hover {
  color: var(--ink);
}

/* Caja de consulta: lupa a la izquierda, borde suave y el boton de enviar dorado */
#ai-view .composer-input {
  display: flex;
  align-items: center;
}

#ai-view .composer-lupa {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0 4px 0 12px;
  color: var(--ink);
  opacity: 0.75;
}

#ai-view .composer {
  border: 1.5px solid color-mix(in srgb, var(--marca-beige-calido) 85%, var(--marca-dorado));
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(5, 23, 53, 0.06);
}

#ai-view .composer:focus-within {
  border-color: var(--marca-dorado);
  box-shadow: 0 0 0 3px rgba(229, 170, 22, 0.18), 0 8px 22px rgba(5, 23, 53, 0.06);
}

#ai-view .composer .send-button,
[data-theme="dark"] #ai-view .composer .send-button {
  width: 48px;
  min-width: 48px;
  height: 40px;
  border-radius: 6px;
  background: var(--marca-dorado);
  color: var(--marca-marino);
  box-shadow: 0 6px 16px rgba(229, 170, 22, 0.3);
}

[data-theme="dark"] #ai-view .composer {
  border-color: #10295a;
}

[data-theme="dark"] #ai-view .composer:focus-within {
  border-color: var(--marca-dorado);
}

#ai-view .composer textarea,
#ai-view .composer textarea:focus {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* Con sesion el banner tiene mas botones: en pantallas medianas la columna se oculta para no montarse en el menu. */
@media (max-width: 1700px) {
  body.is-authed .topbar::after {
    display: none;
  }
}

/* ====== Modo claro totalmente claro: blanco como base y el beige solo como apoyo ====== */
:root:not([data-theme="dark"]) {
  --bg: #fdfcf9;
  --panel: #ffffff;
  --surface-2: #f8f0dd;
  --line: #eee0c0;
}

html:not([data-theme="dark"]) .topbar {
  border-color: #eee0c0;
  background: color-mix(in srgb, #ffffff 94%, transparent);
  box-shadow: 0 10px 30px rgba(5, 23, 53, 0.07);
}

html:not([data-theme="dark"]) .sidebar {
  background: #ffffff;
  border-right: 1px solid #eee0c0;
}

html:not([data-theme="dark"]) .sidebar .nav-glyph {
  background: #f8f0dd;
}

html:not([data-theme="dark"]) .sidebar .nav-item:not(.locked):hover {
  background: #fbf4e4;
}

html:not([data-theme="dark"]) .sidebar .sidebar-footer {
  border-top-color: #eee0c0;
}

html:not([data-theme="dark"]) .sidebar .sidebar-close {
  border-color: #eee0c0;
  background: #fbf4e4;
}

html:not([data-theme="dark"]) .inicio-modulo {
  background: color-mix(in srgb, #ffffff 88%, transparent);
  border-color: #eee0c0;
}

html:not([data-theme="dark"]) .inicio-modulo-icono {
  background: #f8ecd0;
}

html:not([data-theme="dark"]) .inicio-recomendaciones {
  background: #fbf4e4;
}

html:not([data-theme="dark"]) .inicio-footer {
  background: #f8f0dd;
}

/* ====== Modelo: boton con icono (estilo ChatGPT) junto al consumo, bajo la caja de texto ====== */
.composer-avisos .provider-picker {
  position: relative;
  display: inline-block;
  margin-left: auto;
}

.composer-avisos .provider-picker small {
  display: block;
  max-width: none;
}

.provider-select-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.modelo-boton {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.modelo-boton svg {
  width: 17px;
  height: 17px;
}

.modelo-boton:hover,
.modelo-boton[aria-expanded="true"] {
  border-color: var(--marca-dorado);
  color: var(--marca-libro);
}

[data-theme="dark"] .modelo-boton:hover,
[data-theme="dark"] .modelo-boton[aria-expanded="true"] {
  color: #f3bb3a;
}

/* Texto al pasar el mouse sobre el icono */
.modelo-boton::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 50;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--marca-marino);
  color: #fff;
  font: 600 12px Inter, sans-serif;
  white-space: nowrap;
  content: attr(data-tooltip);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.modelo-boton:hover::after,
.modelo-boton:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.modelo-boton[aria-expanded="true"]::after {
  opacity: 0;
}

.modelo-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 45;
  width: min(340px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(5, 23, 53, 0.18);
}

.modelo-menu-titulo,
.modelo-menu-grupo {
  padding: 6px 10px 4px;
  color: var(--muted);
  font: 800 11px Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modelo-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.modelo-opcion:hover:not(:disabled) {
  background: var(--surface-2);
}

.modelo-opcion:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modelo-opcion-texto {
  display: grid;
  gap: 2px;
}

.modelo-opcion strong {
  font: 700 14px Inter, sans-serif;
}

.modelo-opcion small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.modelo-opcion svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--marca-dorado);
}

.modelo-menu #provider-usage {
  margin: 6px 10px 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  white-space: normal;
}

/* Fila bajo la caja de texto: compacta, en una linea */
#ai-view .composer-avisos {
  flex-wrap: nowrap;
  gap: 8px;
  margin: 4px 4px 0;
}

#ai-view .modelo-aviso {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ai-view .mi-consumo-icono {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

/* Caja de texto mas abajo y con esquinas mas curvas */
#ai-view .composer {
  border-radius: 16px;
  margin-top: 10px;
}

#ai-view .composer .send-button,
[data-theme="dark"] #ai-view .composer .send-button {
  border-radius: 12px;
}

.modelo-opcion,
.modelo-opcion small,
.modelo-opcion strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ====== Chat estilo ChatGPT: sin bordes, conversacion centrada y pregunta en caja ====== */
#ai-view .conversation-main,
#ai-view .ai-conversation-layout {
  border: 0;
  box-shadow: none;
}

#ai-view .messages {
  padding: 24px clamp(16px, 4vw, 48px);
}

#ai-view .messages > .message,
#ai-view .chat-bottom > * {
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
}

#ai-view .message.user,
#ai-view .message.assistant {
  align-self: center;
  flex-direction: row;
  max-width: 920px;
  margin-inline: auto;
}

#ai-view .message.user .bubble {
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  background: #eef1f6;
  color: var(--ink);
  font-weight: 500;
}

[data-theme="dark"] #ai-view .message.user .bubble {
  background: #0d2552;
}

#ai-view .message.user .message-time {
  text-align: left;
}

#ai-view .message-avatar {
  width: 34px;
  height: 34px;
  box-shadow: none;
}

#ai-view .message.user .message-avatar {
  background: linear-gradient(135deg, #5b7fe0, var(--marca-libro));
  color: #fff;
  font: 700 13px Inter, sans-serif;
}

#ai-view .message.assistant .message-avatar {
  width: 40px;
  height: 40px;
  background: #fbefd2;
  color: #b07a06;
}

[data-theme="dark"] #ai-view .message.assistant .message-avatar {
  background: rgba(229, 170, 22, 0.16);
  color: #f3bb3a;
}

#ai-view .chat-bottom {
  padding: 6px clamp(16px, 4vw, 48px) 14px;
}

/* ====== Guardados ====== */
body:not(.is-authed) .solo-con-sesion {
  display: none !important;
}

.guardar-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 26px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(5, 23, 53, 0.3);
}

.guardar-dialog::backdrop {
  background: rgba(5, 23, 53, 0.45);
}

.guardar-dialog h2 {
  margin: 0 0 6px;
  font: 700 22px "Playfair Display", Georgia, serif;
}

.guardar-dialog-ayuda {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}

.guardar-dialog-opciones {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.guardar-opcion,
.guardados-coleccion {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: 600 14px Inter, sans-serif;
  text-align: left;
  cursor: pointer;
}

.guardar-opcion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.guardar-opcion svg,
.guardados-coleccion svg {
  width: 18px;
  height: 18px;
  color: var(--marca-dorado);
}

.guardar-opcion small,
.guardados-coleccion small {
  color: var(--muted);
  font-size: 12px;
}

.guardar-opcion.elegida,
.guardados-coleccion.activa {
  border-color: var(--marca-dorado);
  background: color-mix(in srgb, var(--marca-beige) 30%, var(--panel));
}

.guardar-dialog-nueva,
.guardados-nueva-coleccion {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.guardar-dialog-nueva input,
.guardados-nueva-coleccion input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: 14px Inter, sans-serif;
}

.guardar-dialog-nueva button,
.guardados-nueva-coleccion button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
}

.guardar-dialog-nueva svg,
.guardados-nueva-coleccion svg {
  width: 16px;
  height: 16px;
}

.guardados-error {
  margin: 8px 0 0;
  color: var(--red-500);
  font-size: 13px;
}

.guardar-dialog-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.guardar-dialog-cancelar,
.guardar-dialog-confirmar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  font: 700 14px Inter, sans-serif;
  cursor: pointer;
}

.guardar-dialog-cancelar {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}

.guardar-dialog-confirmar {
  border: 0;
  background: var(--marca-dorado);
  color: var(--marca-marino);
}

.guardar-dialog-confirmar svg {
  width: 17px;
  height: 17px;
}

#guardados-view {
  max-width: 1500px;
}

.guardados-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.guardados-colecciones {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 8px;
}

.guardados-colecciones-cabeza h2 {
  margin: 0;
  font: 700 26px "Playfair Display", Georgia, serif;
}

.guardados-colecciones-cabeza small {
  color: var(--muted);
}

.guardados-lista-colecciones {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.guardados-contenido-cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.guardados-contenido-cabeza h1 {
  margin: 0;
  font: 700 30px "Playfair Display", Georgia, serif;
}

.guardados-contenido-cabeza small {
  color: var(--muted);
}

.guardados-borrar-coleccion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--red-500);
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
}

.guardados-borrar-coleccion svg {
  width: 16px;
  height: 16px;
}

.guardados-elementos {
  display: grid;
  gap: 16px;
}

.guardado {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(5, 23, 53, 0.05);
}

.guardado-pregunta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 8px;
  background: #eef1f6;
}

[data-theme="dark"] .guardado-pregunta {
  background: #0d2552;
}

.guardado-pregunta svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--marca-libro);
}

.guardado-respuesta {
  max-height: 260px;
  overflow-y: auto;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.guardado-fuentes {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.guardado-fuentes > span {
  color: var(--muted);
  font: 800 11px Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guardado-fuente {
  display: flex;
  gap: 10px;
}

.guardado-fuente svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--marca-dorado);
}

.guardado-fuente a,
.guardado-fuente strong {
  color: var(--ink);
  font-weight: 700;
}

.guardado-fuente small {
  display: block;
  color: var(--muted);
}

.guardado-fuente q {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

.guardado-pie {
  display: flex;
  align-items: center;
  gap: 8px;
}

.guardado-pie small {
  margin-right: auto;
  color: var(--muted);
}

.guardado-quitar {
  color: var(--red-500);
}

.guardados-vacio {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 60px 20px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

.guardados-vacio svg {
  width: 30px;
  height: 30px;
  color: var(--marca-dorado);
}

.guardados-vacio strong {
  color: var(--ink);
}

@media (max-width: 860px) {
  .guardados-layout {
    grid-template-columns: 1fr;
  }

  .guardados-colecciones {
    position: static;
  }
}

/* Buscador del historial con esquinas mas redondeadas */
#ai-view .history-search input,
#ai-view .history-search {
  border-radius: 12px;
}

/* Renombrar y eliminar ya estan en el menu de tres puntos de cada chat del historial. */
#ai-view .conversation-title-actions {
  display: none !important;
}

/* Modo oscuro: el chat es lo mas oscuro; el historial va en el azul marino de apoyo. */
[data-theme="dark"] #ai-view .conversation-main,
[data-theme="dark"] #ai-view .messages,
[data-theme="dark"] #ai-view .chat-bottom,
[data-theme="dark"] #ai-view .conversation-titlebar {
  background: #010714;
}

[data-theme="dark"] #ai-view .conversation-history {
  background: #0a2048;
  border-right: 1px solid #10295a;
}

[data-theme="dark"] #ai-view .history-search input,
[data-theme="dark"] #ai-view .history-search {
  background: #071a3d;
}

[data-theme="dark"] #ai-view .composer {
  background: #051735;
}

/* Banner con sesion: el nombre de la marca se achica para no montarse en el menu. */
@media (max-width: 1700px) {
  body.is-authed .topbar-brand .topbar-wordmark strong {
    font-size: 18px;
  }

  body.is-authed .topnav-item {
    padding-inline: 10px;
  }
}

@media (max-width: 1350px) {
  body.is-authed .topbar-brand > .topbar-wordmark {
    display: none;
  }
}

/* Con sesion en pantallas medianas: sin columna, el menu no necesita el hueco reservado, y bajo 1600 px solo va el logo. */
@media (max-width: 1700px) {
  body.is-authed .topbar-nav {
    padding-right: 0;
  }
}

@media (max-width: 1600px) {
  html body.is-authed .topbar-brand > .topbar-wordmark {
    display: none;
  }
}

/* La "clave de demo" era un acceso antiguo de pruebas: ya no se muestra a nadie (el ingreso es por cuenta). */
#login-box {
  display: none !important;
}

/* Modo oscuro (invertido a pedido): el chat en el azul marino de apoyo y el historial lo mas oscuro. */
[data-theme="dark"] #ai-view .conversation-main,
[data-theme="dark"] #ai-view .messages,
[data-theme="dark"] #ai-view .chat-bottom,
[data-theme="dark"] #ai-view .conversation-titlebar {
  background: #0a2048;
}

[data-theme="dark"] #ai-view .conversation-history {
  background: #010714;
  border-right-color: #0d2350;
}

[data-theme="dark"] #ai-view .history-search input,
[data-theme="dark"] #ai-view .history-search {
  background: #051735;
}

[data-theme="dark"] #ai-view .composer {
  background: #051735;
}

[data-theme="dark"] #ai-view .message.user .bubble {
  background: #133170;
}

/* Modo oscuro: el area del chat en el azul marino de la marca (#051735), sin azul vivo. */
[data-theme="dark"] #ai-view .conversation-main,
[data-theme="dark"] #ai-view .messages,
[data-theme="dark"] #ai-view .chat-bottom,
[data-theme="dark"] #ai-view .conversation-titlebar {
  background: #051735;
}

[data-theme="dark"] #ai-view .composer {
  background: #03112a;
}

[data-theme="dark"] #ai-view .message.user .bubble {
  background: #0b2350;
}

/* Modo oscuro: el boton de enviar en beige (en claro sigue dorado). */
[data-theme="dark"] #ai-view .composer .send-button {
  background: var(--marca-beige);
  color: var(--marca-marino);
  box-shadow: 0 6px 16px rgba(239, 215, 156, 0.22);
}

[data-theme="dark"] #ai-view .composer .send-button:hover {
  background: #f6e4b8;
}

/* Modo oscuro: se intercambian los tonos; historial en azul marino y el chat lo mas oscuro. */
[data-theme="dark"] #ai-view .conversation-history {
  background: #051735;
  border-right-color: #10295a;
}

[data-theme="dark"] #ai-view .history-search input,
[data-theme="dark"] #ai-view .history-search {
  background: #03112a;
}

[data-theme="dark"] #ai-view .conversation-main,
[data-theme="dark"] #ai-view .messages,
[data-theme="dark"] #ai-view .chat-bottom,
[data-theme="dark"] #ai-view .conversation-titlebar {
  background: #010714;
}

[data-theme="dark"] #ai-view .composer {
  background: #051735;
}

[data-theme="dark"] #ai-view .message.user .bubble {
  background: #0b2350;
}

/* Modo oscuro: boton de enviar en un beige mas oscuro (tostado), menos brillante sobre el fondo. */
[data-theme="dark"] #ai-view .composer .send-button {
  background: #c9a465;
  color: var(--marca-marino);
  box-shadow: 0 6px 16px rgba(201, 164, 101, 0.2);
}

[data-theme="dark"] #ai-view .composer .send-button:hover {
  background: #d6b47a;
}

/* ====== Botones del chat: ocultar/mostrar historial, dictar y enviar ====== */
#ai-view .history-collapse-button,
#ai-view .show-history-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#ai-view .show-history-button.hidden {
  display: none;
}

#ai-view .history-collapse-button:hover,
#ai-view .show-history-button:hover {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

[data-theme="dark"] #ai-view .history-collapse-button:hover,
[data-theme="dark"] #ai-view .show-history-button:hover {
  border-color: #17356f;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

#ai-view .history-collapse-button svg,
#ai-view .show-history-button svg {
  width: 19px;
  height: 19px;
}

#ai-view .composer {
  gap: 8px;
}

.dictar-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dictar-button.hidden {
  display: none;
}

.dictar-button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

[data-theme="dark"] .dictar-button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.dictar-button svg {
  width: 20px;
  height: 20px;
}

.dictar-button.escuchando {
  background: #d91e28;
  color: #fff;
  animation: dictar-pulso 1.4s ease-out infinite;
}

@keyframes dictar-pulso {
  0% { box-shadow: 0 0 0 0 rgba(217, 30, 40, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(217, 30, 40, 0); }
}

.dictar-button::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 50;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--marca-marino);
  color: #fff;
  font: 600 12px Inter, sans-serif;
  white-space: nowrap;
  content: attr(data-tooltip);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.dictar-button:hover::after,
.dictar-button.escuchando::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Enviar: circulo con flecha hacia arriba, como ChatGPT */
#ai-view .composer .send-button,
[data-theme="dark"] #ai-view .composer .send-button {
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

#ai-view .composer .send-button svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

#ai-view .composer .send-button:hover:not(:disabled) {
  transform: scale(1.06);
}

#ai-view .composer:not(:focus-within) .send-button {
  opacity: 0.85;
}

#ai-view .composer .send-button,
[data-theme="dark"] #ai-view .composer .send-button {
  min-height: 40px;
  max-height: 40px;
  align-self: center;
}

#ai-view .history-head .history-collapse-button,
[data-theme="dark"] #ai-view .history-head .history-collapse-button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Modo oscuro: el mismo fondo azul marino profundo del inicio en todas las paginas (sin degradados). */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #030b18;
}

/* El chat se funde con el fondo de la pagina: mismo oscuro, sin caja alrededor. */
[data-theme="dark"] #ai-view .ai-conversation-layout,
[data-theme="dark"] #ai-view .conversation-main,
[data-theme="dark"] #ai-view .messages,
[data-theme="dark"] #ai-view .chat-bottom,
[data-theme="dark"] #ai-view .conversation-titlebar,
[data-theme="dark"] #ai-view .chat-shell {
  background: #030b18;
  border-color: transparent;
  box-shadow: none;
}

/* ====== Controles del chat segun la guia de diseño (44 x 44 px) ======
   Claro: fondo #FAF8F2, texto #051735, acento #D5AE62. Oscuro: fondo #030B18, texto #FAF8F2, acento #D5AE62. */
:root {
  --ctl-acento: #d5ae62;
  --ctl-acento-hover: #b98f3f;
  --ctl-texto: #051735;
  --ctl-fondo: #faf8f2;
  --ctl-borde: #e6d6b4;
  --ctl-hover: #f3e6c8;
  --ctl-inactivo: #e4e2dc;
  --ctl-inactivo-texto: #a9a69e;
}

[data-theme="dark"] {
  --ctl-texto: #faf8f2;
  --ctl-fondo: #0b1a33;
  --ctl-borde: #d5ae62;
  --ctl-hover: #1d2c4f;
  --ctl-inactivo: #3d4a66;
  --ctl-inactivo-texto: #8792a8;
}

/* Barra de consulta */
#ai-view .composer,
[data-theme="dark"] #ai-view .composer {
  border: 1.5px solid var(--ctl-acento);
  border-radius: 18px;
  background: var(--ctl-fondo);
  box-shadow: 0 8px 22px rgba(5, 23, 53, 0.08);
}

#ai-view .composer:focus-within,
[data-theme="dark"] #ai-view .composer:focus-within {
  border-color: var(--ctl-acento);
  box-shadow: 0 0 0 3px rgba(213, 174, 98, 0.2), 0 8px 22px rgba(5, 23, 53, 0.08);
}

/* Microfono: cuadrado redondeado con borde */
.dictar-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ctl-borde);
  border-radius: 12px;
  background: var(--ctl-fondo);
  color: var(--ctl-texto);
  box-shadow: 0 1px 3px rgba(5, 23, 53, 0.08);
}

[data-theme="dark"] .dictar-button {
  border-color: rgba(213, 174, 98, 0.75);
  background: transparent;
}

.dictar-button:hover,
[data-theme="dark"] .dictar-button:hover {
  background: var(--ctl-hover);
  color: var(--ctl-texto);
}

.dictar-button.escuchando,
[data-theme="dark"] .dictar-button.escuchando {
  border-color: var(--ctl-acento);
  background: var(--ctl-fondo);
  color: var(--ctl-texto);
  animation: none;
}

/* Grabando: cuadro de detener y punto rojo */
.dictar-button.escuchando svg {
  display: none;
}

.dictar-button.escuchando::before {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: currentColor;
  content: "";
}

.dictar-button.escuchando {
  background-image: radial-gradient(circle at calc(100% - 7px) 7px, #e5484d 0 4px, transparent 4.5px);
}

.dictar-button:disabled {
  border-color: var(--ctl-inactivo);
  background: var(--ctl-inactivo);
  color: var(--ctl-inactivo-texto);
  cursor: not-allowed;
}

/* Enviar: circulo dorado */
#ai-view .composer .send-button,
[data-theme="dark"] #ai-view .composer .send-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border-radius: 50%;
  background: var(--ctl-acento);
  color: #051735;
  opacity: 1;
  box-shadow: 0 4px 12px rgba(213, 174, 98, 0.3);
}

#ai-view .composer .send-button:hover:not(:disabled),
[data-theme="dark"] #ai-view .composer .send-button:hover:not(:disabled) {
  background: var(--ctl-acento-hover);
  transform: none;
}

#ai-view .composer:not(:focus-within) .send-button {
  opacity: 1;
}

#ai-view .composer .send-button:disabled {
  background: var(--ctl-inactivo);
  color: var(--ctl-inactivo-texto);
  box-shadow: none;
  cursor: not-allowed;
}

/* Enviando: circulo azul marino con arco que gira */
#ai-view .composer .send-button.enviando,
[data-theme="dark"] #ai-view .composer .send-button.enviando {
  background: #051735;
  color: #faf8f2;
  cursor: wait;
}

[data-theme="dark"] #ai-view .composer .send-button.enviando {
  background: #0f2449;
}

#ai-view .composer .send-button.enviando svg,
#ai-view .composer .send-button.enviando .button-label {
  display: none;
}

#ai-view .composer .send-button.enviando::before {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(250, 248, 242, 0.25);
  border-top-color: #faf8f2;
  border-radius: 50%;
  content: "";
  animation: enviar-girar 0.8s linear infinite;
}

@keyframes enviar-girar {
  to { transform: rotate(360deg); }
}

/* Panel lateral: cuadrado redondeado con borde y descripcion al pasar el mouse */
#ai-view .history-collapse-button,
#ai-view .show-history-button,
#ai-view .history-head .history-collapse-button,
[data-theme="dark"] #ai-view .history-head .history-collapse-button {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ctl-texto);
  border-radius: 12px;
  background: var(--ctl-fondo);
  color: var(--ctl-texto);
}

[data-theme="dark"] #ai-view .history-collapse-button,
[data-theme="dark"] #ai-view .show-history-button {
  border-color: var(--ctl-acento);
  background: transparent;
}

#ai-view .history-collapse-button:hover,
#ai-view .show-history-button:hover,
[data-theme="dark"] #ai-view .history-collapse-button:hover,
[data-theme="dark"] #ai-view .show-history-button:hover {
  border-color: var(--ctl-acento);
  background: var(--ctl-hover);
  color: var(--ctl-texto);
}

[data-theme="dark"] #ai-view .history-collapse-button:hover,
[data-theme="dark"] #ai-view .show-history-button:hover {
  background: rgba(213, 174, 98, 0.25);
}

#ai-view .history-collapse-button svg,
#ai-view .show-history-button svg {
  width: 21px;
  height: 21px;
}

#ai-view .history-collapse-button::after,
#ai-view .show-history-button::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  z-index: 60;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #051735;
  color: #faf8f2;
  font: 500 13px Inter, sans-serif;
  white-space: nowrap;
  content: attr(data-tooltip);
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

[data-theme="dark"] #ai-view .history-collapse-button::after,
[data-theme="dark"] #ai-view .show-history-button::after {
  border-color: var(--ctl-acento);
  background: #030b18;
}

#ai-view .history-collapse-button:hover::after,
#ai-view .show-history-button:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Tooltip del microfono por encima, con la misma paleta */
.dictar-button::after {
  background: #051735;
  color: #faf8f2;
}

[data-theme="dark"] .dictar-button::after {
  border: 1px solid var(--ctl-acento);
  background: #030b18;
}

/* Ajustes: el punto rojo de grabacion tambien en oscuro, "Enviando" gana sobre "Inactivo" y la descripcion
   del panel lateral va debajo del boton (el panel recorta lo que sale por el costado). */
.dictar-button.escuchando,
[data-theme="dark"] .dictar-button.escuchando {
  background-image: radial-gradient(circle at calc(100% - 7px) 7px, #e5484d 0 4px, transparent 4.5px);
}

#ai-view .composer .send-button.enviando:disabled {
  background: #051735;
  color: #faf8f2;
  box-shadow: none;
}

[data-theme="dark"] #ai-view .composer .send-button.enviando:disabled {
  background: #0f2449;
}

#ai-view .history-collapse-button::after {
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  transform: translateY(-4px);
}

#ai-view .history-collapse-button:hover::after {
  transform: none;
}

/* La cabecera del historial deja ver la descripcion del boton del panel. */
#ai-view .history-head {
  position: relative;
  z-index: 5;
  overflow: visible;
}

#ai-view .history-collapse-button::after {
  right: auto;
  left: 50%;
  transform: translate(-50%, -4px);
}

#ai-view .history-collapse-button:hover::after {
  transform: translate(-50%, 0);
}

/* Modo oscuro de la guia: fondo #030B18, texto #FAF8F2, acento #D5AE62. */
[data-theme="dark"] {
  --bg: #030b18;
  --ink: #faf8f2;
}

/* Los menus de notificaciones y perfil salen por debajo del banner: el banner ya no recorta su contenido.
   Los adornos de fondo (ola y columna) quedan dentro del banner por su propio tamaño y redondeo. */
.topbar {
  overflow: visible;
}

.topbar::before {
  border-radius: inherit;
  overflow: hidden;
}

.topbar::after {
  top: 2px;
  bottom: 0;
  height: auto;
  background-position: center top;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.notif-panel,
.profile-panel {
  z-index: 200;
}

/* Con sesion iniciada el tema se cambia desde el menu del perfil; el boton del banner es solo para visitantes. */
body.is-authed .top-actions .theme-toggle,
body.is-authed .top-actions #theme-toggle {
  display: none !important;
}

/* Boton para mostrar el historial: sin borde. Al lado, el nombre de la conversacion (clic para editarlo). */
#ai-view .show-history-button,
[data-theme="dark"] #ai-view .show-history-button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#ai-view .show-history-button:hover,
[data-theme="dark"] #ai-view .show-history-button:hover {
  border-color: transparent;
}

#ai-view .conversation-titlebar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

#ai-view .conversation-titlebar > div:not(.conversation-title-actions) {
  min-width: 0;
  margin-right: auto;
  text-align: left;
}

#current-chat-title {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  margin-left: -6px;
  border-radius: 6px;
  cursor: text;
  transition: background 0.15s ease;
}

#current-chat-title:hover {
  background: var(--surface-2);
}

[data-theme="dark"] #current-chat-title:hover {
  background: rgba(255, 255, 255, 0.06);
}

.titulo-en-linea {
  width: min(520px, 60vw);
  padding: 2px 6px;
  border: 1px solid var(--ctl-acento);
  border-radius: 6px;
  outline: none;
  background: var(--ctl-fondo);
  color: var(--ink);
  font: inherit;
}

/* ====== Menu de perfil con el estilo de la marca: esquinas mas rectas, acento dorado, sin azul ====== */
.profile-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(5, 23, 53, 0.18);
}

[data-theme="dark"] .profile-panel {
  border-color: #17356f;
  background: #051735;
}

.profile-panel-head {
  border-radius: 6px;
}

.profile-panel-status {
  display: none;
}

.profile-panel-head strong {
  color: var(--ink);
  font: 700 14px Inter, sans-serif;
}

.profile-panel-head small {
  color: var(--muted);
}

.profile-panel button {
  border-radius: 6px;
  color: var(--ink);
}

.profile-panel button svg {
  color: var(--ctl-acento);
}

.profile-panel button:hover,
.profile-panel button:focus-visible {
  background: var(--ctl-hover);
  color: var(--ink);
}

[data-theme="dark"] .profile-panel button:hover,
[data-theme="dark"] .profile-panel button:focus-visible {
  background: rgba(213, 174, 98, 0.14);
}

.profile-panel button.profile-panel-logout,
.profile-panel button.profile-panel-logout svg {
  color: var(--red-500);
}

/* Esquinas de los contenedores mas rectas (los campos de escritura conservan su redondeo). */
.notif-panel,
.modelo-menu,
.mi-consumo-panel,
.guardar-dialog,
.legal-dialog {
  border-radius: 8px;
}

.inicio-modulo,
.guardado,
.inicio-recomendaciones,
.guardados-vacio {
  border-radius: 10px;
}

.guardar-opcion,
.guardados-coleccion,
.modelo-opcion,
.accion-mensaje {
  border-radius: 6px;
}

/* Mi perfil: sin el circulo de iniciales y con esquinas mas rectas en las tarjetas (los campos conservan su redondeo). */
#profile-page-avatar {
  display: none !important;
}

#profile-view .profile-card,
#profile-view .profile-managed-notice {
  border-radius: 10px;
}

#profile-view .profile-card-icon {
  border-radius: 8px;
}

#profile-view .profile-card button {
  border-radius: 8px;
}

#profile-view .profile-card-heading h2 {
  font-family: "Playfair Display", Georgia, serif;
}

/* Logo JC nuevo (casi cuadrado): marcos ajustados a su proporcion. */
.topbar-brand-mark,
[data-theme="dark"] .topbar-brand-mark {
  width: 54px;
  height: 48px;
  padding: 0;
}

.brand-seal.brand-logo {
  width: 48px;
  height: 42px;
}

.inicio-footer-logo img {
  width: 46px;
}

@media (max-width: 900px) {
  .topbar-brand-mark,
  [data-theme="dark"] .topbar-brand-mark {
    width: 42px;
    height: 38px;
  }
}

/* El nombre de la marca siempre al lado del logo; con sesion se achica en vez de ocultarse. */
html body.is-authed .topbar-brand > .topbar-wordmark,
body.is-authed .topbar-brand > .topbar-wordmark {
  display: block;
}

@media (max-width: 1600px) {
  body.is-authed .topbar-brand .topbar-wordmark strong {
    font-size: 17px;
  }

  body.is-authed .topbar-navigation {
    padding-right: 12px;
  }

  body.is-authed .topnav-item {
    padding-inline: 8px;
    font-size: 14px;
  }
}

@media (max-width: 1250px) {
  body.is-authed .topbar-brand .topbar-wordmark strong {
    font-size: 15px;
  }

  body.is-authed .topbar-cta span {
    display: none;
  }
}

@media (max-width: 1050px) {
  html body.is-authed .topbar-brand > .topbar-wordmark {
    display: none;
  }
}

@media (max-width: 1400px) {
  body.is-authed .topbar-brand .topbar-wordmark strong {
    font-size: 15px;
  }

  body.is-authed .topbar-cta span {
    display: none;
  }

  body.is-authed .topbar-cta {
    padding: 0 12px;
  }
}

@media (max-width: 1200px) {
  html body.is-authed .topbar-brand > .topbar-wordmark {
    display: none;
  }
}

/* Barra de consulta sin borde (solo su fondo y una sombra suave). */
#ai-view .composer,
[data-theme="dark"] #ai-view .composer,
#ai-view .composer:focus-within,
[data-theme="dark"] #ai-view .composer:focus-within {
  border-color: transparent;
}

#ai-view .composer:focus-within {
  box-shadow: 0 0 0 3px rgba(10, 63, 150, 0.14), 0 8px 22px rgba(5, 23, 53, 0.08);
}

[data-theme="dark"] #ai-view .composer:focus-within {
  box-shadow: 0 0 0 3px rgba(91, 142, 230, 0.2), 0 8px 22px rgba(0, 0, 0, 0.3);
}

/* Microfono con borde azul */
.dictar-button,
[data-theme="dark"] .dictar-button {
  border-color: rgba(10, 63, 150, 0.45);
}

[data-theme="dark"] .dictar-button {
  border-color: rgba(91, 142, 230, 0.55);
}

/* Boton para bajar al final: circulo pequeño centrado, no una franja */
#ai-view .scroll-bottom-button,
.scroll-bottom-button {
  left: 50%;
  right: auto;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(5, 23, 53, 0.18);
  transform: translateX(-50%);
}

[data-theme="dark"] .scroll-bottom-button {
  border-color: #17356f;
  background: #0b1a33;
}

.scroll-bottom-button.hidden {
  display: none;
}

.scroll-bottom-button svg {
  width: 18px;
  height: 18px;
}

/* ====== Documento al lado del chat ====== */
:root {
  --doc-panel-ancho: min(46vw, 760px);
}

.doc-panel {
  position: fixed;
  top: 96px;
  right: clamp(12px, 1.8vw, 28px);
  bottom: 14px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: var(--doc-panel-ancho);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(5, 23, 53, 0.18);
}

[data-theme="dark"] .doc-panel {
  border-color: #17356f;
  background: #051735;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.doc-panel.hidden {
  display: none;
}

/* Con el documento abierto el chat se corre a la izquierda para dejarle espacio. */
body.con-documento.is-ai-view #ai-view {
  padding-right: calc(var(--doc-panel-ancho) + clamp(24px, 3vw, 44px)) !important;
}

.doc-panel-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

[data-theme="dark"] .doc-panel-barra {
  border-bottom-color: #17356f;
}

.doc-panel-barra > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--ctl-acento);
}

.doc-panel-barra strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: 700 14px Inter, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-panel-accion {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.doc-panel-accion:hover {
  background: var(--ctl-hover);
}

[data-theme="dark"] .doc-panel-accion:hover {
  background: rgba(213, 174, 98, 0.16);
}

.doc-panel-accion svg {
  width: 18px;
  height: 18px;
}

.doc-panel-accion::after {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  padding: 5px 9px;
  border-radius: 6px;
  background: #051735;
  color: #faf8f2;
  font: 600 12px Inter, sans-serif;
  white-space: nowrap;
  content: attr(data-tooltip);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.doc-panel-accion:hover::after {
  opacity: 1;
}

.doc-panel-marco {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--bg);
}

.doc-ampliado {
  width: min(1280px, calc(100vw - 48px));
  height: calc(100vh - 48px);
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
}

.doc-ampliado[open] {
  display: flex;
  flex-direction: column;
}

[data-theme="dark"] .doc-ampliado {
  border-color: #17356f;
  background: #051735;
}

.doc-ampliado::backdrop {
  background: rgba(3, 11, 24, 0.6);
}

/* En pantallas angostas el documento ocupa toda la pantalla sobre el chat. */
@media (max-width: 1000px) {
  .doc-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    width: auto;
    border-radius: 0;
  }

  body.con-documento.is-ai-view #ai-view {
    padding-right: 0;
  }
}

/* Tarjetas de fuentes: toda la tarjeta abre el documento. */
#messages .source-card {
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

#messages .source-card:hover {
  border-color: var(--ctl-acento);
  transform: translateY(-1px);
}

/* Celular: la ventana del documento ocupa toda la pantalla. */
@media (max-width: 1000px) {
  .doc-ampliado {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}

/* Barras de desplazamiento del color del fondo (solo se ve el control, discreto). */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.doc-panel-accion[hidden] {
  display: none;
}

/* Barras de desplazamiento del chat y del historial: sin franja de color (mismo fondo) en ambos temas. */
.messages::-webkit-scrollbar-track,
.conversation-list::-webkit-scrollbar-track {
  background: transparent;
}

.messages::-webkit-scrollbar-thumb,
.conversation-list::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  background-clip: padding-box;
}

.messages::-webkit-scrollbar-thumb:hover,
.conversation-list::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--muted) 65%, transparent);
}