/* ============================================================
   AURA · Design System
   AI-powered IT ticketing for agriculture
   Fonts: Archivo (display) · IBM Plex Sans (body) · IBM Plex Mono (code)
   Signature: sticky-note corkboard
   ============================================================ */

:root {
  /* Blues — trust, clarity, technology */
  --azul-900: #0D2F4F;
  --azul-800: #14436E;
  --azul-700: #1C5185;
  --azul-600: #2F6DB5;
  --azul-500: #4C87CB;
  --azul-400: #7FAEDE;
  --azul-300: #A9CDEE;
  --azul-200: #CFE4F7;
  --azul-100: #E4EFFA;
  --azul-050: #F2F8FD;
  --blanco:   #FFFFFF;

  /* Gold accent — harvest light against cool blue */
  --oro:     #C4943C;
  --oro-bg:  #FCF7EC;
  --oro-dim: #B8862E;

  /* Grises */
  --gris-600: #5A6B7D;
  --gris-400: #8FA3B5;
  --gris-200: #DDE6EE;

  /* Prioridades */
  --p1: #C0483B;
  --p2: var(--oro);
  --p3: var(--azul-600);
  --p4: #2E9E5B;

  /* Semánticos */
  --exito:   #2E9E5B;
  --alerta:  var(--oro);
  --peligro: #C0483B;

  /* Tipografía */
  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --texto:   'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', 'Consolas', monospace;

  /* Escala tipográfica */
  --text-xs:   .68rem;
  --text-sm:  .78rem;
  --text-base: .88rem;
  --text-md:  1rem;
  --text-lg:  1.2rem;
  --text-xl:  1.6rem;
  --text-2xl: 2rem;
  --text-3xl: 2.6rem;

  /* Escala de espaciado */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Formas */
  --radio:    12px;
  --radio-sm: 8px;
  --radio-lg: 16px;

  /* Sombras */
  --sombra:    0 1px 2px rgba(13, 47, 79, .06), 0 4px 14px rgba(13, 47, 79, .06);
  --sombra-md: 0 2px 6px rgba(13, 47, 79, .08), 0 12px 28px rgba(13, 47, 79, .10);
  --sombra-lg: 0 4px 12px rgba(13, 47, 79, .10), 0 20px 40px rgba(13, 47, 79, .12);

  /* Movimiento */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --rapido: .12s;
  --base:   .2s;
  --lento:  .35s;

  /* Layout */
  --lateral: 248px;
}

/* ---------- Reset ---------- */

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

body {
  margin: 0;
  font-family: var(--texto);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--azul-900);
  background: var(--azul-050);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografía ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 var(--sp-2);
  line-height: 1.25;
  color: var(--azul-900);
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

a {
  color: var(--azul-600);
  text-decoration: none;
  transition: color var(--rapido) var(--ease-out);
}
a:hover { color: var(--azul-700); text-decoration: underline; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ---------- Foco ---------- */

:focus-visible {
  outline: 2px solid var(--azul-500);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

/* ---------- Estructura ---------- */

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

.lateral {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: var(--lateral);
  height: 100vh;
  flex-shrink: 0;
  background: var(--blanco);
  border-right: 1px solid var(--azul-200);
  padding: var(--sp-5) 0;
}

.marca {
  padding: 0 var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--azul-100);
  margin-bottom: var(--sp-3);
}

.marca-nombre {
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--azul-600);
  line-height: 1;
}

.marca-lema {
  font-size: var(--text-xs);
  color: var(--gris-400);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: .35rem;
}

.marca-itil {
  font-size: .65rem;
  color: var(--azul-400);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: .4rem;
  padding: .15rem .4rem;
  border: 1px solid var(--azul-200);
  border-radius: var(--radio);
  display: inline-block;
  line-height: 1.3;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-3);
  flex: 1;
  overflow-y: auto;
}

.nav-titulo {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-400);
  padding: var(--sp-4) var(--sp-2) .35rem;
  font-weight: 600;
}

.nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem var(--sp-3);
  border-radius: var(--radio-sm);
  color: var(--azul-800);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background var(--rapido) var(--ease-out),
    color var(--rapido) var(--ease-out);
}

.nav a:hover { background: var(--azul-050); color: var(--azul-800); text-decoration: none; }

