@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ============================= Tokens =============================
   Fundamentos tomados del kit Catalyst (Tailwind Labs): escala zinc,
   jerarquia de tres niveles para contenido / fondo / borde, hover como
   capa superpuesta, y las escalas de radio, sombra y desenfoque.
   Dos desviaciones deliberadas, por accesibilidad:
     - el tercer nivel de contenido se desplaza un paso (zinc-400 sobre
       blanco da 2.56:1 y no se puede leer);
     - la seleccion usa blue-600 en claro (blanco sobre blue-500 da 3.68:1).
   ================================================================== */

:root {
  color-scheme: light;

  /* --- Primitivas zinc --- */
  --zinc-50:  #FAFAFA;  --zinc-100: #F4F4F5;  --zinc-200: #E4E4E7;
  --zinc-300: #D4D4D8;  --zinc-400: #A1A1AA;  --zinc-500: #71717A;
  --zinc-600: #52525B;  --zinc-700: #3F3F46;  --zinc-800: #27272A;
  --zinc-900: #18181B;  --zinc-950: #09090B;

  /* --- Contenido --- */
  --content-1: var(--zinc-950);   /* 19.90:1 */
  --content-2: var(--zinc-500);   /*  4.83:1 */
  --content-3: var(--zinc-500);   /* desplazado: zinc-400 no se lee */
  --content-inverso: #FFFFFF;

  /* --- Fondos, del mas claro al mas marcado --- */
  --bg-shell: var(--zinc-100); /* fondo del armazon, detras de los paneles */
  --bg-1: #FFFFFF;             /* panel: lienzo de lectura */
  --bg-2: var(--zinc-50);      /* superficies elevadas dentro del panel */
  --bg-3: var(--zinc-100);     /* campos, bloques de codigo */
  --bg-rail: transparent;      /* el rail vive sobre el shell */

  /* --- Bordes --- */
  --borde-1: var(--zinc-200);
  --borde-2: var(--zinc-100);
  --borde-fuerte: var(--zinc-300);

  /* --- Hover como capa superpuesta, no como color suelto --- */
  --hover-fondo: rgba(0, 0, 0, 0.025);
  --hover-borde: rgba(0, 0, 0, 0.20);

  /* --- Seleccion y acento --- */
  --seleccion: #2563EB;            /* blue-600, 5.17:1 con blanco */
  --sobre-seleccion: #FFFFFF;
  /* El kit no tiene color de marca: el boton primario es el neutro mas
     fuerte, y el unico acento es el azul de seleccion. */
  --accion: var(--zinc-950);
  --accion-oscura: var(--zinc-800);
  --sobre-accion: #FFFFFF;         /* 19.90:1 */
  --alerta: #B91C1C;
  --foco: #2563EB;

  /* --- Radio: escala exacta de Catalyst --- */
  --r-sm: 2px;   --r-md: 4px;   --r-base: 6px;
  --r-lg: 8px;   --r-xl: 12px;  --r-2xl: 16px;  --r-full: 1000px;

  /* --- Sombras --- */
  --sh-sm:   0 1px 2px 0 rgba(0,0,0,0.05);
  --sh-base: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --sh-md:   0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --sh-lg:   0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --sh-inner: inset 0 2px 4px 0 rgba(0,0,0,0.05);
  --relieve: var(--sh-sm);
  --relieve-alto: var(--sh-lg);

  /* --- Desenfoque --- */
  --blur-sm: 4px;  --blur-base: 8px;  --blur-md: 12px;  --blur-lg: 16px;

  /* --- Espaciado: base 4px --- */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;
  --e4: 1rem;     --e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;

  --display: 'Bricolage Grotesque', Georgia, serif;
  --ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --medida: 68ch;
  --rail-ancho: 17rem;
  --detalle-ancho: 19rem;
  --transicion: 160ms ease;

  /* Compatibilidad con los nombres usados en el resto de la hoja */
  --papel: var(--bg-1);
  --superficie: var(--bg-1);
  --superficie-2: var(--bg-3);
  --texto: var(--content-1);
  --suave: var(--content-2);
  --linea: var(--borde-1);
  --linea-fuerte: var(--borde-fuerte);
  --tinta: var(--content-1);
  /* red-700: 6.38:1 sobre blanco. */
  --peligro: #B91C1C;
  --radio: var(--r-base);
  --radio-chico: var(--r-md);
  --rail-fondo: var(--bg-rail);
  --rail-realce: var(--seleccion);
  --rail-borde: var(--borde-1);
  --rail-hover: var(--hover-fondo);
  --rail-marca: var(--content-1);
  --rail-texto: var(--content-1);
  --rail-medio: var(--content-2);
  --rail-tenue: var(--content-2);
  --rail-minimo: var(--content-2);
  --foco-rail: var(--foco);
  --borde-interno: none;
}

/* ------------------------------ Oscuro ------------------------------ */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --oscuro: 1; }
}

/* En oscuro el boton primario se invierte: claro sobre fondo oscuro. */

:root[data-tema="oscuro"] { --oscuro: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --content-1: #FFFFFF;           /* 17.72:1 sobre zinc-900 */
    --content-2: var(--zinc-400);   /*  6.91:1 */
    --content-3: var(--zinc-400);   /* desplazado: zinc-500 da 3.67:1 */
    --content-inverso: var(--zinc-950);

    /* Shell y panel comparten fondo: dos negros distintos se leen como
       un error. El panel se distingue por su borde, como en Catalyst. */
    --bg-shell: var(--zinc-900);
    --bg-1: var(--zinc-900);
    --bg-2: var(--zinc-800);
    --bg-3: var(--zinc-800);
    --bg-rail: transparent;

    --borde-1: rgba(255,255,255,0.10);   /* anillo que define los paneles */
  /* red-400: red-700 sobre zinc-900 da 3.09:1 y no se lee. */
  --peligro: #F87171;
    --borde-2: rgba(255,255,255,0.07);
    --borde-fuerte: rgba(255,255,255,0.18);

    /* Invertidos, como en Catalyst */
    --hover-fondo: rgba(255, 255, 255, 0.05);
    --hover-borde: rgba(255, 255, 255, 0.10);

    --seleccion: var(--zinc-700);
    --sobre-seleccion: #FFFFFF;
    --accion: #FFFFFF;
    --accion-oscura: var(--zinc-200);
    --sobre-accion: var(--zinc-900);   /* 17.72:1 */        /* 4.96:1 */
    --alerta: #F87171;
    --foco: #60A5FA;

    /* Sobre fondo oscuro una sombra no se ve: pasa a anillo interior. */
    --relieve: inset 0 1px 0 rgba(255,255,255,0.05);
    --relieve-alto: inset 0 1px 0 rgba(255,255,255,0.07),
                    0 10px 24px rgba(0,0,0,0.5);
    --borde-interno: inset 0 1px 0 rgba(255,255,255,0.06);

    --rail-realce: var(--zinc-700);
    --foco-rail: var(--foco);
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --content-1: #FFFFFF;
  --content-2: var(--zinc-400);
  --content-3: var(--zinc-400);
  --content-inverso: var(--zinc-950);
  /* Shell y panel comparten fondo: dos negros distintos se leen como
     un error. El panel se distingue por su borde, como en Catalyst. */
  --bg-shell: var(--zinc-900);
  --bg-1: var(--zinc-900);
  --bg-2: var(--zinc-800);
  --bg-3: var(--zinc-800);
  --bg-rail: transparent;
  --borde-1: rgba(255,255,255,0.10);   /* anillo que define los paneles */
  /* red-400: red-700 sobre zinc-900 da 3.09:1 y no se lee. */
  --peligro: #F87171;
  --borde-2: rgba(255,255,255,0.07);
  --borde-fuerte: rgba(255,255,255,0.18);
  --hover-fondo: rgba(255, 255, 255, 0.05);
  --hover-borde: rgba(255, 255, 255, 0.10);
  --seleccion: var(--zinc-700);
  --sobre-seleccion: #FFFFFF;
  --accion: #FFFFFF;
  --accion-oscura: var(--zinc-200);
  --sobre-accion: var(--zinc-900);   /* 17.72:1 */
  --alerta: #F87171;
  --foco: #60A5FA;
  --relieve: inset 0 1px 0 rgba(255,255,255,0.05);
  --relieve-alto: inset 0 1px 0 rgba(255,255,255,0.07),
                  0 10px 24px rgba(0,0,0,0.5);
  --borde-interno: inset 0 1px 0 rgba(255,255,255,0.06);
  --rail-realce: var(--zinc-700);
  --foco-rail: var(--foco);
}

