/* =========================================================================
   SEALED BID — MONTE LÍBANO 255 — administracion.css
   Deal Dashboard privado — rediseño "Premium & Ejecutivo" (2026-09-03).
   Estética: dark slate corporativo, glassmorphism sutil, acentos esmeralda/
   violeta/dorado, tipografía monoespaciada en métricas. Módulo totalmente
   independiente de cliente.css — nada de este archivo afecta al público.
   ========================================================================= */

:root{
  /* ---- Superficie base: slate ejecutivo oscuro ---- */
  --c-bg:            #0A0D13;
  --c-bg-alt:        #10141C;
  --c-surface:       rgba(255,255,255,.035);
  --c-surface-solid: #12161F;
  --c-surface-hover: rgba(255,255,255,.06);
  --c-ink:           #F2F4F7;
  --c-graphite:      #C7CCD6;
  --c-stone:         #8A90A0;
  --c-stone-light:   #565D6C;
  --c-line:          rgba(255,255,255,.08);
  --c-line-strong:   rgba(255,255,255,.16);

  /* ---- Acentos ---- */
  --c-forest:        #34D399;   /* esmeralda — métricas positivas / estado activo */
  --c-forest-dark:   #0EA772;
  --c-forest-tint:   rgba(52,211,153,.13);
  --c-violet:        #8B80FF;   /* violeta nocturno — contraste / info */
  --c-violet-dark:   #6D5DFC;
  --c-violet-tint:   rgba(139,128,255,.14);
  --c-champagne:     #D9BD84;   /* dorado tenue — VIP / premium */
  --c-champagne-tint:rgba(217,189,132,.14);
  --c-champagne-dark:#C7A968;
  --c-negative:      #F0685F;
  --c-negative-tint: rgba(240,104,95,.14);
  --c-amber:         #F2B84B;
  --c-amber-tint:    rgba(242,184,75,.14);
  --c-blue:          #5FA8F5;

  --c-sidebar:       #070A0F;
  --c-sidebar-line:  rgba(255,255,255,.06);
  --c-white:         #FFFFFF;

  --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 720ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.28), 0 10px 28px rgba(0,0,0,.38);
  --shadow-lift: 0 24px 64px rgba(0,0,0,.55);
  --glow-emerald: 0 0 0 1px rgba(52,211,153,.28), 0 8px 28px rgba(52,211,153,.14);
  --glow-violet: 0 0 0 1px rgba(139,128,255,.28), 0 8px 28px rgba(139,128,255,.14);
  --sidebar-w: 268px;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; color: var(--c-ink);
  font-family: var(--font-sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(52,211,153,.07), transparent 58%),
    radial-gradient(900px 500px at 102% 0%, rgba(139,128,255,.08), transparent 55%),
    var(--c-bg);
  background-attachment: fixed;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
h1,h2,h3,h4{ font-family: var(--font-serif); font-weight:400; margin:0; color:var(--c-ink); }
.ic{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-4px; flex-shrink:0; transition: transform var(--t-fast) var(--ease); }
.ic-xs{ width:13px; height:13px; }
.ic-sm{ width:16px; height:16px; }
.ic-lg{ width:34px; height:34px; stroke-width:1.2; }
button:active .ic, a:active .ic{ transform: scale(.88); }
code{ font-family: var(--font-mono); font-size:.92em; background: rgba(255,255,255,.06); color: var(--c-graphite); padding:2px 6px; border-radius:4px; }

::selection{ background: var(--c-forest-tint); color: var(--c-ink); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius:20px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.2); background-clip:content-box; }

.brand-mark{ width:34px; height:34px; border:1px solid currentColor; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:13px; flex-shrink:0; }