.nav a.activo {
  background: var(--azul-100);
  color: var(--azul-700);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--oro);
}

.nav svg { width: 17px; height: 17px; stroke-width: 1.8; flex-shrink: 0; }

/* ---------- Submenús colapsables (Administración) ---------- */
/* Mismo lenguaje visual que las ramas del organigrama (og-chevron):
   una flecha que gira 90° al abrir, línea vertical que marca la
   jerarquía -- para que se sienta como el mismo componente, no uno
   nuevo. El grupo que contiene la página activa se abre solo. */

.nav-grupo { margin: 4px 0; }

.nav-grupo > summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .5rem;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  color: var(--azul-800);
  font-size: .82rem;
  font-weight: 600;
  user-select: none;
  transition:
    background var(--rapido) var(--ease-out),
    border-color var(--rapido) var(--ease-out),
    box-shadow var(--rapido) var(--ease-out);
}
.nav-grupo > summary::-webkit-details-marker,
.nav-grupo > summary::marker { display: none; content: ''; }
.nav-grupo > summary:hover { background: var(--azul-100); border-color: var(--azul-200); }

/* Chip cuadrada para el icono -- separa visualmente "esto es una
   categoría" de los links planos de adentro, que van con icono suelto. */
.nav-grupo-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--blanco);
  color: var(--azul-600);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(13, 47, 79, .10);
}
.nav-grupo-icono svg { width: 15px; height: 15px; stroke-width: 2; }

.nav-grupo-titulo { flex: 1; letter-spacing: -.005em; }

.nav-grupo-cuenta {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  color: var(--azul-600);
  background: var(--blanco);
  padding: .1rem .45rem;
  border-radius: 999px;
  line-height: 1.5;
}

.nav-grupo-chevron {
  color: var(--azul-400);
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .18s var(--ease-out), color .18s var(--ease-out);
}

.nav-grupo[open] > summary {
  background: var(--azul-100);
  border-color: var(--azul-200);
  box-shadow: inset 3px 0 0 var(--oro);
}
.nav-grupo[open] > summary .nav-grupo-chevron { transform: rotate(90deg); color: var(--azul-600); }

.nav-grupo-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: .3rem 0 .2rem .95rem;
  padding-left: .65rem;
  border-left: 1px solid var(--azul-100);
}
.nav-grupo-lista a { font-size: .85rem; }

.usuario-caja {
  margin: var(--sp-3);
  padding: var(--sp-3);
  background: var(--azul-050);
  border-radius: var(--radio-sm);
  font-size: var(--text-sm);
}

.usuario-nombre { font-weight: 600; color: var(--azul-800); }

.contenido {
  flex: 1;
  min-width: 0;
  padding: var(--sp-6) var(--sp-8) var(--sp-12);
  animation: fadeSlideUp var(--lento) var(--ease-out) both;
}

.encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.encabezado p { margin: .15rem 0 0; color: var(--gris-600); font-size: .9rem; }

/* ---------- Tarjetas ---------- */

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--azul-200);
  border-radius: var(--radio);
  padding: 1.15rem;
  box-shadow: var(--sombra);
  transition: box-shadow var(--base) var(--ease-out);
}

.tarjeta:hover { box-shadow: var(--sombra-md); }

/* Menú flotante dentro de una tabla (Editar, Contraseña, Departamentos...).
   .tabla-caja necesita overflow-x:auto para tablas anchas, y eso obliga
   al navegador a recortar también el eje vertical (regla del spec:
   overflow-x distinto de "visible" fuerza overflow-y a "auto" aunque no
   se declare) — así que un position:absolute normal se corta contra el
   borde de la tabla en las filas de abajo. aura.js saca este elemento a
   <body> mientras está abierto y lo posiciona con coordenadas de
   página, así ningún contenedor con scroll propio lo puede recortar.
   max-height + scroll interno además evita que crezca sin límite. */
