/*
 * YEFRIS — tokens.css v1.0  (Identidad Corporativa · 28/03/2026)
 * App FastAPI: web/static/css/tokens.css
 */

:root,
[data-theme="light"] {
  --y-page-bg:       #E8F4F1;
  --y-page-gradient:
    radial-gradient(ellipse at 94% 0%,  rgba(45,212,191,0.18) 0%, transparent 48%),
    radial-gradient(ellipse at 6%  100%, rgba(212,137,26,0.11) 0%, transparent 48%);
  --y-surface:       #FFFFFF;
  --y-surface-sub:   #F0FAF8;
  --y-sidebar:       #FFFFFF;
  --y-border:        rgba(0,0,0,0.07);
  --y-border-strong: rgba(0,0,0,0.12);
  --y-text-1:   #0D1412;
  --y-text-2:   #3A5049;
  --y-text-3:   #5E7A70;
  --y-brand:          #1B6D63;
  --y-brand-vivid:    #2DD4BF;
  --y-brand-hover:    #1E8E80;
  --y-brand-subtle:   rgba(27,109,99,0.10);
  --y-brand-border:   rgba(45,212,191,0.28);
  --y-brand-shadow:   rgba(45,212,191,0.13);
  --y-amber:          #D4891A;
  --y-amber-subtle:   rgba(212,137,26,0.10);
  --y-amber-border:   rgba(212,137,26,0.26);
  --y-amber-shadow:   rgba(212,137,26,0.11);
  --y-ok:     #16A34A;  --y-ok-bg:  rgba(22,163,74,0.10);
  --y-wa:     #D97706;  --y-wa-bg:  rgba(217,119,6,0.10);
  --y-er:     #DC2626;  --y-er-bg:  rgba(220,38,38,0.10);
  --y-in:     #0284C7;  --y-in-bg:  rgba(2,132,199,0.10);
  --y-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

.dark,
[data-theme="dark"] {
  --y-page-bg: #080A09;
  --y-page-gradient:
    radial-gradient(ellipse at 94% 0%,  rgba(45,212,191,0.07) 0%, transparent 48%),
    radial-gradient(ellipse at 6%  100%, rgba(212,137,26,0.05) 0%, transparent 48%);
  --y-surface:       #181C18;
  --y-surface-sub:   #1E2320;
  --y-sidebar:       #0F1210;
  --y-border:        rgba(255,255,255,0.055);
  --y-border-strong: rgba(255,255,255,0.09);
  --y-text-1:   #EDF0EB;
  --y-text-2:   #A0AE99;
  --y-text-3:   #7A8A82;
  --y-brand:          #2DD4BF;
  --y-brand-vivid:    #2DD4BF;
  --y-brand-hover:    #92DCD3;
  --y-brand-subtle:   rgba(45,212,191,0.13);
  --y-brand-border:   rgba(45,212,191,0.18);
  --y-brand-shadow:   rgba(45,212,191,0.09);
  --y-amber:          #F59E0B;
  --y-amber-subtle:   rgba(245,158,11,0.12);
  --y-amber-border:   rgba(245,158,11,0.18);
  --y-amber-shadow:   rgba(245,158,11,0.07);
  --y-ok:     #22C55E;  --y-ok-bg:  rgba(34,197,94,0.12);
  --y-wa:     #F59E0B;  --y-wa-bg:  rgba(245,158,11,0.12);
  --y-er:     #F87171;  --y-er-bg:  rgba(248,113,113,0.12);
  --y-in:     #38BDF8;  --y-in-bg:  rgba(56,189,248,0.12);
}

/* ── EXIF orientation fix for mobile photos ── */
img { image-orientation: from-image; }

/* ── Fondo de página ── */
.y-page {
  background: var(--y-page-gradient), var(--y-page-bg);
  min-height: 100vh;
}

/* ── Sistema de cards ── */
.cF {
  background:    var(--y-surface);
  border:        none;
  border-radius: 14px;
  box-shadow:    0 2px 18px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
}
.dark .cF { box-shadow: 0 2px 18px rgba(0,0,0,0.40), 0 1px 4px rgba(0,0,0,0.30); }

.cT {
  background:    var(--y-surface);
  border:        1px solid var(--y-brand-border);
  border-radius: 14px;
  box-shadow:    0 2px 14px var(--y-brand-shadow), 0 1px 3px rgba(45,212,191,0.06);
}

.cA {
  background:    var(--y-surface);
  border:        1px solid var(--y-amber-border);
  border-radius: 14px;
  box-shadow:    0 2px 14px var(--y-amber-shadow), 0 1px 3px rgba(212,137,26,0.06);
}

/* ── Tags / badges ── */
.y-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 99px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.y-tag-brand  { background: var(--y-brand-subtle);  color: var(--y-brand); }
.y-tag-amber  { background: var(--y-amber-subtle);  color: var(--y-amber); }
.y-tag-ok     { background: var(--y-ok-bg);         color: var(--y-ok); }
.y-tag-warn   { background: var(--y-wa-bg);         color: var(--y-wa); }
.y-tag-error  { background: var(--y-er-bg);         color: var(--y-er); }
.y-tag-muted  { background: var(--y-border);        color: var(--y-text-3); }

/* ── Gradient text para KPIs ── */
.y-gradient-text {
  background: linear-gradient(135deg, var(--y-brand-vivid) 30%, var(--y-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Botones base (tokens.css simplificado) ── */
.y-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px;
  background: linear-gradient(135deg, #1B6D63, #2DD4BF);
  color: #0C1B19;
  border: none; border-radius: 8px;
  font-family: var(--y-font-sans);
  font-weight: 800; font-size: 0.875rem;
  cursor: pointer; transition: opacity 0.15s;
}
.y-btn-primary:hover { opacity: 0.88; }

.y-btn-ghost {
  display: inline-flex; align-items: center;
  padding: 9px 20px;
  background: var(--y-brand-subtle);
  color: var(--y-brand);
  border: none; border-radius: 8px;
  font-family: var(--y-font-sans);
  font-weight: 600; font-size: 0.875rem;
  cursor: pointer;
}

/* ── Caps label ── */
.y-caps {
  font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--y-text-3);
}


/* ─────────────────────────────────────────────────────────
   ALIASES DE COMPATIBILIDAD — mapean variables del sistema
   anterior a los nuevos tokens --y-*
   No eliminar hasta que todos los templates estén migrados.
   ───────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --brand:              var(--y-brand-vivid);
  --bg-blur:            rgba(255,255,255,0.82);
  --bg-elevated:        var(--y-surface);
  --bg-glass-hover:     var(--y-surface-sub);
  --border-default:     var(--y-border);
  --text-primary:       var(--y-text-1);
  --text-secondary:     var(--y-text-2);
  --text-tertiary:      var(--y-text-3);
  --danger-light:       var(--y-er);
  --bg-page:            var(--y-page-bg);
  --surface:            var(--y-surface);
  --color-bg-base:      var(--y-page-bg);
  --bg-base:            var(--y-page-bg);
  --bg-surface:         var(--y-surface-sub);
  --bg-overlay:         var(--y-brand-subtle);
  --border-hover:       var(--y-brand-border);
  --brand-light:        var(--y-brand);
  --text-quaternary:    var(--y-text-3);
  --text-muted:         var(--y-text-2);
  --bg-glass:           rgba(255,255,255,0.65);
  --bg-glass-hover:     rgba(255,255,255,0.85);
}

.dark,
[data-theme="dark"] {
  --brand:              var(--y-brand-vivid);
  --bg-blur:            rgba(8,10,9,0.82);
  --bg-elevated:        var(--y-surface);
  --bg-glass-hover:     var(--y-surface-sub);
  --border-default:     var(--y-border);
  --text-primary:       var(--y-text-1);
  --text-secondary:     var(--y-text-2);
  --text-tertiary:      var(--y-text-3);
  --danger-light:       var(--y-er);
  --bg-page:            var(--y-page-bg);
  --surface:            var(--y-surface);
  --color-bg-base:      var(--y-page-bg);
  --bg-base:            var(--y-page-bg);
  --bg-surface:         var(--y-surface-sub);
  --bg-overlay:         var(--y-brand-subtle);
  --border-hover:       var(--y-brand-border);
  --brand-light:        var(--y-brand);
  --text-quaternary:    var(--y-text-3);
  --text-muted:         var(--y-text-2);
  --bg-glass:           rgba(255,255,255,0.06);
  --bg-glass-hover:     rgba(255,255,255,0.10);
}