/* ---------------------------------------------------------------------
   BOTONES / FORMS
   --------------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; border-radius:var(--radius-sm); border:1px solid transparent; transition: all var(--t-fast) var(--ease); }
.btn-primary{ background: linear-gradient(135deg, var(--c-forest), var(--c-forest-dark)); color:#06130D; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px rgba(52,211,153,.22); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 28px rgba(52,211,153,.32); }
.btn-primary:active{ transform: translateY(0); }
.btn-outline{ background: var(--c-surface); border-color: var(--c-line-strong); color: var(--c-ink); backdrop-filter: blur(10px); }
.btn-outline:hover{ border-color: var(--c-forest); color: var(--c-forest); background: var(--c-surface-hover); }
.btn-sm{ padding:9px 16px; font-size:11px; }
.btn-block{ width:100%; }

.section-eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-champagne); font-weight:700; margin:0 0 10px; }
.overlay-title{ font-size:24px; margin-bottom:6px; }
.overlay-sub{ color:var(--c-stone); font-size:13.5px; margin-bottom:24px; }

.ml-form{ display:flex; flex-direction:column; gap:20px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; font-size:12px; letter-spacing:.03em; color:var(--c-stone); font-weight:600; }
.field-full{ grid-column:1/-1; }
.field input, .field select, .field textarea{ border:1px solid var(--c-line-strong); border-radius:var(--radius-sm); padding:11px 13px; background: rgba(255,255,255,.03); color:var(--c-ink); font-size:14px; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--c-forest); background: rgba(255,255,255,.055); }
.field textarea{ min-height:84px; resize:vertical; font-family:inherit; }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

.form-success{ text-align:center; padding:10px 0; display:flex; flex-direction:column; align-items:center; gap:12px; color: var(--c-forest); }
.form-success h4{ font-size:20px; }
.form-success p{ color:var(--c-stone); font-size:13.5px; max-width:360px; }

/* ---------------------------------------------------------------------
   PANTALLA DE ACCESO (GATE)
   --------------------------------------------------------------------- */