.flotante {
  position: absolute;
  z-index: 200;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

.tarjeta-titulo {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.rejilla { display: grid; gap: var(--sp-4); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.rejilla-lateral {
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
}

.rejilla-lateral-sm {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}

.pegado { position: sticky; top: var(--sp-6); }

/* Columna de tarjetas apiladas (la mitad de una .rejilla-lateral, o
   una lista vertical suelta). min-width: 0 es a propósito: sin él, una
   tabla ancha adentro (ej. una tabla de 5 columnas en una tarjeta)
   puede forzar esta columna — y con ella la página entera — a
   desbordarse hacia los lados en pantallas angostas. */
.columna { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }

/* ---------- Métricas ---------- */

.metrica {
  background: var(--blanco);
  border: 1px solid var(--azul-200);
  border-radius: var(--radio);
  padding: var(--sp-4) 1.15rem;
  box-shadow: var(--sombra);
}

.metrica-valor {
  font-family: var(--display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--azul-700);
}

.metrica-etiqueta {
  font-size: var(--text-sm);
  color: var(--gris-600);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .2rem;
}

/* ============================================================
   Firma: Tablero de post-its
   ============================================================ */

.tablero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 1.35rem 1.15rem;
  padding-top: .35rem;
}

.postit {
  position: relative;
  display: block;
  min-height: 172px;
  padding: 1.4rem var(--sp-4) 2.4rem;
  border-radius: 3px;
  color: var(--azul-900);
  text-decoration: none;
  background: var(--color-nota, var(--azul-100));
  box-shadow: 0 1px 1px rgba(13, 47, 79, .10), 0 8px 18px -6px rgba(13, 47, 79, .22);
  transition:
    transform var(--base) var(--ease-out),
    box-shadow var(--base) var(--ease-out);
  animation: postitIn .4s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.postit:nth-child(3n)   { transform: rotate(-1.1deg); }
.postit:nth-child(3n+1) { transform: rotate(.7deg); }
.postit:nth-child(3n+2) { transform: rotate(-.4deg); }

.postit:hover {
  z-index: 2;
  transform: rotate(0) translateY(-4px);
  box-shadow: 0 2px 3px rgba(13, 47, 79, .12), 0 16px 30px -8px rgba(13, 47, 79, .3);
  text-decoration: none;
}

/* Cinta adhesiva */
.postit::before {
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 1;
  width: 62px;
  height: 19px;
  content: '';
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, .7) 0%,
      rgba(207, 228, 247, .85) 45%,
      rgba(255, 255, 255, .6) 55%,
      rgba(207, 228, 247, .85) 100%);
  border-right: 1px solid rgba(13, 47, 79, .10);
  border-left: 1px solid rgba(13, 47, 79, .10);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(13, 47, 79, .10);
  transform: translateX(-50%) rotate(-1.5deg);
}

/* Nota resuelta */
.postit.resuelto {
  opacity: .58;
  filter: saturate(.4);
}

.postit.resuelto::after {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 22px;
  height: 22px;
  content: '';
  border-radius: 50%;
  background: var(--exito) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.postit-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Botecito de basura: archiva el post-it sin entrar al detalle */
.postit-archivar {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
}

.postit-archivar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  color: var(--azul-900);
  opacity: 0;
  cursor: pointer;
  transition:
    opacity var(--rapido) var(--ease-out),
    background var(--rapido) var(--ease-out),
    color var(--rapido) var(--ease-out);
}

.postit-archivar svg { width: 13px; height: 13px; }

.postit:hover .postit-archivar button,
.postit-archivar button:focus-visible {
  opacity: 1;
}

.postit-archivar button:hover,
.postit-archivar button:focus-visible {
  background: var(--peligro);
  color: #fff;
}

/* Sin hover confiable (táctil): el botón queda siempre visible */
@media (hover: none) {
  .postit-archivar button { opacity: 1; }
}

.postit-folio {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: -.02em;
  opacity: .65;
}

.postit-titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.3;
  margin: .3rem 0 .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.postit-desc {
  font-size: var(--text-sm);
  line-height: 1.4;
  opacity: .75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.postit-pie {
  position: absolute;
  right: var(--sp-4);
  bottom: .8rem;
  left: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .7rem;
  opacity: .7;
}

/* Nota vacía — invitación */
.postit-nuevo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 172px;
  border: 2px dashed var(--azul-300);
  border-radius: 3px;
  background: transparent;
  color: var(--azul-600);
  font-weight: 600;
  text-decoration: none;
  transition:
    background var(--rapido) var(--ease-out),
    border-color var(--rapido) var(--ease-out);
  animation: postitIn .4s var(--ease-out) both;
}

.postit-nuevo:hover {
  background: var(--azul-100);
  border-color: var(--azul-500);
  text-decoration: none;
}

.postit-nuevo .signo { font-size: var(--text-2xl); line-height: 1; font-family: var(--display); }

/* ---------- Etiquetas ---------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .5rem;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.etiqueta-p1 { background: #FBEAE8; color: var(--p1); }
.etiqueta-p2 { background: var(--oro-bg); color: var(--oro-dim); }
.etiqueta-p3 { background: var(--azul-100); color: var(--azul-700); }
.etiqueta-p4 { background: #E6F4EA; color: #1E6E3E; }

.etiqueta-estado   { background: var(--azul-100); color: var(--azul-700); }
.etiqueta-resuelto { background: #E6F4EA; color: #1E6E3E; }
.etiqueta-cerrado  { background: var(--gris-200); color: var(--gris-600); }
.etiqueta-duplicado { background: #F1EAF9; color: #5C3E8C; }

.punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ---------- Formularios ---------- */

.campo { margin-bottom: var(--sp-4); }

.campo label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--azul-800);
  margin-bottom: .3rem;
}