/* Clave de color por area: lo unico que Catalyst no cubre, porque es
   informacion del negocio. Los 26 verificados a 4.5:1 o mas. */
[data-division]                      { --clave: var(--content-2); }
[data-division="paid-media"]         { --clave: #0D6E5F; }
[data-division="marketing"]          { --clave: #1F5FA8; }
[data-division="sales"]              { --clave: #8C5A12; }
[data-division="design"]             { --clave: #6B3FA0; }
[data-division="support"]            { --clave: #0E7490; }
[data-division="project-management"] { --clave: #7A2E52; }
[data-division="specialized"]        { --clave: #166B82; }
[data-division="engineering"]        { --clave: #3C4A5A; }
[data-division="product"]            { --clave: #9A4B1F; }
[data-division="finance"]            { --clave: #2F6B2A; }
[data-division="research"]           { --clave: #5B4AA0; }
[data-division="integrations"]       { --clave: #6A5A3A; }
[data-division="general"]            { --clave: #5B6675; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) [data-division="paid-media"]         { --clave: #4FD1BB; }
  :root:not([data-tema="claro"]) [data-division="marketing"]          { --clave: #7FB3F2; }
  :root:not([data-tema="claro"]) [data-division="sales"]              { --clave: #E0B050; }
  :root:not([data-tema="claro"]) [data-division="design"]             { --clave: #BFA3F0; }
  :root:not([data-tema="claro"]) [data-division="support"]            { --clave: #5CC8E0; }
  :root:not([data-tema="claro"]) [data-division="project-management"] { --clave: #E79BBD; }
  :root:not([data-tema="claro"]) [data-division="specialized"]        { --clave: #67C4DC; }
  :root:not([data-tema="claro"]) [data-division="engineering"]        { --clave: #A8B6C6; }
  :root:not([data-tema="claro"]) [data-division="product"]            { --clave: #F0A478; }
  :root:not([data-tema="claro"]) [data-division="finance"]            { --clave: #86D37F; }
  :root:not([data-tema="claro"]) [data-division="research"]           { --clave: #B0A6F2; }
  :root:not([data-tema="claro"]) [data-division="integrations"]       { --clave: #C9B88E; }
  :root:not([data-tema="claro"]) [data-division="general"]            { --clave: #A6AEBB; }
}

:root[data-tema="oscuro"] [data-division="paid-media"]         { --clave: #4FD1BB; }
:root[data-tema="oscuro"] [data-division="marketing"]          { --clave: #7FB3F2; }
:root[data-tema="oscuro"] [data-division="sales"]              { --clave: #E0B050; }
:root[data-tema="oscuro"] [data-division="design"]             { --clave: #BFA3F0; }
:root[data-tema="oscuro"] [data-division="support"]            { --clave: #5CC8E0; }
:root[data-tema="oscuro"] [data-division="project-management"] { --clave: #E79BBD; }
:root[data-tema="oscuro"] [data-division="specialized"]        { --clave: #67C4DC; }
:root[data-tema="oscuro"] [data-division="engineering"]        { --clave: #A8B6C6; }
:root[data-tema="oscuro"] [data-division="product"]            { --clave: #F0A478; }
:root[data-tema="oscuro"] [data-division="finance"]            { --clave: #86D37F; }
:root[data-tema="oscuro"] [data-division="research"]           { --clave: #B0A6F2; }
:root[data-tema="oscuro"] [data-division="integrations"]       { --clave: #C9B88E; }
:root[data-tema="oscuro"] [data-division="general"]            { --clave: #A6AEBB; }

/* ============================= Base ============================= */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

/* El rail siempre es oscuro: ahi el azul fuerte no contrasta (2.96:1). */
.rail :focus-visible { outline-color: var(--foco-rail); }

.marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--tinta);
  margin: 0;
}

/* ========================= Inicio de sesion ========================= */

.login {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--e6), 8vw, var(--e7));
  align-content: center;
  padding: clamp(var(--e6), 7vw, 5rem);
  max-width: 68rem;
  margin: 0 auto;
}

.login__nota { max-width: 34ch; color: var(--suave); margin: var(--e5) 0 0; }

.login__dato {
  margin: var(--e6) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
  color: var(--suave);
  font-size: 0.9rem;
}

.login__form {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  max-width: 24rem;
  width: 100%;
}

.login__pie { margin: 0; color: var(--suave); font-size: 0.85rem; }

.campo { display: block; }

.campo__etiqueta {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--suave);
  margin-bottom: var(--e1);
}

input, textarea {
  font: inherit;
  color: inherit;
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 0.6rem var(--e3);
  box-shadow: var(--relieve);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

input:hover, textarea:hover { border-color: var(--suave); }

input:focus-visible, textarea:focus-visible {
  border-color: var(--foco);
  outline: none;
  /* El anillo se dibuja con la sombra para que siga el radio del borde. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 25%, transparent);
}

.boton {
  font: inherit;
  font-weight: 600;
  color: var(--sobre-accion);
  background: var(--accion);
  border: 1px solid var(--accion);
  border-radius: var(--radio);
  padding: 0.65rem var(--e5);
  min-height: 44px;           /* objetivo tactil minimo */
  cursor: pointer;
  box-shadow: var(--relieve);
  transition: background var(--transicion), box-shadow var(--transicion),
              transform var(--transicion);
}

.boton:hover:not(:disabled) { background: var(--accion-oscura); border-color: var(--accion-oscura); }
.boton:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.boton:disabled { opacity: 0.55; cursor: progress; }

.enlace-boton {
  font: inherit;
  font-size: 0.9rem;
  color: var(--suave);
  background: none;
  border: 0;
  padding: var(--e1) 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transicion);
}

.enlace-boton:hover { color: var(--texto); }

.error {
  margin: 0;
  color: var(--alerta);
  font-size: 0.9rem;
  border-left: 2px solid var(--alerta);
  padding-left: var(--e3);
}

/* =========================== Aplicacion =========================== */

.app {
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--rail-ancho) minmax(0, 1fr);
  gap: var(--e2);
  padding: var(--e2);
  background: var(--bg-shell);
  overflow: hidden;      /* cada panel desplaza por su cuenta */
}

.rail {
  background: var(--rail-fondo);
  color: var(--rail-texto);
  /* Cuatro zonas: cabecera, buscador, areas con desplazamiento propio y
     pie. El 1fr es la lista: es la unica que debe crecer y desplazarse. */
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  min-width: 0;
}

.rail__cabeza {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e5) var(--e4) var(--e4);
}

.marca--rail { font-size: 1.4rem; color: var(--rail-marca); line-height: 1; }

.boton--nuevo {
  background: var(--accion);
  border-color: var(--accion);
  color: var(--sobre-accion);
  font-size: 0.9rem;
  padding: 0.5rem var(--e3);
  min-height: 40px;
  width: 100%;
  box-shadow: var(--sh-sm);
}

.boton--nuevo:hover:not(:disabled) {
  background: var(--accion-oscura);
  border-color: var(--accion-oscura);
}

/* La zona que desplaza. El padding va aqui, no en los hijos, para que
   nada sobresalga a lo ancho y no aparezca una barra horizontal. */
.rail__nav {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0 var(--e3) var(--e2);
  scrollbar-width: thin;
  scrollbar-color: var(--rail-borde) transparent;
}

.rail__nav::-webkit-scrollbar { width: 6px; }
.rail__nav::-webkit-scrollbar-thumb { background: var(--rail-borde); border-radius: 3px; }
.rail__nav::-webkit-scrollbar-track { background: transparent; }

.rail__enlace {
  display: block;
  color: var(--rail-texto);
  text-decoration: none;
  padding: 0.5rem var(--e3);
  border-radius: var(--radio-chico);
  font-size: 0.93rem;
  transition: background var(--transicion), color var(--transicion);
}

.rail__enlace:hover { background: var(--hover-fondo); }
.rail__enlace[aria-current] {
  background: var(--seleccion);
  color: var(--sobre-seleccion);
  font-weight: 600;
}

.rail__enlace--todo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e3);
}

.rail__cuenta {
  font-size: 0.78rem;
  color: var(--rail-minimo);
  font-variant-numeric: tabular-nums;
}

.rail__enlace--todo[aria-current] .rail__cuenta { color: inherit; opacity: 0.8; }

/* ----------------------------- Areas ----------------------------- */

.areas { display: flex; flex-direction: column; gap: 1px; }

.areas__titulo {
  font-size: 0.75rem;
  color: var(--rail-tenue);     /* 5.85:1 */
  margin: var(--e5) 0 var(--e2);
  padding: 0 var(--e3);
}

.area__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  padding: 0.45rem var(--e3);
  font: inherit;
  font-size: 0.93rem;
  color: var(--rail-texto);
  background: none;
  border: 0;
  border-radius: var(--radio-chico);
  cursor: pointer;
  text-align: left;
  transition: background var(--transicion), color var(--transicion);
}

.area__cabeza:hover { background: var(--hover-fondo); }
.area__cabeza[aria-current] {
  background: var(--seleccion);
  color: var(--sobre-seleccion);
  font-weight: 600;
}

.area__cabeza[aria-current] .punto,
.rail__enlace[aria-current] .punto { box-shadow: 0 0 0 1px rgba(255,255,255,0.6); }

.punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clave);
  flex-shrink: 0;
}

.area__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.area__meta {
  font-size: 0.78rem;
  color: var(--rail-minimo);    /* 4.85:1 */
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.area__chats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: var(--e1) 0 var(--e2) 0.85rem;
  padding-left: var(--e2);
  border-left: 1px solid var(--rail-borde);
}

.chat-enlace {
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  color: var(--rail-medio);     /* 6.89:1 */
  background: none;
  border: 0;
  border-radius: var(--radio-chico);
  padding: 0.35rem var(--e2);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}

.chat-enlace:hover { background: var(--hover-fondo); color: var(--content-1); }
.chat-enlace[aria-current] {
  background: var(--seleccion);
  color: var(--sobre-seleccion);
}

.rail__pie {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e3) var(--e3) var(--e2);
  border-top: 1px solid var(--borde-1);
}

.rail__secundario { display: flex; flex-direction: column; gap: 1px; }
.rail__pie .rail__enlace { font-size: 0.88rem; }

/* Bloque de usuario: una tarjeta, no texto suelto al final de la barra. */
.usuario {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-lg);
  box-shadow: var(--relieve);
}

.usuario__inicial {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--content-1);
  color: var(--bg-1);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.usuario__datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.usuario__correo {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--content-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuario__rol { font-size: 0.72rem; color: var(--content-2); }

.usuario__salir {
  flex-shrink: 0;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--content-2);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.usuario__salir:hover { background: var(--hover-fondo); color: var(--alerta); }

/* ---------------------------- Paneles ---------------------------- */

/* Cada area de contenido es una tarjeta sobre el armazon: borde, radio
   y una sombra minima. Es lo que separa el contenido del fondo. */
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}

.panel--texto {
  display: block;
  overflow-y: auto;
  padding: clamp(var(--e5), 4vw, var(--e6));
}

.titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin: 0 0 var(--e4);
  color: var(--tinta);
}

.cabecera {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) clamp(var(--e4), 4vw, var(--e7));
  border-bottom: 1px solid var(--linea);
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(var(--blur-base));
  -webkit-backdrop-filter: blur(var(--blur-base));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  z-index: 2;
}

.cabecera__titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-area {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clave);
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 0.12rem 0.65rem 0.18rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ----------------------------- Hilo ----------------------------- */

.hilo {
  flex: 1;
  overflow-y: auto;
  padding: clamp(var(--e5), 4vw, var(--e7)) clamp(var(--e4), 4vw, var(--e7)) var(--e4);
}

.hilo > * { max-width: var(--medida); margin-inline: auto; }

.bienvenida { padding-top: clamp(var(--e4), 5vh, var(--e6)); }

/* Los pasos viven en su propio bloque, no sueltos sobre el fondo. */
.comoFunciona {
  background: var(--bg-2);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-lg);
  padding: var(--e4);
}

.resumen-areas { padding-top: var(--e1); }

.ejemplos__rotulo {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--content-2);
  margin: 0 0 var(--e2);
}

.bienvenida__titulo {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin: 0 0 var(--e2);
}

.bienvenida__texto { color: var(--suave); margin: 0 0 var(--e5); max-width: 50ch; }

.resumen-areas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); }

.pildora {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: 0.82rem;
  color: var(--suave);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 100px;
  padding: 0.2rem 0.65rem;
}

.ejemplos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }

.ejemplos button {
  font: inherit;
  text-align: left;
  width: 100%;
  min-height: 44px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 0.6rem var(--e3);
  color: var(--content-1);
  cursor: pointer;
  box-shadow: var(--relieve);
  transition: border-color var(--transicion), background var(--transicion);
}

.ejemplos button:hover { border-color: var(--borde-fuerte); background: var(--bg-2); }
.ejemplos button:hover { border-left-color: var(--seleccion); }

.turno { margin-bottom: var(--e6); }

.turno--tuyo {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--e4);
}

/* Burbuja del usuario: a la derecha y acotada, para distinguirla de la
   respuesta de un vistazo. */
.burbuja {
  max-width: 85%;
  background: var(--bg-3);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-xl) var(--r-xl) var(--r-md) var(--r-xl);
  padding: var(--e3) var(--e4);
  box-shadow: var(--relieve);
}

.burbuja p { margin: 0; white-space: pre-wrap; }

/* Cabecera de la respuesta: quien contesta y con que especialistas. */
.turno__cabeza {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e3);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borde-2);
}

.turno__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--content-1);
}

.turno__marca .icono { color: var(--content-2); }

.turno--respuesta {
  border: 1px solid var(--borde-1);
  border-radius: var(--r-xl);
  background: var(--bg-1);
  padding: var(--e4);
  box-shadow: var(--sh-sm);
}

.turno__pie {
  border-top: 1px solid var(--borde-2);
  padding-top: var(--e3);
}

/* La tira de especialistas: el elemento con personalidad de la pantalla. */
.equipo { display: flex; flex-wrap: wrap; gap: var(--e1); }

/* Separador entre la marca y las fichas */
.turno__cabeza .equipo:not([hidden])::before {
  content: '';
  width: 1px;
  align-self: stretch;
  background: var(--borde-1);
  margin-right: var(--e1);
}

.ficha {
  --clave: var(--suave);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--clave);
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 0.12rem 0.65rem 0.18rem;
  white-space: nowrap;
  animation: entra 280ms ease-out both;
}

.ficha:nth-child(2) { animation-delay: 90ms; }
.ficha:nth-child(3) { animation-delay: 180ms; }

@keyframes entra {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.pensando { color: var(--suave); font-style: italic; }

/* --------------------------- Redactor --------------------------- */

.redactor {
  flex-shrink: 0;
  display: flex;
  gap: var(--e2);
  align-items: flex-end;
  padding: var(--e3) clamp(var(--e4), 4vw, var(--e7)) 0;
  max-width: calc(var(--medida) + 6vw);
  margin-inline: auto;
  width: 100%;
}

.redactor__campo {
  resize: none;
  max-height: 11rem;
  padding: 0.7rem var(--e4);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}

.redactor__campo:focus-visible { background: var(--bg-1); }
.boton--enviar { flex-shrink: 0; }

.redactor__ayuda {
  flex-shrink: 0;
  max-width: calc(var(--medida) + 6vw);
  margin: var(--e2) auto var(--e4);
  padding: 0 clamp(var(--e4), 4vw, var(--e7));
  width: 100%;
  font-size: 0.8rem;
  color: var(--suave);
}

/* ------------------------- Especialistas ------------------------- */

.nota { color: var(--suave); font-size: 0.9rem; max-width: 50ch; margin-top: var(--e5); }
.nota--arriba { margin: calc(var(--e3) * -1) 0 var(--e5); }

.buscador { max-width: 24rem; margin-bottom: var(--e6); min-height: 44px; }

.area-bloque { margin-bottom: var(--e6); }

.area-bloque__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--suave);
  margin: 0 0 var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--linea);
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--e2);
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--clave);
  border-radius: var(--radio);
  padding: var(--e3) var(--e4);
  box-shadow: var(--relieve);
}

.tarjeta__nombre {
  margin: 0 0 var(--e1);
  font-family: var(--ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta);
}

.tarjeta__texto {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--suave);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------- Consumo ---------------------------- */

.datos { margin: 0; max-width: 32rem; }

.datos {
  background: var(--bg-2);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-lg);
  padding: 0 var(--e4);
}

.datos div {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borde-2);
}

.datos div:last-child { border-bottom: 0; }

.datos dt { color: var(--suave); margin: 0; }
.datos dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------- Contenido renderizado desde Markdown ------------- */

.turno__texto { white-space: normal; word-wrap: break-word; }
.turno__texto > :first-child { margin-top: 0; }
.turno__texto > :last-child  { margin-bottom: 0; }
.turno__texto p { margin: 0 0 var(--e4); }

.turno__texto h2, .turno__texto h3, .turno__texto h4, .turno__texto h5 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--tinta);
  line-height: 1.25;
  margin: var(--e5) 0 var(--e2);
}

.turno__texto h2 { font-size: 1.35rem; }
.turno__texto h3 { font-size: 1.15rem; }
.turno__texto h4, .turno__texto h5 { font-size: 1rem; font-weight: 600; font-family: var(--ui); }

.turno__texto ul, .turno__texto ol { margin: 0 0 var(--e4); padding-left: 1.3rem; }
.turno__texto li { margin-bottom: var(--e1); }
.turno__texto a { color: var(--seleccion); text-underline-offset: 2px; }

.turno__texto code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--superficie-2);
  border-radius: 2px;
  padding: 0.1em 0.35em;
}

