/* ═══════════════════ FICHAS ═══════════════════
   Oscuro por defecto: esto es una mesa de operaciones, se mira todo el día. */
:root{
  --bg:#090D18; --bg-2:#0C1220;
  --s1:#111930; --s2:#161F3A; --s3:#1D2949;
  --line:rgba(176,196,255,.11); --line-fuerte:rgba(176,196,255,.19);
  --text:#E9ECF7; --muted:#98A4C4; --faint:#67739A;
  --accent:#7B8CFF; --accent-2:#A7B2FF; --accent-tenue:rgba(123,140,255,.15);
  --ok:#3DCB8F; --ok-tenue:rgba(61,203,143,.14);
  --warn:#F0B03C; --warn-tenue:rgba(240,176,60,.14);
  --crit:#F2685C; --crit-tenue:rgba(242,104,92,.14);
  --rim:inset 0 1px 0 rgba(255,255,255,.055);
  --e1:0 1px 2px rgba(0,0,0,.34);
  --e2:0 2px 4px rgba(0,0,0,.3), 0 10px 20px -10px rgba(0,0,0,.55);
  --e3:0 4px 10px rgba(0,0,0,.32), 0 22px 44px -16px rgba(0,0,0,.66);
  --luz:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 42%);
  --tinta-boton:#090D18;
  --grano:.032;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#EEEFF6; --bg-2:#F5F6FB;
    --s1:#FFFFFF; --s2:#F8F9FD; --s3:#EDEFF7;
    --line:rgba(18,40,48,.10); --line-fuerte:rgba(18,40,48,.17);
    --text:#12172B; --muted:#5A6484; --faint:#858DA8;
    --accent:#4A55C9; --accent-2:#353F97; --accent-tenue:rgba(74,85,201,.10);
    --ok:#2C7C55; --ok-tenue:rgba(44,124,85,.09);
    --warn:#8F6410; --warn-tenue:rgba(143,100,16,.10);
    --crit:#B0402F; --crit-tenue:rgba(176,64,47,.09);
    --rim:inset 0 1px 0 rgba(255,255,255,.9);
    --e1:0 1px 2px rgba(15,32,39,.07);
    --e2:0 1px 3px rgba(15,32,39,.07), 0 8px 18px -10px rgba(15,32,39,.22);
    --e3:0 2px 6px rgba(15,32,39,.08), 0 20px 40px -16px rgba(15,32,39,.26);
    --luz:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 50%);
    --tinta-boton:#FFFFFF;
    --grano:.018;
  }
}
:root[data-theme="light"]{
  --bg:#EEEFF6; --bg-2:#F5F6FB;
  --s1:#FFFFFF; --s2:#F8F9FD; --s3:#EDEFF7;
  --line:rgba(18,40,48,.10); --line-fuerte:rgba(18,40,48,.17);
  --text:#12172B; --muted:#5A6484; --faint:#858DA8;
  --accent:#4A55C9; --accent-2:#353F97; --accent-tenue:rgba(74,85,201,.10);
  --ok:#2C7C55; --ok-tenue:rgba(44,124,85,.09);
  --warn:#8F6410; --warn-tenue:rgba(143,100,16,.10);
  --crit:#B0402F; --crit-tenue:rgba(176,64,47,.09);
  --rim:inset 0 1px 0 rgba(255,255,255,.9);
  --e1:0 1px 2px rgba(15,32,39,.07);
  --e2:0 1px 3px rgba(15,32,39,.07), 0 8px 18px -10px rgba(15,32,39,.22);
  --e3:0 2px 6px rgba(15,32,39,.08), 0 20px 40px -16px rgba(15,32,39,.26);
  --luz:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 50%);
  --tinta-boton:#FFFFFF;
  --grano:.018;
}

/* ═══ PALETAS ALTERNATIVAS (oscuro) ═══
   El acento nunca comparte tono con "por vencer": si compiten, el ámbar de
   alerta deja de leerse como alerta. Cada paleta define su propio fondo,
   porque un acento cálido sobre un fondo apagado da barro, no calidez. */