.campo .ayuda {
  font-size: .76rem;
  color: var(--gris-600);
  margin-top: .3rem;
}

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], select, textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--azul-200);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  font-family: var(--texto);
  font-size: .9rem;
  color: var(--azul-900);
  transition:
    border-color var(--rapido) var(--ease-out),
    box-shadow var(--rapido) var(--ease-out);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px var(--azul-100);
  outline: none;
}

textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

/* Selector de archivo: el input en sí no se puede pintar (es del SO),
   pero su botón sí — sin esto se queda gris y desentona con el resto
   de los controles. */
input[type=file] {
  padding: .4rem .6rem .4rem .4rem;
  border-style: dashed;
  font-size: .82rem;
  color: var(--gris-600);
}
input[type=file]::file-selector-button {
  margin-right: .6rem;
  padding: .4rem .75rem;
  border: none;
  border-radius: var(--radio-sm);
  background: var(--azul-100);
  color: var(--azul-700);
  font-family: var(--texto);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--rapido) var(--ease-out);
}
input[type=file]:hover::file-selector-button { background: var(--azul-200); }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  font-family: var(--texto);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition:
    background var(--rapido) var(--ease-out),
    border-color var(--rapido) var(--ease-out),
    transform .1s ease;
}

.btn:active { transform: translateY(1px); }
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primario { background: var(--azul-600); color: var(--blanco); }
.btn-primario:hover:not(:disabled) { background: var(--azul-700); }

.btn-suave { background: var(--azul-100); color: var(--azul-700); }
.btn-suave:hover:not(:disabled) { background: var(--azul-200); }

.btn-linea { background: var(--blanco); border-color: var(--azul-200); color: var(--azul-800); }
.btn-linea:hover:not(:disabled) { border-color: var(--azul-400); background: var(--azul-050); }

.btn-exito   { background: var(--exito); color: var(--blanco); }
.btn-peligro { background: var(--peligro); color: var(--blanco); }

.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

.botonera { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ---------- Tablas ---------- */

.tabla-caja {
  background: var(--blanco);
  border: 1px solid var(--azul-200);
  border-radius: var(--radio);
  /* Recorta las esquinas redondeadas, pero si la tabla no cabe (muchas
     columnas en pantalla angosta), se puede deslizar en vez de perder
     columnas enteras sin forma de verlas. */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--sombra);
}

table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }

thead th {
  background: var(--azul-050);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--azul-200);
  font-size: .72rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--azul-700);
  white-space: nowrap;
}

tbody td { padding: .7rem .9rem; border-bottom: 1px solid var(--azul-100); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--azul-050); }

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

.aviso {
  display: flex;
  gap: .7rem;
  padding: .8rem var(--sp-4);
  border-left: 3px solid;
  border-radius: var(--radio-sm);
  font-size: .87rem;
  margin-bottom: var(--sp-4);
}

