/* VIDRIO AIREADO v1.0 - World of Zillaz (art145). Sistema de componentes en CSS puro: sin imagenes, sin 9-slice, sin border-image.
   DECIDIDO por el dueño (11/11): vidrio oscuro + acento VERDE + boton primario BLANCO PURO con aro verde.
   Un solo radio (--vd-r) en cajas, botones, pestanas, ranuras y campos; --vd-rm / --vd-rs solo en piezas finas (barras, casilla, deslizador).
   Niveles de vidrio: completo (blur) o ligero (sin backdrop-filter): <html data-glass="full|light">, ?glass=0 y automatico en celular. Ver vidrio.md.
   Los tokens de esta hoja son estables: el cliente solo los consume, no los redefine por pantalla. Iconos: iconos/*.svg (trazo 1.75, 24 px). */
@font-face { font-family:'Inter'; font-weight:100 900; font-display:swap; src:url(/web/fonts/Inter-variable.woff) format('woff'); }

/* ============================ TOKENS ============================ */
:root {
  /* tipografia: Inter. 300 solo en numeros grandes; el texto de UI nunca baja de 400 sobre el mapa */
  --vd-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vd-w-thin:300; --vd-w:400; --vd-w-strong:500;
  --vd-fs:13px; --vd-fs-s:11px; --vd-fs-l:15px; --vd-fs-xl:19px;
  /* forma: un solo radio */
  --vd-r:12px; --vd-rm:8px; --vd-rs:6px;
  /* tamanos (PC); en celular (pointer:coarse o data-touch) suben a 44 px */
  --vd-h:34px; --vd-h-sm:28px; --vd-slot:40px; --vd-icon:20px; --vd-gap:8px; --vd-pad:14px; --vd-t:.12s;
  /* vidrio: tinta (RGB sin alfa) y opacidades. Pasan >= 4.5:1 (texto y texto atenuado) sobre el peor fondo posible (blanco). */
  --vd-tint:14,20,36;
  --vd-a-side:.62;      /* paneles sobre el fondo estatico (columnas laterales, chat bajo el mundo) */
  --vd-a-over:.76;      /* paneles sobre el canvas (HUD, ventanas, modales) */
  --vd-bf:blur(22px) saturate(150%);
  --vd-shadow:0 12px 40px rgba(0,0,0,.30);
  --vd-line:rgba(255,255,255,.16); --vd-line-hi:rgba(255,255,255,.32);
  --vd-fill:rgba(255,255,255,.07); --vd-fill-hi:rgba(255,255,255,.14); --vd-fill-lo:rgba(0,0,0,.28);
  --vd-text:#F4F6FB; --vd-dim:rgba(244,246,251,.74); --vd-inactive:rgba(244,246,251,.68); --vd-mute:rgba(244,246,251,.5);   /* mute: solo placeholders y horas */
  /* semantica fija (no depende del acento) */
  --vd-hp:#FF7684; --vd-mp:#6FA8FF; --vd-xp:#F3C873; --vd-danger:#FF7684;
  --vd-say:#F5D76E; --vd-loot:#8FE0A0; --vd-sys:#F4F6FB; --vd-npc:#F6A96B;
  /* ======= VERDE =======
     --good / --check  #14F195: lo bueno (checks, "en linea", stamina, premium activo, exito).
     --accent          #97C677 (pasto del mundo): selecciones, pestanas activas, ranuras seleccionadas, deslizador, ficha de nivel, aro de foco (via --accent-hi).
     --accent-hi       texto de acento y foco sobre vidrio (>= 4.5:1)    --accent-deep  sombra/halo     --accent-ink  texto sobre el acento (oscuro) */
  --good:#14F195; --check:#14F195;
  --accent:#97C677; --accent-hi:#D2EBBC; --accent-deep:#5E9446; --accent-ink:#0B1016;
  /* ======= PRIMARIO: blanco puro con aro verde (una sola accion principal por ventana) ======= */
  --btn-primary-bg:linear-gradient(180deg,#FFFFFF,#E9EDF1);
  --btn-primary-lip:#C5CDD6;               /* borde inferior interno */
  --btn-primary-ink:#14263A;               /* texto e icono: 13.0:1 sobre el tramo mas oscuro */
  --btn-primary-ring:#14F195;              /* aro exterior de 2 px */
  --btn-primary-halo:rgba(8,12,24,.55);    /* 3 px de tinta oscura entre el aro y el fondo: lo separa de fondos claros (hero, mapa) */
}

/* ============================ NIVEL LIGERO (sin blur) ============================ */
[data-glass="light"] { --vd-bf:none; --vd-a-side:.88; --vd-a-over:.94; --vd-shadow:0 6px 18px rgba(0,0,0,.28); }
@media (pointer:coarse), (prefers-reduced-transparency:reduce) {
  :root:not([data-glass="full"]) { --vd-bf:none; --vd-a-side:.88; --vd-a-over:.94; --vd-shadow:0 6px 18px rgba(0,0,0,.28); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root:not([data-glass="full"]) { --vd-bf:none; --vd-a-side:.88; --vd-a-over:.94; }
}
/* celular: objetivos tactiles de 44 px */
@media (pointer:coarse) { :root { --vd-h:44px; --vd-h-sm:40px; --vd-slot:44px; } }
[data-touch="1"] { --vd-h:44px; --vd-h-sm:40px; --vd-slot:44px; }

/* ============================ BASE ============================ */
.vd, .vd * { box-sizing:border-box; }
.vd { font:var(--vd-w) var(--vd-fs)/1.45 var(--vd-font); color:var(--vd-text); -webkit-font-smoothing:antialiased; }
.vd-ico { width:var(--vd-icon); height:var(--vd-icon); flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.vd-accent-text { color:var(--accent-hi); } .vd-good-text { color:var(--good); } .vd-dim { color:var(--vd-dim); }
.vd-backdrop { position:absolute; inset:0; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%,rgba(30,50,90,.55),rgba(var(--vd-tint),.96)); }   /* fondo estatico; con imagen: <img> con blur y scale 1.25 */

/* ============================ PANEL, VENTANA Y BARRA DE TITULO ============================ */
.vd-panel { --vd-a:var(--vd-a-side); position:relative; color:var(--vd-text); font:var(--vd-w) var(--vd-fs)/1.45 var(--vd-font);
  background:rgba(var(--vd-tint),var(--vd-a)); border:1px solid var(--vd-line); border-radius:var(--vd-r);
  -webkit-backdrop-filter:var(--vd-bf); backdrop-filter:var(--vd-bf); box-shadow:var(--vd-shadow), inset 0 1px 0 rgba(255,255,255,.08); }
.vd-panel--over { --vd-a:var(--vd-a-over); }                                  /* debajo hay canvas animado: aqui y solo aqui paga el blur */
.vd-panel--modal { --vd-a:var(--vd-a-over); border-color:var(--vd-line-hi); box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.vd-panel--bar { border-radius:0; border-width:0 0 1px; }
.vd-panel__body { padding:var(--vd-pad); }
.vd-titlebar { display:flex; align-items:center; gap:8px; min-height:38px; padding:0 8px 0 var(--vd-pad); border-bottom:1px solid var(--vd-line);
  font-size:var(--vd-fs-s); font-weight:var(--vd-w-strong); letter-spacing:.12em; text-transform:uppercase; color:var(--vd-dim); }
.vd-titlebar .vd-ico { width:16px; height:16px; color:var(--accent-hi); }
.vd-titlebar__count { margin-left:auto; letter-spacing:0; text-transform:none; }
.vd-titlebar__actions { margin-left:auto; display:flex; gap:4px; }
.vd-titlebar--center { justify-content:center; font-size:14px; letter-spacing:.04em; text-transform:none; color:var(--vd-text); min-height:52px; position:relative; border-bottom:0; }
.vd-titlebar--center .vd-titlebar__actions { position:absolute; right:12px; top:50%; transform:translateY(-50%); }
/* ventana INACTIVA (otra ventana tiene el foco): borde y sombra se apagan, el titulo baja a --vd-inactive (>= 4.5:1), el icono pierde el verde. El contenido no cambia. */
.vd-panel.is-inactive { border-color:rgba(255,255,255,.08); box-shadow:0 4px 14px rgba(0,0,0,.22); }
.vd-panel.is-inactive > .vd-titlebar { color:var(--vd-inactive); border-bottom-color:rgba(255,255,255,.08); }
.vd-panel.is-inactive > .vd-titlebar .vd-ico { color:var(--vd-inactive); }
.vd-panel.is-inactive > .vd-titlebar .vd-btn { opacity:.6; }
.vd-label { font-size:10px; font-weight:var(--vd-w-strong); letter-spacing:.1em; text-transform:uppercase; color:var(--vd-dim); }

/* ============================ BOTONES ============================ */
.vd-btn { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--vd-h); padding:0 16px; cursor:pointer; user-select:none;
  font:var(--vd-w-strong) var(--vd-fs)/1 var(--vd-font); color:var(--vd-text); background:var(--vd-fill); border:1px solid var(--vd-line); border-radius:var(--vd-r);
  transition:background var(--vd-t),border-color var(--vd-t),transform var(--vd-t); }
.vd-btn:hover { background:var(--vd-fill-hi); border-color:var(--vd-line-hi); }
.vd-btn:active { background:rgba(255,255,255,.2); transform:translateY(1px); }
.vd-btn:focus-visible, .vd-tab:focus-visible, .vd-slot:focus-visible, .vd-menu-item:focus-visible, .vd-choice:focus-visible { outline:2px solid var(--accent-hi); outline-offset:2px; }
.vd-btn:disabled, .vd-btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; pointer-events:none; }
/* PRIMARIO: uno por ventana (la accion principal). Blanco, aro verde de 2 px, halo oscuro de 3 px y resplandor verde suave. */
.vd-btn--primary { color:var(--btn-primary-ink); border-color:transparent; background:var(--btn-primary-bg);
  box-shadow:0 0 0 2px var(--btn-primary-ring), 0 0 0 5px var(--btn-primary-halo), 0 8px 24px color-mix(in srgb,var(--btn-primary-ring) 38%,transparent), inset 0 -3px 0 var(--btn-primary-lip), inset 0 1px 0 rgba(255,255,255,.6); }
.vd-btn--primary:hover { background:var(--btn-primary-bg); border-color:transparent; filter:brightness(1.04); }
.vd-btn--primary:active { filter:brightness(.95); }
.vd-btn--primary:focus-visible { outline-offset:7px; }
.vd-btn--icon { width:var(--vd-h); padding:0; } .vd-btn--sm { height:var(--vd-h-sm); padding:0 10px; font-size:12px; } .vd-btn--sm.vd-btn--icon { width:var(--vd-h-sm); padding:0; } .vd-btn--block { display:flex; width:100%; }
.vd-btn.is-active, .vd-btn[aria-pressed="true"] { background:color-mix(in srgb,var(--accent) 22%,transparent); border-color:color-mix(in srgb,var(--accent) 62%,transparent); }   /* boton de modo (conmutador) */
.vd-btn--danger:hover { border-color:var(--vd-danger); color:var(--vd-danger); }
.vd-play { height:60px; padding:0 34px 0 26px; font-size:19px; font-weight:var(--vd-w-strong); letter-spacing:.14em; text-transform:uppercase; gap:12px; }
.vd-play .vd-ico { fill:currentColor; width:22px; height:22px; }

/* ============================ PESTANA / PILDORA / SEGMENTADO ============================ */
.vd-tab { appearance:none; height:var(--vd-h-sm); padding:0 14px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
  font:var(--vd-w-strong) 12px/1 var(--vd-font); color:var(--vd-dim); background:transparent; border:1px solid transparent; border-radius:var(--vd-r); transition:background var(--vd-t),color var(--vd-t); }
.vd-tab:hover { color:var(--vd-text); background:var(--vd-fill); }
.vd-tab[aria-selected="true"], .vd-tab.is-active { color:var(--vd-text); background:color-mix(in srgb,var(--accent) 22%,transparent); border-color:color-mix(in srgb,var(--accent) 62%,transparent); }
.vd-tab:disabled { opacity:.45; pointer-events:none; }
.vd-tabs { display:flex; gap:4px; align-items:center; }
.vd-tabs--col { flex-direction:column; align-items:stretch; } .vd-tabs--col .vd-tab { height:var(--vd-h); justify-content:flex-start; padding:0 12px; }
/* pestana con cierre: el aspa es un boton aparte dentro de la pestana (cierra sin activarla). Visible en la activa y al pasar el raton. */
.vd-tab--closable { padding-right:6px; }
.vd-tab__close { appearance:none; width:20px; height:20px; display:grid; place-items:center; padding:0; margin-left:2px; color:inherit; background:transparent; border:0; border-radius:var(--vd-rs); cursor:pointer; opacity:0; }
.vd-tab__close .vd-ico { width:12px; height:12px; stroke-width:2; }
.vd-tab--closable:hover .vd-tab__close, .vd-tab--closable.is-active .vd-tab__close, .vd-tab--closable:focus-within .vd-tab__close { opacity:.85; }
.vd-tab__close:hover { background:var(--vd-fill-hi); opacity:1; color:var(--vd-text); } .vd-tab__close:focus-visible { outline:2px solid var(--accent-hi); outline-offset:1px; opacity:1; }
.vd-tab__badge { min-width:16px; height:16px; padding:0 4px; display:inline-grid; place-items:center; font-size:10px; font-weight:var(--vd-w-strong); color:var(--accent-ink); background:var(--accent); border-radius:var(--vd-rs); }   /* mensajes sin leer */
.vd-seg { display:flex; gap:3px; padding:3px; background:var(--vd-fill-lo); border:1px solid var(--vd-line); border-radius:var(--vd-r); }
.vd-seg .vd-tab { flex:1; justify-content:center; padding:0 2px; font-size:11px; }

/* ============================ RANURA DE INVENTARIO / TECLA ============================ */
.vd-slot { position:relative; width:var(--vd-slot); height:var(--vd-slot); flex:0 0 auto; display:grid; place-items:center; padding:0; cursor:pointer; appearance:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--vd-r); color:var(--vd-dim); transition:border-color var(--vd-t),background var(--vd-t); }
.vd-slot img { width:32px; height:32px; display:block; }
.vd-slot:hover { border-color:var(--vd-line-hi); background:var(--vd-fill-hi); }
.vd-slot.is-selected, .vd-slot[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 16px color-mix(in srgb,var(--accent) 45%,transparent); }
.vd-slot:disabled, .vd-slot.is-disabled { opacity:.4; cursor:not-allowed; pointer-events:none; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 4px,transparent 4px 8px); }
.vd-slot__count { position:absolute; right:3px; bottom:1px; font-size:10px; font-weight:var(--vd-w-strong); text-shadow:0 1px 2px #000; }
.vd-key { width:auto; height:var(--vd-h); flex:1; place-items:end start; padding:0 0 5px 8px; font-size:10.5px; font-weight:var(--vd-w-strong); }
.vd-key--set { flex:0 0 52px; place-items:center; padding:0; font-size:16px; line-height:1; color:var(--vd-xp); } .vd-key--set small { display:block; font-size:9px; color:var(--vd-dim); }

/* ============================ CAMPO, CASILLA, DESLIZADOR, SCROLL ============================ */
.vd-field { appearance:none; width:100%; height:var(--vd-h); padding:0 12px; font:var(--vd-w) var(--vd-fs)/1 var(--vd-font); color:var(--vd-text);
  background:var(--vd-fill-lo); border:1px solid var(--vd-line); border-radius:var(--vd-r); outline:none; }
.vd-field::placeholder { color:var(--vd-mute); } .vd-field:hover { border-color:var(--vd-line-hi); }
.vd-field:focus-visible { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent); }
.vd-field:disabled { opacity:.45; cursor:not-allowed; } .vd-field[aria-invalid="true"] { border-color:var(--vd-danger); }
.vd-check { appearance:none; position:relative; width:20px; height:20px; margin:0; flex:0 0 auto; cursor:pointer; background:var(--vd-fill-lo); border:1px solid var(--vd-line-hi); border-radius:var(--vd-rs); }
.vd-check:hover { border-color:#fff; }
.vd-check:checked, .vd-check.is-on { background:var(--check); border-color:transparent; }
.vd-check:checked::after, .vd-check.is-on::after { content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--accent-ink); border-width:0 2.5px 2.5px 0; transform:rotate(40deg); }
.vd-check:focus-visible { outline:2px solid var(--accent-hi); outline-offset:2px; } .vd-check:disabled { opacity:.45; cursor:not-allowed; }
.vd-option { display:flex; align-items:center; gap:10px; min-height:26px; cursor:pointer; }
.vd-slider { appearance:none; -webkit-appearance:none; width:100%; height:22px; margin:0; background:transparent; cursor:pointer; }   /* style="--pct:38%"; actualizarlo en oninput */
.vd-slider::-webkit-slider-runnable-track { height:6px; border-radius:var(--vd-rs); background:linear-gradient(90deg,var(--accent) var(--pct,50%),rgba(255,255,255,.18) var(--pct,50%)); }
.vd-slider::-moz-range-track { height:6px; border-radius:var(--vd-rs); background:rgba(255,255,255,.18); } .vd-slider::-moz-range-progress { height:6px; border-radius:var(--vd-rs); background:var(--accent); }
.vd-slider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:22px; margin-top:-8px; border-radius:var(--vd-rs); background:#fff; border:0; box-shadow:0 2px 10px rgba(0,0,0,.45); }
.vd-slider::-moz-range-thumb { width:16px; height:22px; border-radius:var(--vd-rs); background:#fff; border:0; box-shadow:0 2px 10px rgba(0,0,0,.45); }
.vd-slider:focus-visible { outline:2px solid var(--accent-hi); outline-offset:4px; border-radius:var(--vd-rs); } .vd-slider:disabled { opacity:.45; cursor:not-allowed; }
.vd-scroll { overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.32) transparent; }
.vd-scroll::-webkit-scrollbar { width:8px; height:8px; } .vd-scroll::-webkit-scrollbar-track { background:transparent; }
.vd-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.28); border-radius:var(--vd-rs); border:2px solid transparent; background-clip:padding-box; } .vd-scroll::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.46); background-clip:padding-box; }