.turno__texto pre {
  background: var(--superficie-2);
  border-left: 2px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: var(--e3) var(--e4);
  overflow-x: auto;
  margin: 0 0 var(--e4);
}

.turno__texto pre code { background: none; padding: 0; font-size: 0.85rem; }

.turno__texto blockquote {
  margin: 0 0 var(--e4);
  padding-left: var(--e4);
  border-left: 2px solid var(--linea-fuerte);
  color: var(--suave);
}

.turno__texto hr { border: 0; border-top: 1px solid var(--linea); margin: var(--e5) 0; }

.turno__texto table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--e4);
  font-size: 0.93rem;
  display: block;
  overflow-x: auto;
}

.turno__texto th, .turno__texto td {
  text-align: left;
  vertical-align: top;
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--linea);
}

.turno__texto th {
  font-weight: 600;
  color: var(--tinta);
  border-bottom-width: 2px;
  white-space: nowrap;
}

.turno__texto tbody tr:last-child td { border-bottom: 0; }

/* ======================== Pantallas chicas ======================== */

@media (max-width: 760px) {
  .login { grid-template-columns: 1fr; gap: var(--e6); }

  .app { height: auto; overflow: visible; grid-template-columns: 1fr; }

  /* La barra se apila arriba: en movil el chat manda. */
  .rail { display: block; max-height: 42dvh; overflow-y: auto; }

  .rail__cabeza {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
  }

  .marca--rail { font-size: 1.05rem; }
  .boton--nuevo { width: auto; white-space: nowrap; }

  .rail__nav { overflow: visible; }

  .rail__pie {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
  }

  .rail__pie .rail__enlace,
  .rail__pie .enlace-boton { margin: 0; }
  .rail__usuario { display: none; }

  /* Objetivos tactiles comodos */
  .area__cabeza, .chat-enlace, .rail__enlace { min-height: 44px; }

  .panel { height: auto; min-height: 58dvh; overflow: visible; }
  .hilo { overflow: visible; }
  .cabecera { padding: var(--e3) var(--e4); }
  .cabecera__titulo { font-size: 0.88rem; }
  .tarjetas { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================== Cabecera: nombre editable ===================== */

.titulo-editable {
  /* El recorte va aqui, no en el contenedor: si no, el campo editable
     crece y se monta sobre los botones de la cabecera. */
  display: block;
  min-width: 6rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.15rem var(--e2);
  margin-left: calc(var(--e2) * -1);
  border-radius: var(--radio-chico);
  outline: none;
  cursor: text;
  transition: background var(--transicion), box-shadow var(--transicion);
}

.titulo-editable:hover { background: var(--superficie-2); }

.titulo-editable:focus-visible {
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--foco);
  overflow: visible;
  text-overflow: clip;
}

/* El marcador aparece solo cuando esta vacio: un encargo sin nombre
   todavia tiene que decir algo. */
.titulo-editable:empty::before {
  content: attr(data-vacio);
  color: var(--suave);
  font-weight: 400;
}

.boton-icono {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--suave);
  background: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
  min-height: 32px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--relieve);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

