/* ─────────────────────────────────────────────────────────────
   Agua Bendita · tema de AB Equipos TI
   Sistema visual de la Mesa de servicios (skill agua-bendita-estilos):
   negro cálido, dorado envejecido y marfil, con Jost para el texto y
   Cormorant Garamond para los títulos. Solo modo claro.
   Las variables --ab-* son las que ya usan las plantillas; los tokens
   --gold-*, --ink-*, --brand-* son los de la Mesa de servicios.
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Dorado Agua Bendita (tomado del logotipo, 400 = #C9A45F) */
  --gold-50: #fbf8f1;  --gold-100: #f5eedd; --gold-200: #eadbb8; --gold-300: #dcc28c;
  --gold-400: #c9a45f; --gold-500: #b8914a; --gold-600: #9c773a; --gold-700: #7f5f30;
  --gold-800: #654c2b; --gold-900: #523f26; --gold-950: #2e2212;

  /* Tinta (texto) */
  --ink-950: #16130f; --ink-900: #1f1b17; --ink-800: #2e2822;
  --ink-700: #4a4238; --ink-600: #5f564a; --ink-500: #7a7064;

  /* Marca */
  --brand-navy: #15120f;       /* negro cálido: cabecera, botón primario */
  --brand-navy-mid: #262019;   /* hover */
  --brand-navy-light: #3a3128;
  --brand-ivory: #f7f3ec;      /* fondo de página */
  --brand-gold: #c9a45f;

  /* Neutros cálidos (stone) */
  --stone-50: #fafaf9;  --stone-100: #f5f5f4; --stone-200: #e7e5e4; --stone-300: #d6d3d1;
  --stone-400: #a8a29e; --stone-500: #78716c; --stone-600: #57534e; --stone-700: #44403c; --stone-800: #292524;

  /* Estados (solo semánticos) */
  --ok-bg: #ecfdf5;    --ok-text: #065f46;    --ok-ring: #a7f3d0;
  --error-bg: #fff1f2; --error-text: #9f1239; --error-ring: #fecdd3;
  --warn-bg: #fffbeb;  --warn-text: #78350f;  --warn-ring: #fde68a;
  --na-bg: #f5f5f4;    --na-text: #57534e;    --na-ring: #e7e5e4;

  /* Nombres que ya usan las plantillas del portal */
  --ab-hueso:   var(--brand-ivory);
  --ab-arena:   var(--stone-100);
  --ab-linea:   var(--stone-200);
  --ab-tinta:   var(--ink-900);
  --ab-texto:   var(--ink-800);
  --ab-suave:   var(--ink-600);
  --ab-oro:     var(--gold-400);
  --ab-oro-osc: var(--gold-700);   /* dorado con contraste suficiente sobre claro */
  --ab-negro:   var(--brand-navy);
  --ab-tarjeta: #ffffff;
  --ab-sombra:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ab-sombra-panel: 0 4px 6px -1px rgb(28 25 23 / 0.04), 0 2px 4px -2px rgb(28 25 23 / 0.04);
  --ab-f-texto:  "Jost", system-ui, sans-serif;
  --ab-f-titulo: "Cormorant Garamond", Georgia, serif;
  --ab-f-acento: "Cormorant Garamond", Georgia, serif;
  --ab-curva:    cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
body {
  background-color: var(--brand-ivory);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgb(201 164 95 / 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgb(21 18 15 / 0.05), transparent 60%);
  background-attachment: fixed;
  color: var(--ink-900);
  font-family: var(--ab-f-texto);
  -webkit-font-smoothing: antialiased;
}
h1:not(.uppercase), h2:not(.uppercase) { font-family: var(--ab-f-titulo); letter-spacing: 0.01em; }
h1 { font-weight: 600; }
::selection { background: var(--gold-200); color: var(--ink-950); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--gold-400) !important; outline: none;
  box-shadow: 0 0 0 2px rgb(220 194 140 / 0.6) !important;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(201 164 95 / 0.35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgb(156 119 58 / 0.55); }

/* Títulos con la serif de la marca. Cormorant tiene pesos reales (500–700). */
.font-marca, .ab-titulo { font-family: var(--ab-f-titulo); font-variant-numeric: lining-nums; letter-spacing: 0.01em; }
/* Acento editorial: <em> dentro de un título sale en Cormorant cursiva dorada. */
.ab-titulo em, .font-marca em, .main-area h1 em, .ab-acento {
  font-family: var(--ab-f-acento); font-style: italic; font-weight: 500; color: var(--gold-600);
}
/* Todos los títulos de página del panel de TI. */
html body .main-area h1 {
  font-family: var(--ab-f-titulo); font-weight: 600 !important; font-size: 2.15rem;
  letter-spacing: 0.01em; line-height: 1.1; color: var(--brand-navy); font-variant-numeric: lining-nums;
}