:root[data-paleta="ambar"]{
  --bg:#08090C; --bg-2:#0B0D12;
  --s1:#12151C; --s2:#181C25; --s3:#212632;
  --line:rgba(255,238,205,.10); --line-fuerte:rgba(255,238,205,.18);
  --text:#F2EFE8; --muted:#A5A08F; --faint:#736E60;
  --accent:#FFB224; --accent-2:#FFCE6B; --accent-tenue:rgba(255,178,36,.14);
  --ok:#3DCB8F; --ok-tenue:rgba(61,203,143,.14);
  --warn:#FF8A4C; --warn-tenue:rgba(255,138,76,.14);
  --crit:#F2685C; --crit-tenue:rgba(242,104,92,.14);
  --tinta-boton:#08090C;
}
:root[data-paleta="bosque"]{
  --bg:#07120E; --bg-2:#0A1814;
  --s1:#0E211B; --s2:#132A22; --s3:#1A382E;
  --line:rgba(190,255,225,.10); --line-fuerte:rgba(190,255,225,.18);
  --text:#E8F2EC; --muted:#8FAA9D; --faint:#5F7B70;
  --accent:#E6CC85; --accent-2:#F5E2AE; --accent-tenue:rgba(230,204,133,.14);
  --ok:#4FD69B; --ok-tenue:rgba(79,214,155,.14);
  --warn:#FF9A52; --warn-tenue:rgba(255,154,82,.14);
  --crit:#F0685E; --crit-tenue:rgba(240,104,94,.14);
  --tinta-boton:#07120E;
}
:root[data-paleta="pizarra"]{
  --bg:#0D1115; --bg-2:#11161B;
  --s1:#171C23; --s2:#1D242C; --s3:#262E38;
  --line:rgba(215,230,242,.11); --line-fuerte:rgba(215,230,242,.19);
  --text:#EDF1F5; --muted:#98A5B2; --faint:#68747F;
  --accent:#EDE7D9; --accent-2:#FFFAF0; --accent-tenue:rgba(237,231,217,.10);
  --ok:#4FBF8B; --ok-tenue:rgba(79,191,139,.14);
  --warn:#E5B45C; --warn-tenue:rgba(229,180,92,.14);
  --crit:#E8705F; --crit-tenue:rgba(232,112,95,.14);
  --tinta-boton:#0D1115;
}
/* ═══ PALETAS ALTERNATIVAS (claro) — solo cambia el acento y el tinte ═══ */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"])[data-paleta="ambar"]{
    --bg:#F3F1EC; --bg-2:#F9F8F4; --s2:#FAF9F5; --s3:#F0EEE7;
    --accent:#A9700A; --accent-2:#7E5205; --accent-tenue:rgba(169,112,10,.11);
  }
  :root:not([data-theme="dark"])[data-paleta="bosque"]{
    --bg:#EDF2EE; --bg-2:#F4F8F5; --s2:#F7FAF8; --s3:#EBF1ED;
    --accent:#7E6A22; --accent-2:#5D4E14; --accent-tenue:rgba(126,106,34,.11);
  }
  :root:not([data-theme="dark"])[data-paleta="pizarra"]{
    --bg:#EFF1F3; --bg-2:#F6F8F9; --s2:#F7F9FA; --s3:#ECEFF2;
    --accent:#3D4750; --accent-2:#242C33; --accent-tenue:rgba(61,71,80,.10);
  }
}
:root[data-theme="light"][data-paleta="ambar"]{
  --bg:#F3F1EC; --bg-2:#F9F8F4; --s2:#FAF9F5; --s3:#F0EEE7;
  --accent:#A9700A; --accent-2:#7E5205; --accent-tenue:rgba(169,112,10,.11);
}
:root[data-theme="light"][data-paleta="bosque"]{
  --bg:#EDF2EE; --bg-2:#F4F8F5; --s2:#F7FAF8; --s3:#EBF1ED;
  --accent:#7E6A22; --accent-2:#5D4E14; --accent-tenue:rgba(126,106,34,.11);
}
:root[data-theme="light"][data-paleta="pizarra"]{
  --bg:#EFF1F3; --bg-2:#F6F8F9; --s2:#F7F9FA; --s3:#ECEFF2;
  --accent:#3D4750; --accent-2:#242C33; --accent-tenue:rgba(61,71,80,.10);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13.5px; line-height:1.5; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Grano + halo de cobre: le dan materia al fondo en vez de un color plano. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grano);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:""; position:fixed; top:-360px; right:-260px; width:900px; height:760px;
  z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, var(--accent-tenue), transparent 66%);
}
h1,h2,h3{margin:0; text-wrap:balance}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
svg{display:block; flex:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

/* ═══════════════════ ESTRUCTURA ═══════════════════ */
.app{display:grid; grid-template-columns:232px 1fr; min-height:100vh; position:relative; z-index:1}

.riel{
  background:linear-gradient(180deg,var(--s1),var(--bg-2));
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 12px 16px;
  position:sticky; top:0; height:100vh;
}
.marca{display:flex; align-items:center; gap:10px; padding:2px 8px 22px}
.marca .sello{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  box-shadow:var(--e1), inset 0 1px 0 rgba(255,255,255,.28);
}
.marca .txt b{
  display:block; font-family:Fraunces,Georgia,serif; font-weight:600; font-size:19px;
  line-height:1.05; letter-spacing:-.022em; font-variation-settings:"SOFT" 50,"WONK" 1;
}
.marca .txt span{
  display:block; font-size:9px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--faint); margin-top:2px;
}
.grupo{font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); padding:0 10px 7px}
.nav{
  display:flex; align-items:center; gap:11px; width:100%; position:relative;
  padding:8px 10px; border-radius:9px; color:var(--muted); text-align:left;
  transition:background .16s ease, color .16s ease;
}
.nav:hover{background:var(--s2); color:var(--text)}
.nav[aria-current="page"]{background:var(--accent-tenue); color:var(--accent-2); font-weight:600}
.nav[aria-current="page"]::before{
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:17px; border-radius:0 3px 3px 0; background:var(--accent);
  box-shadow:0 0 10px var(--accent);
}
.nav .n{
  margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  color:var(--faint); font-variant-numeric:tabular-nums;
}
.nav[aria-current="page"] .n{color:var(--accent-2)}
.nav .punto{width:6px; height:6px; border-radius:50%; background:var(--crit); margin-left:auto;
  box-shadow:0 0 8px var(--crit)}