/* ============================ BARRAS: vida, mana, experiencia ============================ */
.vd-bar { --pct:100%; --vd-bar:var(--vd-hp); position:relative; height:22px; overflow:hidden; background:var(--vd-fill-lo); border:1px solid var(--vd-line); border-radius:var(--vd-rm);
  -webkit-backdrop-filter:var(--vd-bf); backdrop-filter:var(--vd-bf); }
.vd-bar::before { content:""; position:absolute; left:0; top:0; bottom:0; width:var(--pct); background:linear-gradient(90deg,color-mix(in srgb,var(--vd-bar) 88%,transparent),color-mix(in srgb,var(--vd-bar) 58%,transparent)); box-shadow:0 0 16px color-mix(in srgb,var(--vd-bar) 45%,transparent); }
.vd-bar__label { position:relative; display:flex; height:100%; align-items:center; justify-content:center; font-size:12px; font-weight:var(--vd-w-strong); letter-spacing:.02em; text-shadow:0 1px 3px rgba(0,0,0,.85); }
.vd-bar--hp { --vd-bar:var(--vd-hp); } .vd-bar--mp { --vd-bar:var(--vd-mp); } .vd-bar--xp { --vd-bar:var(--vd-xp); } .vd-bar--thin { height:4px; border:0; border-radius:var(--vd-rs); }
.vd-bar--sm { height:6px; border-radius:var(--vd-rs); }

