/* ODD LAB* — sistema de diseño
   Fuente: Plus Jakarta Sans (la más cercana a las referencias de marca). Para cambiarla: edita --font-ui. */

@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-style:normal;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}
/* Tipografías de ejemplo para vistas previas del ADN de marca */
@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:800;font-display:swap;src:url(../fonts/manrope-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}

:root{
  /* Marca */
  --odd-lime:#DBF93E; --odd-lime-hover:#B8D92D; --odd-black:#030303; --odd-white:#F6F5F2; --odd-lavender:#E0BFF8;
  --odd-charcoal:#222222; --odd-graphite:#414141; --odd-border:#DCDAD5; --odd-surface:#EAE8E3;
  --font-ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Espaciado (múltiplos de 4) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;
  --r-control:8px;--r-card:12px;--r-panel:16px;
  --sidebar-w:224px; --content-max:1500px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
:root,[data-theme="light"]{
  --bg:var(--odd-white); --surface:#FFFFFF; --surface-2:var(--odd-surface); --text:var(--odd-black);
  --text-2:#625E57; --border:var(--odd-border); --primary:var(--odd-lime); --primary-text:var(--odd-black);
  --ok:#1F6F4C; --warn:#8A5410; --err:#B0343A; --info:#2F66AB;
  --ok-bg:#E3F3EA; --warn-bg:#F7EAD3; --err-bg:#F8E1E2; --info-bg:#E1ECF8;
  --shadow:0 1px 2px rgba(3,3,3,.05),0 4px 14px rgba(3,3,3,.04);
  --l1-bg:var(--odd-lavender); --l1-fg:#030303; --l2-bg:var(--odd-lime); --l2-fg:#030303; --l3-bg:#030303; --l3-fg:var(--odd-lime);
  --focus:#2F66AB;
}
[data-theme="dark"]{
  --bg:var(--odd-black); --surface:var(--odd-charcoal); --surface-2:#303030; --text:#FFFFFF;
  --text-2:#D1CEC8; --border:#414141; --primary:var(--odd-lime); --primary-text:var(--odd-black);
  --ok:#4FC08D; --warn:#E0A24A; --err:#F0777C; --info:#79AEEF;
  --ok-bg:#16382A; --warn-bg:#40300F; --err-bg:#472022; --info-bg:#182C46;
  --shadow:none;
  --l1-bg:var(--odd-lavender); --l1-fg:#030303; --l2-bg:var(--odd-lime); --l2-fg:#030303; --l3-bg:#030303; --l3-fg:var(--odd-lime);
  --focus:#79AEEF;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:var(--odd-black); --surface:var(--odd-charcoal); --surface-2:#303030; --text:#FFFFFF; --text-2:#D1CEC8; --border:#414141;
    --ok:#4FC08D; --warn:#E0A24A; --err:#F0777C; --info:#79AEEF; --ok-bg:#16382A; --warn-bg:#40300F; --err-bg:#472022; --info-bg:#182C46; --shadow:none; --focus:#79AEEF;
  }
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.01em}
h1{font-size:32px;font-weight:800;line-height:40px}
h2{font-size:24px;font-weight:700;line-height:32px}
h3{font-size:18px;font-weight:700;line-height:26px}
h4{font-size:15px;font-weight:700}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--text-2)}
.small{font-size:12.5px}
.tiny{font-size:12px}
.bold{font-weight:700}
.row{display:flex;gap:var(--s3);align-items:center}
.row.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:var(--s3)}
.grow{flex:1;min-width:0}
.right{margin-left:auto}
.hide{display:none!important}
.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt6{margin-top:var(--s6)}
.mb2{margin-bottom:var(--s2)}.mb3{margin-bottom:var(--s3)}.mb4{margin-bottom:var(--s4)}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Layout ---------- */
#app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--odd-black);color:#fff;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:var(--s4) var(--s3);gap:var(--s2);z-index:20}
.sidebar .logo{padding:var(--s2) var(--s3) var(--s3)}
.sidebar .logo img{display:block}
.sidebar .logo img.full{width:100%;max-width:176px;height:auto}
.sidebar .logo .iso{display:none;height:28px}
.nav{display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1}
.nav a,.nav button.navbtn{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);border-radius:10px;color:#E9E7E2;text-decoration:none;background:none;border:0;text-align:left;width:100%;font-weight:500}
.nav a:hover,.nav button.navbtn:hover{background:#1c1c1c}
.nav a[aria-current="page"]{background:var(--odd-lime);color:var(--odd-black);font-weight:700}
.nav svg{width:20px;height:20px;flex:none}
.nav .sep{height:1px;background:#262626;margin:var(--s2) var(--s2)}
.nav .badge{margin-left:auto;background:#C63D43;color:#fff;border-radius:99px;font-size:11px;padding:0 6px;min-width:18px;text-align:center}
.side-user{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-top:1px solid #262626}
.side-user img{width:36px;height:36px;border-radius:50%;background:var(--odd-lime)}
.side-user .nm{font-weight:700;line-height:1.1}.side-user .rl{font-size:12px;color:#B9B6AF}
.main{min-width:0;padding:var(--s6) var(--s8) var(--s12);max-width:var(--content-max);width:100%;margin:0 auto}
.topbar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s6);flex-wrap:wrap}
.mobile-head,.bottom-nav{display:none}
.page-head{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap}
.page-head .sub{color:var(--text-2);margin-top:4px}
.page-head .actions{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.nat-pill{width:96px;height:96px;object-fit:contain;flex:none}

@media (max-width:1023px){
  :root{--sidebar-w:72px}
  .sidebar .logo img.full{display:none}.sidebar .logo .iso{display:block;margin:0 auto}
  .nav a span.lbl,.nav button.navbtn span.lbl,.side-user .meta,.nav .badge{display:none}
  .nav a,.nav button.navbtn{justify-content:center;padding:12px}
  .side-user{justify-content:center;padding:var(--s3) 0}
  .main{padding:var(--s4) var(--s6) var(--s12)}
}
@media (max-width:767px){
  #app{display:block}
  .sidebar{display:none}
  .mobile-head{display:flex;align-items:center;gap:var(--s3);position:sticky;top:0;z-index:30;background:var(--odd-black);color:#fff;padding:calc(10px + var(--safe-t)) var(--s4) 10px}
  .mobile-head img{height:30px}
  .main{padding:var(--s4) var(--s4) calc(96px + var(--safe-b))}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--border);padding:6px 4px calc(6px + var(--safe-b))}
  .bottom-nav a,.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--text-2);background:none;border:0;text-decoration:none;padding:4px 0}
  .bottom-nav a[aria-current="page"]{color:var(--text);font-weight:700}
  .bottom-nav svg{width:22px;height:22px}
  .bottom-nav .plus{width:52px;height:52px;border-radius:50%;background:var(--odd-lime);color:var(--odd-black);margin:-22px auto 0;display:grid;place-items:center;box-shadow:0 4px 14px rgba(3,3,3,.25)}
  .bottom-nav .plus svg{width:26px;height:26px}
  h1{font-size:26px;line-height:32px}
  .page-head .actions{margin-left:0;width:100%}
  .nat-pill{width:72px;height:72px}
}

/* Selector de marca y barra móvil (sobre fondo negro) */
.side-brand .inp,.mobile-head .inp{background:#1c1c1c;color:#fff;border-color:#333;min-width:0}
.side-brand .inp option,.mobile-head .inp option{background:#1c1c1c;color:#fff}
.nav{scrollbar-width:thin;scrollbar-color:#444 transparent}
.mobile-head img{height:30px;width:auto;flex:none}
.sync-mobile .sync{font-size:0;gap:0}.sync-mobile .dot{width:10px;height:10px}

/* ---------- Componentes ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s4);box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card.tint{background:var(--surface-2);box-shadow:none}
.card h3,.card h4{margin-bottom:var(--s2)}
.card-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.card-head h3,.card-head h4{margin:0}
.grid{display:grid;gap:var(--s4)}
.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))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.g-main{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:1023px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g-main{grid-template-columns:1fr}}
@media (max-width:767px){.g2,.g3,.g4{grid-template-columns:1fr}.g4.keep2{grid-template-columns:repeat(2,minmax(0,1fr))}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:40px;padding:0 var(--s4);border-radius:var(--r-control);border:1px solid var(--border);background:var(--surface);font-weight:600;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--primary);color:var(--primary-text);border-color:transparent}
.btn.primary:hover{background:var(--odd-lime-hover)}
.btn.dark{background:var(--odd-black);color:#fff;border-color:var(--odd-black)}
[data-theme="dark"] .btn.dark{background:#fff;color:#030303;border-color:#fff}
.btn.danger{background:var(--err);color:#fff;border-color:transparent}
.btn.ghost{background:transparent;border-color:transparent}
.btn.sm{min-height:32px;padding:0 var(--s3);font-size:13px}
.btn.icon{width:40px;padding:0}.btn.icon.sm{width:32px}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}

.chip{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:2px 10px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--text);white-space:nowrap;line-height:20px}
.chip svg{width:13px;height:13px}
.chip.l1{background:var(--l1-bg);color:var(--l1-fg)}
.chip.l2{background:var(--l2-bg);color:var(--l2-fg)}
.chip.l3{background:var(--l3-bg);color:var(--l3-fg)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.err{background:var(--err-bg);color:var(--err)}
.chip.info{background:var(--info-bg);color:var(--info)}
.chip.outline{background:transparent;border:1px solid var(--border)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--text-2)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.err{background:var(--err)}

.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--border);margin-bottom:var(--s4);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{padding:10px var(--s3);border:0;background:none;border-bottom:3px solid transparent;color:var(--text-2);font-weight:600;text-decoration:none;white-space:nowrap}
.tabs a[aria-current="true"],.tabs button[aria-current="true"],.tabs a.on,.tabs button.on{color:var(--text);border-bottom-color:var(--odd-lime);box-shadow:inset 0 -1px 0 var(--text)}
.pills{display:flex;gap:var(--s2);flex-wrap:wrap}
.pills button,.pills a{border:1px solid var(--border);background:var(--surface);border-radius:99px;padding:5px 14px;font-weight:600;font-size:13px;text-decoration:none}
.pills .on{background:var(--odd-lime);border-color:var(--odd-lime);color:#030303}
.pills .off{opacity:.55;cursor:not-allowed}

/* Formularios */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.lbl{font-size:12.5px;font-weight:700;color:var(--text)}
.field .hint{font-size:12px;color:var(--text-2)}
.field input[type=text],.field input[type=number],.field input[type=date],.field input[type=time],.field input[type=url],.field input[type=email],.field input[type=password],.field input[type=search],.field select,.field textarea,.inp{width:100%;min-height:40px;border:1px solid var(--border);border-radius:var(--r-control);background:var(--surface);color:var(--text);padding:8px 12px}
.field textarea{min-height:84px;resize:vertical;line-height:1.45}
.field textarea.tall{min-height:150px}
.field input:focus,.field select:focus,.field textarea:focus,.inp:focus{border-color:var(--text)}
.check{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.check input{width:18px;height:18px;margin-top:2px;accent-color:#030303;flex:none}
.check.done span{text-decoration:line-through;color:var(--text-2)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.form-grid .full{grid-column:1/-1}
@media (max-width:767px){.form-grid{grid-template-columns:1fr}}

/* Tablas */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;min-width:560px}
table.t th{font-size:12.5px;text-align:left;color:var(--text-2);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
table.t td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tr.click{cursor:pointer}table.t tr.click:hover td{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* KPIs */
.kpi .v{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.kpi .l{font-size:12.5px;color:var(--text-2);font-weight:600}
.delta{font-size:12px;font-weight:700;border-radius:99px;padding:1px 8px}
.delta.up{background:var(--ok-bg);color:var(--ok)}.delta.down{background:var(--err-bg);color:var(--err)}.delta.flat{background:var(--surface-2);color:var(--text-2)}
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;position:relative}
.bar>i{display:block;height:100%;background:var(--odd-lime);border-radius:99px;box-shadow:inset 0 0 0 1px rgba(3,3,3,.25)}
.bar.l1>i{background:var(--odd-lavender)}.bar.l3>i{background:#030303}
[data-theme="dark"] .bar.l3>i{background:#fff}
.bar .tgt{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text)}

/* Estados vacíos */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:var(--s8) var(--s4);border:1px dashed var(--border);border-radius:var(--r-card);background:var(--surface)}
.empty img{width:92px;height:92px;object-fit:contain}
.empty p{max-width:420px;color:var(--text-2)}

/* Modal y toasts */
.overlay{position:fixed;inset:0;background:rgba(3,3,3,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--s4)}
.modal{background:var(--surface);border-radius:var(--r-panel);max-width:720px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal.wide{max-width:980px}.modal.narrow{max-width:460px}
.modal-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s6);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}
.modal-head h3{margin:0}
.modal-body{padding:var(--s6)}
.modal-foot{display:flex;gap:var(--s2);justify-content:flex-end;padding:var(--s4) var(--s6);border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--surface)}
@media (max-width:767px){
  .overlay{align-items:flex-end;padding:0}
  .modal{border-radius:var(--r-panel) var(--r-panel) 0 0;max-height:94vh;padding-bottom:var(--safe-b)}
  .modal-body{padding:var(--s4)}.modal-head,.modal-foot{padding:var(--s3) var(--s4)}
}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + var(--safe-b));z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
@media (max-width:767px){#toasts{bottom:calc(92px + var(--safe-b))}}
.toast{background:var(--odd-black);color:#fff;border-radius:10px;padding:10px 16px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.3);display:flex;gap:8px;align-items:center;pointer-events:auto;max-width:90vw}
.toast.err{background:#B0343A}.toast.ok{background:#1F6F4C}

/* Sync */
.sync{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2)}
.sync-mobile{margin-left:auto;color:#E9E7E2}

/* Banners */
.banner{display:flex;gap:var(--s3);align-items:flex-start;border-radius:var(--r-card);padding:var(--s3) var(--s4);border:1px solid var(--border);background:var(--surface-2);margin-bottom:var(--s4)}
.banner.warn{background:var(--warn-bg);border-color:transparent}.banner.err{background:var(--err-bg);border-color:transparent}.banner.ok{background:var(--ok-bg);border-color:transparent}.banner.info{background:var(--info-bg);border-color:transparent}
.banner svg{width:20px;height:20px;flex:none;margin-top:1px}

/* ---------- Tarjetas de idea / pieza ---------- */
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;cursor:pointer;min-width:0}
.pcard:hover{border-color:var(--text)}
.pcard .ttl{font-weight:700;line-height:1.3}
.pcard .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pcard .lv{height:4px;border-radius:4px;margin:-4px 0 4px}
.lv.l1{background:var(--odd-lavender)}.lv.l2{background:var(--odd-lime)}.lv.l3{background:#030303}
[data-theme="dark"] .lv.l3{background:#fff}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:var(--s3);overflow-x:auto;padding-bottom:var(--s3)}
.kcol{background:var(--surface-2);border-radius:var(--r-card);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);min-height:120px}
.kcol>h4{display:flex;align-items:center;gap:8px;font-size:14px}
.kcol>h4 .n{margin-left:auto;font-weight:600;color:var(--text-2)}
.kcol.over{outline:2px dashed var(--text)}

/* ---------- Calendario ---------- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.cal .dow{padding:8px;font-size:12.5px;font-weight:700;color:var(--text-2);background:var(--surface-2);text-align:center}
.cal .day{min-height:112px;border-top:1px solid var(--border);border-left:1px solid var(--border);padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0;position:relative}
.cal .day:nth-child(7n+8){border-left:0}
.cal .day.out{background:var(--surface-2);opacity:.65}
.cal .day.today .dn{background:var(--odd-black);color:var(--odd-lime);border-radius:99px}
.cal .dn{font-size:12.5px;font-weight:700;width:24px;height:24px;display:grid;place-items:center}
.cal .day.over{outline:2px dashed var(--text);outline-offset:-2px}
.cev{display:flex;gap:6px;align-items:center;border-radius:8px;padding:3px 6px;font-size:12px;font-weight:600;line-height:1.25;cursor:pointer;min-width:0;border:0;text-align:left;width:100%}
.cev.l1{background:var(--l1-bg);color:var(--l1-fg)}.cev.l2{background:var(--l2-bg);color:var(--l2-fg)}.cev.l3{background:var(--l3-bg);color:var(--l3-fg)}
.cev.sk{outline:1.5px dashed rgba(3,3,3,.45);outline-offset:-1.5px}
.cev svg{width:13px;height:13px;flex:none}
.cev .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2)}
.cal-week .wd{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s2);display:flex;flex-direction:column;gap:6px;min-height:200px}
@media (max-width:1023px){.cal-week{grid-template-columns:1fr 1fr}}
@media (max-width:767px){
  .cal .day{min-height:64px;padding:3px}
  .cal .cev .t{display:none}.cal .cev{padding:2px;justify-content:center}
  .cal-week{grid-template-columns:1fr}
}

/* ---------- Estudio ---------- */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s4);align-items:start}
@media (max-width:1100px){.studio{grid-template-columns:1fr}}
.slide-row,.take-row{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);padding:var(--s3);display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s3)}
.slide-row .n,.take-row .n{width:32px;height:32px;border-radius:8px;background:var(--odd-lime);color:#030303;font-weight:800;display:grid;place-items:center}
.promptbox{background:var(--surface-2);border-radius:var(--r-control);padding:var(--s3);font-size:12.5px;white-space:pre-wrap;word-break:break-word;max-height:170px;overflow:auto}
.check-group h4{margin:var(--s3) 0 var(--s1)}
.rule-ok{color:var(--ok)}.rule-bad{color:var(--err)}
.score{display:flex;gap:4px;align-items:center}
.score i{width:18px;height:8px;border-radius:4px;background:var(--surface-2);display:block}
.score i.on{background:var(--odd-lime);box-shadow:inset 0 0 0 1px rgba(3,3,3,.3)}

/* Charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--font-ui);font-size:11px;fill:var(--text-2)}
.chart .grid-l{stroke:var(--border);stroke-width:1}
.legend{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:12.5px;color:var(--text-2)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}

/* Misceláneos */
.swatch{width:56px;height:56px;border-radius:12px;border:1px solid var(--border);flex:none}
.swatches{display:flex;gap:var(--s3);flex-wrap:wrap}
.swatch-item{display:flex;flex-direction:column;gap:4px;align-items:flex-start;font-size:12px;width:92px}
.imgcard img{width:100%;border-radius:var(--r-control);display:block;border:1px solid var(--border)}
.imgcard{cursor:zoom-in}
.thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:var(--surface-2)}
.kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:6px var(--s3)}
.kv dt{font-weight:700;color:var(--text-2);font-size:12.5px}.kv dd{margin:0}
.list{display:flex;flex-direction:column}
.list>.li{display:flex;gap:var(--s3);align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.list>.li:last-child{border-bottom:0}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s4);background:var(--odd-black)}
.login .box{--text:#030303;--text-2:#625E57;--surface:#FFFFFF;--surface-2:#EAE8E3;--border:#DCDAD5;--bg:var(--odd-white);background:var(--odd-white);color:#030303;border-radius:20px;padding:var(--s8);max-width:420px;width:100%;display:flex;flex-direction:column;gap:var(--s4)}
.login .btn.dark{background:#030303!important;color:#fff!important;border-color:#030303!important}
.login .box .field input{background:#fff}
.login img.lg{height:64px;align-self:flex-start}
.login .nat{position:absolute;right:0;top:-70px;width:100px}
.avatar-tile{border-radius:22%;width:64px;height:64px;object-fit:cover;flex:none}
.brand-card{padding:0;overflow:hidden}
.brand-card .cover{height:110px;background:var(--odd-lime);display:flex;align-items:center;justify-content:center}
.brand-card .cover img{height:80px;max-width:80%;object-fit:contain}
.brand-card .body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.sheet-img{width:100%;border-radius:var(--r-card);border:1px solid var(--border);cursor:zoom-in;display:block}
.manrope{font-family:"Manrope",var(--font-ui)}.inter{font-family:"Inter",var(--font-ui)}
.sticky-tools{position:sticky;top:0;z-index:5;background:var(--bg);padding:var(--s2) 0}
.copy-line{display:flex;gap:var(--s2);align-items:flex-start}
.copy-line .txt{flex:1;white-space:pre-wrap;word-break:break-word;background:var(--surface-2);border-radius:var(--r-control);padding:var(--s3)}
details.fold{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);padding:0 var(--s4)}
details.fold>summary{cursor:pointer;font-weight:700;padding:var(--s3) 0;list-style:none;display:flex;gap:8px;align-items:center}
details.fold>summary::-webkit-details-marker{display:none}
details.fold[open]{padding-bottom:var(--s3)}
@media (prefers-reduced-motion:no-preference){.overlay{animation:fade .12s ease-out}.modal{animation:pop .14s ease-out}}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes pop{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}
@media print{.sidebar,.bottom-nav,.mobile-head,.actions,.btn{display:none!important}#app{display:block}}

/* ---------- Pantalla de acceso y bienvenida (v1.2.2) ---------- */
#app>.login,#app>.auth{grid-column:1/-1}
.auth{height:100vh;height:100dvh;min-height:620px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:#030303;color:#fff;overflow:hidden}
.auth-hero{display:grid;grid-template-rows:auto auto minmax(0,1fr);padding:var(--s12) var(--s12) 0;min-width:0;min-height:0;height:100%}
.auth-logo{height:100px;width:auto;justify-self:start;align-self:start;order:1}
.auth-copy{order:2;margin-top:var(--s6);max-width:620px}
.auth-copy h1{font-size:clamp(34px,3.8vw,58px);line-height:1.05;font-weight:800;letter-spacing:-.03em;color:#fff}
.auth-copy p{margin-top:var(--s3);font-size:18px;line-height:1.45;color:#E9E7E2;max-width:440px}
.auth-nat{order:3;display:block;min-height:0;margin-top:var(--s4)}
.auth-nat img{display:block;width:100%;height:100%;max-width:700px;object-fit:contain;object-position:left bottom}
.auth-main{display:flex;justify-content:center;align-items:flex-start;padding:var(--s8);overflow:auto;min-height:0}
.auth-main::before,.auth-main::after{content:"";flex:0 0 0}
.auth-panel{--text:#030303;--text-2:#625E57;--surface:#FFFFFF;--surface-2:#EAE8E3;--border:#DCDAD5;background:var(--odd-white);color:#030303;border-radius:28px;padding:var(--s8);width:100%;max-width:440px;box-shadow:0 30px 80px rgba(0,0,0,.55);margin:auto}
.auth-panel.wide{max-width:620px}
.auth-card{display:flex;flex-direction:column;gap:var(--s4)}
.auth-card .field input{background:#fff;min-height:50px;font-size:16px}
.auth-card .btn,.auth-panel .btn{min-height:52px;font-size:16px;font-weight:800}
.auth-panel .btn.dark{background:#030303!important;color:#fff!important;border-color:#030303!important}
.auth-card .links{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px}
.auth-card .links a{color:#030303;text-underline-offset:3px}
.pw-wrap{position:relative}.pw-wrap input{padding-right:48px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;display:grid;place-items:center;color:#625E57;border-radius:8px}
.pw-eye svg{width:20px;height:20px}
.auth-msg{min-height:20px}.auth-msg.err{color:#B0343A}.auth-msg.ok{color:#1F6F4C}
.auth-panel .card{background:#fff}
@media (max-height:760px) and (min-width:861px){.auth-logo{height:72px}.auth-hero{padding-top:var(--s8)}.auth-copy{margin-top:var(--s4)}.auth-copy h1{font-size:clamp(30px,3.2vw,46px)}}
@media (max-width:860px){
  .auth{height:auto;min-height:100vh;grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:visible}
  .auth-hero{display:flex;flex-direction:column;height:auto;padding:var(--s6) var(--s6) 0;align-items:flex-start}
  .auth-logo{height:72px}
  .auth-nat{order:2;margin-top:var(--s2);align-self:center;width:min(92%,460px)}
  .auth-nat img{height:auto;max-width:none;object-fit:initial}
  .auth-copy{order:3;margin-top:0}
  .auth-copy h1{font-size:34px}.auth-copy p{display:block;font-size:15px;margin-top:8px}
  .auth-main{align-items:flex-start;padding:var(--s4) var(--s6) var(--s12);overflow:visible}
  .auth-panel{background:transparent;box-shadow:none;padding:0;max-width:520px;color:#fff;--text:#FFFFFF;--text-2:#D1CEC8;--border:#414141;border-radius:0;margin:0}
  .auth-panel .field>label{color:#fff}
  .auth-card .links a{color:#fff}
  .auth-msg.err{color:#FF9AA0}.auth-msg.ok{color:#8FE0B5}
  .auth-panel .card{background:#fff;--text:#030303;--text-2:#625E57;--border:#DCDAD5;color:#030303}
}