.boton-icono:hover { background: var(--superficie-2); color: var(--texto); border-color: var(--suave); }
.boton-icono[aria-pressed="true"] { background: var(--superficie-2); color: var(--texto); border-color: var(--suave); }
.boton-icono--riesgo:hover { color: var(--alerta); border-color: var(--alerta); }

/* ===================== Panel de detalle ===================== */

.app:has(#panel-detalle:not([hidden])) {
  grid-template-columns: var(--rail-ancho) minmax(0, 1fr) var(--detalle-ancho);
}

.detalle {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}

.detalle__cabeza {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea);
}

.detalle__titulo {
  margin: 0;
  font-family: var(--ui);
  font-size: 0.95rem;
  font-weight: 600;
}

.detalle__cuerpo { overflow-y: auto; padding: var(--e4); }

.detalle__seccion { margin-bottom: var(--e5); }

.detalle__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--suave);
  margin: 0 0 var(--e2);
}

.detalle__datos { margin: 0; display: grid; gap: var(--e2); }

.detalle__datos div {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  font-size: 0.85rem;
}

.detalle__datos dt { color: var(--suave); margin: 0; }
.detalle__datos dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

/* Ficha de especialista dentro del detalle: explica quien respondio
   y por que la conversacion quedo archivada donde quedo. */
.experto {
  border-left: 2px solid var(--clave);
  padding: 0 0 0 var(--e3);
  margin-bottom: var(--e3);
}

.experto__nombre { margin: 0; font-size: 0.88rem; font-weight: 600; }
.experto__area { font-size: 0.75rem; color: var(--clave); font-weight: 500; }

.experto__texto {
  margin: var(--e1) 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--suave);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detalle__vacio { color: var(--suave); font-size: 0.85rem; margin: 0; }

/* ===================== Metadatos por respuesta ===================== */

.turno__pie {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e4);
  font-size: 0.78rem;
  color: var(--content-2);
}

.turno__pie time { font-variant-numeric: tabular-nums; }