.aviso-info    { background: var(--azul-100); border-color: var(--azul-600); color: var(--azul-800); }
.aviso-exito   { background: #E6F4EA; border-color: var(--exito); color: #1B5E3A; }
.aviso-alerta  { background: var(--oro-bg); border-color: var(--oro); color: #7A5C1E; }
.aviso-peligro { background: #FBEAE8; border-color: var(--peligro); color: #8C2F25; }

/* ---------- Chat ---------- */

.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 340px;
}

.chat-hilo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .25rem;
  overflow-y: auto;
  max-height: 420px;
}

.burbuja {
  max-width: 86%;
  padding: .6rem .85rem;
  border-radius: 14px;
  font-size: .87rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: bubbleIn var(--base) var(--ease-out) both;
}

.burbuja-ia {
  align-self: flex-start;
  background: var(--azul-100);
  color: var(--azul-900);
  border-bottom-left-radius: 4px;
}

.burbuja-yo {
  align-self: flex-end;
  background: var(--azul-600);
  color: var(--blanco);
  border-bottom-right-radius: 4px;
}

.chat-entrada { display: flex; gap: .5rem; margin-top: .8rem; }
.chat-entrada input { flex: 1; }

.escribiendo {
  display: inline-flex;
  gap: 4px;
  padding: .3rem 0;
}

.escribiendo span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--azul-400);
  animation: pulso 1.2s infinite ease-in-out;
}

.escribiendo span:nth-child(2) { animation-delay: .15s; }
.escribiendo span:nth-child(3) { animation-delay: .3s; }

/* ---------- Selector de color del post-it ---------- */

.colores { display: flex; gap: .5rem; flex-wrap: wrap; }

.colores input { position: absolute; width: 0; height: 0; opacity: 0; }

.colores label {
  width: 30px;
  height: 30px;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(13, 47, 79, .12);
  transition: transform var(--rapido) var(--ease-out);
}

.colores label:hover { transform: scale(1.08); }
.colores input:checked + label { border-color: var(--azul-800); transform: scale(1.12); }
.colores input:focus-visible + label { outline: 2px solid var(--azul-400); outline-offset: 2px; }

/* ---------- Línea de tiempo ---------- */

.linea { list-style: none; margin: 0; padding: 0; }

.linea li {
  position: relative;
  padding: 0 0 var(--sp-4) 1.35rem;
  border-left: 2px solid var(--azul-100);
  font-size: .86rem;
}

.linea li::before {
  position: absolute;
  top: .35rem;
  left: -6px;
  z-index: 1;
  width: 10px;
  height: 10px;
  content: '';
  border: 2px solid var(--blanco);
  border-radius: 50%;
  background: var(--azul-300);
}

.linea li.sistema::before { background: var(--azul-600); }
.linea li:last-child { border-left-color: transparent; padding-bottom: 0; }

.linea-meta { font-size: .74rem; color: var(--gris-400); }

/* ---------- Estrellas ---------- */

.estrellas { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.estrellas input { position: absolute; width: 0; height: 0; opacity: 0; }

.estrellas label {
  font-size: 1.7rem;
  line-height: 1;
  margin: 0;
  color: var(--gris-200);
  cursor: pointer;
  transition:
    color var(--rapido) var(--ease-out),
    transform var(--rapido) var(--ease-out);
}

.estrellas label:hover,
.estrellas label:hover ~ label,
.estrellas input:checked ~ label { color: #E8B428; }

.estrellas label:hover { transform: scale(1.12); }
.estrellas input:focus-visible + label { outline: 2px solid var(--azul-400); }

.estrellas-vista { color: #E8B428; letter-spacing: 1px; }

/* ---------- Barra de confianza ---------- */

.barra {
  height: 7px;
  border-radius: 100px;
  background: var(--azul-100);
  overflow: hidden;
}

.barra > span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--azul-500), var(--azul-600));
}

/* ---------- Entrada (login) ---------- */

.entrada {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--sp-6);
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--azul-200), transparent 60%),
    radial-gradient(900px 480px at 92% 108%, var(--azul-100), transparent 55%),
    var(--azul-050);
}

.entrada-caja {
  width: 100%;
  max-width: 390px;
  background: var(--blanco);
  border: 1px solid var(--azul-200);
  border-radius: var(--radio-lg);
  padding: var(--sp-8);
  box-shadow: var(--sombra-md);
  animation: fadeSlideUp .4s var(--ease-out) both;
}