.gate{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(900px 480px at 18% 10%, rgba(52,211,153,.10), transparent 55%),
    radial-gradient(760px 420px at 88% 88%, rgba(139,128,255,.12), transparent 55%),
    var(--c-sidebar);
}
.gate.is-hidden{ display:none; }
.gate-panel{
  max-width:400px; width:100%; text-align:center; color:#fff; position:relative;
  background: rgba(255,255,255,.03); border:1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 48px 38px; backdrop-filter: blur(20px); box-shadow: var(--shadow-lift);
  animation: gateRise 640ms var(--ease) both;
}
@keyframes gateRise{ from{ opacity:0; transform: translateY(18px) scale(.98); } to{ opacity:1; transform:none; } }
.gate-panel .brand-mark{ margin:0 auto 26px; width:52px; height:52px; font-size:17px; border-color: rgba(255,255,255,.35); box-shadow: var(--glow-emerald); }
.gate-eyebrow{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--c-champagne); font-weight:700; margin-bottom:14px; }
.gate-panel h1{ color:#fff; font-size:32px; margin-bottom:12px; }
.gate-sub{ color: rgba(242,244,247,.55); font-size:14px; margin-bottom:34px; }
.gate-note{ margin-top:18px; font-size:11px; color: rgba(242,244,247,.35); letter-spacing:.03em; }

/* ---------------------------------------------------------------------
   LAYOUT — SIDEBAR + MAIN
   --------------------------------------------------------------------- */
.admin-shell{ display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w); flex-shrink:0; background: rgba(7,10,15,.7); backdrop-filter: blur(20px) saturate(140%);
  color: rgba(242,244,247,.78); border-right:1px solid var(--c-sidebar-line);
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:100;
  transition: transform var(--t-med) var(--ease);
}
.sidebar-brand{ display:flex; align-items:center; gap:12px; padding: 26px 22px; border-bottom:1px solid var(--c-sidebar-line); }
.sidebar-brand .brand-mark{ color:#fff; border-color: rgba(255,255,255,.35); }
.sidebar-brand .brand-text{ display:block; font-size:12px; letter-spacing:.1em; font-weight:700; color:#fff; }
.sidebar-brand .brand-sub{ display:block; font-size:11px; color: var(--c-champagne); margin-top:2px; }

.sidebar-nav{ display:flex; flex-direction:column; padding: 14px 12px; gap:3px; flex:1; overflow-y:auto; }
.nav-item{
  display:flex; align-items:center; gap:12px; text-align:left; background:none; border:none; color: rgba(242,244,247,.58);
  padding:12px 12px; border-radius:var(--radius-sm); font-size:13px; letter-spacing:.02em; font-weight:500;
  position:relative; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.nav-item:hover{ background: rgba(255,255,255,.05); color:#fff; padding-left:16px; }
.nav-item:hover .ic{ transform: scale(1.08); }
.nav-item.is-active{
  background: linear-gradient(135deg, rgba(52,211,153,.16), rgba(52,211,153,.05));
  color:#fff; box-shadow: inset 0 0 0 1px rgba(52,211,153,.3);
}
.nav-item.is-active::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:3px; background: var(--c-forest); box-shadow: 0 0 10px rgba(52,211,153,.7);
}
.nav-item.is-active .ic{ color: var(--c-forest); }

.sidebar-exit{ padding: 18px 24px; border-top:1px solid var(--c-sidebar-line); font-size:12px; color: rgba(242,244,247,.45); transition: color var(--t-fast) var(--ease); }
.sidebar-exit:hover{ color: var(--c-forest); }

.sidebar-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px); z-index:90; }

.admin-main{ flex:1; margin-left: var(--sidebar-w); min-width:0; }

.admin-topbar{
  position:sticky; top:0; z-index:20; background: rgba(10,13,19,.72); backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid var(--c-line); display:flex; align-items:center; gap:18px; padding: 18px 32px;
}
.topbar-toggle{ display:none; background:none; border:none; color:var(--c-ink); }
.topbar-title{ flex:1; }
.topbar-title h1{ font-size:24px; }
.topbar-title p{ margin:2px 0 0; font-size:12.5px; color:var(--c-stone); }
.status-pill{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:9px 16px; border-radius:20px; background: var(--c-forest-tint); color: var(--c-forest); border:1px solid rgba(52,211,153,.25); }
.status-pill .dot{ width:7px; height:7px; border-radius:50%; background: var(--c-forest); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation: pulseDot 2.2s infinite; }
.status-pill.closed{ background: var(--c-negative-tint); color: var(--c-negative); border-color: rgba(240,104,95,.25); }
.status-pill.closed .dot{ background: var(--c-negative); box-shadow:0 0 0 0 rgba(240,104,95,.6); animation: pulseDotRed 2.2s infinite; }

.admin-content{ padding: 28px 32px 80px; max-width: 1360px; }
.view[hidden]{ display:none; }
.view:not([hidden]){ animation: viewFadeIn var(--t-med) var(--ease) both; }
@keyframes viewFadeIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }

@media (max-width: 1080px){
  .sidebar{ transform: translateX(-100%); box-shadow: var(--shadow-lift); }
  .sidebar.is-open{ transform: translateX(0); }
  .sidebar-scrim.is-open{ display:block; }
  .admin-main{ margin-left:0; }
  .topbar-toggle{ display:flex; align-items:center; justify-content:center; }
  .admin-content{ padding: 22px 18px 70px; }
}

/* ---------------------------------------------------------------------
   KPI GRID
   --------------------------------------------------------------------- */