.btn-copiar {
  font: inherit;
  font-size: 0.78rem;
  color: var(--suave);
  background: none;
  border: 0;
  padding: var(--e1) var(--e2);
  margin-left: auto;
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.btn-copiar:hover { background: var(--superficie-2); color: var(--texto); }

/* ===================== Bienvenida: como funciona ===================== */

.comoFunciona {
  margin: 0 0 var(--e5);
  padding: 0;
  list-style: none;
  counter-reset: paso;
  display: grid;
  gap: var(--e3);
  max-width: 52ch;
}

.comoFunciona li {
  counter-increment: paso;
  /* El contenido va envuelto en un <span>: en flex, un <strong> suelto
     y el texto que le sigue serian dos items distintos y la frase se
     partiria en dos columnas. */
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--suave);
}

/* Aqui la numeracion si codifica informacion: es una secuencia real. */
.comoFunciona li::before {
  content: counter(paso);
  flex-shrink: 0;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--content-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
}

.comoFunciona li > span { min-width: 0; }
.comoFunciona strong { color: var(--content-1); font-weight: 600; }

@media (max-width: 1100px) {
  .app:has(#panel-detalle:not([hidden])) {
    grid-template-columns: var(--rail-ancho) minmax(0, 1fr);
  }
  /* En pantallas medianas el detalle se superpone en vez de robar ancho.
     Al flotar sobre el contenido necesita separarse de el: sombra alta y
     un desenfoque leve del fondo, como los menus de Catalyst. */
  .detalle {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(var(--detalle-ancho), 88vw);
    z-index: 20;
    border-left: 1px solid var(--linea-fuerte);
    background: color-mix(in srgb, var(--superficie) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--relieve-alto);
  }
}

@media (max-width: 760px) {
  .detalle { width: 100vw; }
  .boton-icono { min-height: 36px; }
  .comoFunciona { font-size: 0.88rem; }
}

/* =========================== Iconos =========================== */
/* Heroicons en trazo, heredando el color del texto. Decorativos:
   la etiqueta accesible siempre es el texto del boton. */

.icono { flex-shrink: 0; vertical-align: -0.125em; }

.con-icono {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.rail__enlace.con-icono,
.area__cabeza { gap: var(--e2); }

.boton.con-icono { justify-content: center; }
.btn-copiar.con-icono { display: inline-flex; }


/* ==================== Desplazamiento ==================== */
/* Barras finas y del color del borde: una barra gruesa del sistema
   rompe el armazon de paneles. */

.hilo, .panel--texto, .detalle__cuerpo, .rail__nav {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-fuerte) transparent;
}

.hilo::-webkit-scrollbar,
.panel--texto::-webkit-scrollbar,
.detalle__cuerpo::-webkit-scrollbar,
.rail__nav::-webkit-scrollbar { width: 8px; height: 8px; }

.hilo::-webkit-scrollbar-thumb,
.panel--texto::-webkit-scrollbar-thumb,
.detalle__cuerpo::-webkit-scrollbar-thumb,
.rail__nav::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}

.hilo::-webkit-scrollbar-track,
.panel--texto::-webkit-scrollbar-track,
.detalle__cuerpo::-webkit-scrollbar-track,
.rail__nav::-webkit-scrollbar-track { background: transparent; }

/* Buscador con icono dentro del campo */
.buscador-caja { position: relative; max-width: 24rem; margin-bottom: var(--e5); }

.buscador-icono {
  position: absolute;
  left: var(--e3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--content-2);
  pointer-events: none;
}

.buscador { margin: 0; padding-left: 2.25rem; border-radius: var(--r-lg); }

/* Los ejemplos: el icono separa el texto y marca que son sugerencias */
.ejemplos button.con-icono { gap: var(--e3); }
.ejemplos button .icono { color: var(--content-2); }

/* Rotulos del detalle con icono */
.detalle__rotulo.con-icono { gap: var(--e1); }
.detalle__rotulo .icono { color: var(--content-2); }

/* El corte en seco de la lista de areas parece un error de maquetado.
   Un desvanecido al pie dice "sigue abajo" sin agregar nada visible. */
.rail__nav {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
}

/* Al desplazar hasta el final no debe quedar texto a medio desvanecer. */
.rail__nav::after { content: ''; display: block; height: var(--e3); }

/* ===================== Compositor ===================== */

.compositor { flex-shrink: 0; position: relative; }

.boton-redactor {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--content-2);
  background: none;
  border: 1px solid var(--borde-1);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}

.boton-redactor:hover {
  background: var(--bg-2);
  color: var(--content-1);
  border-color: var(--borde-fuerte);
}

/* ---------- Documentos adjuntos ---------- */

.adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  max-width: calc(var(--medida) + 6vw);
  margin: 0 auto;
  padding: 0 clamp(var(--e4), 4vw, var(--e7));
  width: 100%;
}

.adjunto {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  max-width: 18rem;
  font-size: 0.8rem;
  background: var(--bg-2);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-lg);
  padding: 0.25rem 0.3rem 0.25rem 0.6rem;
}

.adjunto--cargando { color: var(--content-2); padding: 0.3rem 0.7rem; }

.adjunto__nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.adjunto__meta { color: var(--content-2); font-size: 0.74rem; flex-shrink: 0; }

.adjunto__quitar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--content-2);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
}

.adjunto__quitar:hover { background: var(--hover-fondo); color: var(--alerta); }

/* Documentos dentro de la burbuja del encargo */
.burbuja__docs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--borde-1);
}

.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  color: var(--content-2);
}

/* Soltar archivos sobre el panel */
.panel.soltando { outline: 2px dashed var(--seleccion); outline-offset: -6px; }

/* ---------- Menu de especialistas (@) ---------- */

.menu-agentes {
  position: absolute;
  bottom: calc(100% - var(--e2));
  left: clamp(var(--e4), 4vw, var(--e7));
  width: min(26rem, calc(100% - 2 * clamp(var(--e4), 4vw, var(--e7))));
  max-height: 17rem;
  overflow-y: auto;
  z-index: 10;
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-xl);
  box-shadow: var(--relieve-alto);
  padding: var(--e1);
}

.opcion-agente {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  padding: var(--e2) var(--e3);
  font: inherit;
  text-align: left;
  color: var(--content-1);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
}

.opcion-agente:hover { background: var(--hover-fondo); }

.opcion-agente[aria-selected="true"] {
  background: var(--seleccion);
  color: var(--sobre-seleccion);
}

.opcion-agente__textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.opcion-agente__nombre {
  font-size: 0.88rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opcion-agente__area { font-size: 0.74rem; color: var(--content-2); }
.opcion-agente[aria-selected="true"] .opcion-agente__area { color: inherit; opacity: 0.85; }

.menu-agentes__vacio {
  margin: 0;
  padding: var(--e3);
  font-size: 0.85rem;
  color: var(--content-2);
}

/* ---------- Avisos ---------- */

.avisos {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-width: min(24rem, calc(100vw - 2 * var(--e4)));
}

.aviso {
  background: var(--bg-1);
  color: var(--content-1);
  border: 1px solid var(--borde-fuerte);
  border-left: 3px solid var(--alerta);
  border-radius: var(--r-lg);
  padding: var(--e3) var(--e4);
  font-size: 0.85rem;
  box-shadow: var(--relieve-alto);
  animation: entra 200ms ease-out both;
}

/* Razon del enrutamiento, en el panel de detalle */
.detalle__razon {
  margin: var(--e3) 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--content-2);
  line-height: 1.4;
}

.redactor__ayuda strong { color: var(--content-1); font-weight: 600; }

/* ===================== Busqueda web ===================== */

.boton-redactor--activo {
  background: var(--seleccion);
  border-color: var(--seleccion);
  color: var(--sobre-seleccion);
}

.boton-redactor--activo:hover {
  background: var(--seleccion);
  border-color: var(--seleccion);
  color: var(--sobre-seleccion);
  filter: brightness(1.1);
}

/* Fuentes citadas: obligatorias cuando la respuesta usa busqueda. */
.fuentes {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--borde-2);
}

.fuentes__titulo {
  margin: 0 0 var(--e2);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--content-2);
}

.fuentes__titulo .icono { color: var(--content-2); }

.fuentes__lista {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--e2);
  font-size: 0.82rem;
}

.fuentes__lista li { color: var(--content-2); }