.riel .pie{
  margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--line);
  font-size:10.5px; color:var(--faint); line-height:1.55;
}

.tope{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--bg) 76%,transparent);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:12px 26px;
}
.buscar{
  flex:1; max-width:440px; display:flex; align-items:center; gap:9px;
  background:var(--s1); border:1px solid var(--line); border-radius:10px; padding:8px 12px;
  box-shadow:var(--e1), var(--rim); transition:border-color .16s ease;
}
.buscar:focus-within{border-color:var(--accent)}
.buscar input{flex:1; background:none; border:none; color:inherit; font:inherit; outline:none; min-width:0}
.buscar input::placeholder{color:var(--faint)}
.kbd{
  font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--faint);
  border:1px solid var(--line-fuerte); border-radius:5px; padding:2px 6px; letter-spacing:.04em;
}
.icono-btn{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--s1); color:var(--muted);
  box-shadow:var(--e1), var(--rim); transition:color .16s, border-color .16s;
}
.icono-btn:hover{color:var(--accent-2); border-color:var(--line-fuerte)}
.yo{display:flex; align-items:center; gap:9px; margin-left:auto; font-size:13px}
.yo .quien{line-height:1.2}
.yo .quien b{display:block; font-weight:600; font-size:12.5px}
.yo .quien span{display:block; font-size:10.5px; color:var(--faint)}
.av{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));
  color:var(--tinta-boton); font-weight:700; font-size:12px;
  box-shadow:var(--e1), inset 0 1px 0 rgba(255,255,255,.3);
}

main{padding:26px 26px 64px; max-width:1280px}
.pantalla[hidden]{display:none}
.tit{margin-bottom:22px}
.tit h1{
  font-family:Fraunces,Georgia,serif; font-weight:300; font-size:32px; line-height:1.12;
  letter-spacing:-.028em; font-variation-settings:"SOFT" 40,"opsz" 90;
}
.tit h1 em{font-style:italic; font-weight:300; color:var(--accent-2)}
.tit .sub{color:var(--muted); font-size:13px; margin-top:5px}
.seccion{margin-top:26px}
.rotulo{
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint);
  margin-bottom:11px; display:flex; align-items:center; gap:9px;
}
.rotulo .raya{flex:1; height:1px; background:var(--line)}

/* ═══════════════════ SUPERFICIES ═══════════════════ */
.panel{
  background:var(--luz), var(--s1); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--e2), var(--rim); overflow:hidden;
}
.panel > header{
  display:flex; align-items:center; gap:10px; padding:14px 17px;
  border-bottom:1px solid var(--line);
}
.panel > header h2{font-size:14px; font-weight:600; letter-spacing:-.012em}
.panel > header .der{margin-left:auto; display:flex; align-items:center; gap:8px}