.kpi-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom:24px; }
.kpi-card{
  position:relative; overflow:hidden; background: var(--c-surface); border:1px solid var(--c-line); border-radius: var(--radius-md);
  padding: 22px 22px; box-shadow: var(--shadow-soft); backdrop-filter: blur(16px);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  animation: cardRise var(--t-med) var(--ease) both;
}
.kpi-grid .kpi-card:nth-child(1){ animation-delay: 0ms; }
.kpi-grid .kpi-card:nth-child(2){ animation-delay: 40ms; }
.kpi-grid .kpi-card:nth-child(3){ animation-delay: 80ms; }
.kpi-grid .kpi-card:nth-child(4){ animation-delay: 120ms; }
.kpi-grid .kpi-card:nth-child(5){ animation-delay: 160ms; }
.kpi-grid .kpi-card:nth-child(6){ animation-delay: 200ms; }
.kpi-grid .kpi-card:nth-child(7){ animation-delay: 240ms; }
.kpi-grid .kpi-card:nth-child(8){ animation-delay: 280ms; }
@keyframes cardRise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
.kpi-card:hover{ transform: translateY(-3px); border-color: rgba(52,211,153,.32); box-shadow: var(--shadow-soft), var(--glow-emerald); }
.kpi-card .kpi-label{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-stone); font-weight:700; margin-bottom:12px; display:block; position:relative; z-index:2; }
.kpi-card .kpi-value{ font-family: var(--font-mono); font-weight:600; font-size:30px; color: var(--c-ink); position:relative; z-index:2; font-variant-numeric: tabular-nums; letter-spacing:-.01em; }
.kpi-card .kpi-delta{ font-size:12px; color: var(--c-forest); margin-top:8px; display:block; position:relative; z-index:2; }
.kpi-card .kpi-spark{ position:absolute; left:0; right:0; bottom:0; height:44px; opacity:.5; pointer-events:none; transition: opacity var(--t-fast) var(--ease); z-index:1; }
.kpi-card:hover .kpi-spark{ opacity:.95; }
.kpi-card .kpi-spark path.spark-fill{ transition: opacity var(--t-fast) var(--ease); }
@media (max-width: 1080px){ .kpi-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .kpi-grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   PANELES / GRÁFICAS
   --------------------------------------------------------------------- */
.panel-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:16px; margin-bottom:16px; align-items:stretch; }
.panel{
  background: var(--c-surface); border:1px solid var(--c-line); border-radius: var(--radius-md); padding: 22px 24px;
  box-shadow: var(--shadow-soft); margin-bottom:16px; backdrop-filter: blur(16px);
  animation: cardRise var(--t-med) var(--ease) both;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; }
.panel-head h3{ font-size:17px; }
.panel-tag{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color: var(--c-champagne); background: var(--c-champagne-tint); border:1px solid rgba(217,189,132,.25); padding:4px 9px; border-radius:20px; }
.link-btn{ background:none; border:none; color: var(--c-forest); font-size:12px; font-weight:700; display:flex; align-items:center; gap:5px; transition: gap var(--t-fast) var(--ease); }
.link-btn:hover{ gap:9px; }
@media (max-width: 980px){ .panel-grid{ grid-template-columns:1fr; } }

.chart-bars{ display:flex; flex-direction:column; gap:14px; }
.chart-bar-row{
  display:grid; grid-template-columns: 130px 1fr 46px; align-items:center; gap:12px; font-size:12.5px;
  border-radius: var(--radius-sm); padding:4px 6px; margin:-4px -6px; transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  animation: rowSlideIn var(--t-med) var(--ease) both;
}
.chart-bars .chart-bar-row:nth-child(1){ animation-delay:0ms; } .chart-bars .chart-bar-row:nth-child(2){ animation-delay:50ms; }
.chart-bars .chart-bar-row:nth-child(3){ animation-delay:100ms; } .chart-bars .chart-bar-row:nth-child(4){ animation-delay:150ms; }
.chart-bars .chart-bar-row:nth-child(5){ animation-delay:200ms; }
@keyframes rowSlideIn{ from{ opacity:0; transform: translateX(-8px); } to{ opacity:1; transform:none; } }
.chart-bars:hover .chart-bar-row{ opacity:.5; }
.chart-bars .chart-bar-row:hover{ opacity:1; background: rgba(255,255,255,.04); }
.chart-bar-row .cbr-label{ color:var(--c-graphite); font-weight:600; }
.chart-bar-track{ background: rgba(255,255,255,.05); border-radius:20px; height:10px; overflow:hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.chart-bar-fill{ height:100%; background: linear-gradient(90deg, var(--c-forest-dark), var(--c-forest)); border-radius:20px; box-shadow: 0 0 10px rgba(52,211,153,.45); transition: width var(--t-slow) var(--ease); }
.chart-bar-row .cbr-value{ text-align:right; font-variant-numeric:tabular-nums; color:var(--c-stone); font-family:var(--font-mono); }

.funnel-mini{ display:flex; flex-direction:column; gap:10px; }
.funnel-mini-row{
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035); border:1px solid var(--c-line); font-size:12.5px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  animation: rowSlideIn var(--t-med) var(--ease) both;
}
.funnel-mini-row:nth-child(1){ animation-delay:0ms; } .funnel-mini-row:nth-child(2){ animation-delay:50ms; }
.funnel-mini-row:nth-child(3){ animation-delay:100ms; } .funnel-mini-row:nth-child(4){ animation-delay:150ms; }
.funnel-mini-row:hover{ background: rgba(255,255,255,.06); border-color: var(--c-line-strong); }
.funnel-mini-row b{ font-variant-numeric: tabular-nums; font-family:var(--font-mono); color: var(--c-ink); }