.fuentes__lista a {
  color: var(--seleccion);
  text-underline-offset: 2px;
  word-break: break-word;
}

.fuentes__cita {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--content-2);
  opacity: 0.85;
}

/* ===================== Graficos en la respuesta =====================

   El SVG llega dentro de un <img> con data: URI. Eso no es una decision de
   estilo sino de seguridad: el navegador no ejecuta nada dentro de una
   imagen, asi que el grafico que escribe el modelo no puede tocar la pagina.
   De ahi que aqui solo se le de marco y pie.
   ==================================================================== */

.grafico {
  margin: var(--e5) 0;
  padding: var(--e4);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.grafico__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  /* El lienzo claro es parte del grafico: casi todos los SVG se escriben
     con texto oscuro, y sobre el fondo oscuro de la app desaparecerian. */
  background: #FFFFFF;
  border-radius: var(--r-md);
}

.grafico__pie {
  display: flex;
  gap: var(--e2);
  align-items: center;
  flex-wrap: wrap;
}

.grafico__btn {
  font: inherit;
  font-size: 0.78rem;
  color: var(--suave);
  background: none;
  border: 1px solid var(--borde-1);
  padding: var(--e1) var(--e3);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}

.grafico__btn:hover:not(:disabled) {
  background: var(--superficie-2);
  color: var(--texto);
  border-color: var(--borde-2);
}

.grafico__btn:disabled { opacity: 0.6; cursor: default; }

.grafico--cargando {
  align-items: flex-start;
  border-style: dashed;
}

.grafico__estado {
  font-size: 0.82rem;
  color: var(--suave);
}

/* ===================== Boton de PDF y membretes ===================== */

.pie__pdf { position: relative; display: inline-flex; align-items: center; }
.pie__pdf .btn-copiar { margin-left: 0; padding-right: var(--e1); }

/* El desplegable del membrete: pequeno a proposito. Es la excepcion, y una
   excepcion con el mismo peso visual que la accion principal deja de serlo. */
.pie__membrete {
  font: inherit;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--content-3);
  background: none;
  border: 0;
  padding: var(--e1) var(--e2) var(--e1) var(--e1);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.pie__membrete:hover,
.pie__membrete:focus-visible { background: var(--superficie-2); color: var(--texto); }

.menu-marcas {
  position: absolute;
  bottom: calc(100% + var(--e2));
  right: 0;
  z-index: 40;
  min-width: 15rem;
  padding: var(--e2);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-marcas__titulo {
  margin: 0;
  padding: var(--e2) var(--e3) var(--e2);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--content-3);
}

.menu-marcas__op {
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  color: var(--texto);
  background: none;
  border: 0;
  padding: var(--e2) var(--e3);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--transicion);
}

.menu-marcas__op:hover,
.menu-marcas__op:focus-visible { background: var(--superficie-2); }

/* El ultimo membrete usado queda marcado: quien imprime con marca suele
   repetir la misma, y no deberia tener que buscarla cada vez. */
.menu-marcas__op.es-previa { font-weight: 600; }

.menu-marcas__op.es-previa::after {
  content: 'último usado';
  float: right;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--content-3);
}

@media print {
  .grafico__pie, .pie__pdf, .pie__membrete, .menu-marcas { display: none; }
}

/* ===================== Llamada a la biblioteca =====================

   La biblioteca existia desde el principio, en el menu lateral, y nadie
   entraba. Un elemento de navegacion no invita a nada; esto si.
   ==================================================================== */

.llamada {
  display: flex;
  align-items: center;
  gap: var(--e4);
  width: 100%;
  margin: var(--e5) 0;
  padding: var(--e4);
  font: inherit;
  text-align: left;
  color: var(--texto);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion), transform var(--transicion);
}

.llamada:hover {
  background: var(--superficie-2);
  border-color: var(--borde-2);
  box-shadow: var(--sh-base);
}

.llamada:active { transform: translateY(1px); }

.llamada__texto { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.llamada__titulo { font-weight: 600; font-size: 0.95rem; }
.llamada__nota { font-size: 0.82rem; color: var(--suave); }

.llamada__flecha {
  font-size: 1.1rem;
  color: var(--suave);
  transition: transform var(--transicion);
}

.llamada:hover .llamada__flecha { transform: translateX(3px); }

/* ===================== Indice de areas de la biblioteca =====================

   Con 190 fichas, bajar con la rueda del mouse no es navegar. El indice
   deja ver de un vistazo que areas hay y cuantos hay en cada una, y filtra
   sin recargar.
   ========================================================================= */

.indice-areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: var(--e4) 0 var(--e5);
}

.filtro-area {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font: inherit;
  font-size: 0.82rem;
  color: var(--texto);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  padding: var(--e1) var(--e3);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion);
}

.filtro-area:hover { background: var(--superficie-2); border-color: var(--borde-2); }

/* El area abierta se marca por inversion, no por color de marca: el punto
   de color ya identifica al area y dos senales de color compiten. */
.filtro-area.es-activa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--bg-1);
}

.filtro-area.es-activa .filtro-area__n { color: var(--bg-1); opacity: 0.75; }

.filtro-area__n {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--suave);
}

/* ===================== Ficha de especialista ===================== */

.tarjeta__usar {
  align-self: flex-start;
  margin-top: var(--e3);
  font: inherit;
  font-size: 0.78rem;
  color: var(--suave);
  background: none;
  border: 1px solid var(--borde-1);
  padding: var(--e1) var(--e3);
  border-radius: var(--r-full);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transicion), background var(--transicion),
              color var(--transicion), border-color var(--transicion);
}

.tarjeta:hover .tarjeta__usar,
.tarjeta__usar:focus-visible { opacity: 1; }

.tarjeta__usar:hover {
  background: var(--superficie-2);
  color: var(--texto);
  border-color: var(--borde-2);
}

/* Sin hover (tactil) el boton tiene que estar siempre a la vista. */
@media (hover: none) {
  .tarjeta__usar { opacity: 1; }
}

/* ===================== Panel de configuracion ===================== */

.pestanas {
  display: flex;
  gap: var(--e1);
  margin: var(--e5) 0 var(--e4);
  border-bottom: 1px solid var(--borde-1);
}

.pestana {
  font: inherit;
  font-size: 0.88rem;
  color: var(--suave);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--e2) var(--e3);
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}

.pestana:hover { color: var(--texto); }

.pestana.es-activa {
  color: var(--texto);
  font-weight: 600;
  border-bottom-color: var(--tinta);
}

/* El aviso de gasto sin control. Rojo seria alarmismo; esto es una
   advertencia operativa, no una falla. */
.senal {
  margin: 0 0 var(--e5);
  padding: var(--e3) var(--e4);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde-2);
  border-left: 3px solid var(--tinta);
  border-radius: var(--r-md);
}

.config__grupo > .subtitulo:first-child { margin-top: 0; }

.config__grupo {
  margin: 0 0 var(--e6);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--borde-1);
}

.config__grupo:last-child { border-bottom: 0; }

.subtitulo {
  margin: var(--e6) 0 var(--e3);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto);
}

/* Acotado a propósito: .campo ya existia como bloque simple en el login,
   y redefinirla global le cambiaba la maquetacion a esa pantalla. */
#panel-config .campo,
#panel-uso .campo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin: 0 0 var(--e4);
  max-width: 42rem;
}

.campo__rotulo {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto);
}

.campo__sufijo { font-weight: 400; font-size: 0.75rem; color: var(--content-3); }

.campo__entrada {
  font: inherit;
  font-size: 0.9rem;
  color: var(--texto);
  background: var(--bg-1);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-md);
  padding: var(--e2) var(--e3);
  width: 100%;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo__entrada:focus {
  outline: 0;
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px var(--anillo, rgba(113,113,122,0.18));
}

textarea.campo__entrada {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 12rem;
}

.campo__ayuda { font-size: 0.78rem; line-height: 1.5; color: var(--suave); }