/* ═══════════════════ HOY: dos columnas ═══════════════════ */
.hoy{display:grid; grid-template-columns:1fr 302px; gap:16px; align-items:start}
.stat{
  background:var(--luz), var(--s1); border:1px solid var(--line); border-radius:13px;
  padding:14px 16px; box-shadow:var(--e1), var(--rim);
}
.stat + .stat{margin-top:10px}
.stat .k{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
.stat .v{
  font-family:"IBM Plex Mono",monospace; font-weight:200; font-size:38px; line-height:1.05;
  margin-top:6px; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.stat .d{font-size:11.5px; color:var(--muted); margin-top:3px}
.stat.rojo{border-color:color-mix(in srgb,var(--crit) 42%,transparent); background:var(--luz), var(--crit-tenue)}
.stat.rojo .v,.stat.rojo .k{color:var(--crit)}
.chispa{margin-top:9px}

/* filas de trabajo */
.filas{display:flex; flex-direction:column}
.fila{
  display:flex; align-items:center; gap:13px; padding:12px 17px;
  border-bottom:1px solid var(--line); transition:background .14s ease;
}
.fila:last-child{border-bottom:none}
.fila:hover{background:var(--s2)}
.fila .cuerpo{min-width:0; flex:1}
.fila .t{font-weight:500; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fila .m{font-size:11.5px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.fila .der{display:flex; align-items:center; gap:10px; flex:none}

/* barra de decadencia: cuánto hace que nadie lo toca */
.decae{width:74px; flex:none}
.decae .via{height:4px; border-radius:3px; background:var(--s3); overflow:hidden}
.decae .via i{display:block; height:100%; border-radius:3px; background:var(--crit)}
.decae .via i.warn{background:var(--warn)} .decae .via i.ok{background:var(--ok)}
.decae .et{font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--faint); margin-top:4px; text-align:right}

.punto-est{width:7px; height:7px; border-radius:50%; flex:none}
.punto-est.crit{background:var(--crit); box-shadow:0 0 9px var(--crit)}
.punto-est.warn{background:var(--warn); box-shadow:0 0 9px var(--warn)}
.punto-est.ok{background:var(--ok); box-shadow:0 0 9px var(--ok)}
.punto-est.acc{background:var(--accent); box-shadow:0 0 9px var(--accent)}

/* ═══════════════════ PIEZAS ═══════════════════ */
.chip{
  font-size:10.5px; padding:2.5px 9px; border-radius:20px; border:1px solid var(--line-fuerte);
  color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
}
.chip.crit{background:var(--crit-tenue); border-color:transparent; color:var(--crit); font-weight:600}
.chip.warn{background:var(--warn-tenue); border-color:transparent; color:var(--warn); font-weight:600}
.chip.ok{background:var(--ok-tenue); border-color:transparent; color:var(--ok); font-weight:600}
.chip.acc{background:var(--accent-tenue); border-color:transparent; color:var(--accent-2); font-weight:600}
.btn{
  border:1px solid var(--line-fuerte); background:var(--luz), var(--s1); border-radius:9px;
  padding:6px 12px; font-size:12px; font-weight:500; white-space:nowrap;
  box-shadow:var(--e1), var(--rim); transition:transform .12s ease, border-color .14s, color .14s;
}
.btn:hover{border-color:var(--accent); color:var(--accent-2); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.pri{
  background:linear-gradient(180deg,var(--accent-2),var(--accent)); border-color:transparent;
  color:var(--tinta-boton); font-weight:600;
  box-shadow:var(--e2), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn.pri:hover{filter:brightness(1.07); color:var(--tinta-boton)}
.btn.chico{padding:4px 10px; font-size:11.5px}

/* anillo de progreso */
.anillo{position:relative; width:74px; height:74px; flex:none}
.anillo svg{transform:rotate(-90deg)}
.anillo .val{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:400;
  font-variant-numeric:tabular-nums;
}

/* ═══════════════════ KANBAN ═══════════════════ */
.conmutador{
  display:inline-flex; background:var(--s1); border:1px solid var(--line);
  border-radius:11px; padding:3px; gap:3px; box-shadow:var(--e1), var(--rim);
}
.conmutador button{
  padding:6px 15px; border-radius:8px; font-size:12.5px; color:var(--muted);
  display:flex; align-items:center; gap:7px; transition:background .16s, color .16s;
}
.conmutador button[aria-pressed="true"]{
  background:var(--accent-tenue); color:var(--accent-2); font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent);
}
.tablero{display:grid; gap:11px; overflow-x:auto; padding:2px 2px 8px; align-items:start}
.col{
  background:var(--s2); border:1px solid var(--line); border-radius:13px; padding:10px; min-width:216px;
}
.col.encima{border-color:var(--accent); background:var(--accent-tenue)}
.col > h3{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:7px; padding:3px 5px 11px;
}
.col > h3 em{
  font-style:normal; font-family:"IBM Plex Mono",monospace; color:var(--faint);
  margin-left:auto; font-size:10.5px;
}
.mazo{display:flex; flex-direction:column; gap:8px; min-height:32px}
.carta{
  background:var(--luz), var(--s1); border:1px solid var(--line); border-radius:11px;
  padding:11px 12px 10px; cursor:grab; box-shadow:var(--e2), var(--rim);
  position:relative; overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s;
}
.carta::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2.5px; background:var(--faint)}
.carta.crit::before{background:var(--crit)} .carta.warn::before{background:var(--warn)} .carta.ok::before{background:var(--ok)}
.carta:hover{transform:translateY(-2px); box-shadow:var(--e3), var(--rim); border-color:var(--line-fuerte)}
.carta.arrastrando{opacity:.35; transform:scale(.97)}
.carta .t{font-size:12.5px; font-weight:500; line-height:1.4; letter-spacing:-.008em}
.carta .meta{display:flex; align-items:center; gap:7px; margin-top:9px; font-size:10.5px; color:var(--muted); flex-wrap:wrap}
.carta .val{font-family:"IBM Plex Mono",monospace; color:var(--accent-2); font-weight:500; font-size:11.5px}
.mini-av{
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:9px; font-weight:700; background:var(--s3); color:var(--muted);
  border:1px solid var(--line-fuerte);
}
.mini-av.m{background:var(--accent-tenue); color:var(--accent-2)}
.barra{height:4px; background:var(--s3); border-radius:3px; overflow:hidden; margin-top:9px}
.barra i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 60%,var(--accent)))}

