/* =====================================================================
   RETO TRADING — SKIN "COCKPIT" (v100)
   Solo estilos. No cambia el HTML que genera app.js ni su lógica.
   Reskin del primer rediseño aplicado a las clases reales del panel.
   Tema oscuro por defecto + tema claro con buen contraste (data-theme).
   ===================================================================== */

:root,:root[data-theme="dark"]{
  --bg:#070a10; --bg2:#0b1019;
  --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.025); --solid:#0e131c;
  --line:rgba(150,170,205,.13); --line2:rgba(150,170,205,.07);
  --ink:#eef3fb; --muted:#93a0b8; --faint:#5d6a82;
  --profit:#34e0a1; --profit2:#12b886;
  --manual:#7c93ff; --manual2:#5468ff;
  --bot:#3ad6c8; --bot2:#16b8a6;
  --gold:#f3b94d; --gold-ink:#ffe2ad;
  --violet:#a98bff; --red:#ff6b78;
  --r:14px; --r-lg:22px;
  --shadow:0 22px 55px -26px rgba(0,0,0,.72);
  --grid:rgba(120,140,180,.05);
  --field:rgba(255,255,255,.04); --field-focus:rgba(255,255,255,.07);
  --railbg:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  --alert-info-bg:rgba(124,147,255,.1);  --alert-info-bd:rgba(124,147,255,.26); --alert-info-tx:#cdd6ff; --alert-info-ic:var(--manual);
  --alert-ok-bg:rgba(52,224,161,.1);     --alert-ok-bd:rgba(52,224,161,.26);   --alert-ok-tx:#bff3da;  --alert-ok-ic:var(--profit);
  --alert-warn-bg:rgba(243,185,77,.1);   --alert-warn-bd:rgba(243,185,77,.28); --alert-warn-tx:var(--gold-ink); --alert-warn-ic:var(--gold);
  --alert-err-bg:rgba(255,107,120,.1);   --alert-err-bd:rgba(255,107,120,.28); --alert-err-tx:#ffc2c7; --alert-err-ic:var(--red);
}

/* ---------- TEMA CLARO (contraste corregido, mod. 2) ---------- */
:root[data-theme="light"]{
  --bg:#eef2f8; --bg2:#e6ecf5;
  --panel:#ffffff; --panel2:#f4f7fc; --solid:#ffffff;
  --line:rgba(28,42,75,.12); --line2:rgba(28,42,75,.07);
  --ink:#16213d; --muted:#586079; --faint:#8a93a8;
  --profit:#0fae77; --profit2:#0a8d60;
  --manual:#3b62e6; --manual2:#2a4cd0;
  --bot:#0fa394; --bot2:#0c8576;
  --gold:#b8801b; --gold-ink:#8a5a00;
  --violet:#7a4be0; --red:#dc3b4c;
  --shadow:0 20px 48px -28px rgba(25,40,80,.4);
  --grid:rgba(40,60,100,.05);
  --field:#f2f5fb; --field-focus:#ffffff;
  --railbg:linear-gradient(180deg,#0f1730,#0c1226); /* la barra lateral se mantiene oscura */
  --alert-info-bg:#e7eeff;  --alert-info-bd:#bcccff; --alert-info-tx:#1f3f9c; --alert-info-ic:#2a4cd0;
  --alert-ok-bg:#e1f7ec;    --alert-ok-bd:#a9e6c6;   --alert-ok-tx:#0a7a44;  --alert-ok-ic:#0fae77;
  --alert-warn-bg:#fcf2da;  --alert-warn-bd:#ecd49a; --alert-warn-tx:#8a5a00; --alert-warn-ic:#b8801b;
  --alert-err-bg:#fde7e9;   --alert-err-bd:#f2bcc2;  --alert-err-tx:#a81f2c; --alert-err-ic:#dc3b4c;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;overflow-x:hidden}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100dvh;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
  transition:background .3s,color .3s;
}
/* aurora + rejilla ambiente */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 540px at 12% -8%,rgba(52,224,161,.14),transparent 60%),
    radial-gradient(820px 520px at 100% 6%,rgba(84,104,255,.14),transparent 58%),
    radial-gradient(720px 600px at 60% 120%,rgba(58,214,200,.09),transparent 60%),
    var(--bg2);
  animation:drift 22s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 50% 25%,#000,transparent 85%)}