/* ============================ LISTAS, FICHAS, MENU, ELECCION ============================ */
.vd-row { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:var(--vd-r); border:1px solid transparent; }
.vd-row:hover { background:var(--vd-fill); } .vd-row.is-selected { background:var(--vd-fill); border-color:color-mix(in srgb,var(--accent) 62%,transparent); }
.vd-row--card { padding:12px 14px; background:var(--vd-fill-lo); border-color:var(--vd-line); }
.vd-avatar { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--vd-r); font-size:12px; font-weight:var(--vd-w-strong); color:var(--c,var(--accent-hi)); background:color-mix(in srgb,var(--c,var(--accent)) 26%,transparent); border:1px solid color-mix(in srgb,var(--c,var(--accent)) 55%,transparent); }
.vd-chip { display:inline-flex; align-items:center; gap:6px; height:var(--vd-h-sm); padding:0 10px; font-size:12px; font-weight:var(--vd-w-strong); color:var(--vd-text); background:var(--vd-fill); border:1px solid var(--vd-line); border-radius:var(--vd-r); }
.vd-chip--accent, .vd-chip.is-active { color:var(--accent-ink); background:var(--detail,var(--accent)); border-color:transparent; }
.vd-badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px; font-size:11px; font-weight:var(--vd-w-strong); color:var(--good); background:color-mix(in srgb,var(--good) 14%,transparent); border:1px solid color-mix(in srgb,var(--good) 45%,transparent); border-radius:var(--vd-rs); }
.vd-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); } .vd-dot--on { background:var(--good); box-shadow:0 0 8px var(--good); }
.vd-msg { margin:0; } .vd-msg time { margin-right:8px; font-size:11px; color:var(--vd-mute); } .vd-msg--say { color:var(--vd-say); } .vd-msg--loot { color:var(--vd-loot); } .vd-msg--sys { color:var(--vd-sys); } .vd-msg--npc { color:var(--vd-npc); }
.vd-menu-item { display:flex; align-items:center; gap:10px; height:40px; padding:0 10px; cursor:pointer; text-decoration:none; font-weight:var(--vd-w); color:var(--vd-text); border:1px solid transparent; border-radius:var(--vd-r); background:transparent; }
.vd-menu-item:hover { background:var(--vd-fill); } .vd-menu-item.is-active, .vd-menu-item[aria-current="page"] { background:rgba(var(--vd-tint),var(--vd-a-over)); border-color:color-mix(in srgb,var(--accent) 55%,transparent); -webkit-backdrop-filter:var(--vd-bf); backdrop-filter:var(--vd-bf); }
.vd-menu-item img { width:28px; height:28px; object-fit:contain; }
.vd-menu-title { padding:10px 10px 2px; }
/* tarjeta de eleccion (vocacion, personaje): seleccion en pasto, igual que ranuras y pestanas */
.vd-choice { appearance:none; text-align:center; padding:12px; cursor:pointer; color:var(--vd-text); font:inherit; background:rgba(255,255,255,.05); border:1px solid var(--vd-line); border-radius:var(--vd-r); transition:border-color var(--vd-t),background var(--vd-t); }
.vd-choice:hover { border-color:var(--vd-line-hi); background:var(--vd-fill-hi); }
.vd-choice.is-selected, .vd-choice[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 26px color-mix(in srgb,var(--accent) 40%,transparent); background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.04)); }
.vd-choice:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }

/* ============================ TARJETA DEL PORTAL ============================ */
.vd-card { padding:0; } .vd-card > .vd-titlebar { border-bottom:0; padding-top:6px; } .vd-card__body { padding:2px var(--vd-pad) var(--vd-pad); }
.vd-card--news article + article { border-top:1px solid var(--vd-line); margin-top:14px; padding-top:14px; }
.vd-step { display:flex; flex-direction:column; align-items:center; gap:10px; } .vd-step b { display:grid; place-items:center; width:38px; height:38px; font-weight:var(--vd-w-strong); color:var(--accent-hi); background:color-mix(in srgb,var(--accent) 16%,transparent); border:1px solid color-mix(in srgb,var(--accent) 60%,transparent); border-radius:var(--vd-r); }

/* ============================ ARCHIVO: presets descartados (no usar; sirven si el dueño cambia de idea) ============================
   Pegar uno de estos bloques DESPUES de :root para cambiar de acento. El acento se cambia en 4 variables; el primario en 4 mas.
[data-accent="celeste"]  { --accent:#8FE3E8; --accent-hi:#CFF7F9; --accent-deep:#3FA9B5; --check:var(--accent); --good:#8FE0A0; }   (el de las maquetas anteriores)
[data-accent="menta"]    { --accent:#5EE6A8; --accent-hi:#BFF7DE; --accent-deep:#1FA571; }
[data-accent="naranja"]  { --accent:#E8602C; --accent-hi:#FFB58A; --accent-deep:#A93A10; }
[data-accent="coral"]    { --accent:#E8784F; --accent-hi:#FFB89C; --accent-deep:#AF4A25; }
[data-accent="dorado"]   { --accent:#F3C873; --accent-hi:#FFE7B0; --accent-deep:#B8913A; }
[data-accent="rosa"]     { --accent:#E590B6; --accent-hi:#F8CFE2; --accent-deep:#AE5A84; }
[data-primary="lavanda"] { --btn-primary-bg:linear-gradient(180deg,#FFFFFF,#F2ECFF 50%,#D9C8FF); --btn-primary-lip:#9D7BE0; --btn-primary-ink:#2A1466; }
[data-primary="menta"]   { --btn-primary-bg:linear-gradient(180deg,#FFFFFF,#E6FBF0 50%,#BDF2D8); --btn-primary-lip:#5EC99B; --btn-primary-ink:#0F3D2A; }
[data-primary="crema"]   { --btn-primary-bg:linear-gradient(180deg,#FFF6E3,#F3E6C4); --btn-primary-lip:#D9C49A; --btn-primary-ink:#4A2C12; --detail:#F3A36F; }
*/