/* Cifras grandes de los indicadores (KPI) en la serif de la marca. */
html body .main-area :is(p, span, div).font-black:is(.text-3xl, .text-4xl, .text-5xl) {
  font-family: var(--ab-f-titulo); font-weight: 700; letter-spacing: .01em; font-variant-numeric: lining-nums;
}

/* ---------- Detalles de marca ---------- */
.brand-rule, .ab-filete, .ab-cinta {
  height: 1px; width: 100%;
  background: linear-gradient(to right, transparent, rgb(201 164 95 / 0.7), transparent);
}
.brand-eyebrow {
  font-family: var(--ab-f-titulo); font-size: 0.875rem; font-style: italic;
  letter-spacing: 0.2em; color: var(--gold-400);
}

/* ── Componentes propios del portal (mismos nombres de siempre) ── */
.ab-card {
  background: var(--ab-tarjeta);
  border: 1px solid rgb(231 229 228 / 0.8);
  border-radius: 1rem;
  box-shadow: var(--ab-sombra);
}
.ab-eyebrow {
  font-family: var(--ab-f-texto); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-600);
}
.ab-titulo { color: var(--brand-navy); font-weight: 600; line-height: 1.05; }
.ab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--ab-f-texto); font-weight: 600; font-size: .8125rem; letter-spacing: .02em;
  padding: .7rem 1.25rem; border-radius: .5rem; border: 0;
  transition: background-color .15s, color .15s, border-color .15s; cursor: pointer;
}
.ab-btn:disabled { opacity: .6; cursor: not-allowed; }
.ab-btn-primario { background: var(--brand-navy); color: #fff; }
.ab-btn-primario:hover { background: var(--brand-navy-mid); color: var(--gold-100); }
.ab-btn-oro { background: var(--gold-400); color: var(--brand-navy); }
.ab-btn-oro:hover { background: var(--gold-300); }
.ab-btn-linea { border: 1px solid rgb(21 18 15 / 0.2); color: var(--brand-navy); background: transparent; }
.ab-btn-linea:hover { background: rgb(21 18 15 / 0.05); }
.ab-input {
  width: 100%; box-sizing: border-box; padding: .625rem .75rem; border-radius: .5rem; font-size: .875rem;
  font-family: var(--ab-f-texto); background: rgb(250 250 249 / 0.6); color: var(--ink-900);
  border: 1px solid var(--stone-200); outline: none; transition: background-color .15s, border-color .15s;
}
.ab-input:focus { background: #fff; border-color: var(--gold-400); box-shadow: 0 0 0 2px rgb(220 194 140 / 0.6); }
.ab-label { display: block; font-family: var(--ab-f-texto); font-size: .875rem; font-weight: 500; color: var(--ink-800); margin-bottom: .35rem; }
.ab-chip { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ab-f-texto); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.ab-accion {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem;
  background: var(--ab-tarjeta); border: 1px solid rgb(231 229 228 / 0.8); border-radius: 1rem;
  box-shadow: var(--ab-sombra); transition: border-color .15s ease, box-shadow .15s ease;
}
.ab-accion:hover { border-color: var(--gold-300); box-shadow: var(--ab-sombra-panel); }
.ab-accion-icono { width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgb(201 164 95 / 0.12); color: var(--gold-700); }

/* ── Componentes de la Mesa de servicios (equivalentes CSS de componentes.md) ── */
.ab-header { position: sticky; top: 0; z-index: 20; background: var(--brand-navy); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.25); color: var(--stone-100); }
.ab-nav-link { color: var(--stone-200); font-size: 13px; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: .5rem; text-decoration: none; transition: background-color .15s, color .15s; }
.ab-nav-link:hover { background: rgb(255 255 255 / 0.06); }
.ab-nav-link.is-active, .ab-nav-link.activo { background: rgb(201 164 95 / 0.10); color: var(--gold-300); }
.ab-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgb(201 164 95 / 0.15); color: var(--gold-300); font-family: var(--ab-f-titulo); font-weight: 600; box-shadow: inset 0 0 0 1px rgb(201 164 95 / 0.4); }