:root[data-theme="light"] body::before{opacity:.85}
@keyframes drift{to{transform:translate3d(0,-16px,0) scale(1.04)}}
input,select,textarea,button{font-family:inherit;font-size:16px}
.mono,#content .value,.data-table,.field input,.compact-day input,.login-card input{font-family:"JetBrains Mono",ui-monospace,monospace;font-feature-settings:"tnum"}
.hidden{display:none!important}
::selection{background:rgba(52,224,161,.3)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 16%,transparent);border-radius:99px;border:3px solid transparent;background-clip:padding-box}

/* ============================ LAYOUT ============================ */
.app-shell{display:grid;grid-template-columns:262px 1fr;min-height:100dvh;align-items:start;background:transparent}

.sidebar{
  position:sticky;top:0;height:100dvh;padding:22px 16px;display:flex;flex-direction:column;gap:14px;overflow:auto;
  background:var(--railbg);border-right:1px solid var(--line);backdrop-filter:blur(14px);color:#eef3ff
}
:root[data-theme="light"] .sidebar{--ink:#eef3ff;--muted:#9fb0d6;--line:rgba(255,255,255,.1);--field:rgba(255,255,255,.06)}
.brand{display:flex;gap:12px;align-items:center;padding:4px 6px 14px;margin:0}
.brand-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;
  font-family:"Space Grotesk";font-weight:700;color:#04130d;font-size:18px;
  background:linear-gradient(135deg,var(--profit),var(--bot));
  box-shadow:0 8px 22px -6px rgba(52,224,161,.55),inset 0 0 0 1px rgba(255,255,255,.22)}
.brand-icon img{width:100%;height:100%;object-fit:cover;display:block}
.brand h2{font-family:"Space Grotesk";font-size:17px;margin:0;font-weight:600;letter-spacing:-.02em;color:#fff}
.brand p{margin:3px 0 0;font-size:11px;color:#9fb0d6;display:flex;align-items:center;gap:6px}

.nav{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.nav-btn{display:flex;align-items:center;gap:11px;border:1px solid transparent;background:transparent;
  color:#aab6d6;border-radius:13px;padding:0 14px;height:44px;text-align:left;font-weight:600;font-size:14px;
  cursor:pointer;transition:background .18s,color .18s,transform .18s}
.nav-btn:hover{color:#fff;background:rgba(255,255,255,.06);transform:translateX(2px)}
.nav-btn.active{color:#fff;background:linear-gradient(135deg,rgba(124,147,255,.24),rgba(58,214,200,.18));
  border-color:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

.side-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.ghost,.danger{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#eef3ff;
  border-radius:13px;padding:11px;text-align:center;font-weight:600;font-size:13px;cursor:pointer;transition:.18s}
.ghost:hover{background:rgba(255,255,255,.09)}
.danger{border-color:rgba(255,107,120,.3);background:rgba(255,107,120,.12);color:#ffb3ba}
.danger:hover{background:rgba(255,107,120,.2);transform:translateY(-1px)}

.main{padding:26px 30px 64px;min-width:0;min-height:100dvh}

/* topbar */
.topbar{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.topbar h1{font-family:"Space Grotesk";font-size:30px;line-height:1;margin:0;letter-spacing:-.03em;font-weight:600}
.topbar p{color:var(--muted);margin:7px 0 0;font-size:13.5px}
.menu-btn{display:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:13px;width:44px;height:44px;font-size:19px;cursor:pointer;backdrop-filter:blur(8px)}
.theme-btn{margin-left:auto;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  width:44px;height:44px;border-radius:13px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px);transition:.18s;flex:0 0 auto}
.theme-btn:hover{transform:translateY(-1px);border-color:var(--profit)}
.theme-btn svg{width:19px;height:19px}
:root[data-theme="light"] .theme-btn .ic-sun{display:none}
:root[data-theme="dark"] .theme-btn .ic-moon{display:none}

/* ============================ CARDS / GRID ============================ */
.grid{display:grid;gap:16px;align-items:stretch}
.cards-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* tarjetas métrica = vidrio oscuro con acento de color (mod.1: grandes y parejas) */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:20px;min-height:138px}
.metric{position:relative;overflow:hidden;color:var(--ink);display:flex;flex-direction:column;justify-content:center;--c:var(--profit)}
.metric::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--c),transparent)}
.metric::before{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%);opacity:.5;pointer-events:none}
.metric .label{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.metric .value{font-family:"Space Grotesk";font-size:30px;font-weight:600;letter-spacing:-.03em;margin:12px 0 4px;line-height:1}
.metric .hint{font-size:11.5px;color:var(--faint)}
.metric{transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s}
.metric:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
/* mapeo de colores del app a la paleta cockpit */
.metric.green{--c:var(--profit)}
.metric.blue,.metric.manualSoft,.metric.manualLine{--c:var(--manual)}
.metric.cyan,.metric.botSoft,.metric.botLine{--c:var(--bot)}
.metric.purple{--c:var(--violet)}
.metric.orange{--c:var(--gold)}
.metric.dark{--c:var(--manual)}

/* ============================ PANELES / FORM ============================ */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:22px;margin-bottom:18px}
.panel h3{font-family:"Space Grotesk";font-weight:600;margin:0 0 14px;font-size:16px;letter-spacing:-.01em}
/* mod.1: Día operativo y Guardar como tarjetas grandes y parejas */
.compact-day,.panel.compact-day{min-height:150px;display:flex;flex-direction:column;justify-content:center}

.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}
.field input{width:100%;border:1px solid var(--line);background:var(--field);color:var(--ink);
  border-radius:12px;padding:13px 14px;transition:.16s}
