/* ============================================================
WILLY LUXURY HQ — Design System
Paleta WLX, exacta: oro #D4AF37 (muestreado del logotipo), negro
#000000 y blanco #FFFFFF. La marca es oro sobre negro y nada más, así
que el oro ES el color de marca (no un acento) y el negro es el
segundo. Modo OSCURO por defecto (es el de la marca: el monograma vive
sobre negro); el claro queda como opción.
OJO: el oro es CLARO (2.1:1 sobre blanco). Por eso --on-brand es tinta
OSCURA #241A04 y no blanco, y para TEXTO oro en claro va el escalón
#7A5E1C (6.1:1). Nunca poner texto blanco sobre oro.
============================================================ */
:root {
color-scheme: light;
/* Modo claro: papel blanco, tinta #151619 y el oro #D4AF37 de marca.
El oro se usa de RELLENO (botones, barras, chips, avatares) con la
tinta oscura encima, y NUNCA de texto sobre blanco: para texto va su
escalón oscuro #7A5E1C, que pasa 6.1:1. */
/* Surfaces */
--bg: #F4F5F7;
--bg-accent: #E9EBEF;
--surface: #FFFFFF;
--surface-2: #F7F8FA;
--surface-3: #EDEFF3;
--surface-inset: #F0F2F6;
/* Ink */
--text: #151619;
--text-2: #4A4D5C;
--text-3: #787C8C;
/* Lines */
--border: #E4E6EC;
--border-strong: #C4C8D2;
--line: #E4E6EC;
/* Marca — el oro WLX. El escalón 500 es el HEX exacto muestreado del
logotipo: #D4AF37. La rampa va de claro a oscuro, al contrario de lo
que pasaría con un color de marca oscuro. */
--brand-050: #FCF9F0;
--brand-100: #F7EFD8;
--brand-200: #EEDFAE;
--brand-300: #E4CE83;
--brand-400: #DCBE5B;
--brand-500: #D4AF37;
--brand-600: #B8912A;
--brand-700: #8A6A20;
--brand: #D4AF37;
--brand-hover: #B8912A;
--brand-ink: #7A5E1C; /* el oro para TEXTO sobre blanco: 6.1:1 */
--brand-soft: #F7EFD8;
--on-brand: #241A04; /* tinta sobre oro: 8.2:1. NO es blanco. */
/* Oro — la familia completa, por si hace falta un tono exacto. */
--gold: #D4AF37;
--gold-shade: #B8912A;
--gold-dark: #8A6A20;
--gold-deep: #5C4714;
--gold-light: #E4CE83;
--gold-pale: #EEDFAE;
--gold-soft: #F7EFD8;
--on-gold: #241A04;
/* Acento — el mismo oro. La marca tiene UN color, así que el acento no
introduce otro: es el oro en un escalón distinto para chips y tags.
El segundo color de la marca es el NEGRO, y entra por las superficies
(modo oscuro) y por los bloques onyx, no por aquí. */
--accent: #D4AF37;
--accent-pale: #F0E2AF;
--accent-mid: #C9A227;
--accent-deep: #A3801F;
--accent-ink: #7A5E1C; /* el oro para TEXTO sobre blanco: 6.1:1 */
--accent-dark: #5C4714;
--accent-soft: #FBF6E6;
--on-accent: #241A04;
/* Los otros dos de la marca */
--ink-black: #000000;
--paper: #FFFFFF;
/* Categorical — oro y grafito primero, que son la marca */
--series-1: #8A6A20;
--series-2: #4A4D5C;
--series-3: #6f4ef2;
--series-4: #2f7ae0;
--series-5: #5b7f2e;
--series-6: #1baf7a;
--series-7: #d2489b;
--series-8: #5b6474;
/* Status (fixed, never themed) */
--good: #0ca30c;
--warning: #fab219;
--serious: #ec835a;
--critical: #d03b3b;
--good-soft: #E4F3E4;
--warning-soft: #FBF0D8;
--serious-soft: #FBEAE2;
--critical-soft: #F8E2E2;
/* Shape & motion */
--r-xs: 6px; --r-sm: 9px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px;
--sh-1: 0 1px 2px rgba(21,22,25,.05), 0 1px 3px rgba(21,22,25,.04);
--sh-2: 0 2px 6px rgba(21,22,25,.06), 0 8px 22px rgba(21,22,25,.07);
--sh-3: 0 10px 34px rgba(21,22,25,.16);
--ring: 0 0 0 3px rgba(212,175,55,.34);
--ease: cubic-bezier(.22,.72,.28,1);
--nav-w: 244px;
--top-h: 62px;
--font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
color-scheme: dark;
/* Negro #000000 de fondo, texto blanco y el oro #D4AF37 de marca:
exactamente cómo se ve el logotipo. Este es el modo por defecto y el
que mejor le sienta a la marca. */
--bg: #000000;
--bg-accent: #0B0B0E;
--surface: #121216;
--surface-2: #1A1A20;
--surface-3: #24242C;
--surface-inset: #08080A;
--text: #FFFFFF;
--text-2: #C6C8D2;
--text-3: #8A8D9A;
--border: #26262E;
--border-strong: #3C3C46;
--line: #26262E;
/* Sobre negro el oro es el color más fácil del sistema: #D4AF37 da
9.99:1, así que aquí sí vale de TEXTO tal cual y no hace falta
escalón aparte. Lo que no cambia es --on-brand: encima del oro
siempre va tinta oscura, en los dos modos. */
--brand-050: #0B0803;
--brand-100: #141005;
--brand-200: #2A2008;
--brand-300: #4A3A12;
--brand-400: #8A6A20;
--brand-500: #D4AF37;
--brand-600: #E0B94A;
--brand-700: #F0DFA8;
--brand: #D4AF37;
--brand-hover: #E0B94A;
--brand-ink: #D4AF37;
--brand-soft: rgba(212,175,55,.16);
--on-brand: #241A04;
--gold-soft: rgba(212,175,55,.20);
--accent-ink: #D4AF37;
--accent-soft: rgba(212,175,55,.14);
--on-accent: #241A04;
--series-1: #D4AF37;
--series-2: #A8ACBA;
--series-3: #9b86ff;
--series-4: #5091e5;
--series-5: #8fb050;
--series-6: #2fd08f;
--series-7: #ef6fb0;
--series-8: #8d97a8;
--good-soft: rgba(12,163,12,.18);
--warning-soft: rgba(250,178,25,.16);
--serious-soft: rgba(236,131,90,.16);
--critical-soft: rgba(208,59,59,.20);
--sh-1: 0 1px 2px rgba(0,0,0,.6);
--sh-2: 0 2px 8px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.45);
--sh-3: 0 14px 40px rgba(0,0,0,.7);
--ring: 0 0 0 3px rgba(212,175,55,.42);
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
transition: background-color .25s var(--ease), color .25s var(--ease);
}
body::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(900px 480px at 12% -8%, var(--bg-accent), transparent 62%),
radial-gradient(760px 420px at 96% 4%, var(--brand-soft), transparent 60%);
opacity: .85;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--bg); }
h1,h2,h3,h4 { margin: 0; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0 0 10px; }
[hidden] { display: none !important; }
/* ---------- utility ---------- */
.eyebrow {
font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
text-transform: uppercase; color: var(--text-3);
}
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mono { font-family: var(--mono); }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: minmax(0,1.62fr) minmax(0,1fr); gap: 18px; align-items: start; }
/* ============================================================
APP SHELL
============================================================ */
#app { position: relative; z-index: 1; min-height: 100%; }
.shell {
display: grid; grid-template-columns: var(--nav-w) minmax(0,1fr); min-height: 100vh;
transition: grid-template-columns .26s var(--ease);
}
/* ---------- sidebar ---------- */
/* El velo del cajón móvil no existe en escritorio (si no, ocuparía una columna del grid). */
.nav-scrim { display: none; }
.sidebar {
position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 16px 12px 12px;
z-index: 40;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 16px; }
/* El logotipo de WILLY LUXURY es la corona sobre el monograma WLX.
Va como IMAGEN con fondo TRANSPARENTE, no como mascara de un solo color.
OJO: el monograma es BLANCO en el logo original, asi que sobre el tema
claro desapareceria. Por eso hay dos ficheros: `-light` lleva el monograma
en tinta oscura y es el de por defecto; el normal lo lleva en blanco y se
usa en tema oscuro. La corona va en rojo en los dos.
El panel del login es SIEMPRE oscuro, sea cual sea el tema, asi que alli se
fuerza la version blanca a mano. */
.brand-logo {
width: 40px; height: 40px; flex: none; display: block;
background: url("../img/wlx-mark-light.png") center / contain no-repeat;
}
:root[data-theme="dark"] .brand-logo { background-image: url("../img/wlx-mark.png"); }
.login-side .brand-logo { background-image: url("../img/wlx-mark.png"); }
.brand-mark {
width: 36px; height: 36px; border-radius: 11px; flex: none;
background: linear-gradient(150deg, #D4AF37, #8A6A20);
color: #241A04; display: grid; place-items: center;
font-weight: 800; font-size: 13px; letter-spacing: .04em;
box-shadow: 0 6px 16px rgba(212,175,55,.35);
}
.brand-name { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.brand-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; }
.nav { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.nav-group { margin: 14px 0 4px; padding: 0 10px; }
.nav-link {
display: flex; align-items: center; gap: 10px;
padding: 8.5px 10px; border-radius: var(--r-sm);
color: var(--text-2); font-weight: 600; font-size: 13.4px;
position: relative; transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.nav-link .ic { width: 18px; text-align: center; font-size: 14px; opacity: .85; flex: none; }
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.nav-link.active::before {
content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand);
}
.nav-link .pill {
margin-left: auto; font-size: 10.5px; font-weight: 800; padding: 1px 7px;
border-radius: 99px; background: var(--accent-mid); color: var(--on-accent);
}
.nav-foot { border-top: 1px solid var(--border); padding-top: 10px; }
.userchip {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 9px; border-radius: var(--r-md);
background: var(--surface-2); border: 1px solid var(--border);
transition: box-shadow .18s var(--ease);
}
.userchip:hover { box-shadow: var(--sh-1); }
.userchip .meta { min-width: 0; text-align: left; display: block; }
.userchip .nm { display: block; font-size: 12.8px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .rl { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.avatar {
width: 32px; height: 32px; border-radius: 50%; flex: none;
display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #241A04;
/* Los círculos en el oro de la marca, con las iniciales en tinta oscura.
Colores fijos en los dos temas: es un fondo de texto, no una
superficie. */
background: linear-gradient(145deg, #D4AF37, #A3801F);
object-fit: cover; /* cuando es ![]()
con foto real de Discord, no de iniciales */
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.lg { width: 46px; height: 46px; font-size: 16px; }
/* ---------- topbar ---------- */
.topbar {
position: sticky; top: 0; z-index: 30; height: var(--top-h);
display: flex; align-items: center; gap: 14px;
padding: 0 22px;
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--border);
}
.menu-btn {
display: grid; place-items: center; flex: none;
width: 34px; height: 34px; border-radius: var(--r-sm);
border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
cursor: pointer; transition: all .18s var(--ease);
}
.menu-btn:hover { color: var(--brand-ink); border-color: var(--brand-200); }
.menu-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.search {
position: relative; flex: 1 1 auto; max-width: 460px;
}
.search input {
width: 100%; height: 36px; padding: 0 12px 0 34px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 99px; font-size: 13px; transition: border-color .16s, box-shadow .16s;
}
.search input::placeholder { color: var(--text-3); }
.search input:focus { border-color: var(--brand-300); box-shadow: var(--ring); }
.search .si { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 13px; pointer-events: none; }
.search-pop {
position: absolute; top: 42px; left: 0; right: 0; z-index: 60;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 6px; max-height: 340px; overflow: auto;
}
.search-pop a { display: block; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; }
.search-pop a:hover, .search-pop a.hl { background: var(--surface-3); }
.search-pop .k { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; padding: 8px 10px 4px; font-weight: 800; }
/* Hora y fecha son dos datos, no un bloque: necesitan un respiro entre líneas
y una separación clara del resto de controles de la barra. */
.clock {
display: flex; flex-direction: column; gap: 3px;
text-align: right; line-height: 1; flex: none;
padding-left: 16px; margin-left: 2px;
border-left: 1px solid var(--border);
}
.clock .t {
font-size: 16.5px; font-weight: 800; letter-spacing: -.015em;
font-variant-numeric: tabular-nums;
}
.clock .d {
font-size: 10.6px; color: var(--text-3); font-weight: 600;
letter-spacing: .04em; text-transform: capitalize; white-space: nowrap;
}
.seg {
display: inline-flex; padding: 3px; gap: 2px;
background: var(--surface-3); border-radius: 99px; border: 1px solid var(--border);
}
.seg button {
padding: 4.5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700;
color: var(--text-2); transition: all .16s var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--brand-ink); box-shadow: var(--sh-1); }
/* segmented control on the coloured hero */
.seg.on-hero { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.30); }
.seg.on-hero button { color: rgba(255,255,255,.95); }
.seg.on-hero button:hover { color: #fff; }
.seg.on-hero button.on { background: #D4AF37; color: #241A04; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.icon-btn {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
transition: all .18s var(--ease);
}
.icon-btn:hover { color: var(--brand-ink); border-color: var(--brand-200); transform: translateY(-1px); }
/* ---------- main ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.view { padding: 24px 26px 64px; max-width: 1520px; width: 100%; animation: rise .34s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 28px; letter-spacing: -.032em; }
.page-head .lede { color: var(--text-2); font-size: 13.6px; margin-top: 5px; max-width: 62ch; }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 800; }
/* ============================================================
COMPONENTS
============================================================ */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); box-shadow: var(--sh-1);
transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.card.pad { padding: 18px; }
.card.tight { padding: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: 14.5px; }
.card-body { padding: 16px 18px; }
.card-foot { padding: 11px 18px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); font-size: 12.2px; color: var(--text-3); }
a.card, button.card { display: block; text-align: left; width: 100%; }
a.card:hover, button.card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--brand-200); }
/* Hero / stat */
.hero {
position: relative; overflow: hidden;
/* Colores fijos, no tokens: encima va texto BLANCO. El degradado es el
logo — negro que abre al oro WLX — y se queda en el escalón OSCURO
del oro para que el texto encima siempre pase contraste. El oro puro
aquí dejaría el texto ilegible. Y el extremo no es #8A6A20 sino
#634C16: encima van los dos círculos blancos decorativos (.12 y .08)
que ACLARAN el degradado, así que el escalón tiene que ir con margen
— medido sobre el render, no sobre el token. */
background: linear-gradient(135deg, #000000, #1C1606 42%, #634C16);
color: #FFFFFF; border-radius: var(--r-xl); padding: 22px 24px;
box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.hero::after {
content: ""; position: absolute; right: -70px; top: -90px; width: 300px; height: 300px;
border-radius: 50%; background: rgba(255,255,255,.12);
}
.hero::before {
content: ""; position: absolute; right: 40px; bottom: -130px; width: 220px; height: 220px;
border-radius: 50%; background: rgba(255,255,255,.08);
}
.hero > * { position: relative; z-index: 1; }
/* En oscuro la página es negra, así que el héroe es la tarjeta NEGRA de la
marca: un negro cálido que tira al oro, el eyebrow como tag DORADO con
tinta oscura, la cifra en blanco y un resplandor dorado en la esquina.
La tarjeta no puede ser oro: el texto blanco encima no pasaría. */
:root[data-theme="dark"] .hero {
background: linear-gradient(135deg, #2A2109 0%, #000000 78%);
border: 1px solid rgba(255,255,255,.22);
color: #FFFFFF;
box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .hero::after {
right: -80px; top: -80px; width: 260px; height: 260px;
background: radial-gradient(circle, rgba(212,175,55,.34) 0%, rgba(212,175,55,0) 72%);
}
:root[data-theme="dark"] .hero::before { background: rgba(255,255,255,.05); }
:root[data-theme="dark"] .hero .eyebrow {
display: inline-block; align-self: flex-start;
/* Sobre la tarjeta negra el tag va en ORO con tinta oscura: es el único
punto de color del héroe y lo que ancla la marca. */
background: #D4AF37; color: #241A04;
border-radius: 999px; padding: 7px 14px;
font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
:root[data-theme="dark"] .hero-value { color: #FFFFFF; }
:root[data-theme="dark"] .hero-sub { color: rgba(255,255,255,.7); }
:root[data-theme="dark"] .hero-bar { background: rgba(255,255,255,.16); }
:root[data-theme="dark"] .hero-bar > i { background: #D4AF37; }
:root[data-theme="dark"] .seg.on-hero { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.28); }
:root[data-theme="dark"] .seg.on-hero button { color: rgba(255,255,255,.8); }
:root[data-theme="dark"] .seg.on-hero button.on { background: #D4AF37; color: #241A04; }
.hero .eyebrow { color: #D4AF37; }
.hero-value { font-size: 46px; font-weight: 800; letter-spacing: -.045em; line-height: 1; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.hero-sub { font-size: 12.8px; color: rgba(255,255,255,.85); }
.hero-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.20); overflow: hidden; margin-top: 14px; }
.hero-bar > i { display: block; height: 100%; border-radius: 99px; background: #D4AF37; transition: width .9s var(--ease); }
.tile { padding: 15px 16px; }
.tile .lbl { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.tile .val { font-size: 27px; font-weight: 800; letter-spacing: -.035em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile .sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.tile .spark { margin-top: 10px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 99px; }
.delta.up { color: var(--good); background: var(--good-soft); }
.delta.down { color: var(--critical); background: var(--critical-soft); }
.delta.flat { color: var(--text-3); background: var(--surface-3); }
/* Badges */
.badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10.8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 8px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge .dot.live { position: relative; animation: dotLivePulse 1.6s ease-in-out infinite; }
.badge .dot.live::after {
content: ""; position: absolute; inset: -4px; border-radius: 50%;
background: currentColor; opacity: .55;
animation: dotLiveRing 1.6s ease-out infinite;
}
@keyframes dotLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes dotLiveRing { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
.badge.good { color: var(--good); background: var(--good-soft); }
.badge.warning { color: #8a6100; background: var(--warning-soft); }
.badge.serious { color: #a34a1e; background: var(--serious-soft); }
.badge.critical { color: var(--critical); background: var(--critical-soft); }
.badge.brand { color: var(--brand-ink);background: var(--brand-soft); }
.badge.neutral { color: var(--text-2); background: var(--surface-3); border-color: var(--border); }
:root[data-theme="dark"] .badge.warning { color: #fac54f; }
:root[data-theme="dark"] .badge.serious { color: #f0a483; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 38px; padding: 0 16px; border-radius: 10px;
font-size: 13.2px; font-weight: 700; border: 1px solid var(--border);
background: var(--surface); color: var(--text);
transition: all .18s var(--ease); white-space: nowrap;
}
.btn:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--sh-1); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 4px 14px rgba(212,175,55,.38); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); box-shadow: none; }
.btn.sm { height: 31px; padding: 0 11px; font-size: 12.2px; border-radius: 8px; }
.btn.block { width: 100%; }
/* Un botón que no lleva a ninguna parte tiene que PARECER que no lleva a
ninguna parte: sin borde, en gris, y sin cursor de mano. Si no, se hace clic
dos o tres veces antes de entender que no va a pasar nada. */
.btn[aria-disabled="true"] {
color: var(--text-3); border-color: transparent; background: transparent;
cursor: default; font-weight: 600;
}
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; background: transparent; color: var(--text-3); }
.btn.discord { background: #5865F2; border-color: #5865F2; color: #fff; height: 46px; font-size: 14.5px; box-shadow: 0 8px 22px rgba(88,101,242,.35); }
.btn.discord:hover { background: #4752C4; border-color: #4752C4; }
.btn[disabled] { opacity: .5; pointer-events: none; }
/* Quick-action cards */
.qa { display: flex; align-items: center; gap: 13px; padding: 15px 16px; }
.qa .qi {
width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
background: var(--brand-soft); color: var(--brand-ink); font-size: 17px;
}
.qa .qt { display: block; font-size: 14px; font-weight: 700; }
.qa .qs { display: block; font-size: 12.2px; color: var(--text-2); margin-top: 1px; }
.qa .qx { margin-left: auto; flex: none; color: var(--text-3); transition: transform .2s var(--ease); }
a.card.qa, button.card.qa, label.card.qa { display: flex; }
a.card:hover .qx { transform: translateX(3px); color: var(--brand); }
/* Tables */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.2px; }
table.tbl th {
text-align: left; font-size: 10.6px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--text-3); padding: 10px 12px;
border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2);
position: sticky; top: 0; z-index: 2;
}
table.tbl th.r, table.tbl td.r { text-align: right; }
table.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tbody tr { transition: background .14s var(--ease); }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl .rank { font-weight: 800; color: var(--text-3); width: 34px; font-variant-numeric: tabular-nums; }
table.tbl tr.group td {
background: var(--surface-3); font-size: 10.6px; font-weight: 800; letter-spacing: .11em;
text-transform: uppercase; color: var(--text-2); padding: 7px 12px;
}
table.tbl td.name { font-weight: 650; }
/* Meters / bars */
.meter { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .8s var(--ease); }
.meter.good > i { background: var(--good); }
.meter.warning > i { background: var(--warning); }
.meter.critical > i { background: var(--critical); }
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 128px minmax(0,1fr) 44px; align-items: center; gap: 10px; font-size: 12.8px; }
.bar-row .bl { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bv { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-track { height: 9px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar-track > i { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width .8s var(--ease); }
/* Sparkline / chart */
.spark { overflow: visible; border-radius: 5px; }
.spark svg { display: block; width: 100%; height: auto; overflow: hidden; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12.2px; color: var(--text-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.chart-tip {
position: fixed; z-index: 200; pointer-events: none; opacity: 0;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
box-shadow: var(--sh-3); padding: 8px 11px; font-size: 12.4px; transition: opacity .12s;
min-width: 120px;
}
.chart-tip .tt { font-weight: 800; margin-bottom: 3px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.chart-tip .tv { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
/* Rings */
.ring { position: relative; width: 96px; height: 96px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .rc { position: absolute; inset: 16%; display: grid; place-items: center; text-align: center; line-height: 1.15; }
.ring .rv { font-size: 20px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring .rl { font-size: 8.6px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
/* Lists */
.lst { display: flex; flex-direction: column; }
.lst-item {
display: flex; align-items: center; gap: 12px; padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.lst-item:last-child { border-bottom: none; }
.lst-item .t { display: block; font-size: 13.4px; font-weight: 650; }
.lst-item .s { display: block; font-size: 12px; color: var(--text-2); margin-top: 1px; }
/* Timeline / call cards */
.callcard {
display: grid; grid-template-columns: 100px minmax(0,1fr) auto; gap: 12px; align-items: center;
padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface); border-left: 3px solid var(--border-strong);
transition: all .2s var(--ease);
}
.callcard:hover { box-shadow: var(--sh-2); transform: translateX(2px); }
.callcard.ok { border-left-color: var(--good); }
.callcard.warn { border-left-color: var(--warning); }
.callcard.risk { border-left-color: var(--critical); }
.callcard .tm { font-weight: 800; font-size: 13.4px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; }
.callcard .tz { font-size: 10.6px; color: var(--text-3); }
/* Accordion */
.acc { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.acc + .acc { margin-top: 9px; }
.acc > summary {
list-style: none; cursor: pointer; padding: 13px 15px;
display: flex; align-items: center; gap: 12px; font-weight: 650;
transition: background .15s var(--ease);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: var(--surface-2); }
.acc > summary .chev { margin-left: auto; color: var(--text-3); transition: transform .2s var(--ease); }
.acc[open] > summary .chev { transform: rotate(90deg); }
.acc[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.acc .acc-body { padding: 15px; }
/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 11.4px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.input, select.input, textarea.input {
width: 100%; min-height: 38px; padding: 8px 11px;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
font-size: 13.4px; transition: border-color .16s, box-shadow .16s;
}
.input:focus { border-color: var(--brand-300); box-shadow: var(--ring); outline: none; }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.6; }
/* EOD del setter: se llena al final del turno, muchas veces desde el teléfono.
Los controles son grandes a propósito — el reporte que cuesta llenar es el que
no se llena. */
.eod-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
/* minmax(0,…) y no `1fr` a secas: `1fr` es minmax(auto,1fr) y el ancho mínimo
lo dictaba el del contador (23px de letra × 20 caracteres ≈ 360px),
así que en el teléfono cada tarjeta medía 470px y la página entera se abría
de lado. */
@media (max-width: 720px) { .eod-grid { grid-template-columns: minmax(0,1fr); } }
.eod-q { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; min-width: 0; }
.eod-lbl { font-size: 11.6px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.eod-sub { font-size: 11.4px; color: var(--text-3); margin-top: 3px; }
.eod-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.eod-btn { width: 46px; height: 46px; flex: none; border-radius: 12px; border: 1px solid var(--border-strong);
background: var(--surface); color: var(--text); font-size: 21px; font-weight: 700;
line-height: 1; cursor: pointer; }
.eod-btn:hover { border-color: var(--brand-200); color: var(--brand-ink); }
.eod-num { flex: 1 1 0; width: 0; min-width: 0; height: 46px; text-align: center; font-size: 23px; font-weight: 850;
letter-spacing: -.03em; font-variant-numeric: tabular-nums; border: 1px solid var(--border);
border-radius: 12px; background: var(--surface); color: var(--text); }
.eod-num:focus { border-color: var(--brand-300); box-shadow: var(--ring); outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border);
background: var(--surface); font-size: 12.4px; font-weight: 650; color: var(--text-2);
transition: all .16s var(--ease);
}
.chip:hover { border-color: var(--brand-200); color: var(--text); }
.chip.on { background: var(--brand-soft); border-color: var(--brand-200); color: var(--brand-ink); font-weight: 750; }
.chip .c { opacity: .65; font-variant-numeric: tabular-nums; }
.copybox {
background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-md);
padding: 15px; font-size: 13.2px; line-height: 1.75; white-space: pre-wrap;
max-height: 320px; overflow: auto;
}
.copybox a { color: var(--brand-ink); font-weight: 650; word-break: break-all; }
/* ---- frame de recursos ----
El contenido de un SOP o un script lo escribe un manager en HTML, así que
aquí se le da a ese HTML el mismo aire que a un documento: jerarquía de
títulos, listas legibles y tablas que no se salen del ancho. */
.res-frame { border-color: var(--brand-200); }
.res-html {
font-size: 13.6px; line-height: 1.72; color: var(--text);
max-height: 62vh; overflow: auto; overflow-wrap: anywhere;
}
.res-html > *:first-child { margin-top: 0; }
.res-html > *:last-child { margin-bottom: 0; }
.res-html p { margin: 0 0 11px; }
.res-html h1, .res-html h2, .res-html h3, .res-html h4, .res-html h5, .res-html h6 {
margin: 20px 0 8px; line-height: 1.28; letter-spacing: -.02em; font-weight: 800;
}
.res-html h1 { font-size: 20px; }
.res-html h2 { font-size: 17.5px; }
.res-html h3 { font-size: 15.5px; }
.res-html h4, .res-html h5, .res-html h6 { font-size: 14px; }
.res-html ul, .res-html ol { margin: 0 0 12px; padding-left: 22px; }
.res-html li { margin: 4px 0; }
.res-html a { color: var(--brand-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.res-html strong, .res-html b { font-weight: 750; }
.res-html blockquote {
margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--brand-200);
background: var(--surface-inset); border-radius: 0 var(--r-sm, 8px) var(--r-sm, 8px) 0; color: var(--text-2);
}
.res-html code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.4px;
background: var(--surface-inset); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}
.res-html pre {
background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-md);
padding: 12px 14px; overflow-x: auto; margin: 0 0 12px;
}
.res-html pre code { background: none; border: 0; padding: 0; }
.res-html hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.res-html img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.res-html table { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 12.8px; }
.res-html th, .res-html td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
.res-html th { background: var(--surface-inset); font-weight: 700; }
/* Editor: el textarea de HTML se lee como código, no como prosa. */
.res-edit-row textarea.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.4px; line-height: 1.6;
}
.res-edit-group .section-head { flex-wrap: wrap; }
/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button {
padding: 9px 14px; font-size: 13.2px; font-weight: 650; color: var(--text-2);
border-bottom: 2px solid transparent; white-space: nowrap; transition: all .16s var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--brand-ink); border-bottom-color: var(--brand); font-weight: 750; }
/* Tier columns */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.tier { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px; }
.tier-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.tier-h .n { font-size: 11.4px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.tier-h .c { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tier .hint { font-size: 11.4px; color: var(--text-3); margin-bottom: 10px; }
.tier-card {
display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px;
background: var(--surface); border: 1px solid var(--border); margin-bottom: 8px;
transition: all .18s var(--ease);
}
.tier-card:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.tier.starters { border-top: 3px solid var(--good); }
.tier.rotation { border-top: 3px solid var(--series-1); }
.tier.development { border-top: 3px solid var(--warning); }
.tier.bubble { border-top: 3px solid var(--critical); }
/* Avisos de estado (parcial / viejo / error) */
.notice {
display: flex; align-items: center; gap: 11px;
padding: 11px 14px; border-radius: var(--r-md); margin-bottom: 16px;
border: 1px solid var(--border); font-size: 13px; line-height: 1.45;
animation: rise .25s var(--ease) both;
}
.notice .ni {
width: 22px; height: 22px; border-radius: 50%; flex: none;
display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff;
}
.notice.warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 34%, transparent); }
.notice.warning .ni { background: var(--warning); color: #2b2410; }
.notice.critical { background: var(--critical-soft); border-color: color-mix(in srgb, var(--critical) 34%, transparent); }
.notice.critical .ni { background: var(--critical); }
.notice.brand { background: var(--brand-soft); border-color: var(--brand-200); }
.notice.brand .ni { background: var(--brand); color: var(--on-brand); }
.notice b { font-weight: 750; }
/* Chip de verificación: acompaña a un número que no cuadra */
.vchip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 750; padding: 2px 7px; border-radius: 99px;
background: var(--surface-3); color: var(--text-2); white-space: nowrap;
}
/* Rojo, no ámbar: un descuadre entre lo que el rep declaró y lo que entró de
verdad es dinero sin explicar, y en ámbar se leía como un detalle menor. */
.vchip.gap { background: var(--critical-soft); color: var(--critical); }
.vchip.ok { background: var(--good-soft); color: var(--good); }
/* Empty / loading */
.empty { text-align: center; padding: 42px 20px; color: var(--text-3); }
.empty .ei { font-size: 30px; margin-bottom: 8px; opacity: .6; }
.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 6px; }
@keyframes sk { to { background-position: -200% 0; } }
/* Toast */
.toast {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 99px;
font-size: 13.2px; font-weight: 650; box-shadow: var(--sh-3); z-index: 300;
opacity: 0; transition: all .28s var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Login */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-side {
background: linear-gradient(150deg, #000000, #241C08 45%, #8A6A20);
color: #FFFFFF; padding: 46px; display: flex; flex-direction: column; justify-content: space-between;
position: relative; overflow: hidden;
}
.login-side::after { content:""; position:absolute; right:-130px; bottom:-130px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(212,175,55,.24) 0%, rgba(212,175,55,0) 68%); }
.login-side::before { content:""; position:absolute; left:-90px; top:20%; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(138,106,32,.60) 0%, rgba(138,106,32,0) 70%); }
.login-side > * { position: relative; z-index: 1; }
.login-main { display: grid; place-items: center; padding: 40px 26px; }
.login-card { width: 100%; max-width: 380px; }
.login-feat { display: flex; gap: 12px; margin-top: 16px; }
.login-feat .fi { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; }
.rolegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 12px; }
.rolebtn { padding: 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); text-align: left; transition: all .16s var(--ease); }
.rolebtn:hover { border-color: var(--brand-300); transform: translateY(-1px); box-shadow: var(--sh-1); }
.rolebtn.on { border-color: var(--brand); background: var(--brand-soft); }
.rolebtn .rn { font-size: 13px; font-weight: 750; }
.rolebtn .rd { font-size: 11px; color: var(--text-3); }
/* Responsive */
/* Plegar la barra: sólo tiene sentido donde ocupa una columna del layout.
Por debajo de 980px la barra ya es un cajón que se abre encima, y ese caso
lo maneja .nav-open — mezclar los dos deja la barra invisible y sin forma
de recuperarla. */
@media (min-width: 981px) {
body.nav-collapsed .shell { grid-template-columns: 0 minmax(0,1fr); }
body.nav-collapsed .sidebar {
width: 0; padding-left: 0; padding-right: 0;
border-right-color: transparent; overflow: hidden;
transition: width .26s var(--ease), padding .26s var(--ease);
}
}
@media (max-width: 1600px) { .g6 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1420px) { .g5, .g6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1180px) { .split { grid-template-columns: 1fr; } .g4, .g5, .g6 { grid-template-columns: repeat(2, minmax(0,1fr)); } .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 980px) {
.shell { grid-template-columns: 1fr; }
.sidebar {
position: fixed; left: 0; top: 0; bottom: 0; width: 268px; height: 100vh;
transform: translateX(-100%); transition: transform .28s var(--ease); box-shadow: var(--sh-3);
}
body.nav-open .sidebar { transform: none; }
/* Velo detrás del cajón (z 35 < sidebar 40, mismo contexto: #app). */
.nav-scrim { display: none; position: fixed; inset: 0; background: rgba(8,16,30,.42); z-index: 35; }
body.nav-open .nav-scrim { display: block; }
body.nav-open { overflow: hidden; }
.view { padding: 18px 16px 56px; }
.g3, .g2 { grid-template-columns: 1fr; }
.login-wrap { grid-template-columns: 1fr; }
.login-side { display: none; }
}
@media (max-width: 620px) {
.g4, .g5, .g6 { grid-template-columns: 1fr; }
.tiers { grid-template-columns: 1fr; }
.page-head h1 { font-size: 23px; }
.hero-value { font-size: 36px; }
.clock { display: none; }
/* Barra superior en teléfono: menú · buscador (lo que sobre) · ⟳ · ES/EN · ◐.
El "Actualizado hace Xs" se quita: no cabía y aplastaba los botones. */
.topbar { gap: 8px; padding: 0 12px; }
.topbar .search { flex: 1 1 auto; min-width: 0; }
.topbar .search input { width: 100%; min-width: 0; }
.topbar .grow { display: none; }
#freshness { display: none; }
.seg button { padding: 4px 8px; font-size: 11.5px; }
.icon-btn, .menu-btn { width: 34px; height: 34px; flex: none; }
.bar-row { grid-template-columns: 96px minmax(0,1fr) 40px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { .sidebar, .topbar { display: none; } .shell { grid-template-columns: 1fr; } }
/* ============================================================
Ver como… — sólo lo ve Ops.
Aviso pegajoso y bien visible a propósito: mirar con los ojos
de otro no puede ser un estado en el que se te olvide que estás.
============================================================ */
.viewas { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.viewas > .k {
font-size: 10.4px; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--text-3);
}
.viewas select {
width: 100%; font: inherit; font-size: 12.8px;
padding: 6px 9px; border-radius: var(--r-sm);
border: 1px solid var(--border); background: var(--surface); color: var(--text);
cursor: pointer; transition: border-color .18s var(--ease);
}
.viewas select:hover { border-color: var(--brand-200); }
.viewas select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.viewbar {
display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
padding: 9px 22px;
background: var(--warning-soft);
border-bottom: 1px solid color-mix(in srgb, var(--warning) 34%, transparent);
font-size: 13px; color: var(--text);
}
.viewbar .ni {
flex: none; width: 19px; height: 19px; border-radius: 50%;
background: var(--warning); color: #2b2410;
display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.viewbar .sub { color: var(--text-2); font-size: 12.2px; }
.viewbar select {
margin-left: auto; font: inherit; font-size: 12.4px;
padding: 4px 9px; border-radius: var(--r-sm); cursor: pointer;
border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.viewbar select:focus-visible { outline: none; box-shadow: var(--ring); }
.viewbar select + button { margin-left: 0; }
.viewbar button {
margin-left: auto; font: inherit; font-size: 12.4px; font-weight: 600;
padding: 4px 12px; border-radius: 99px; cursor: pointer;
border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
transition: all .18s var(--ease);
}
.viewbar button:hover { border-color: var(--brand-200); color: var(--brand-ink); }
.viewbar button:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 700px) { .viewbar { padding: 9px 16px; } .viewbar .sub { display: none; } }
/* ---------------------------------------------------------------------------
Aviso de cobros — el modal que sale al entrar cuando hay pagos venciendo.
Se pinta encima de todo a propósito: si esto se puede ignorar de reojo, no
sirve para lo único que existe, que es que nadie se entere tarde.
--------------------------------------------------------------------------- */
.alert-back {
position: fixed; inset: 0; z-index: 900;
background: rgba(12, 20, 34, .52);
backdrop-filter: saturate(140%) blur(3px);
-webkit-backdrop-filter: saturate(140%) blur(3px);
display: flex; align-items: center; justify-content: center; padding: 24px;
animation: alertFade .18s var(--ease);
}
@keyframes alertFade { from { opacity: 0; } to { opacity: 1; } }
.alert-box {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(12, 20, 34, .28);
width: 100%; max-width: 560px; max-height: 82vh; display: flex; flex-direction: column;
animation: alertRise .2s var(--ease);
}
@keyframes alertRise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.alert-box .ab-head {
display: flex; align-items: flex-start; gap: 13px;
padding: 20px 22px 16px; border-bottom: 1px solid var(--border);
}
.alert-box .ab-icon {
flex: none; width: 38px; height: 38px; border-radius: 11px;
display: grid; place-items: center; font-size: 18px; font-weight: 800;
background: var(--critical-soft); color: var(--critical);
}
.alert-box h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
.alert-box .ab-sub { font-size: 12.8px; color: var(--text-2); margin-top: 3px; }
.alert-box .ab-list { overflow: auto; padding: 6px 10px; }
.alert-row {
display: flex; align-items: center; gap: 12px;
padding: 11px 12px; border-radius: var(--r-sm);
}
.alert-row + .alert-row { border-top: 1px solid var(--border); }
.alert-row .ar-when {
/* Ancho fijo, no mínimo: con "venció hace 3d" y "vence hoy" en la misma lista,
un chip elástico deja los nombres en zigzag y la columna deja de leerse. */
flex: none; width: 74px; text-align: center; white-space: nowrap;
font-size: 11.5px; font-weight: 750; padding: 5px 6px; border-radius: 999px;
}
.alert-row .ar-when.late { background: var(--critical-soft); color: var(--critical); }
.alert-row .ar-when.soon { background: var(--warning-soft); color: #8a6100; }
:root[data-theme="dark"] .alert-row .ar-when.soon { color: var(--warning); }
.alert-row .ar-who { flex: 1; min-width: 0; }
.alert-row .ar-who .t { display: block; font-weight: 650; font-size: 13.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-row .ar-who .s { display: block; font-size: 11.6px; color: var(--text-3); }
.alert-row .ar-amt { flex: none; font-weight: 800; font-size: 14.5px; }
.alert-box .ab-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 20px; border-top: 1px solid var(--border);
}
@media (max-width: 560px) {
.alert-row { flex-wrap: wrap; }
.alert-row .ar-when { width: auto; padding: 5px 10px; }
}
/* ---------- selector de personas con foto ---------- */
.picker { position: relative; display: inline-block; }
.picker-btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 6px 11px 6px 7px; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface);
font: inherit; color: var(--text); cursor: pointer;
box-shadow: var(--sh-1); transition: border-color .12s, box-shadow .12s;
}
.picker-btn:hover:not(:disabled) { border-color: var(--border-strong); box-shadow: var(--sh-2); }
.picker-btn:disabled { cursor: default; box-shadow: none; }
.picker-name { font-weight: 700; font-size: 13.4px; letter-spacing: -.01em; }
.picker-caret { color: var(--text-3); font-size: 11px; margin-left: 1px; }
.picker-menu {
position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
min-width: 246px; max-height: 320px; overflow: auto; padding: 6px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.picker-opt {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 9px; border: 0; border-radius: var(--r-sm);
background: transparent; font: inherit; color: var(--text);
cursor: pointer; text-align: left;
}
.picker-opt:hover { background: var(--surface-3); }
.picker-opt.on { background: var(--brand-soft, var(--surface-3)); }
.picker-opt .po-n { display: block; font-weight: 650; font-size: 13.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-opt .po-s { display: block; font-size: 11.4px; color: var(--text-3); }
/* ---------- proyección contra meta ---------- */
.pace svg { display: block; width: 100%; height: auto; overflow: visible; }
.pace-bars { margin-top: 2px; }
.pace .cd rect { transition: fill-opacity .12s; }
.pace .cd:hover rect:first-child { fill-opacity: 1; }
/* La leyenda de la segunda gráfica no es decoración: sin ella, las dos escalas
apiladas se leen como un solo eje, que es justo lo que no son. */
.pace-cap {
margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--border);
font-size: 10.5px; font-weight: 750; letter-spacing: .1em;
text-transform: uppercase; color: var(--text-3);
}
.pace .pb { transition: fill-opacity .12s; }
.pace-head {
display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 26px;
margin-bottom: 14px;
}
.pace-stat .k {
display: block; font-size: 10.5px; font-weight: 750; letter-spacing: .1em;
text-transform: uppercase; color: var(--text-3); margin-bottom: 3px;
}
.pace-stat .v { display: block; font-size: 21px; font-weight: 820; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.pace-stat .v.sm { font-size: 16.5px; }
/* El estado no viaja solo en el color: verde y rojo se separan mal en daltonismo
rojo-verde, así que aquí van además la flecha y la palabra. */
.pace-verdict {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: 999px;
font-size: 12.6px; font-weight: 780;
}
.pace-verdict.ok { background: var(--good-soft); color: var(--good); }
.pace-verdict.behind { background: var(--critical-soft); color: var(--critical); }
.pace-legend {
display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px;
font-size: 11.8px; color: var(--text-2);
}
.pace-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pace-legend i { width: 16px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }
.pace-legend i.sq { width: 10px; height: 10px; border: 0; border-radius: 3px; }
/* La muestra de la leyenda tiene la forma de lo que representa: una vela, no un
cuadrito. Y la rayada lleva la MISMA trama de 45° que el gráfico, porque ahí
es donde se aprende a leerla sin depender del color. */
.pace-legend i.cnd { width: 7px; height: 16px; border: 0; border-radius: 2px; }
.pace-legend i.cnd.hatch {
background-image: repeating-linear-gradient(45deg,
var(--surface) 0 2px, transparent 2px 6px);
}
@media (max-width: 620px) {
.pace-head { gap: 10px 18px; }
.pace-stat .v { font-size: 18px; }
}
/* ============================== MARCADOR ==============================
Una tarjeta grande manda en la pantalla y todo lo demás es contexto: la
disciplina del marcador es que haya UN lead delante, no ocho mil donde
elegir. Mismos tokens que el resto del HQ — sirve igual en claro y en
oscuro, y sin un solo color escrito a mano. */
.dl-card { border-left: 3px solid var(--border-strong); }
.dl-card.hot { border-left-color: var(--good); }
.dl-name { font-size: 25px; font-weight: 820; letter-spacing: -.035em; line-height: 1.1; }
.dl-when { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.dl-clock {
font-family: var(--mono); font-size: 17px; font-weight: 700;
color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.dl-facts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1px; background: var(--border); border: 1px solid var(--border);
border-radius: var(--r-md); overflow: hidden; margin: 16px 0;
}
.dl-fact {
display: flex; align-items: center; gap: 9px; padding: 11px 13px;
background: var(--surface-2); min-width: 0;
}
.dl-fact .i { color: var(--text-3); font-size: 13px; flex: none; }
.dl-fact .v { font-size: 13.2px; font-weight: 620; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-fact.copy { cursor: pointer; }
.dl-fact.copy:hover { background: var(--surface-3); }
.dl-fact.copy .v { color: var(--brand-ink); }
.dl-call { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.dl-go { font-size: 15px; font-weight: 800; padding: 13px 26px; border-radius: var(--r-md); }
.dl-go-i { margin-right: 9px; font-size: 15px; }
.dl-hint { flex: 1; min-width: 220px; font-size: 11.4px; line-height: 1.45; }
.dl-out { border-top: 1px solid var(--border); padding-top: 14px; }
.dl-out.locked { opacity: .5; }
.dl-out-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.dl-ob {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 12px 8px; border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface); cursor: pointer; text-align: center;
transition: transform .12s var(--ease), border-color .12s, background .12s;
}
.dl-ob:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.dl-ob .ob-i { font-size: 16px; line-height: 1; }
.dl-ob .ob-t { font-size: 12.6px; font-weight: 750; color: var(--text); letter-spacing: -.01em; }
.dl-ob .ob-s { font-size: 10.6px; color: var(--text-3); line-height: 1.35; }
.dl-ob.good:hover { border-color: var(--good); background: var(--good-soft); }
.dl-ob.brand:hover { border-color: var(--brand); background: var(--brand-soft); }
.dl-ob.warn:hover { border-color: var(--warning); background: var(--warning-soft); }
.dl-ob.risk:hover { border-color: var(--serious); background: var(--serious-soft); }
.dl-ob.dim:hover { border-color: var(--border-strong); background: var(--surface-3); }
.dl-ob.good .ob-i { color: var(--good); }
.dl-ob.brand .ob-i { color: var(--brand); }
.dl-ob.warn .ob-i { color: var(--warning); }
.dl-ob.risk .ob-i { color: var(--serious); }
.dl-dq { display: none; margin-top: 12px; padding: 12px; background: var(--surface-inset); border-radius: var(--r-md); }
.dl-dq.open { display: block; }
.dl-dq-h {
font-size: 11.2px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
color: var(--text-3); margin-bottom: 9px;
}
.dl-next { display: flex; flex-direction: column; max-height: 340px; overflow: auto; }
.dl-next-row {
display: grid; grid-template-columns: minmax(0,1fr) auto 16px; align-items: center;
gap: 10px; padding: 10px 15px; background: none; border: 0; border-bottom: 1px solid var(--border);
cursor: pointer; text-align: left; width: 100%;
}
.dl-next-row:hover { background: var(--surface-2); }
.dl-next-row:last-child { border-bottom: none; }
.dl-next-row.off { opacity: .55; }
.dl-next-row .n { font-size: 13.2px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-next-row .s { font-size: 11.4px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-next-row .b { font-size: 11px; color: var(--text-3); text-align: right; }
.dl-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.6px; font-weight: 620; color: var(--text-2); cursor: pointer; }
.dl-toggle input { accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; }
.dl-offline { text-align: center; padding: 64px 24px; }
.dl-offline h2 { font-size: 24px; font-weight: 820; letter-spacing: -.03em; margin: 16px 0 6px; }
.dl-offline p { max-width: 42ch; margin: 0 auto 14px; }
.dl-off-dot {
width: 62px; height: 62px; border-radius: 50%; margin: 0 auto;
background: var(--surface-3); border: 1px solid var(--border);
display: grid; place-items: center;
}
.dl-off-dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); }
@media (max-width: 900px) {
.dl-out-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-when { text-align: left; align-items: flex-start; }
.dl-name { font-size: 21px; }
}
/* Aviso de datos nuevos en la barra superior. Es un ofrecimiento, no una alarma:
aparece sólo cuando el refresco automático se contuvo para no interrumpir. */
.freshbtn {
background: var(--brand-soft); border: 1px solid var(--brand-200); color: var(--brand-ink);
font-size: 11.2px; font-weight: 750; padding: 4px 10px; border-radius: 999px;
cursor: pointer; font-family: var(--font); letter-spacing: -.01em;
}
.freshbtn:hover { background: var(--brand-100); }
.freshbtn:focus-visible { outline: none; box-shadow: var(--ring); }
/* ===================== ACTIVIDAD EN VIVO =====================
Dos piezas propias: el pulso del día (una columna por hora) y el feed de
desenlaces. Todo lo demás reutiliza tarjetas y tablas del resto del HQ. */
.pulse { display: flex; align-items: flex-end; gap: 4px; height: 132px; padding-top: 6px; }
.pulse .ph { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.pulse .pb {
width: 100%; max-width: 26px; border-radius: 4px 4px 2px 2px;
background: var(--surface-3); border: 1px solid var(--border);
display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
transition: background .12s;
}
.pulse .ph:hover .pb { background: var(--brand-soft); border-color: var(--brand-200); }
/* La porción verde es lo que conectó: se lee de un vistazo qué hora rinde. */
.pulse .pb > i { display: block; width: 100%; background: var(--good); }
.pulse .pn { font-size: 10.4px; font-weight: 800; color: var(--text-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pulse .pl { font-size: 9.6px; color: var(--text-3); font-weight: 700; letter-spacing: .02em; }
.feed { display: flex; flex-direction: column; max-height: 420px; overflow: auto; }
.feed-row {
display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center;
gap: 10px; padding: 9px 15px; border-bottom: 1px solid var(--border);
}
.feed-row:last-child { border-bottom: none; }
.feed-row:hover { background: var(--surface-2); }
.feed-row .fw { font-size: 10.8px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.feed-row .fb { min-width: 0; font-size: 13px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .fs { display: block; font-size: 11.2px; font-weight: 500; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
.pulse { height: 104px; }
.pulse .pn { display: none; }
.feed-row { grid-template-columns: 62px minmax(0, 1fr) auto; }
}
/* Punto del Marcador mientras arma la cola por primera vez: late, para que se
entienda que está trabajando y no colgado. */
.dl-off-dot.building::after { background: var(--brand); animation: dlPulse 1.1s ease-in-out infinite; }
@keyframes dlPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
/* Recurso sin enlace todavía. Sólo lo recibe manager u Ops: es su pendiente,
así que se ve apagado y no se comporta como algo en lo que se pueda hacer clic. */
.res-pending { opacity: .62; cursor: default; }
.res-pending:hover { transform: none; box-shadow: var(--sh-1); border-color: var(--border); }
.res-pending .qi { background: var(--surface-3); color: var(--text-3); }
/* El número dentro del botón de llamar: se marca viendo a quién. */
.dl-go .dl-num { font-family: var(--mono); font-size: 13.5px; font-weight: 700; opacity: .9; margin-left: 8px; }
.dl-go[aria-disabled="true"] { pointer-events: none; }
/* ---------- Registro del día ----------
Una ficha por persona que se abre en su día completo. La cabecera es un
botón entero (no un enlace con un icono al lado) para que abrir a alguien no
dependa de acertarle a una flecha de doce píxeles. */
.dlg-p { overflow: hidden; }
.dlg-p.quiet { opacity: .66; }
.dlg-head {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 12px 15px; background: none; border: 0; cursor: pointer; text-align: left;
}
.dlg-head:hover { background: var(--surface-2); }
.dlg-head:focus-visible { outline: none; box-shadow: var(--ring); }
.dlg-head .dlg-id { display: flex; flex-direction: column; min-width: 148px; }
.dlg-head .dlg-id .nm { font-weight: 700; font-size: 13.8px; letter-spacing: -.01em; }
.dlg-head .chev { margin-left: auto; color: var(--text-3); transition: transform .2s var(--ease); }
.dlg-p [aria-expanded="true"] .chev { transform: rotate(90deg); }
.dlg-nums { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.dlg-k { display: flex; flex-direction: column; gap: 1px; min-width: 56px; }
.dlg-k .v { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dlg-body { border-top: 1px solid var(--border); }
.dlg-meta {
display: flex; flex-wrap: wrap; gap: 16px 26px; padding: 13px 16px;
background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.dlg-sec { padding: 12px 16px; border-bottom: 1px solid var(--border); }
@media (max-width: 900px) {
/* En pantalla estrecha la fila de cifras se va debajo del nombre en vez de
empujar el nombre fuera de la tarjeta. */
.dlg-head { flex-wrap: wrap; }
.dlg-nums { margin-left: 0; width: 100%; gap: 14px; }
.dlg-head .chev { display: none; }
}
/* ---------- la marca ----------
El emblema va como IMAGEN con fondo transparente (ver .brand-logo arriba):
es multicolor y trae su propio negro. Aqui solo van los tamanos. */
.login-side .brand-logo { width: 78px; height: 78px; }
/* ---- Links de pago ---- */
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pay-item { display: flex; align-items: stretch; min-width: 0; }
.pay-amt {
flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 54px; padding: 8px 10px; border-radius: 12px 0 0 12px; text-decoration: none;
font-size: 17px; font-weight: 850; letter-spacing: -.02em; color: #241A04;
/* La tarjeta de precio en el oro de la marca, con el precio en tinta
oscura (8.2:1). En blanco no se leería. */
background: linear-gradient(135deg, #D4AF37, #A3801F); transition: transform .08s ease, filter .12s ease;
}
/* La variante es el otro color de la marca: onyx con el precio en oro. */
.pay-amt.alt { background: linear-gradient(135deg, #1A1A1E, #000000); color: #D4AF37; }
.pay-amt:hover { filter: brightness(1.06); }
.pay-amt:active { transform: scale(.98); }
.pay-lbl { display: block; font-size: 10.5px; font-weight: 600; opacity: .85; margin-top: 2px; }
.pay-copy {
flex: none; width: 42px; border: 1px solid var(--line); border-left: 0; border-radius: 0 12px 12px 0;
background: var(--surface); color: var(--text-2); font-size: 16px; cursor: pointer;
}
.pay-copy:hover { background: var(--surface-2, var(--surface)); color: var(--text); }
@media (max-width: 620px) { .pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---- gráficas: dibujo animado, brillo y punto vivo ---- */
.spark svg, .chart svg { overflow: visible; }
.spark .sp { cursor: crosshair; }
.sd.pulse { transform-origin: center; transform-box: fill-box; animation: chartPulse 2.2s ease-out infinite; }
@keyframes chartPulse { 0% { transform: scale(.55); opacity: .45; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
.anim .sl { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chartDraw 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
.anim .sl.glow { animation-delay: .05s; }
.anim .sa { opacity: 0; animation: chartFade .7s ease-out .55s forwards; }
.anim .sd { opacity: 0; animation: chartFade .35s ease-out 1s forwards; }
.anim .sd.pulse { animation: chartFade .35s ease-out 1s forwards, chartPulse 2.2s ease-out 1.2s infinite; }
@keyframes chartDraw { to { stroke-dashoffset: 0; } }
@keyframes chartFade { to { opacity: 1; } }
.ring-arc { transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1); }
.ring-arc.anim { animation: ringIn 1s cubic-bezier(.4, 0, .2, 1); }
@keyframes ringIn { from { stroke-dashoffset: var(--ring-c); } }
.chart .hz:hover ~ .hp { opacity: 1; }
.chart .hp { transition: opacity .12s ease; }
/* =====================================================================
Estudiantes · Leaderboard de alumnos
===================================================================== */
/* --- podio: 2º · 1º · 3º, el primero más alto --- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.pod-slot {
position: relative; text-align: center; padding: 18px 12px 0;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
box-shadow: var(--sh-1); overflow: hidden; min-width: 0;
}
.pod-slot.empty { visibility: hidden; }
/* Con marca oscura 300 bastaba; el oro en 300 es casi invisible sobre
blanco (1.7:1), así que estos dos bordes suben de escalón. */
.pod-slot.me { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-soft); }
.pod-medal { font-size: 26px; line-height: 1; }
.pod-avatar {
width: 52px; height: 52px; margin: 10px auto 8px; border-radius: 50%; display: grid; place-items: center;
font-weight: 800; font-size: 17px; color: var(--on-brand);
background: linear-gradient(135deg, var(--brand), var(--brand-600));
}
.pod-slot.p2 .pod-avatar { background: linear-gradient(135deg, #a8b3c4, #6f7e94); }
.pod-slot.p3 .pod-avatar { background: linear-gradient(135deg, #A0622D, #6E4220); color: #FFFFFF; }
.pod-name { font-weight: 750; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-amt { font-weight: 850; font-size: 22px; letter-spacing: -.03em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pod-sub { font-size: 11.4px; color: var(--text-3); margin-top: 2px; }
.pod-bar { height: 34px; margin-top: 14px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, var(--brand), var(--brand-600)); opacity: .9; }
.pod-slot.p1 .pod-bar { height: 62px; }
.pod-slot.p2 .pod-bar { background: linear-gradient(180deg, #a8b3c4, #6f7e94); }
.pod-slot.p3 .pod-bar { height: 24px; background: linear-gradient(180deg, #A0622D, #6E4220); }
.pod-slot.p1 { border-color: var(--brand-400); }
/* --- ranking --- */
table.lb-tbl tr.me td { background: var(--brand-soft); }
table.lb-tbl tr.me td.name { color: var(--brand-ink); }
/* --- miniaturas de evidencia --- */
.lb-thumb { flex: none; width: 64px; height: 44px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-3); display: block; }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-light .lb-light-box { background: var(--surface); border-radius: var(--r-lg); padding: 14px; max-width: min(92vw, 1000px); max-height: 92vh; box-shadow: var(--sh-3, var(--sh-2)); display: flex; flex-direction: column; }
.lb-light .lb-light-box img { max-width: 100%; max-height: calc(92vh - 80px); object-fit: contain; border-radius: 10px; background: var(--surface-3); }
/* --- formulario de publicar --- */
.lb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dropzone {
display: block; margin-top: 12px; border: 2px dashed var(--border-strong); border-radius: 14px; cursor: pointer;
background: var(--surface); transition: border-color .15s, background .15s; min-height: 150px; outline: none;
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.has { border-style: solid; border-color: var(--good); }
.dz-empty { display: grid; place-items: center; text-align: center; padding: 26px 16px; gap: 4px; }
.dz-ic { font-size: 30px; line-height: 1; opacity: .8; }
.dz-t { font-weight: 700; font-size: 13.4px; }
.dz-s { font-size: 11.6px; color: var(--text-3); }
.dz-prev { padding: 10px; display: grid; gap: 8px; justify-items: start; }
.dz-prev img { max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid var(--border); object-fit: contain; background: var(--surface-3); }
.dz-meta { font-size: 11.6px; color: var(--text-2); word-break: break-all; }
@media (max-width: 720px) {
.podium { gap: 8px; }
.pod-amt { font-size: 17px; }
.pod-avatar { width: 42px; height: 42px; font-size: 14px; }
.lb-form-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ===========================================================================
MI PERFIL
La única pantalla que habla de UNA persona, así que se lee al revés que los
boards: el nombre y la foto mandan arriba, el dinero se lee de lejos, y los
números van en cifras tabulares para que una columna de montos se lea como
una columna y no como un párrafo.
=========================================================================== */
/* El botón de Mi Perfil vive en la barra de arriba, al lado del de modo
oscuro: es lo único de esa barra que habla de TI y no del piso. Lleva tu foto
para que no sea un icono más entre iconos. */
.prf-btn { padding: 0; overflow: hidden; flex: none; display: grid; place-items: center; }
.prf-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prf-btn .ini { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--text-2); }
.prf-btn.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.prf-btn.on .ini { color: var(--brand-ink); }
/* El ⟳ gira mientras se pide: sin eso, pulsarlo cuando no hay nada nuevo que
pintar parece que el botón no hace nada. */
.prf .btn.spin { pointer-events: none; opacity: .7; animation: prf-spin .9s linear infinite; }
@keyframes prf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .prf .btn.spin { animation: none; } }
.prf { --prf-tab: tabular-nums; }
.prf .prf-card { margin-bottom: 20px; }
.prf .prf-sub { font-size: 11.6px; color: var(--text-3); line-height: 1.5; }
.prf .prf-tiles { margin-bottom: 16px; }
.prf .prf-tiles:last-child { margin-bottom: 0; }
.prf .nowrap { white-space: nowrap; }
/* Todo lo que sea cifra, en tabulares: en esta pantalla casi todo es dinero. */
.prf .tile .val, .prf .num, .prf .amount { font-variant-numeric: tabular-nums; }
.prf .chips .chip { font-variant-numeric: normal; }
/* --- cabecera: foto, nombre, tasas --- */
.prf-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
padding: 20px 22px; margin-bottom: 20px;
}
.prf-avatar {
width: 68px; height: 68px; flex: none; border-radius: 50%;
object-fit: cover; background: var(--surface-3);
border: 2px solid var(--border-strong);
box-shadow: 0 0 0 4px var(--brand-soft);
}
.prf-avatar.is-initials {
display: grid; place-items: center;
font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--text-2);
}
.prf-who { flex: 1 1 260px; min-width: 0; }
.prf-name {
margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.028em; line-height: 1.1;
overflow-wrap: anywhere;
}
.prf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prf-mail { margin-top: 9px; font-size: 12.4px; color: var(--text-3); overflow-wrap: anywhere; }
.prf-rates { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.prf-rate {
min-width: 96px; padding: 9px 13px; text-align: right;
background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
}
/* La tasa combinada (agendar y cerrar) es la que el equipo persigue: se marca. */
.prf-rate.is-self { border-color: var(--brand-200); background: var(--brand-soft); }
.prf-rate.is-self .v { color: var(--brand-ink); }
.prf-rate .k {
display: block; font-size: 10.2px; font-weight: 800; letter-spacing: .09em;
text-transform: uppercase; color: var(--text-3);
}
.prf-rate .v {
display: block; margin-top: 3px; font-size: 18px; font-weight: 800;
letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.prf-warn { flex: 1 1 100%; margin: 4px 0 0; }
/* --- el número grande --- */
.prf-hero {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
padding: 16px 18px 14px;
}
.prf-hero .amount {
font-size: 38px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
font-variant-numeric: tabular-nums;
}
.prf-hero .when { font-size: 12.4px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* --- reparto sobre el cash del piso (sólo para quien el servidor lo manda) ---
En oscuro se lee como la tarjeta de precio: el rojo manda y la cifra va
en blanco. */
.prf-share { border-color: var(--brand-200); }
.prf-share .prf-hero .amount { color: var(--brand-ink); }
.prf-formula {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
padding: 13px 15px; border-radius: var(--r-md);
background: var(--brand-soft); border: 1px solid var(--brand-100);
}
.prf-formula .f-part { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prf-formula .k {
font-size: 10.2px; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--text-3);
}
.prf-formula .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.prf-formula .f-op { font-size: 15px; font-weight: 700; color: var(--text-3); align-self: flex-end; padding-bottom: 2px; }
.prf-formula .is-total .v { color: var(--brand-ink); }
.prf-note { margin: 10px 18px 14px; font-size: 11.8px; color: var(--text-3); line-height: 1.55; }
.prf-self { margin-top: 0; }
/* --- rango de fechas --- */
.prf-range {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: -6px 0 18px;
}
.prf-range .input { width: auto; min-width: 150px; font-variant-numeric: tabular-nums; }
.prf-range .sep { color: var(--text-3); }
.prf-range[hidden] { display: none; }
/* --- tablas --- */
.prf-tbl .num, .prf-tbl td.r, .prf-tbl th.r { font-variant-numeric: tabular-nums; }
.prf-prospect { font-weight: 650; overflow-wrap: anywhere; }
.prf-notes {
margin-top: 2px; font-size: 11.2px; color: var(--text-3); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prf-eoc td { vertical-align: top; }
.prf-eoc .prf-prospect { max-width: 340px; }
.prf-eoc .prf-notes { max-width: 340px; }
@media (max-width: 900px) {
.prf-head { gap: 14px; padding: 16px; }
.prf-avatar { width: 54px; height: 54px; box-shadow: 0 0 0 3px var(--brand-soft); }
.prf-avatar.is-initials { font-size: 19px; }
.prf-name { font-size: 21px; }
.prf-rates { width: 100%; }
.prf-rate { flex: 1 1 0; min-width: 0; text-align: left; }
.prf-rate .v { font-size: 16px; }
.prf-hero .amount { font-size: 30px; }
.prf .tile .val { font-size: 22px; }
.prf-range .input { flex: 1 1 130px; min-width: 0; }
.prf-formula { gap: 8px 12px; }
.prf-formula .v { font-size: 15px; }
}
/* ---------------------------------------------------------------------------
Estadística personal — la ficha que abre un nombre del board.
--------------------------------------------------------------------------- */
.ps-link {
display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0;
font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.ps-link span { border-bottom: 1px dashed transparent; transition: border-color .15s, color .15s; }
.ps-link:hover span, .ps-link:focus-visible span { color: var(--brand-ink); border-bottom-color: currentColor; }
.alert-box.ps-box { max-width: 780px; max-height: 88vh; }
.ps-box .ab-head { align-items: center; }
.ps-body { overflow: auto; padding: 16px 22px 22px; }
.ps-tiles { margin-bottom: 18px; }
.ps-tiles .tile .val { font-size: 22px; }
.ps-sec + .ps-sec { margin-top: 18px; }
.ps-sec .eyebrow { margin-bottom: 10px; }
.ps-vs + .ps-vs { margin-top: 11px; }
.ps-vs-h { display: flex; justify-content: space-between; gap: 12px; font-size: 12.4px; color: var(--text-2); margin-bottom: 5px; }
.ps-vs-h b { color: var(--text); }
.ps-vs-track { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2, rgba(127,127,127,.14)); }
.ps-vs-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--brand); animation: psGrow .7s var(--ease) both; }
.ps-vs-track i.good { background: var(--good); }
.ps-vs-track i.warning { background: var(--warning); }
.ps-vs-track b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 2px; opacity: .75; }
@keyframes psGrow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .ps-vs-track i { animation: none; } }
.ps-comm { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--text-2); }
.ps-comm b { color: var(--text); margin-left: 4px; }
.ps-comm .tot b { color: var(--brand-ink); }
@media (max-width: 640px) { .ps-body { padding: 14px; } .alert-box.ps-box { max-width: 96vw; } }