.campo__restablecer {
  align-self: flex-start;
  font: inherit;
  font-size: 0.75rem;
  color: var(--suave);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.campo__restablecer:hover { color: var(--texto); }

/* Con un formulario largo el boton tiene que seguir a la vista, pero
   pegajoso sin mas tapa el campo que uno esta mirando. El formulario
   reserva el alto de la barra para que el ultimo campo pueda subir. */
#form-config { padding-bottom: 4.5rem; }

.config__acciones {
  display: flex;
  align-items: center;
  gap: var(--e4);
  position: sticky;
  bottom: 0;
  padding: var(--e4) 0;
  background: var(--bg-1);
  border-top: 1px solid var(--borde-1);
  box-shadow: 0 -12px 16px -12px rgba(0,0,0,0.25);
}

.boton-primario {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--bg-1);
  background: var(--tinta);
  border: 1px solid var(--tinta);
  border-radius: var(--r-md);
  padding: var(--e2) var(--e5);
  cursor: pointer;
  transition: opacity var(--transicion);
}

.boton-primario:hover { opacity: 0.88; }
.boton-primario:disabled { opacity: 0.5; cursor: default; }

.nota.es-error { color: var(--peligro, #b91c1c); }

/* ===================== Equipo ===================== */

.usuarios { display: flex; flex-direction: column; gap: var(--e2); }

.usuario-fila {
  display: flex;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-md);
}

.usuario-fila.es-inactivo { opacity: 0.6; }

.usuario-fila__datos { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 14rem; }
.usuario-fila__nombre { font-size: 0.9rem; font-weight: 600; color: var(--texto); }

.usuario-fila__tu {
  margin-left: var(--e2);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--content-3);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-full);
  padding: 0 var(--e2);
}

.usuario-fila__correo { font-size: 0.8rem; color: var(--suave); }
.usuario-fila__estado { font-size: 0.74rem; color: var(--content-3); }

.usuario-fila__acciones { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }

.usuario-fila__rol {
  font: inherit;
  font-size: 0.78rem;
  color: var(--texto);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-md);
  padding: var(--e1) var(--e2);
  cursor: pointer;
}

.usuario-fila__boton {
  font: inherit;
  font-size: 0.78rem;
  color: var(--suave);
  background: none;
  border: 1px solid var(--borde-1);
  border-radius: var(--r-full);
  padding: var(--e1) var(--e3);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}

.usuario-fila__boton:hover { background: var(--superficie-2); color: var(--texto); }
.usuario-fila__boton:disabled { opacity: 0.5; cursor: default; }

/* Desactivar a alguien le corta el acceso: el boton lo dice al pasar. */
.usuario-fila__boton.es-riesgo:hover {
  color: var(--peligro, #b91c1c);
  border-color: currentColor;
}

.alta {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-1);
  max-width: 32rem;
}

/* ===================== Conversaciones compartidas =====================

   Compartir deja la conversacion a la vista del equipo en solo lectura.
   Lo que se cuida aqui es que nunca haya duda de que es propio y que es
   ajeno: una persona que cree estar en su encargo y escribe en el de otro
   pierde el trabajo y ensucia el del compañero.
   ===================================================================== */

/* La cinta de solo lectura ocupa el ancho del hilo, no es un icono
   discreto: es la diferencia entre leer y poder escribir. */
.cinta {
  margin: 0 0 var(--e4);
  padding: var(--e3) var(--e4);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde-2);
  border-left: 3px solid var(--tinta);
  border-radius: var(--r-md);
}

#btn-compartir.es-activo {
  color: var(--texto);
  background: var(--superficie-2);
  border-color: var(--borde-2);
}

.area__chats--equipo { margin-bottom: var(--e4); }

.chat-enlace--ajeno {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
}

.chat-enlace__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Quien la escribio, siempre visible. Sin esto la lista del equipo se lee
   como si fueran encargos propios. */
.chat-enlace__dueno {
  flex: none;
  font-size: 0.68rem;
  color: var(--rail-tenue);
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================== Avisos, supervision y auditoria ===================== */

.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: var(--e2);
  padding: 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bg-1);
  background: var(--peligro);
  border-radius: var(--r-full);
}

/* En el menu lateral el contador va al final de la linea. */
.rail__enlace .contador { margin-left: auto; }
.rail__enlace { display: flex; align-items: center; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e4);
  margin: var(--e4) 0 var(--e5);
}

.campo--linea { margin: 0; max-width: 18rem; }

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.84rem;
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
}

/* La regla global de input pone width:100%, pensada para campos de texto.
   En una casilla eso la estira y separa de su etiqueta. */
.interruptor input[type="checkbox"] {
  width: auto;
  flex: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--tinta);
}

/* --- avisos --- */

.senales { display: flex; flex-direction: column; gap: var(--e3); }

.senal {
  padding: var(--e4);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-left: 3px solid var(--peligro);
  border-radius: var(--r-md);
}

/* Uno ya revisado no desaparece, se apaga: sigue siendo parte del registro. */
.senal.es-visto { border-left-color: var(--borde-2); opacity: 0.72; }

.senal__cabeza {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin-bottom: var(--e2);
}

.senal__quien { font-size: 0.88rem; font-weight: 600; color: var(--texto); }
.senal__cuando { font-size: 0.76rem; color: var(--suave); }

.senal__sello {
  font-size: 0.68rem;
  color: var(--suave);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-full);
  padding: 0 var(--e2);
}

.senal__sello--suave { border-color: transparent; color: var(--content-3); }

.senal__motivo { margin: 0 0 var(--e2); font-size: 0.84rem; color: var(--suave); }

/* El encargo tal cual lo escribieron. Es la prueba, y sin leerla no se
   puede saber si el aviso tiene fundamento. */
.senal__texto {
  margin: 0 0 var(--e3);
  padding: var(--e2) var(--e3);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--superficie-2);
  border-radius: var(--r-md);
}

.senal__pie { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* --- supervision y auditoria --- */

.tabla-lista { display: flex; flex-direction: column; gap: 1px; }

.fila-sup {
  display: flex;
  align-items: center;
  gap: var(--e4);
  width: 100%;
  font: inherit;
  text-align: left;
  padding: var(--e3) var(--e4);
  color: var(--texto);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

.fila-sup:hover { background: var(--superficie-2); border-color: var(--borde-2); }

.fila-sup__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.fila-sup__titulo {
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fila-sup__meta {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.76rem;
  color: var(--suave);
}

.fila-sup__cifras {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.74rem;
  color: var(--suave);
}

.fila-sup__tokens { font-variant-numeric: tabular-nums; }
.fila-sup__fecha { color: var(--content-3); }

.fila-aud {
  display: flex;
  align-items: baseline;
  gap: var(--e4);
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--borde-1);
  font-size: 0.82rem;
}

/* Lo destacado no es un error: es lo que merece una mirada. De ahi que se
   marque con una barra lateral y no pintando toda la fila de rojo. */
.fila-aud.es-destacada { border-left: 2px solid var(--peligro); padding-left: var(--e3); }

.fila-aud__cuando {
  flex: none;
  width: 9rem;
  color: var(--content-3);
  font-variant-numeric: tabular-nums;
}

.fila-aud__que { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fila-aud__accion { font-weight: 600; color: var(--texto); }

.fila-aud__detalle {
  color: var(--suave);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.fila-aud__ip {
  flex: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--content-3);
}

@media (max-width: 720px) {
  .fila-aud { flex-direction: column; gap: var(--e1); }
  .fila-aud__cuando { width: auto; }
  .fila-sup { flex-wrap: wrap; }
}

/* ===================== Busqueda de encargos =====================

   Vive en el menu lateral porque ahi es donde uno va a buscar un encargo
   viejo. Mientras hay busqueda, la lista de areas se esconde: dos listas
   compitiendo en la misma columna no se leen.
   ================================================================ */

.rail__buscar {
  padding: 0 var(--e4) var(--e3);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.rail__campo {
  width: 100%;
  font-size: 0.84rem;
  padding: 0.4rem var(--e3);
  min-height: 36px;
  color: var(--rail-texto);
  background: transparent;
  border: 1px solid var(--rail-borde);
  border-radius: var(--r-md);
  box-shadow: none;
}

.rail__campo::placeholder { color: var(--rail-tenue); }

.rail__campo:focus-visible {
  outline: 0;
  border-color: var(--rail-medio);
}

.interruptor--rail { font-size: 0.74rem; color: var(--rail-medio); }

.resultados { display: flex; flex-direction: column; gap: var(--e1); }

.resultados__nota {
  margin: 0 0 var(--e1);
  font-size: 0.72rem;
  color: var(--rail-tenue);
}

.resultado {
  display: block;
  width: 100%;
  font: inherit;
  text-align: left;
  padding: var(--e2) var(--e3);
  color: var(--rail-texto);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--transicion);
}

.resultado:hover,
.resultado[aria-current="true"] { background: var(--superficie-2); }

.resultado__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: 2px;
}

.resultado__titulo {
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Tres lineas del fragmento: suficiente para reconocer el encargo, poco
   para que la lista siga siendo una lista. */
.resultado__texto {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--rail-medio);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resultado__texto mark {
  background: transparent;
  color: var(--rail-texto);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

.resultado__pie {
  display: flex;
  gap: var(--e2);
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--rail-tenue);
}

/* ===================== Memoria de la empresa ===================== */

.memoria { display: flex; flex-direction: column; gap: var(--e2); }

.alta--linea {
  display: flex;
  align-items: flex-end;
  gap: var(--e3);
  flex-wrap: wrap;
  max-width: none;
}

.alta--linea .campo { flex: 1; min-width: 16rem; margin: 0; }

.hecho {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-md);
}

/* Lo propuesto se distingue de lo que ya esta en uso: son dos cosas
   distintas y mezclarlas haria dudar de que esta activo. */
.hecho.es-propuesto { border-left: 3px solid var(--tinta); }

.hecho__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e2); }