.field input:focus{outline:none;border-color:var(--profit);background:var(--field-focus);box-shadow:0 0 0 3px rgba(52,224,161,.18)}
.field input:disabled{opacity:.5}

.btn{border:0;border-radius:12px;padding:12px 18px;font-weight:600;cursor:pointer;transition:transform .15s,filter .15s;
  background:linear-gradient(135deg,var(--profit),var(--profit2));color:#04130d;
  box-shadow:0 12px 26px -12px rgba(52,224,161,.7)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn.secondary{background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.full{width:100%}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ============================ TABS ============================ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:14px 0 18px;overflow:auto}
.tab{border:0;background:transparent;color:var(--muted);padding:12px 15px;font-weight:600;font-size:13.5px;
  cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom:2px solid var(--profit)}

/* ============================ TABLAS ============================ */
.table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel2);backdrop-filter:blur(8px);margin-bottom:26px}
.data-table{width:max-content;min-width:900px;border-collapse:collapse;font-size:13px}
.data-table th,.data-table td{padding:12px 16px;border-bottom:1px solid var(--line2);white-space:nowrap;text-align:left}
.data-table th{position:sticky;top:0;background:color-mix(in srgb,var(--bg2) 82%,transparent);backdrop-filter:blur(6px);
  color:var(--muted);font-family:"Inter";font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.data-table tr:hover td{background:color-mix(in srgb,var(--manual) 7%,transparent)}
.data-table tbody tr:last-child td{border-bottom:0}

/* ============================ ALERTAS (contraste correcto en claro) ============================ */
.alert{border:1px solid var(--line);border-radius:14px;padding:13px 16px;margin-bottom:16px;font-size:13px;line-height:1.55;font-weight:500}
.alert.info{background:var(--alert-info-bg);border-color:var(--alert-info-bd);color:var(--alert-info-tx)}
.alert.success{background:var(--alert-ok-bg);border-color:var(--alert-ok-bd);color:var(--alert-ok-tx)}
.alert.warning{background:var(--alert-warn-bg);border-color:var(--alert-warn-bd);color:var(--alert-warn-tx)}
.alert.error{background:var(--alert-err-bg);border-color:var(--alert-err-bd);color:var(--alert-err-tx)}
.alert b{color:inherit}

/* ============================ VARIOS ============================ */
.section-title{font-family:"Space Grotesk";font-size:22px;font-weight:600;margin:6px 0 6px;letter-spacing:-.02em}
.caption{color:var(--muted);margin:0 0 16px;font-size:13px}
.hint{font-size:11.5px;color:var(--faint)}

/* mini-card / jornada */
.mini-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(14px);padding:20px;color:var(--ink);max-width:none}
.jornada-card{background:linear-gradient(160deg,color-mix(in srgb,var(--manual) 12%,var(--panel)),var(--panel));
  border:1px solid var(--line)}
.bot-jornada-card{background:linear-gradient(160deg,color-mix(in srgb,var(--bot) 13%,var(--panel)),var(--panel))}
.jornada-card h3,.bot-jornada-card h3{font-family:"Space Grotesk";font-weight:600;color:var(--ink);margin:0 0 14px}
.jornada-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:14px}
.jornada-grid.bot-jornada-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.jornada-grid div{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:16px}
.jornada-grid span{display:block;color:var(--muted);font-size:11.5px;font-weight:600;margin-bottom:8px}
.jornada-grid b{font-family:"Space Grotesk";font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.02em}

