/* Colour themes. Each palette sets the same tokens; the rules below only use tokens. Loaded last.
   Palettes: azul (default), indigo, oceano, coral, esmeralda. Dark mode swaps neutrals only. */

:root,:root[data-palette="azul"]{
  --bg:#F3F4F8; --card:#FFFFFF; --soft:#F6F7FB; --soft2:#E9EBF3;
  --text:#0F1530; --muted:#646B85; --faint:#A3A9C0; --line:#E8EAF2;
  --p:#2E5BFF; --p2:#4D74FF; --pSoft:#E8EEFF; --pGlow:rgba(46,91,255,.4);
  --hot1:#22306A; --hot2:#0E1534; --heroGlow:rgba(46,91,255,.7); --heroGlow2:rgba(122,151,255,.2);
  --sA:#2E5BFF; --sA2:#7A97FF; --sB:#22306A;
  --st-new:#A3ABCB; --st-qual:#4A5A9C; --st-prop:#6E50FF; --st-neg:#2E5BFF;
  --c1:#2E5BFF; --c2:#141E46; --c3:#7A97FF; --c4:#6E50FF; --c5:#C2D0FF; --c6:#A3ABCB; --c7:#2E3D7C;
  --av1:#141E46; --av2:#2E5BFF; --av3:#2E3D7C; --av4:#4D74FF; --av5:#4A5A9C; --av6:#6E50FF; --av7:#22306A; --av8:#1F46D9;
}
:root[data-palette="indigo"]{
  --bg:#F5F5FA; --card:#FFFFFF; --soft:#F7F7FC; --soft2:#EAEAF5;
  --text:#1E1B3A; --muted:#6B6A85; --faint:#A9A8C0; --line:#EBEBF4;
  --p:#4F46E5; --p2:#6366F1; --pSoft:#EEF0FF; --pGlow:rgba(79,70,229,.4);
  --hot1:#312E81; --hot2:#1E1B4B; --heroGlow:rgba(139,92,246,.65); --heroGlow2:rgba(99,102,241,.3);
  --sA:#6366F1; --sA2:#A5B4FC; --sB:#1E1B4B;
  --st-new:#C7D2FE; --st-qual:#818CF8; --st-prop:#A78BFA; --st-neg:#4F46E5;
  --c1:#4F46E5; --c2:#1E1B4B; --c3:#818CF8; --c4:#A78BFA; --c5:#C7D2FE; --c6:#6D28D9; --c7:#312E81;
  --av1:#4F46E5; --av2:#312E81; --av3:#7C3AED; --av4:#6366F1; --av5:#1E1B4B; --av6:#8B5CF6; --av7:#4338CA; --av8:#5B21B6;
}
:root[data-palette="oceano"]{
  --bg:#F1F6F7; --card:#FFFFFF; --soft:#F5F9FA; --soft2:#E3EEF0;
  --text:#0B2730; --muted:#5D7880; --faint:#9DB3B9; --line:#E2ECEE;
  --p:#0891B2; --p2:#06B6D4; --pSoft:#E0F5FA; --pGlow:rgba(8,145,178,.35);
  --hot1:#0E4A5C; --hot2:#082F3D; --heroGlow:rgba(6,182,212,.6); --heroGlow2:rgba(45,212,191,.28);
  --sA:#06B6D4; --sA2:#67E8F9; --sB:#0E4A5C;
  --st-new:#BAE6F0; --st-qual:#5BC0D6; --st-prop:#2DD4BF; --st-neg:#0891B2;
  --c1:#0891B2; --c2:#0E4A5C; --c3:#2DD4BF; --c4:#67E8F9; --c5:#155E75; --c6:#A5F3FC; --c7:#14B8A6;
  --av1:#0E4A5C; --av2:#0891B2; --av3:#0F766E; --av4:#06B6D4; --av5:#155E75; --av6:#14B8A6; --av7:#0C3A47; --av8:#0E7490;
}
:root[data-palette="coral"]{
  --bg:#F6F2ED; --card:#FFFFFF; --soft:#FAF7F3; --soft2:#EFE8E0;
  --text:#1C1714; --muted:#75685F; --faint:#B3A79E; --line:#EEE7DF;
  --p:#F2643D; --p2:#FF8A5C; --pSoft:#FFEDE6; --pGlow:rgba(242,100,61,.35);
  --hot1:#2E2420; --hot2:#141110; --heroGlow:rgba(242,100,61,.6); --heroGlow2:rgba(255,176,120,.22);
  --sA:#F2643D; --sA2:#FFA07A; --sB:#2E2420;
  --st-new:#EBD8CC; --st-qual:#E7A88E; --st-prop:#F2B33D; --st-neg:#F2643D;
  --c1:#F2643D; --c2:#2E2420; --c3:#FFA07A; --c4:#F2B33D; --c5:#8C6E62; --c6:#EBD8CC; --c7:#C2410C;
  --av1:#2E2420; --av2:#F2643D; --av3:#8C6E62; --av4:#E0582F; --av5:#5B4A42; --av6:#C2410C; --av7:#3D302A; --av8:#B45309;
}
:root[data-palette="esmeralda"]{
  --bg:#F2F6F4; --card:#FFFFFF; --soft:#F6FAF8; --soft2:#E3EEE8;
  --text:#0E211A; --muted:#5E7569; --faint:#9DB2A7; --line:#E3EDE7;
  --p:#059669; --p2:#10B981; --pSoft:#E1F6EC; --pGlow:rgba(5,150,105,.35);
  --hot1:#0F3D2E; --hot2:#082219; --heroGlow:rgba(16,185,129,.55); --heroGlow2:rgba(163,230,53,.22);
  --sA:#10B981; --sA2:#6EE7B7; --sB:#0F3D2E;
  --st-new:#CDEBDD; --st-qual:#6FCFA6; --st-prop:#A3E635; --st-neg:#059669;
  --c1:#059669; --c2:#0F3D2E; --c3:#6EE7B7; --c4:#A3E635; --c5:#34D399; --c6:#CDEBDD; --c7:#065F46;
  --av1:#0F3D2E; --av2:#059669; --av3:#065F46; --av4:#10B981; --av5:#3F6212; --av6:#047857; --av7:#14532D; --av8:#0D9488;
}