.funnel-full{ display:flex; flex-direction:column; gap:12px; }
.funnel-step{ display:flex; align-items:center; gap:18px; animation: rowSlideIn var(--t-med) var(--ease) both; }
.funnel-step:nth-child(1){ animation-delay:0ms; } .funnel-step:nth-child(2){ animation-delay:60ms; }
.funnel-step:nth-child(3){ animation-delay:120ms; } .funnel-step:nth-child(4){ animation-delay:180ms; }
.funnel-step:nth-child(5){ animation-delay:240ms; } .funnel-step:nth-child(6){ animation-delay:300ms; }
.funnel-full:hover .funnel-step{ opacity:.55; }
.funnel-full .funnel-step:hover{ opacity:1; }
.funnel-step .fs-bar{
  height:38px; background: linear-gradient(90deg, var(--c-violet-dark), var(--c-violet)); border-radius: var(--radius-sm);
  display:flex; align-items:center; padding:0 16px; color:#0B0A16; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  transition: width var(--t-slow) var(--ease), opacity var(--t-fast) var(--ease); white-space:nowrap;
  font-family: var(--font-mono); box-shadow: 0 0 16px rgba(139,128,255,.35);
}
.funnel-step .fs-label{ width:150px; flex-shrink:0; font-size:12.5px; color:var(--c-stone); text-align:right; }
.funnel-step .fs-pct{ font-size:11.5px; color: var(--c-stone); width:56px; flex-shrink:0; font-family:var(--font-mono); }
@media (max-width:700px){ .funnel-step .fs-label{ width:96px; font-size:11px; } }