/* ═══════════════════ PROVEEDORES ═══════════════════ */
.lupa{
  display:flex; gap:9px; align-items:center; background:var(--luz), var(--s1);
  border:1px solid var(--line); border-radius:13px; padding:5px 5px 5px 15px;
  box-shadow:var(--e2), var(--rim); transition:border-color .16s;
}
.lupa:focus-within{border-color:var(--accent)}
.lupa input{flex:1; background:none; border:none; padding:9px 0; color:inherit; font:inherit; font-size:14.5px; outline:none; min-width:0}
.sugerencias{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap; align-items:center}
.sug{
  font-size:11.5px; padding:4px 11px; border-radius:20px; border:1px solid var(--line-fuerte);
  color:var(--muted); transition:color .14s, border-color .14s;
}
.sug:hover{color:var(--accent-2); border-color:var(--accent)}
.prov{
  background:var(--luz), var(--s1); border:1px solid var(--line); border-radius:13px;
  margin-bottom:10px; box-shadow:var(--e1), var(--rim); overflow:hidden;
}
.prov header{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line)}
.prov header b{font-size:14.5px; font-weight:600; letter-spacing:-.014em}
.medidor{width:44px; height:4px; border-radius:3px; background:var(--s3); overflow:hidden; flex:none}
.medidor i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.prov table{width:100%; border-collapse:collapse; font-size:12.5px}
.prov td{padding:9px 16px; border-top:1px solid var(--line); vertical-align:top}
.prov tr:hover td{background:var(--s2)}
.prov td.p{width:40%; font-weight:500}
.prov td.e{color:var(--muted)}
.prov td.o{color:var(--muted); width:110px; font-size:11.5px}
.prov td.c{color:var(--faint); text-align:right; white-space:nowrap; font-size:11px}
.vacio{
  color:var(--muted); padding:44px 26px; text-align:center;
  border:1px dashed var(--line-fuerte); border-radius:13px; background:var(--s2);
}