/* dashboard split */
.dashboard-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dashboard-box{padding:24px}
.dashboard-box h2,.dashboard-box h3{font-family:"Space Grotesk";font-size:20px;font-weight:600;margin:0 0 18px;letter-spacing:-.02em}
.manual-box{border-left:3px solid var(--manual)}
.bot-box{border-left:3px solid var(--bot)}
.dash-link{cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.dash-link:hover{color:var(--profit);transform:translateX(3px)}

/* settings plegable */
.settings-wrap{margin-bottom:18px}.settings-bottom{margin-top:28px}
.settings-toggle{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:16px;padding:15px 18px;font-weight:600;cursor:pointer;text-align:left;backdrop-filter:blur(8px);transition:.18s}
.settings-toggle:hover{border-color:var(--profit)}
.settings-content{display:none;margin-top:14px}
.settings-content.open{display:block;animation:fadein .35s}

/* ============================ LOGIN INDEPENDIENTE (mod.3) ============================ */
.login-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;
  background:
    radial-gradient(1100px 620px at 18% -12%,rgba(52,224,161,.22),transparent 58%),
    radial-gradient(950px 560px at 110% 8%,rgba(84,104,255,.22),transparent 56%),
    radial-gradient(800px 700px at 60% 130%,rgba(58,214,200,.12),transparent 60%),
    #05070c;                       /* opaco: el panel NO se ve detrás → pantalla aparte */
  animation:fadein .4s ease}
:root[data-theme="light"] .login-overlay{
  background:
    radial-gradient(1100px 620px at 18% -12%,rgba(15,174,119,.2),transparent 58%),
    radial-gradient(950px 560px at 110% 8%,rgba(59,98,230,.18),transparent 56%),
    #0b1020}
.login-overlay.hidden{display:none}
.login-overlay::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(120,140,180,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,140,180,.06) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 80%)}
.login-card{position:relative;z-index:1;width:min(420px,100%);text-align:center;color:#eef3ff;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(150,170,205,.16);border-radius:26px;padding:36px 30px;
  backdrop-filter:blur(20px);box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  animation:cardUp .5s cubic-bezier(.2,.8,.2,1)}