.entrada-marca {
  font-family: var(--display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--azul-600);
}

.entrada-lema {
  font-size: .74rem;
  color: var(--gris-600);
  margin: .45rem 0 1.6rem;
  line-height: 1.45;
}

/* ---------- Sugerencias de la IA ---------- */

.sugerencia {
  border: 1px solid var(--azul-200);
  border-left: 3px solid var(--azul-500);
  background: var(--azul-050);
  border-radius: var(--radio-sm);
  padding: .7rem .85rem;
  margin-bottom: .6rem;
}

.sugerencia-titulo { font-weight: 600; font-size: .87rem; margin-bottom: .15rem; }

.vacio {
  text-align: center;
  padding: var(--sp-10) var(--sp-4);
  color: var(--gris-600);
}

.vacio h3 { color: var(--azul-800); }

/* ---------- Details / acordeón (bandeja, buzón) ---------- */

details.tarjeta { padding: 0; }
details.tarjeta summary {
  padding: 1.15rem;
  cursor: pointer;
  border-radius: var(--radio);
  font-weight: 600;
  transition: background var(--rapido) var(--ease-out);
}
details.tarjeta summary:hover { background: var(--azul-050); }
details.tarjeta[open] summary { border-bottom: 1px solid var(--azul-200); border-radius: var(--radio) var(--radio) 0 0; }
details.tarjeta > :not(summary) { padding: 1.15rem; }

/* ---------- Utilidades ---------- */

.mono { font-family: var(--mono); font-size: .82em; letter-spacing: -.02em; }
.silencio { color: var(--gris-600); }
.pequeno { font-size: .82rem; }
.centrado { text-align: center; }
.mt-1 { margin-top: var(--sp-4); }