/* map palette → app tokens */
:root,:root[data-theme]{
  --ink:var(--text); --inkText:#FFFFFF;
  --accent:var(--p); --accent2:var(--p2); --accentSoft:var(--pSoft); --glow:var(--pGlow);
  --navy:var(--hot1); --navy2:var(--hot1); --navySoft:var(--soft2);
  --green:#12A866; --greenSoft:#E3F6EC; --red:#E5484D; --redSoft:#FDE8EA;
  --blue:var(--p); --blueSoft:var(--pSoft); --amber:#C98A0C; --amberSoft:#FBF1DC;
  --violet:var(--p); --violetSoft:var(--pSoft);
  --hotText:#FFFFFF; --stripe:var(--sA2); --loss:var(--sB);
  --shadow:0 1px 2px rgba(15,21,48,.04),0 10px 26px -14px rgba(20,30,70,.14);
  --grain:.02;
}
/* dark mode: neutrals only, palette hues stay */
:root[data-theme="dark"]{
  --bg:#0B0D16; --card:#141724; --soft:#1A1E2E; --soft2:#252A3D;
  --text:#F2F4FB; --muted:#9AA1BF; --faint:#5B6286; --line:#232838;
  --ink:#F2F4FB; --inkText:#0F1530;
  --pSoft:color-mix(in srgb,var(--p) 18%,#141724);
  --greenSoft:#0F2A22; --red:#FF6B72; --redSoft:#341620; --green:#3DDC97; --amberSoft:#33270E;
  --sB:color-mix(in srgb,var(--hot1) 70%,#ffffff 20%);
  --grain:.03;
}

/* Primary colour: navigation, buttons, active states */
.logo{background:linear-gradient(135deg,var(--p2),var(--p));color:#fff;box-shadow:0 6px 16px -6px var(--pGlow)}
.blob{background:linear-gradient(135deg,var(--p2),var(--p))!important;box-shadow:0 8px 18px -8px var(--pGlow)}
.nav a.on{color:#fff}
.railgrp .on{background:linear-gradient(135deg,var(--p2),var(--p))!important;color:#fff!important;box-shadow:0 8px 18px -8px var(--pGlow)}
.btn.dark{background:linear-gradient(135deg,var(--p2),var(--p));color:#fff;box-shadow:0 10px 22px -12px var(--pGlow)}
.btn.dark:hover{filter:brightness(1.05)}
.btn.light{background:var(--pSoft);color:var(--p)}
.btn.light:hover{background:color-mix(in srgb,var(--p) 14%,var(--card))}
.btn.line{background:var(--card)}
.segm button.on{color:var(--p)}
.tag.acc{background:var(--pSoft);color:var(--p)}

/* Featured cards: deep tone + primary glow */
.stat.hot,.hero{background:
  radial-gradient(90% 85% at 100% 0%,var(--heroGlow),transparent 58%),
  radial-gradient(60% 60% at 0% 100%,var(--heroGlow2),transparent 60%),
  linear-gradient(140deg,var(--hot1),var(--hot2));
  color:#fff;box-shadow:0 20px 40px -20px color-mix(in srgb,var(--hot2) 70%,transparent)}
.hero .prog div{background:#fff}
.wbtn{background:#fff;color:var(--hot1)}
.hero:before{background:conic-gradient(from var(--beam),transparent 0 65%,var(--sA2) 80%,#fff 86%,transparent 100%)}
.hero:after{background:radial-gradient(circle,color-mix(in srgb,var(--sA2) 40%,transparent),transparent 65%)}

/* Stat tiles */
.stats4 .stat:nth-child(n+2){--sbg:var(--soft)}
.stats4 .stat:nth-child(2) .h span,.grid.g4>.stat:nth-child(2) .h span{background:var(--p);color:#fff}
.stats4 .stat:nth-child(3) .h span,.grid.g4>.stat:nth-child(3) .h span{background:var(--hot1);color:#fff}
.stats4 .stat:nth-child(4) .h span,.grid.g4>.stat:nth-child(4) .h span{background:var(--pSoft);color:var(--p)}
.ml .mini:nth-child(1){box-shadow:inset 0 3px 0 var(--st-prop)}
.ml .mini:nth-child(2){box-shadow:inset 0 3px 0 var(--st-neg)}
.ml .mini:nth-child(3){box-shadow:inset 0 3px 0 var(--st-qual)}

/* Spotlight cards follow the primary hue */
.card,.kcol,.mini,.dcard,.stat:not(.hot){
  background:
    radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--p) 8%,transparent),transparent 45%) padding-box,
    linear-gradient(var(--sbg,var(--card)),var(--sbg,var(--card))) padding-box,
    radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--p) 55%,transparent),transparent 60%) border-box,
    linear-gradient(var(--sbg,var(--card)),var(--sbg,var(--card))) border-box}

/* Charts */
.seg.p{background:repeating-linear-gradient(135deg,var(--sA) 0 3px,var(--sA2) 3px 6px)}
.seg.l{background:var(--sB)}
.limit .bar div,.pbar div{background:linear-gradient(90deg,var(--hot1),var(--p));box-shadow:0 0 14px -4px var(--pGlow)}
.pbar.ink div{background:var(--hot1);box-shadow:none}
.legend i[style*="--accent"]{background:var(--sA)!important}
.legend i[style*="--ink"]{background:var(--sB)!important}

/* Kanban */
.kcol{box-shadow:var(--shadow)}
.dcard{--sbg:var(--soft)}
.dcard:hover{box-shadow:0 14px 28px -16px color-mix(in srgb,var(--hot2) 40%,transparent)}
.kcol.over{box-shadow:inset 0 0 0 2px var(--p);background:var(--pSoft)}

/* Status chips */
.st.ink{background:var(--pSoft);color:var(--p)}
.st.dark{background:var(--p);color:#fff}
.st.violet{background:color-mix(in srgb,var(--st-prop) 18%,var(--card));color:color-mix(in srgb,var(--st-prop) 80%,var(--text))}
.st.gray{background:var(--soft2);color:var(--muted)}

/* Accents */
.spark{color:var(--p);filter:drop-shadow(0 0 10px var(--pGlow))}
.grad{background:linear-gradient(90deg,var(--text) 0%,var(--text) 30%,var(--p) 50%,var(--text) 70%,var(--text) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.btn.shine:after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%)}
.in:focus{border-color:var(--p);box-shadow:0 0 0 4px var(--pSoft)}
.search:focus-within,.compose:focus-within{border-color:var(--p)}
.chk.on{background:var(--p);border-color:var(--p)}
.chk.on:after{border-color:#fff}
.in,.search,.selp{background-color:var(--card)}
.ifield .in{background:var(--soft)}
.toast{background:var(--hot2);color:#fff}
.toast .ico,.toast button{color:var(--sA2)}
.dot{background:var(--p);box-shadow:0 0 8px var(--pGlow)}
.railgrp .cnt{background:var(--p)}
.thread.on{background:var(--pSoft)}
.thread .un,.send{background:var(--p);color:#fff}
.bub.me{background:linear-gradient(135deg,var(--p2),var(--p));color:#fff}
.stepper button.cur{background:var(--p);color:#fff;box-shadow:0 0 18px -4px var(--pGlow)}
.stepper button.past{background:var(--pSoft);color:var(--p)}
.cal .cd.today .dn{background:var(--p);color:#fff}
.cal .ev.task{background:var(--soft2);color:var(--text)}
.cal .ev.deal{background:var(--pSoft);color:var(--p)}
.cal .cd.has:after{background:var(--p)}
.tli .tdot.deal{background:var(--pSoft);color:var(--p)}
.kadd:hover{border-color:var(--p);color:var(--p)}
::selection{background:var(--p);color:#fff}

/* Login */
.auth-side.hero .auth-tiles .at{background:rgba(255,255,255,.12)}
.auth-bars i{background:repeating-linear-gradient(135deg,#fff 0 3px,color-mix(in srgb,var(--sA2) 85%,transparent) 3px 6px)!important}
.auth-card .brand{background:var(--pSoft)}
.remember input:checked+.chk{background:var(--p);border-color:var(--p)}
.meter[data-s="3"] i:nth-child(-n+3){background:var(--p)}

/* Theme picker (Ajustes) */
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.pal button{border:2px solid var(--line);border-radius:16px;padding:10px;text-align:left;transition:border-color .2s,transform .2s;background:var(--card)}
.pal button:hover{transform:translateY(-2px)}
.pal button.on{border-color:var(--p);box-shadow:0 0 0 4px var(--pSoft)}
.pal .sw{display:flex;height:34px;border-radius:10px;overflow:hidden;margin-bottom:8px}
.pal .sw i{flex:1}
.pal b{font-size:13px;font-weight:600}