/* ═══════════════════ BANDEJA ═══════════════════ */
.item{
  background:var(--luz), var(--s1); border:1px solid var(--line); border-radius:13px;
  padding:15px 17px; margin-bottom:10px; box-shadow:var(--e1), var(--rim);
  transition:border-color .14s, box-shadow .14s;
}
.item:hover{border-color:var(--line-fuerte); box-shadow:var(--e2), var(--rim)}
.item .cab{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.item .cab b{font-size:14px; font-weight:600; letter-spacing:-.012em}
.item .acc{margin-top:9px; font-size:13px; color:var(--text)}
.cita{
  margin-top:10px; padding:10px 14px; border-left:2px solid var(--accent);
  background:var(--s2); border-radius:0 9px 9px 0; font-size:12px; color:var(--muted);
  font-family:Fraunces,Georgia,serif; font-style:italic; font-weight:300; line-height:1.55;
}
.item .pie{display:flex; gap:8px; margin-top:13px; align-items:center; flex-wrap:wrap}
.item .pie .sp{margin-left:auto; font-size:10.5px; color:var(--faint)}

/* ═══════════════════ TABLA ═══════════════════ */
.tabla{width:100%; border-collapse:collapse; font-size:12.5px}
.tabla th{
  text-align:left; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); font-weight:500; padding:11px 16px; border-bottom:1px solid var(--line);
}
.tabla td{padding:11px 16px; border-bottom:1px solid var(--line)}
.tabla tr:last-child td{border-bottom:none}
.tabla tbody tr:hover td{background:var(--s2)}

.nota{
  margin-top:32px; padding:15px 18px; border:1px solid var(--line); border-radius:13px;
  color:var(--muted); font-size:12.5px; line-height:1.65; background:var(--s2);
}
.nota b{color:var(--text); font-weight:600}

/* ═══════════════════ SELECTOR DE PALETA ═══════════════════ */
.paletas{display:flex; align-items:center; gap:5px; padding:3px; border:1px solid var(--line);
  border-radius:9px; background:var(--s1); box-shadow:var(--e1), var(--rim)}
.paletas button{
  width:19px; height:19px; border-radius:6px; border:1.5px solid transparent;
  transition:transform .14s ease, border-color .14s;
}
.paletas button:hover{transform:scale(1.14)}
.paletas button[aria-pressed="true"]{border-color:var(--text)}
.sw-indigo{background:linear-gradient(140deg,#7B8CFF,#3B47B8)}
.sw-ambar{background:linear-gradient(140deg,#FFC85C,#E08A00)}
.sw-bosque{background:linear-gradient(140deg,#F0DFA8,#8FA36A)}
.sw-pizarra{background:linear-gradient(140deg,#F2EDE2,#6C7883)}

/* ═══════════════════ AVISOS ═══════════════════ */
.avisos{position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; gap:8px}
.aviso{
  display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:11px;
  background:var(--luz), var(--s1); border:1px solid var(--line-fuerte);
  box-shadow:var(--e3), var(--rim); font-size:12.5px; max-width:330px;
  animation:entra .3s cubic-bezier(.22,.9,.3,1);
}
@keyframes entra{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}
.aviso.se-va{opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s}

/* edición en línea de la próxima acción */
.editor{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.editor input{
  background:var(--s2); border:1px solid var(--line-fuerte); border-radius:8px;
  padding:6px 10px; color:inherit; font:inherit; font-size:12px; outline:none;
}
.editor input:focus{border-color:var(--accent)}
.editor input.txt{width:210px}
@keyframes destello{0%{background:var(--ok-tenue)} 100%{background:transparent}}
.fila.listo{animation:destello 1.5s ease-out}
.item.se-fue{opacity:0; transform:translateX(24px); transition:opacity .32s, transform .32s}

/* ═══════════════════ ENTRADA ═══════════════════ */
@keyframes sube{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
.anim > *{animation:sube .42s cubic-bezier(.22,.9,.3,1) backwards}
.anim > *:nth-child(1){animation-delay:.02s} .anim > *:nth-child(2){animation-delay:.07s}
.anim > *:nth-child(3){animation-delay:.12s} .anim > *:nth-child(4){animation-delay:.17s}
.anim > *:nth-child(5){animation-delay:.22s}

@media (max-width:1080px){ .hoy{grid-template-columns:1fr} }
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .riel{position:static; height:auto; flex-direction:row; overflow-x:auto; padding:9px 10px; align-items:center; gap:4px}
  .marca{padding:0 12px 0 4px} .marca .txt span{display:none}
  .grupo,.riel .pie{display:none}
  .nav{width:auto; white-space:nowrap} .nav .n{display:none}
  .nav[aria-current="page"]::before{left:50%; top:auto; bottom:-9px; transform:translateX(-50%); width:18px; height:2.5px; border-radius:3px 3px 0 0}
  main{padding:18px 15px 52px}
  .buscar{max-width:none} .yo .quien{display:none}
  .tit h1{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}