/* ---------- Animaciones ---------- */

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes postitIn {
  from { opacity: 0; transform: translateY(12px) rotate(0deg); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(4px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulso {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

@keyframes resaltar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 109, 181, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(47, 109, 181, .35); }
}

.resaltado { animation: resaltar .6s ease-in-out 2; }

/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 1000px) {
  .rejilla-lateral,
  .rejilla-lateral-sm { grid-template-columns: minmax(0, 1fr); }
  .pegado { position: static; }
}

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

  .lateral {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--azul-200);
    padding-bottom: var(--sp-2);
  }

  .nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--sp-2);
  }
  .nav-titulo,
  .usuario-caja { display: none; }
  .nav a { white-space: nowrap; }
  .nav-grupo > summary { white-space: nowrap; }
  .nav-grupo-lista {
    flex-direction: row;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  .contenido { padding: var(--sp-5) var(--sp-4) var(--sp-10); }
  .tablero { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 520px) {
  :root { --lateral: 0px; }
  .lateral { padding: var(--sp-3) 0; }
  .marca { padding: 0 var(--sp-3) var(--sp-3); }
  .marca-nombre { font-size: 1.25rem; }
  .nav { gap: 1px; padding: 0 var(--sp-2); }
  .nav a { font-size: .82rem; padding: .4rem .5rem; }
  .contenido { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
  .postit { min-height: 140px; }
}

/* ============================================================
   Accesibilidad
   ============================================================ */

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

  .contenido,
  .entrada-caja,
  .postit, .postit-nuevo,
  .burbuja { animation: none; }

  .postit, .postit:hover { transform: none; }
  .postit:nth-child(3n),
  .postit:nth-child(3n+1),
  .postit:nth-child(3n+2) { transform: none; }

  .resaltado { animation: none; }
}

@media print {
  .lateral, .btn, .chat-entrada, .colores, .no-print { display: none; }
  body { background: var(--blanco); }
  .contenido { padding: 0; animation: none; }
  .tarjeta { box-shadow: none; border: 1px solid #ddd; }
}

/* ============================================================
   Compatibilidad — módulos ITIL (SLA, cambios, CAB, releases,
   CMDB, CSI, continuidad, aprobaciones, autoservicio...)
   Esas páginas se escribieron dando por hecho utilidades tipo
   Tailwind/Bootstrap que no existen en este archivo. En vez de
   reescribir cada página, se traducen aquí a los mismos tokens
   de color/tipografía que usa el resto de AURA.
   ============================================================ */

.container { max-width: 1200px; margin: 0 auto; }
.card {
  background: var(--blanco);
  border: 1px solid var(--azul-200);
  border-radius: var(--radio);
  padding: 1rem;
}
.border          { border: 1px solid var(--azul-200); }
.border-b        { border-bottom: 1px solid var(--azul-200); }
.border-gray-700 { border-color: var(--gris-400); }
.bg-gray-700     { background: var(--gris-600); }
.bg-gray-800     { background: var(--azul-900); }
.rounded         { border-radius: var(--radio); }
.cursor-pointer  { cursor: pointer; }

.flex        { display: flex; }
.flex-1      { flex: 1 1 0%; }
.flex-wrap   { flex-wrap: wrap; }
.items-center{ align-items: center; }
.items-end   { align-items: flex-end; }
.justify-between { justify-content: space-between; }

.grid        { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-2  { grid-column: span 2 / span 2; }
@media (min-width: 768px)  { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.p-8  { padding: 8px; }
.p-16 { padding: 16px; }
.py-4 { padding-top: 4px; padding-bottom: 4px; }

.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-8  { margin-top: 8px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.ml-auto { margin-left: auto; }

.h-8   { height: 8px; }
.h-full{ height: 100%; }
.w-auto{ width: auto; }
.w-full{ width: 100%; }
.max-h-200 { max-height: 200px; }
.overflow-y-auto { overflow-y: auto; }

.text-center { text-align: center; }
.text-xs { font-size: .72rem; }
.text-sm { font-size: .84rem; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.3rem; }
.fs-14   { font-size: 14px; }
.font-semibold { font-weight: 600; }
.text-primary  { color: var(--azul-600); }
.text-gray-300 { color: var(--gris-400); }
.text-gray-400 { color: var(--gris-400); }
.text-gray-500 { color: var(--gris-600); }
.text-green-400  { color: var(--exito); }
.text-yellow-400 { color: var(--oro-dim); }
.text-red-400    { color: var(--p1); }
.bg-green-500  { background: var(--exito); }
.bg-blue-500   { background: var(--azul-600); }
.bg-yellow-500 { background: var(--oro); }

/* Alertas estilo Bootstrap */
.alert { padding: .75rem 1rem; border-radius: var(--radio); font-size: .88rem; }
.alert-success { background: #E6F4EA; color: #1E6E3E; }
.alert-danger  { background: #FBEAE8; color: var(--p1); }

/* Botones estilo Bootstrap (además de los .btn-* propios de AURA) */
.btn-primary { background: var(--azul-600); color: var(--blanco); }
.btn-primary:hover:not(:disabled) { background: var(--azul-700); }
.btn-danger  { background: var(--p1); color: var(--blanco); }
.btn-danger:hover:not(:disabled)  { background: #A53C30; }
.btn-success { background: var(--exito); color: var(--blanco); }
.btn-success:hover:not(:disabled) { background: #237A46; }

/* Formularios estilo Bootstrap — los selectores base (input, select,
   textarea) ya dan el estilo real; esto solo cubre el label y el ancho. */
.form-control { width: 100%; }
.form-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--azul-800);
  margin-bottom: .3rem;
}

/* Insignias de estado (cambios, releases, CAB, CSI, continuidad...) */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-abierto, .badge-resuelto, .badge-desplegado { background: #E6F4EA; color: #1E6E3E; }
.badge-problema, .badge-pausado                    { background: var(--oro-bg); color: var(--oro-dim); }
.badge-cerrado                                     { background: var(--gris-200); color: var(--gris-600); }
.badge-asignado, .badge-en_proceso,
.badge-planeado, .badge-en_progreso                { background: var(--azul-100); color: var(--azul-700); }
.badge-duplicado                                   { background: #F1EAF9; color: #5C3E8C; }
.badge-rollback                                     { background: #FBEAE8; color: var(--p1); }

/* Tabla genérica estilo Bootstrap (distinta de .tabla-caja) */
table.table, .table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .6rem .75rem; border-bottom: 1px solid var(--azul-100); text-align: left; }

/* ============================================================
   Organigrama — árbol jerárquico (raíz → departamentos → jefe → equipo)
   Técnica clásica de "CSS org chart": cada <li> dibuja su propio
   conector con ::before/::after, así que el árbol crece solo sin
   necesidad de calcular posiciones con JS.
   ============================================================ */
.og-scroll { overflow-x: auto; padding: .5rem 0 1.5rem; }
.og-arbol  { display: flex; justify-content: center; min-width: max-content; }

.og-arbol ul {
  display: flex;
  justify-content: center;
  padding-top: 32px;
  position: relative;
  margin: 0;
}
.og-arbol li {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 0;
}

/* Conectores: cada nodo (salvo hijo único) dibuja media línea a cada lado */
.og-arbol li::before,
.og-arbol li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 32px;
  border-top: 2px solid var(--azul-300);
}
.og-arbol li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid var(--azul-300);
}
.og-arbol li:only-child::before,
.og-arbol li:only-child::after { display: none; }
.og-arbol li:only-child { padding-top: 0; }

.og-arbol li:first-child::before,
.og-arbol li:last-child::after { border: 0 none; }
.og-arbol li:last-child::before {
  border-right: 2px solid var(--azul-300);
  border-radius: 0 10px 0 0;
}
.og-arbol li:first-child::after { border-radius: 10px 0 0 0; }

/* Tallo que baja de un nodo padre hacia su fila de hijos */
.og-arbol ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 32px;
  border-left: 2px solid var(--azul-300);
}

/* Ramas colapsables: el equipo se oculta hasta que se hace clic en el
   departamento — así el árbol cabe sin scroll y crece solo bajo demanda. */
.og-arbol li.og-rama > ul { display: none; }
.og-arbol li.og-rama.og-abierto > ul { display: flex; }
.og-rama > .og-nodo { cursor: pointer; }
.og-rama > .og-nodo:hover { border-color: var(--azul-400); box-shadow: 0 4px 14px rgba(13,47,79,.14); }

.og-chevron {
  margin-left: .2rem;
  color: var(--gris-400);
  font-size: 1.05rem;
  line-height: 1;
  flex: none;
  transition: transform .18s var(--ease-out);
}
.og-rama.og-abierto > .og-nodo .og-chevron { transform: rotate(90deg); color: var(--azul-600); }

/* ---------- Tarjeta de nodo ---------- */
.og-nodo {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--blanco);
  border: 1px solid var(--azul-200);
  border-radius: .7rem;
  padding: .5rem .7rem;
  box-shadow: 0 1px 2px rgba(13,47,79,.05);
  min-width: 168px;
  text-align: left;
  transition: transform .15s, box-shadow .15s;
}
.og-nodo:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13,47,79,.1); }

.og-avatar {
  width: 2.15rem; height: 2.15rem; flex: none;
  border-radius: 50%;
  background: var(--azul-100); color: var(--azul-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}
.og-info   { min-width: 0; }
.og-nombre { font-weight: 600; font-size: .86rem; line-height: 1.25; }
.og-meta   { font-size: .74rem; color: var(--gris-600); }

/* Raíz: la organización */
.og-raiz {
  background: var(--azul-900); border-color: var(--azul-900);
  min-width: 200px; padding: .7rem 1rem;
}
.og-raiz .og-nombre { color: var(--blanco); font-family: var(--display); font-size: 1rem; }
.og-raiz .og-meta   { color: var(--azul-200); }
.og-avatar-raiz { background: var(--oro); color: var(--azul-900); }

/* Departamento */
.og-depto { border-color: var(--azul-600); border-width: 1.5px; }
.og-avatar-depto { background: var(--azul-600); color: var(--blanco); }
.og-sin-depto .og-avatar-depto { background: var(--gris-400); }

/* Jefe directo: acento dorado */
.og-jefe { border-color: var(--oro); }
.og-jefe .og-avatar { background: var(--oro-bg); color: var(--oro-dim); }

/* Jefe general: una sola persona por encima de todos los departamentos */
.og-jefe-general {
  border-color: var(--oro);
  border-width: 2px;
  min-width: 190px;
  padding: .6rem .8rem;
  box-shadow: 0 2px 8px rgba(196,148,60,.18);
}
.og-jefe-general .og-nombre { font-family: var(--display); font-size: .92rem; }
.og-jefe-general .og-avatar { width: 2.4rem; height: 2.4rem; font-size: .95rem; }

@media (max-width: 720px) {
  .og-nodo { min-width: 140px; }
}