.brand-icon.big{width:66px;height:66px;margin:0 auto 16px;font-size:24px;border-radius:18px}
.login-card h2{font-family:"Space Grotesk";font-weight:600;margin:0 0 6px;font-size:23px;color:#fff}
.login-card p{color:#aebbe0;font-size:14px;margin:0 0 6px}
.login-field{position:relative;margin:18px 0 4px}
.login-card input{width:100%;padding:15px 46px 15px 16px;border-radius:14px;border:1px solid rgba(150,170,205,.2);
  background:rgba(8,12,22,.65);color:#fff;outline:none;transition:.16s}
.login-card input:focus{border-color:var(--profit);box-shadow:0 0 0 3px rgba(52,224,161,.22)}
.toggle-pass{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;
  color:#8aa0d6;cursor:pointer;font-size:18px;padding:6px 8px;line-height:1}
.toggle-pass:hover{color:#fff}
.login-card .btn.full{margin-top:16px;padding:14px}
.login-error{color:#ff9aa2;min-height:22px;margin-top:10px;font-size:13px}

@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes cardUp{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* transición suave al cambiar de página (clase añadida por el script del index) */
#content.page-in{animation:pagein .42s cubic-bezier(.2,.8,.2,1)}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* móvil */
.close-sidebar{display:none}
.sidebar-overlay{display:none}

@media (max-width:760px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:288px;height:100dvh;transform:translateX(-106%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:120;padding-bottom:90px}
  .sidebar.open{transform:none;box-shadow:0 0 80px rgba(0,0,0,.6)}
  .sidebar-overlay{position:fixed;inset:0;background:rgba(5,8,14,.55);backdrop-filter:blur(3px);z-index:80}
  body.menu-open .sidebar-overlay{display:block}
  body.menu-open{overflow:hidden}
  .close-sidebar{display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:20px;
    width:48px;height:48px;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(255,255,255,.1);
    color:#fff;font-size:22px;font-weight:700;cursor:pointer;z-index:130;box-shadow:0 12px 28px rgba(0,0,0,.3)}
  .menu-btn{display:grid;place-items:center}
  .main{padding:18px 16px 50px}
  .topbar h1{font-size:24px;line-height:1.05}
  .cards-5,.cards-4,.cards-3,.cards-2,.form-grid,.form-grid.three,.form-grid.two,.dashboard-split{grid-template-columns:1fr}
  .metric .value{font-size:27px}
  .panel{padding:18px}
  .dashboard-box{padding:20px}
  .data-table{min-width:760px}
}
@media (max-width:1180px) and (min-width:761px){
  .cards-5{grid-template-columns:repeat(3,1fr)}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  body::before{animation:none}
}

/* =====================================================================
   CAPA VISUAL AÑADIDA POR enhance.js (héroe, anillo, sparklines, barras)
   ===================================================================== */
.rt-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-bottom:16px}
.rt-hero-card{display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;margin-bottom:0}
.rt-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--profit);margin:0 0 8px}
.rt-hero-val{font-family:"Space Grotesk";font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;margin:0;color:var(--ink)}
.rt-delta{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600;color:var(--profit);
  background:color-mix(in srgb,var(--profit) 14%,transparent);border:1px solid color-mix(in srgb,var(--profit) 26%,transparent);
  padding:5px 11px;border-radius:999px;margin-top:8px;width:max-content}
.rt-curve{width:100%;height:150px;display:block;margin-top:12px;overflow:visible}
.rt-draw{stroke-dasharray:1500;stroke-dashoffset:1500;animation:rtdraw 1.6s .2s cubic-bezier(.3,.7,.2,1) forwards;
  filter:drop-shadow(0 4px 10px rgba(52,224,161,.35))}
@keyframes rtdraw{to{stroke-dashoffset:0}}
.rt-area{opacity:0;animation:rtfade 1s 1s forwards}
.rt-node{opacity:0;animation:rtfade .4s 1.5s forwards}
@keyframes rtfade{to{opacity:1}}
.rt-ringcard{align-items:center;text-align:center}
.rt-ring{position:relative;width:150px;height:150px;margin:6px auto}
.rt-ring svg{transform:rotate(-90deg)}
.rt-ring-v{position:absolute;inset:0;display:grid;place-content:center}
.rt-ring-v b{font-family:"Space Grotesk";font-size:30px;font-weight:600;color:var(--ink)}
.rt-ring-v span{font-size:10.5px;color:var(--muted);display:block;margin-top:2px}
.rt-ring-sub{font-size:12.5px;color:var(--muted);margin-top:6px}

.rt-spark{display:block}
.rt-spark-card{position:absolute;right:0;bottom:0;width:62%;height:36px;opacity:.5;pointer-events:none}
.rt-spark-card path{stroke:var(--c,var(--profit))}
.metric{position:relative}
.rt-boxviz{margin-top:16px}
.rt-spark-box{width:100%;height:40px;opacity:.85}
.manual-box .rt-spark-box path{stroke:var(--manual)}
.bot-box .rt-spark-box path{stroke:var(--bot)}
.rt-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden;margin-top:10px}
.rt-bar i{display:block;height:100%;width:0;border-radius:99px;transition:width 1.1s .3s cubic-bezier(.2,.8,.2,1)}
.manual-box .rt-bar i{background:linear-gradient(90deg,var(--manual2),var(--manual))}
.bot-box .rt-bar i{background:linear-gradient(90deg,var(--bot2),var(--bot))}

/* reveal en cascada de los bloques del contenido */
.rt-reveal{opacity:0;transform:translateY(12px);animation:rtrise .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*55ms)}
@keyframes rtrise{to{opacity:1;transform:none}}

/* cajas Manual / Bot al estilo del demo: métricas como texto (no sub-tarjetas) */
.dashboard-box .grid.cards-2{gap:26px;grid-template-columns:max-content max-content;justify-content:start}
.dashboard-box .metric{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;
  padding:0!important;min-height:0!important;display:block!important}
.dashboard-box .metric::after,.dashboard-box .metric::before{display:none!important}
.dashboard-box .metric .label{font-size:11px}
.dashboard-box .metric .value{font-size:23px;margin:5px 0 0}
.dashboard-box .metric .hint{display:none}
.dashboard-box .dash-link{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dashboard-box .dash-link::after{content:"Abrir \2192";font-family:"Inter";font-size:12.5px;font-weight:600;color:var(--muted);transition:.2s}
.dashboard-box:hover .dash-link::after{color:var(--profit)}

@media (max-width:760px){
  .rt-hero{grid-template-columns:1fr}
  .rt-hero-val{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .rt-draw{stroke-dashoffset:0;animation:none}
  .rt-area,.rt-node{opacity:1;animation:none}
  .rt-reveal{opacity:1;transform:none;animation:none}
}