/* ---- Tooltip flotante para gráficos ---- */
.chart-tooltip{
  position:fixed; z-index:999; pointer-events:none; opacity:0; transform: translate(-50%,-100%) translateY(-10px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  background: rgba(15,19,27,.92); border:1px solid var(--c-line-strong); border-radius:10px; padding:9px 13px;
  backdrop-filter: blur(12px); box-shadow: var(--shadow-lift); font-size:12px; color:var(--c-ink); white-space:nowrap;
}
.chart-tooltip.is-visible{ opacity:1; transform: translate(-50%,-100%) translateY(-16px); }
.chart-tooltip b{ color: var(--c-forest); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------
   TABLAS
   --------------------------------------------------------------------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
.data-table thead th{ text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-stone); font-weight:700; padding:0 14px 12px; border-bottom:1px solid var(--c-line-strong); white-space:nowrap; }
.data-table tbody td{ padding:14px; border-bottom:1px solid var(--c-line); vertical-align:middle; white-space:nowrap; transition: color var(--t-fast) var(--ease); }
.data-table tbody tr{ cursor:pointer; transition: background var(--t-fast) var(--ease); }
.data-table tbody tr:hover{ background: rgba(255,255,255,.045); }
.data-table tbody tr:hover td:first-child{ box-shadow: inset 3px 0 0 var(--c-forest); }
.data-table .cell-strong{ font-weight:700; color:var(--c-ink); font-family:var(--font-mono); }
.data-table .cell-muted{ color:var(--c-stone); }

.badge{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; padding:5px 11px; border-radius:20px; white-space:nowrap; border:1px solid transparent; }
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.badge-recibida{ background: rgba(255,255,255,.06); color: var(--c-stone); border-color: rgba(255,255,255,.1); }
.badge-recibida::before{ animation: pulseDotSoft 2.4s infinite; }
.badge-revision{ background: var(--c-amber-tint); color: var(--c-amber); border-color: rgba(242,184,75,.25); }
.badge-revision::before{ animation: pulseDotAmber 2.2s infinite; }
.badge-informacion{ background: var(--c-champagne-tint); color: var(--c-champagne); border-color: rgba(217,189,132,.25); }
.badge-informacion::before{ animation: pulseDotGold 2.2s infinite; }
.badge-finalista{ background: var(--c-forest-tint); color: var(--c-forest); border-color: rgba(52,211,153,.25); }
.badge-finalista::before{ animation: pulseDot 2.2s infinite; }
.badge-segunda{ background: var(--c-violet-tint); color: var(--c-violet); border-color: rgba(139,128,255,.25); }
.badge-segunda::before{ animation: pulseDotViolet 2.2s infinite; }
.badge-seleccionada{ background: linear-gradient(135deg, var(--c-forest), var(--c-forest-dark)); color:#06130D; }
.badge-seleccionada::before{ background:#06130D; animation:none; }
.badge-rechazada{ background: var(--c-negative-tint); color: var(--c-negative); border-color: rgba(240,104,95,.25); }
.badge-rechazada::before{ animation:none; }

@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55);} 70%{ box-shadow:0 0 0 6px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }
@keyframes pulseDotRed{ 0%{ box-shadow:0 0 0 0 rgba(240,104,95,.55);} 70%{ box-shadow:0 0 0 6px rgba(240,104,95,0);} 100%{ box-shadow:0 0 0 0 rgba(240,104,95,0);} }
@keyframes pulseDotSoft{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
@keyframes pulseDotAmber{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes pulseDotGold{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes pulseDotViolet{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

select.status-select{ border:1px solid var(--c-line-strong); border-radius:20px; padding:6px 12px; font-size:11.5px; font-weight:700; background: rgba(255,255,255,.04); color:var(--c-ink); transition: border-color var(--t-fast) var(--ease); }
select.status-select:hover{ border-color: var(--c-forest); }

/* ---------------------------------------------------------------------
   SKELETON LOADERS (shimmer)
   --------------------------------------------------------------------- */
.skeleton-block{
  border-radius: var(--radius-sm); background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 70%);
  background-size: 220% 100%; animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer{ from{ background-position: 140% 0; } to{ background-position: -40% 0; } }

/* ---------------------------------------------------------------------
   TOOLBAR / FILTROS
   --------------------------------------------------------------------- */
.toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:20px; }
.search-box{ display:flex; align-items:center; gap:8px; background: var(--c-surface); border:1px solid var(--c-line-strong); border-radius:var(--radius-sm); padding:10px 14px; flex:1; min-width:220px; color:var(--c-stone); backdrop-filter: blur(10px); transition: border-color var(--t-fast) var(--ease); }
.search-box:focus-within{ border-color: var(--c-forest); }
.search-box input{ border:none; outline:none; background:none; flex:1; font-size:13.5px; color:var(--c-ink); }
.toolbar select{ border:1px solid var(--c-line-strong); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; background: var(--c-surface); color:var(--c-ink); backdrop-filter: blur(10px); }
.view-note{ color: var(--c-stone); font-size:13px; margin: 0 0 18px; max-width:640px; }

/* ---------------------------------------------------------------------
   COMPARADOR
   --------------------------------------------------------------------- */
.compare-picker{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.compare-chip{ display:flex; align-items:center; gap:8px; border:1px solid var(--c-line-strong); border-radius:20px; padding:9px 16px; font-size:12.5px; font-weight:600; color:var(--c-stone); transition: all var(--t-fast) var(--ease); background: var(--c-surface); }
.compare-chip:hover{ border-color: var(--c-line-strong); background: var(--c-surface-hover); }
.compare-chip input{ accent-color: var(--c-forest); }
.compare-chip.is-checked{ border-color: var(--c-forest); background: var(--c-forest-tint); color: var(--c-forest); box-shadow: var(--glow-emerald); }
.compare-table th, .compare-table td{ text-align:left; }
.compare-table thead th:first-child, .compare-table tbody td:first-child{ position:sticky; left:0; background: var(--c-surface-solid); }

/* ---------------------------------------------------------------------
   FINALISTAS — CARDS
   --------------------------------------------------------------------- */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.finalist-card{
  background: var(--c-surface); border:1px solid var(--c-line); border-radius: var(--radius-md); padding:22px;
  box-shadow: var(--shadow-soft); display:flex; flex-direction:column; gap:12px; backdrop-filter: blur(16px);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  animation: cardRise var(--t-med) var(--ease) both;
}
.finalist-card:hover{ transform: translateY(-3px); border-color: rgba(217,189,132,.35); box-shadow: var(--shadow-soft), 0 0 0 1px rgba(217,189,132,.25), 0 8px 28px rgba(217,189,132,.14); }
.finalist-card .fc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.finalist-card .fc-folio{ font-family: var(--font-mono); font-size:11.5px; color: var(--c-stone); }
.finalist-card h4{ font-size:18px; }
.finalist-card .fc-meta{ font-size:12.5px; color:var(--c-stone); }
.finalist-card .fc-stats{ display:flex; gap:18px; padding-top:10px; border-top:1px solid var(--c-line); }
.finalist-card .fc-stats div span{ display:block; font-size:10.5px; text-transform:uppercase; color:var(--c-stone); letter-spacing:.05em; }
.finalist-card .fc-stats div b{ font-size:14.5px; font-family: var(--font-mono); color: var(--c-ink); }

/* ---------------------------------------------------------------------
   SEGUNDA OFERTA — HISTÓRICO
   --------------------------------------------------------------------- */
.segunda-list{ display:flex; flex-direction:column; gap:14px; }
.segunda-item{ background: var(--c-surface); border:1px solid var(--c-line); border-radius: var(--radius-md); padding:20px 22px; box-shadow: var(--shadow-soft); backdrop-filter: blur(16px); animation: cardRise var(--t-med) var(--ease) both; }
.segunda-item .si-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.segunda-item .si-date{ font-size:12px; color: var(--c-stone); }
.segunda-item ul{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.segunda-item li{ font-size:12px; border:1px solid var(--c-line); border-radius:20px; padding:5px 12px; color:var(--c-graphite); font-family: var(--font-mono); }
.segunda-select-list{ display:flex; flex-direction:column; gap:10px; max-height:220px; overflow-y:auto; padding:4px; border:1px solid var(--c-line); border-radius:var(--radius-sm); }
.segunda-select-list label{ display:flex; align-items:center; gap:10px; font-size:13px; padding:8px 10px; border-radius:var(--radius-sm); transition: background var(--t-fast) var(--ease); }
.segunda-select-list label:hover{ background: rgba(255,255,255,.05); }
.segunda-select-list input{ accent-color: var(--c-forest); }
.empty-note{ color: var(--c-stone-light); font-size:13px; padding: 30px 0; text-align:center; }

/* ---------------------------------------------------------------------
   QR TRACKING
   --------------------------------------------------------------------- */
.qr-link-list{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.qr-link-row{ display:flex; align-items:center; gap:12px; background: rgba(255,255,255,.035); border:1px solid var(--c-line); border-radius: var(--radius-sm); padding:12px 16px; flex-wrap:wrap; transition: border-color var(--t-fast) var(--ease); }
.qr-link-row:hover{ border-color: var(--c-line-strong); }
.qr-link-row code{ flex:1; min-width:200px; background:none; padding:0; font-size:12px; color: var(--c-graphite); }
.qr-link-row button{ background: var(--c-surface); border:1px solid var(--c-line-strong); border-radius:var(--radius-sm); padding:7px 12px; font-size:11.5px; display:flex; align-items:center; gap:6px; color:var(--c-ink); transition: all var(--t-fast) var(--ease); }
.qr-link-row button:hover{ border-color: var(--c-forest); color: var(--c-forest); background: var(--c-forest-tint); }
.qr-link-row .qr-count{ font-size:11.5px; font-weight:700; color: var(--c-forest); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------
   CONFIGURACIÓN
   --------------------------------------------------------------------- */
.config-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:18px; }
.config-item{ border-top:1px solid var(--c-line-strong); padding-top:10px; }
.config-item span{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-stone); margin-bottom:6px; }
.config-item b{ font-size:14.5px; color:var(--c-ink); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------
   OVERLAYS / DRAWER / MODAL
   --------------------------------------------------------------------- */
.overlay{ position:fixed; inset:0; z-index:300; background: rgba(4,6,10,.6); backdrop-filter: blur(6px); opacity:0; pointer-events:none; transition: opacity var(--t-med) var(--ease); display:flex; align-items:flex-start; justify-content:center; padding: 5vh 16px; overflow-y:auto; }
.overlay.is-open{ opacity:1; pointer-events:auto; }
.overlay.overlay-drawer{ align-items:stretch; justify-content:flex-end; padding:0; }

.overlay-panel{ background: var(--c-surface-solid); border:1px solid var(--c-line); width:100%; max-width:560px; border-radius: var(--radius-md); padding: clamp(26px,4vw,44px); position:relative; margin:auto; box-shadow: var(--shadow-lift); transform: translateY(14px); transition: transform var(--t-med) var(--ease); }
.overlay.is-open .overlay-panel{ transform: translateY(0); }

.overlay-close{ position:absolute; top:16px; right:16px; background:none; border:none; color:var(--c-stone); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: all var(--t-fast) var(--ease); z-index:2; }
.overlay-close:hover{ background: var(--c-surface-hover); color:var(--c-ink); transform: rotate(90deg); }

.drawer{
  background: var(--c-surface-solid); border-left:1px solid var(--c-line); width: min(560px, 100%); height:100%; overflow-y:auto; padding: 40px clamp(24px,4vw,44px) 60px;
  position:relative; box-shadow: var(--shadow-lift); transform: translateX(24px); transition: transform var(--t-med) var(--ease);
}
.overlay.is-open .drawer{ transform: translateX(0); }

.detail-eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-champagne); font-weight:700; margin-bottom:8px; }
.detail-title{ font-size:26px; margin-bottom:4px; }
.detail-folio{ font-family: var(--font-mono); font-size:12.5px; color:var(--c-stone); margin-bottom:24px; }
.detail-section{ border-top:1px solid var(--c-line); padding:20px 0; }
.detail-section h4{ font-family: var(--font-sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--c-champagne); font-weight:700; margin-bottom:14px; }
.detail-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px 20px; }
.detail-item span{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-stone); margin-bottom:3px; }
.detail-item b{ font-size:13.5px; color:var(--c-ink); }
.detail-status-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.detail-history{ display:flex; flex-direction:column; gap:0; }
.detail-history li{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--c-line); font-size:12.5px; }
.detail-history li:last-child{ border-bottom:none; }
.detail-history .dh-dot{ width:8px; height:8px; border-radius:50%; background: var(--c-forest); margin-top:5px; flex-shrink:0; box-shadow: 0 0 8px rgba(52,211,153,.6); }
.detail-history .dh-date{ color:var(--c-stone); min-width:130px; font-family: var(--font-mono); }
.doc-chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.doc-chip-list span{ font-size:11.5px; border:1px solid var(--c-line); border-radius:20px; padding:6px 12px; color:var(--c-graphite); }

@media (max-width:640px){ .detail-grid{ grid-template-columns:1fr; } }

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