.ab-btn--primary { background: var(--brand-navy); color: #fff; }
.ab-btn--primary:hover { background: var(--brand-navy-mid); }
.ab-btn--hero { width: 100%; justify-content: center; padding: .75rem; background: var(--brand-navy); color: var(--gold-200); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2); }
.ab-btn--hero:hover { background: var(--brand-navy-mid); color: var(--gold-100); }
.ab-btn--secondary { background: #fff; color: var(--stone-700); border: 1px solid var(--stone-200); box-shadow: var(--ab-sombra); font-weight: 500; }
.ab-btn--secondary:hover { background: var(--stone-50); border-color: var(--stone-300); }
.ab-btn--outline { background: transparent; color: var(--brand-navy); border: 1px solid rgb(21 18 15 / 0.2); }
.ab-btn--outline:hover { background: rgb(21 18 15 / 0.05); }
.ab-btn--cta { border-radius: 9999px; height: 2.25rem; font-size: 13px; background: var(--gold-400); color: var(--brand-navy); }
.ab-btn--cta:hover { background: var(--gold-300); }

.ab-card--muted { background: var(--stone-50); border: 0; border-radius: .75rem; padding: 1rem; }
.ab-card--dark { background: var(--brand-navy); color: var(--stone-100); border-radius: .75rem; padding: 1.25rem 1.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 0 0 1px rgb(201 164 95 / 0.25); }

.ab-table-panel { overflow: hidden; background: #fff; border: 1px solid rgb(231 229 228 / 0.9); border-radius: 1rem; box-shadow: var(--ab-sombra-panel); }
.ab-table-wrap { overflow-x: auto; }
.ab-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; line-height: 1.625; color: var(--ink-800); }
.ab-table thead tr { background: linear-gradient(to bottom, rgb(245 245 244 / 0.95), rgb(250 250 249 / 0.9)); }
.ab-table th { padding: .625rem .75rem; text-align: left; white-space: nowrap; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--brand-navy); border-bottom: 1px solid rgb(231 229 228 / 0.8); }
.ab-table td { padding: .5rem .75rem; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--stone-100); }
.ab-table tbody tr:hover { background: rgb(251 248 241 / 0.7); }

.ab-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: .125rem .625rem; font-size: .75rem; font-weight: 500; box-shadow: inset 0 0 0 1px var(--na-ring); background: var(--na-bg); color: var(--na-text); }
.ab-badge--ok    { background: var(--ok-bg);    color: var(--ok-text);    box-shadow: inset 0 0 0 1px var(--ok-ring); }
.ab-badge--error { background: var(--error-bg); color: var(--error-text); box-shadow: inset 0 0 0 1px var(--error-ring); }
.ab-badge--warn  { background: var(--warn-bg);  color: var(--warn-text);  box-shadow: inset 0 0 0 1px var(--warn-ring); }
.ab-badge--brand { background: rgb(201 164 95 / 0.10); color: var(--gold-700); box-shadow: inset 0 0 0 1px rgb(201 164 95 / 0.3); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }

.ab-alert { border-radius: .75rem; padding: .75rem 1rem; font-size: .875rem; border: 1px solid; }
.ab-alert--ok    { background: var(--ok-bg);    color: #064e3b; border-color: var(--ok-ring); }
.ab-alert--error { background: var(--error-bg); color: var(--error-text); border-color: var(--error-ring); }
.ab-alert--warn  { background: var(--warn-bg);  color: var(--warn-text);  border-color: var(--warn-ring); }
.ab-alert--info  { background: rgb(184 145 74 / 0.05); color: var(--ink-800); border-color: rgb(184 145 74 / 0.3); }


/* ═════════════════════════════════════════════════════════════
   Capa interactiva de la marca (la activa static/js/aguabendita.js)
   Todo es decorativo y sobrio: si el JS no carga, la página se ve completa.
   ═════════════════════════════════════════════════════════════ */

/* Brillo dorado muy tenue que sigue al cursor sobre tarjetas y accesos. */
.ab-brillo { position: relative; isolation: isolate; }
.ab-brillo::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(201 164 95 / 0.08), transparent 45%);
}
.ab-brillo:hover::after { opacity: 1; }

/* Subrayado dorado que crece al pasar el cursor por los enlaces del menú. */
.ab-subrayado { position: relative; }
.ab-subrayado::before { content: ''; position: absolute; left: .5rem; right: .5rem; bottom: -2px; height: 1px;
  background: var(--gold-400); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ab-curva); }
.ab-subrayado:hover::before { transform: scaleX(1); }

/* Antes llevaba el estampado tropical; con el sistema de la Mesa de servicios
   queda solo un resplandor dorado radial, como el aside del login. */
.ab-estampado { position: relative; }
.ab-estampado::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 35%, rgb(201 164 95 / 0.14), transparent 65%);
}
.ab-estampado > * { position: relative; }

/* Cinta con texto en movimiento (login). */
.ab-marquesina { overflow: hidden; white-space: nowrap; border-block: 1px solid rgb(201 164 95 / 0.25); }
.ab-marquesina-pista { display: inline-flex; gap: 2.5rem; padding: .6rem 0; animation: ab-marquesina 38s linear infinite; }
.ab-marquesina:hover .ab-marquesina-pista { animation-play-state: paused; }
.ab-marquesina span { font-family: var(--ab-f-texto); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.ab-marquesina em { font-family: var(--ab-f-acento); font-style: italic; letter-spacing: .04em; text-transform: none; font-size: 14px; color: var(--gold-300); }
@keyframes ab-marquesina { to { transform: translateX(-50%); } }

/* Quien pidió menos movimiento en su sistema no ve ninguna animación. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}