.hecho__texto {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto);
}

/* Editable solo mientras esta propuesto: se ve que se puede tocar. */
.hecho__texto[contenteditable="true"] {
  padding: var(--e2) var(--e3);
  background: var(--superficie-2);
  border: 1px dashed var(--borde-2);
  border-radius: var(--r-md);
  outline: 0;
}

.hecho__texto[contenteditable="true"]:focus { border-style: solid; border-color: var(--tinta); }

.hecho__meta { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

.hecho__fuente { font-size: 0.72rem; color: var(--content-3); }

.hecho__origen {
  font: inherit;
  font-size: 0.72rem;
  color: var(--suave);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.hecho__origen:hover { color: var(--texto); }

.hecho__acciones { flex: none; display: flex; gap: var(--e2); flex-wrap: wrap; }

@media (max-width: 720px) {
  .hecho { flex-direction: column; }
}

/* ===================== Guardar en memoria ===================== */

.pie__memoria { position: relative; display: inline-flex; }
.pie__memoria .btn-copiar { margin-left: 0; }

.caja-memoria {
  position: absolute;
  bottom: calc(100% + var(--e2));
  left: 0;
  z-index: 40;
  width: min(26rem, 80vw);
  padding: var(--e4);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.caja-memoria__titulo {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--texto);
}

.caja-memoria__nota {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--suave);
}

/* El textarea de Configuracion es para texto largo y va en monoespaciada;
   aqui se escribe una frase, asi que vuelve a la tipografia de la interfaz
   y a una altura de tres lineas. */
/* textarea.campo__entrada gana por especificidad si aqui se usa solo la
   clase; por eso va con el elemento delante. */
textarea.caja-memoria__campo {
  font-family: var(--ui);
  font-size: 0.86rem;
  line-height: 1.5;
  min-height: 4.5rem;
  resize: vertical;
}

.caja-memoria__fila { display: flex; gap: var(--e2); align-items: center; }
.caja-memoria__fila select { flex: 1; }

.caja-memoria__aviso { margin: 0; font-size: 0.76rem; color: var(--suave); }
.caja-memoria__aviso.es-error { color: var(--peligro); }

@media print { .pie__memoria, .caja-memoria { display: none; } }

/* ===================== Areas plegables del menu ===================== */

.area__flecha {
  flex: none;
  width: 0.75rem;
  font-size: 0.62rem;
  color: var(--rail-tenue);
  transition: transform var(--transicion);
}

.area.es-abierta .area__flecha { transform: rotate(90deg); }

/* Un area sin encargos no tiene nada que desplegar: el triangulo se apaga
   para que no prometa contenido que no existe. */
.area__flecha.es-vacia { opacity: 0.25; }

.chat-enlace.es-compartida::after {
  content: '·';
  margin-left: var(--e1);
  color: var(--rail-tenue);
}

/* ===================== Supervision: lista de personas ===================== */

.personas { display: flex; flex-direction: column; gap: var(--e2); }

.persona {
  display: flex;
  align-items: center;
  gap: var(--e4);
  width: 100%;
  font: inherit;
  text-align: left;
  padding: var(--e3) var(--e4);
  color: var(--texto);
  background: var(--bg-1);
  border: 1px solid var(--borde-1);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

.persona:hover:not(:disabled) {
  background: var(--superficie-2);
  border-color: var(--borde-2);
}

/* Quien no escribio nada no se puede abrir, pero sigue en la lista: su
   ausencia tambien dice algo. */
.persona:disabled { cursor: default; opacity: 0.55; }

.persona__inicial {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bg-1);
  background: var(--tinta);
  border-radius: var(--r-full);
}

.persona__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.persona__nombre {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.92rem;
  font-weight: 600;
}

.persona__correo { font-size: 0.78rem; color: var(--suave); }

.persona__cifras {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 0.76rem;
  color: var(--suave);
}

.persona__tokens, .persona__ultima { font-size: 0.72rem; color: var(--content-3); }
.persona__tokens { font-variant-numeric: tabular-nums; }

.volver {
  font: inherit;
  font-size: 0.82rem;
  color: var(--suave);
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: var(--e3);
  cursor: pointer;
}

.volver:hover { color: var(--texto); }

@media (max-width: 720px) {
  .persona { flex-wrap: wrap; }
  .persona__cifras { align-items: flex-start; flex-direction: row; gap: var(--e3); }
}

/* ===================== Lista completa del menu ===================== */

.areas__volver {
  font: inherit;
  font-size: 0.74rem;
  color: var(--rail-tenue);
  background: none;
  border: 0;
  padding: var(--e1) var(--e3);
  margin-bottom: var(--e1);
  cursor: pointer;
}

.areas__volver:hover { color: var(--rail-texto); }

/* Sin agrupar, el punto de color es lo unico que dice de que area es cada
   encargo. Por eso aqui va y en la vista por areas no hace falta. */
.chat-enlace--todo {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.chat-enlace--todo .punto { flex: none; }

.chat-enlace--todo .chat-enlace__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.area__chats--todo { padding-left: 0; }

/* ===================== Portada de encargos ===================== */

.encargos { display: flex; flex-direction: column; gap: var(--e1); }

.encargos__dia {
  margin: var(--e5) 0 var(--e2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-3);
}

.encargos__dia:first-child { margin-top: var(--e3); }

.encargo {
  display: flex;
  align-items: center;
  gap: var(--e4);
  width: 100%;
  font: inherit;
  text-align: left;
  padding: var(--e3) var(--e4);
  color: var(--texto);
  background: var(--bg-1);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}

/* Sin borde en reposo y con borde al pasar: una lista larga con marco en
   cada fila se lee como una reja. */
.encargo:hover {
  background: var(--superficie-2);
  border-color: var(--borde-1);
}

.encargo__datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.encargo__titulo {
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.encargo__meta {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.78rem;
  color: var(--suave);
}

.encargo__dueno { font-size: 0.72rem; color: var(--content-3); }

.encargo__hora {
  flex: none;
  font-size: 0.76rem;
  color: var(--content-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .encargo { gap: var(--e3); }
}