/* ═══════════════════════════════════════════
   FamilyDo — assets/app.css
   Dark theme · Fraunces + Instrument Sans
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,400&family=Instrument+Sans:wght@400;500;600&display=swap');

/* ── Variables ── */
:root {
  --bg:        #0F0E0C;
  --surface:   #1A1916;
  --surface2:  #242220;
  --border:    #2E2B27;
  --border2:   #3A3733;
  --cream:     #F2EDE4;
  --muted:     #6B6560;
  --gold:      #C9A052;
  --gold-dim:  rgba(201,160,82,.15);
  --sage:      #7E9E82;
  --sage-dim:  rgba(126,158,130,.15);
  --terra:     #C4614A;
  --terra-dim: rgba(196,97,74,.15);
  --amber:     #D4824A;
  --amber-dim: rgba(212,130,74,.15);
  --rose:      #C4748A;
  --rose-dim:  rgba(196,116,138,.15);
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:        #F5F1E8;
  --surface:   #FFFFFF;
  --surface2:  #EDE9DF;
  --border:    #D5CFC5;
  --border2:   #C0BAB0;
  --cream:     #1A1916;
  --muted:     #7A7570;
  --gold:      #9E7828;
  --gold-dim:  rgba(158,120,40,.13);
  --sage:      #4A7A50;
  --sage-dim:  rgba(74,122,80,.13);
  --terra:     #A04030;
  --terra-dim: rgba(160,64,48,.13);
  --amber:     #B05820;
  --amber-dim: rgba(176,88,32,.13);
  --rose:      #9C3E5A;
  --rose-dim:  rgba(156,62,90,.13);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',sans-serif;
  background:var(--bg);color:var(--cream);
  min-height:100vh;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}

/* ══════════════════════════════
   LOGIN
══════════════════════════════ */
.page-login{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem;overflow:hidden;position:relative;
}
.login-bg-orb{
  position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);
}
.orb1{width:500px;height:500px;background:rgba(201,160,82,.08);top:-180px;right:-180px}
.orb2{width:400px;height:400px;background:rgba(126,158,130,.07);bottom:-120px;left:-120px}

.login-wordmark{
  font-family:'Fraunces',serif;font-size:3.5rem;font-weight:900;
  letter-spacing:-3px;color:var(--cream);position:relative;z-index:1;
  margin-bottom:.2rem;
}
.login-wordmark em{color:var(--gold);font-style:normal}
.login-tagline{
  font-size:.7rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--muted);margin-bottom:3rem;position:relative;z-index:1;
}

.login-cards{
  display:flex;gap:1.2rem;position:relative;z-index:1;
  flex-wrap:wrap;justify-content:center;
}

.login-card{
  width:180px;padding:1.8rem 1.4rem 1.4rem;
  border-radius:20px;border:1px solid var(--border2);
  background:var(--surface);text-align:center;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.login-card:hover{transform:translateY(-4px)}
.card-a:hover{border-color:var(--gold);box-shadow:0 16px 40px rgba(201,160,82,.15)}
.card-b:hover{border-color:var(--sage);box-shadow:0 16px 40px rgba(126,158,130,.15)}

.lc-avatar{
  width:68px;height:68px;border-radius:50%;
  margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;border:2px solid var(--border2);
}
.card-a .lc-avatar{background:var(--gold-dim)}
.card-a:hover .lc-avatar{border-color:var(--gold)}
.card-b .lc-avatar{background:var(--sage-dim)}
.card-b:hover .lc-avatar{border-color:var(--sage)}

.lc-name{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:700;margin-bottom:.9rem}

.pin-dots{display:flex;gap:.5rem;justify-content:center;margin-bottom:.4rem}
.pd{
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--border2);transition:all .15s;
}
.pd.filled{background:var(--gold);border-color:var(--gold)}
.card-b .pd.filled{background:var(--sage);border-color:var(--sage)}

.pin-error{font-size:.7rem;color:var(--terra);min-height:1rem;margin-bottom:.4rem}

.pin-pad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.6rem;
}
.pin-key{
  padding:.55rem;border-radius:8px;border:1px solid var(--border);
  background:var(--surface2);color:var(--cream);
  font-size:1rem;font-weight:500;transition:background .12s,border-color .12s;
}
.pin-key:hover{background:var(--border);border-color:var(--border2)}
.pin-key.del{font-size:.8rem;color:var(--muted)}
.pin-key.ok{font-size:.9rem}

.remember-row{
  display:flex;align-items:center;gap:.4rem;justify-content:center;
  font-size:.72rem;color:var(--muted);margin-top:.9rem;cursor:pointer;
}
.chk-remember{accent-color:var(--gold);cursor:pointer}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.shake{animation:shake .35s ease}

/* ══════════════════════════════
   APP SHELL
══════════════════════════════ */
.topbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 1.5rem;height:54px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
}
.tb-logo{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:900;letter-spacing:-1px}
.tb-logo em{color:var(--gold);font-style:normal}
.tb-right{display:flex;align-items:center;gap:.9rem}
.tb-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;border:2px solid var(--border2);
}
.av-a{background:var(--gold-dim);border-color:var(--gold)!important}
.av-b{background:var(--sage-dim);border-color:var(--sage)!important}
.tb-username{font-size:.85rem;font-weight:500}
.tb-icon-link{font-size:1.1rem;opacity:.7;transition:opacity .15s}
.tb-icon-link:hover{opacity:1}
.tb-theme-btn{
  font-size:1.15rem;opacity:.7;transition:opacity .15s;
  border:none;background:transparent;padding:0;line-height:1;
}
.tb-theme-btn:hover{opacity:1}

.tb-logout{
  font-size:.72rem;color:var(--muted);
  padding:.3rem .8rem;border:1px solid var(--border);
  border-radius:20px;transition:all .15s;
}
.tb-logout:hover{color:var(--cream);border-color:var(--border2)}

/* NAV */
.nav-tabs{
  background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;padding:0 1.5rem;gap:0;overflow-x:auto;
}
.nav-tab{
  padding:.85rem 1.1rem;font-size:.82rem;font-weight:500;
  color:var(--muted);border:none;background:transparent;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;white-space:nowrap;
}
.nav-tab:hover{color:var(--cream)}
.nav-tab.active{color:var(--cream);border-bottom-color:var(--gold)}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;font-size:.62rem;font-weight:700;
  background:var(--terra);color:#fff;margin-left:.35rem;
}

/* MAIN */
.main-content{max-width:880px;margin:0 auto;padding:1.8rem 1.5rem}

/* STATS */
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.8rem;
}
.stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:1rem 1.1rem;
}
.stat-n{
  font-family:'Fraunces',serif;font-size:2.2rem;font-weight:900;
  line-height:1;margin-bottom:.2rem;
}
.stat-l{font-size:.67rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.s-gold .stat-n{color:var(--gold)}
.s-amber .stat-n{color:var(--amber)}
.s-terra .stat-n{color:var(--terra)}
.s-sage .stat-n{color:var(--sage)}
.s-rose .stat-n{color:var(--rose)}
.stat-btn{cursor:pointer;transition:transform .1s,box-shadow .1s}
.stat-btn:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.stat-btn.active{outline:none;background:var(--surface2)}
.s-gold.stat-btn.active {box-shadow:inset 3px 0 0 var(--gold)}
.s-amber.stat-btn.active{box-shadow:inset 3px 0 0 var(--amber)}
.s-terra.stat-btn.active{box-shadow:inset 3px 0 0 var(--terra)}
.s-sage.stat-btn.active {box-shadow:inset 3px 0 0 var(--sage)}

/* TOOLBAR */
.toolbar{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.8rem;margin-bottom:.8rem;flex-wrap:wrap;
}
.toolbar-cats{margin-bottom:1.4rem}
.filter-group{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.filter-label{font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);white-space:nowrap}
.filters{display:flex;gap:.35rem;flex-wrap:wrap}
.fbtn{
  padding:.36rem .85rem;border-radius:30px;border:1px solid var(--border2);
  background:transparent;color:var(--muted);
  font-size:.76rem;font-weight:500;transition:all .15s;
  position:relative;
}
.fbtn:hover{color:var(--cream);border-color:var(--muted)}
.fbtn.active{background:var(--cream);color:var(--bg);border-color:var(--cream)}

/* Tooltip en botones de filtro */
.fbtn[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 7px);
  left:50%;transform:translateX(-50%);
  background:var(--surface2);
  border:1px solid var(--border2);
  color:var(--cream);
  font-size:.67rem;font-weight:400;
  padding:.3rem .65rem;
  border-radius:7px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s;
  z-index:50;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.fbtn[data-tooltip]:hover::after{opacity:1}

.add-btn{
  background:var(--gold);color:var(--bg);border:none;
  padding:.52rem 1.1rem;border-radius:30px;
  font-size:.82rem;font-weight:600;white-space:nowrap;
  transition:opacity .15s,transform .1s;
}
.add-btn:hover{opacity:.88;transform:translateY(-1px)}
.btn-sage,.add-btn.btn-sage{background:var(--sage)}
.btn-rose,.add-btn.btn-rose{background:var(--rose)}

/* VIEW BAR */
.view-bar{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.view-label{font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);white-space:nowrap}
.view-btns{display:flex;gap:.25rem;flex-wrap:wrap}
.vbtn{
  padding:.32rem .72rem;border-radius:20px;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-size:.75rem;font-weight:500;
  font-family:'Instrument Sans',sans-serif;
  white-space:nowrap;transition:all .15s;
}
.vbtn:hover{color:var(--cream);border-color:var(--muted)}
.vbtn.active{background:var(--surface2);color:var(--cream);border-color:var(--border2)}

/* ACTION BAR */
.action-bar{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;
}
.action-bar .search-bar{flex:1;margin-bottom:0}

/* FILTER TOGGLE */
.filter-toggle{
  display:flex;align-items:center;gap:.35rem;
  padding:.52rem .9rem;border-radius:30px;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-size:.8rem;font-weight:500;
  font-family:'Instrument Sans',sans-serif;
  white-space:nowrap;transition:all .15s;
}
.filter-toggle:hover{color:var(--cream);border-color:var(--muted)}
.filter-toggle.open{color:var(--cream);border-color:var(--muted)}
.filter-toggle.has-active{border-color:var(--gold);color:var(--gold)}
.filter-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--gold);color:var(--bg);
  font-size:.6rem;font-weight:700;
}
.toggle-arrow{font-size:.65rem;transition:transform .22s}
.filter-toggle.open .toggle-arrow{transform:rotate(180deg)}

/* FILTER PANEL */
.filter-panel{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .28s ease,opacity .22s ease,padding .22s ease,margin .22s ease;
  background:var(--surface);border:1px solid transparent;border-radius:14px;
  padding:0 1.1rem;
  display:flex;flex-direction:column;gap:.65rem;
  margin-bottom:0;
}
.filter-panel.open{
  max-height:260px;opacity:1;
  border-color:var(--border);
  padding:1rem 1.1rem;margin-bottom:.85rem;
}
.filter-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* PEOPLE / FOCUS VIEW */
.people-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.people-col-hd{
  display:flex;align-items:center;gap:.5rem;
  margin-bottom:.7rem;padding-bottom:.55rem;
  border-bottom:1px solid var(--border);
  font-size:.9rem;font-weight:600;
}
.people-count{
  margin-left:auto;font-size:.68rem;color:var(--muted);
  background:var(--surface2);padding:.1rem .45rem;border-radius:10px;
}
.focus-list .task-card{padding:1.1rem 1.3rem}
.focus-note{
  text-align:center;font-size:.72rem;color:var(--muted);
  padding:.5rem 0 1rem;
}

/* CATEGORY VIEW */
.cat-section{margin-bottom:1.4rem}
.cat-section-hd{
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.6rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--border);
}
.cat-section-count{font-size:.7rem;color:var(--muted)}

/* ACTIVE CHIPS */
.active-chips{display:flex;gap:.35rem;flex-wrap:wrap;min-height:0}
.active-chips:not(:empty){margin-bottom:.75rem}
.chip{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.22rem .55rem .22rem .65rem;
  border-radius:20px;font-size:.72rem;font-weight:500;
}
.chip-status  {background:var(--amber-dim);border:1px solid var(--amber);color:var(--amber)}
.chip-cat     {background:var(--gold-dim);border:1px solid var(--gold);color:var(--gold)}
.chip-priority{background:var(--terra-dim);border:1px solid var(--terra);color:var(--terra)}
.chip-x{
  border:none;background:none;color:inherit;cursor:pointer;
  font-size:.6rem;opacity:.7;padding:0;line-height:1;
  transition:opacity .12s;
}
.chip-x:hover{opacity:1}

/* SEARCH BAR */
.search-bar{
  display:flex;align-items:center;gap:.4rem;
  background:var(--surface);border:1.5px solid var(--border2);
  border-radius:10px;padding:0 .75rem;
  margin-bottom:1rem;transition:border-color .15s;
}
.search-bar:focus-within{border-color:var(--gold)}
.search-icon{font-size:.85rem;color:var(--muted);flex-shrink:0}
.search-input{
  flex:1;border:none;background:transparent;
  color:var(--cream);font-family:'Instrument Sans',sans-serif;
  font-size:.86rem;padding:.6rem .3rem;outline:none;
}
.search-input::placeholder{color:var(--muted)}
.search-clear{
  display:none;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  border:none;background:var(--border2);
  color:var(--muted);font-size:.65rem;flex-shrink:0;
  transition:background .15s,color .15s;cursor:pointer;
}
.search-clear:hover{background:var(--terra);color:#fff}

/* SECTION LABEL */
.sec-label{
  font-size:.64rem;text-transform:uppercase;letter-spacing:2px;
  color:var(--muted);margin-bottom:.8rem;padding-bottom:.55rem;
  border-bottom:1px solid var(--border);
}

/* ── TASK CARDS ── */
.task-list{display:flex;flex-direction:column;gap:.45rem;margin-bottom:2rem}

.task-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:.95rem 1.1rem;
  display:grid;grid-template-columns:22px 1fr auto;
  gap:.8rem;align-items:start;
  transition:border-color .2s,box-shadow .15s;
}
.task-card:hover{border-color:var(--border2);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.task-card.is-done{opacity:.45}
.task-card.is-done .tc-title{text-decoration:line-through}
.task-card.is-urgent{border-left:3px solid var(--terra)}

.tc-check{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;cursor:pointer;
  flex-shrink:0;margin-top:1px;transition:all .15s;
}
.tc-check:hover{border-color:var(--sage);background:var(--sage-dim)}
.is-done .tc-check{background:var(--sage);border-color:var(--sage);color:var(--bg)}

.tc-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.2rem}
.tc-title{font-size:.9rem;font-weight:500}

/* Category tags */
.tag{
  font-size:.6rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;padding:.13rem .48rem;border-radius:20px;
}
.cat-hogar   {background:#1a2535;color:#6B9BD2}
.cat-compras {background:#2a1f0e;color:#C9A052}
.cat-medico  {background:#2a1015;color:#E88080}
.cat-papeles {background:#1f1a2a;color:#A488D8}
.cat-colegio {background:#1a2318;color:#7EC280}
.cat-otros   {background:#1e1e1e;color:#888}

.prio-alta  {background:rgba(196,97,74,.18);color:var(--terra)}
.prio-media {background:rgba(212,130,74,.18);color:var(--amber)}
.prio-baja  {background:rgba(126,158,130,.18);color:var(--sage)}

/* Categorías en modo claro */
[data-theme="light"] .cat-hogar   {background:#ddeaf8;color:#2a5c8a}
[data-theme="light"] .cat-compras {background:#fdf0d5;color:#7a5510}
[data-theme="light"] .cat-medico  {background:#fde0e0;color:#8a2020}
[data-theme="light"] .cat-papeles {background:#ede0fa;color:#6040a0}
[data-theme="light"] .cat-colegio {background:#dff0e0;color:#2a6a30}
[data-theme="light"] .cat-otros   {background:#ebebeb;color:#555}

.tc-desc{font-size:.78rem;color:var(--muted);margin-bottom:.45rem}
.tc-meta{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}

.tc-deadline{font-size:.72rem;display:flex;align-items:center;gap:.3rem}
.dl-ok{color:var(--sage)}
.dl-soon{color:var(--amber)}
.dl-late{color:var(--terra)}

.tc-assignee{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--muted)}
.mini-av{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.58rem;border:1px solid var(--border2);
}
.mini-a{background:var(--gold-dim)}
.mini-b{background:var(--sage-dim)}

.tc-actions{display:flex;gap:.3rem;flex-shrink:0}
.ic-btn{
  width:30px;height:30px;border-radius:8px;
  border:1px solid var(--border);background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;transition:all .15s;color:var(--muted);
}
.ic-btn:hover{background:var(--surface2);border-color:var(--border2);color:var(--cream)}
.ic-btn.del:hover{border-color:var(--terra);color:var(--terra)}
.ic-btn.ical:hover{border-color:var(--sage);color:var(--sage)}

/* ── REMINDER CARDS ── */
.rem-grid{display:flex;flex-direction:column;gap:.45rem;margin-bottom:2rem}

.rem-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:1rem 1.2rem;
  display:grid;grid-template-columns:46px 1fr auto;
  gap:.9rem;align-items:center;
  transition:border-color .2s;
}
.rem-card:hover{border-color:var(--border2)}
.rem-card.st-overdue{border-left:3px solid var(--terra)}
.rem-card.st-urgent {border-left:3px solid var(--amber)}
.rem-card.st-soon   {border-left:3px solid var(--gold)}
.rem-card.st-ok     {border-left:3px solid var(--sage)}

.rem-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.ic-overdue{background:var(--terra-dim)}
.ic-urgent {background:var(--amber-dim)}
.ic-soon   {background:var(--gold-dim)}
.ic-ok     {background:var(--sage-dim)}

.rem-name{font-size:.92rem;font-weight:500;margin-bottom:.2rem}
.rem-sub{font-size:.75rem;color:var(--muted)}
.rem-sub strong{color:var(--cream);font-weight:500}
.rec-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.63rem;color:var(--muted);
  padding:.12rem .45rem;border-radius:8px;
  border:1px solid var(--border);margin-top:.35rem;
}

.rem-right{text-align:right;flex-shrink:0}
.rem-days{
  font-family:'Fraunces',serif;
  font-size:1.6rem;font-weight:900;line-height:1;
}
.rem-days.overdue{color:var(--terra)}
.rem-days.urgent {color:var(--amber)}
.rem-days.soon   {color:var(--gold)}
.rem-days.ok     {color:var(--sage)}
.rem-days-lbl{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.rem-actions{display:flex;gap:.3rem;justify-content:flex-end;margin-top:.5rem}

/* ── BIRTHDAY CARDS ── */
.bday-grid{display:flex;flex-direction:column;gap:.45rem;margin-bottom:2rem}

.bday-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:1rem 1.2rem;
  display:grid;grid-template-columns:46px 1fr auto;
  gap:.9rem;align-items:center;
  transition:border-color .2s;
}
.bday-card:hover{border-color:var(--border2)}
.bday-card.st-today  {border-left:3px solid var(--rose)}
.bday-card.st-urgent {border-left:3px solid var(--amber)}
.bday-card.st-soon   {border-left:3px solid var(--gold)}
.bday-card.st-ok     {border-left:3px solid var(--sage)}

.bday-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.ic-today  {background:var(--rose-dim)}

.bday-name{font-size:.92rem;font-weight:500}
.bday-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.2rem}
.bday-sub{font-size:.75rem;color:var(--muted)}

.bday-right{text-align:right;flex-shrink:0}
.bday-days{
  font-family:'Fraunces',serif;
  font-size:1.6rem;font-weight:900;line-height:1;
}
.bday-days.today  {color:var(--rose)}
.bday-days.urgent {color:var(--amber)}
.bday-days.soon   {color:var(--gold)}
.bday-days.ok     {color:var(--sage)}
.bday-days-lbl{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.bday-actions{display:flex;gap:.3rem;justify-content:flex-end;margin-top:.5rem}

/* Categorías de cumpleaños */
.bcat-rose  {background:var(--rose-dim);color:var(--rose)}
.bcat-gold  {background:var(--gold-dim);color:var(--gold)}
.bcat-sage  {background:var(--sage-dim);color:var(--sage)}
.bcat-amber {background:var(--amber-dim);color:var(--amber)}
.bcat-blue  {background:#1a2535;color:#6B9BD2}
.bcat-muted {background:#1e1e1e;color:#888}
[data-theme="light"] .bcat-blue  {background:#ddeaf8;color:#2a5c8a}
[data-theme="light"] .bcat-muted {background:#ebebeb;color:#555}

/* ══════════════════════════════
   MODALS
══════════════════════════════ */
.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  z-index:200;align-items:center;justify-content:center;padding:1rem;
}
.overlay.open{display:flex}

.modal{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:20px;padding:1.8rem;
  width:100%;max-width:460px;max-height:90vh;overflow-y:auto;
  animation:popIn .22s ease;
}
@keyframes popIn{
  from{transform:scale(.97) translateY(10px);opacity:0}
  to  {transform:scale(1) translateY(0);opacity:1}
}
.modal-h{
  font-family:'Fraunces',serif;font-size:1.35rem;font-weight:700;
  margin-bottom:1.4rem;
}

.fg{margin-bottom:.95rem}
.fg-row{display:flex;gap:.8rem;margin-bottom:.95rem}
.fg-row .fg{margin-bottom:0}
.fl{
  display:block;font-size:.68rem;text-transform:uppercase;
  letter-spacing:1px;color:var(--muted);margin-bottom:.38rem;
}
.fi,.fs,.fta{
  width:100%;padding:.62rem .9rem;border-radius:10px;
  border:1.5px solid var(--border2);background:var(--surface2);
  color:var(--cream);font-family:'Instrument Sans',sans-serif;
  font-size:.88rem;outline:none;transition:border-color .15s;
}
.fi:focus,.fs:focus,.fta:focus{border-color:var(--gold)}
.fta{resize:vertical;min-height:72px}
.fs option{background:var(--surface2)}

.assign-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.assign-opt{
  padding:.62rem;border-radius:10px;border:1.5px solid var(--border2);
  background:var(--surface2);cursor:pointer;text-align:center;
  font-size:.84rem;font-weight:500;transition:all .15s;
}
.assign-opt span{display:block;font-size:1.2rem;margin-bottom:.2rem}
.assign-opt.sel-a{border-color:var(--gold);background:var(--gold-dim)}
.assign-opt.sel-b{border-color:var(--sage);background:var(--sage-dim)}

.notify-row{display:flex;align-items:center;gap:.6rem}
.notify-lbl{font-size:.8rem;color:var(--muted);white-space:nowrap}

.mfooter{display:flex;gap:.6rem;margin-top:1.4rem}
.btn-cancel{
  flex:1;padding:.68rem;border-radius:10px;
  border:1px solid var(--border2);background:transparent;
  color:var(--cream);font-size:.88rem;transition:all .15s;
}
.btn-cancel:hover{border-color:var(--cream)}
.btn-save{
  flex:2;padding:.68rem;border-radius:10px;
  border:none;background:var(--gold);color:var(--bg);
  font-size:.88rem;font-weight:600;transition:opacity .15s;
}
.btn-save:hover{opacity:.85}
.btn-save.btn-sage{background:var(--sage)}

/* ══════════════════════════════
   PROYECTOS
══════════════════════════════ */
.proj-topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;margin-bottom:1.4rem;flex-wrap:wrap;
}
.proj-tabs{
  display:flex;gap:.25rem;background:var(--surface);
  border:1px solid var(--border);border-radius:30px;padding:.3rem;
}
.proj-tab{
  padding:.38rem .95rem;border-radius:20px;border:none;
  background:transparent;color:var(--muted);
  font-size:.8rem;font-weight:500;font-family:'Instrument Sans',sans-serif;
  transition:all .15s;cursor:pointer;
}
.proj-tab:hover{color:var(--cream)}
.proj-tab.active{background:var(--gold);color:var(--bg)}
.proj-topbar-btns{display:flex;gap:.5rem}

/* Grid de tarjetas */
.proj-grid{display:flex;flex-direction:column;gap:.7rem}

.proj-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:1.1rem 1.2rem;
  cursor:pointer;transition:border-color .18s,box-shadow .15s;
}
.proj-card:hover{border-color:var(--gold);box-shadow:0 4px 20px rgba(0,0,0,.25)}

.proj-card-top{display:flex;align-items:flex-start;gap:.85rem}
.proj-card-icon{font-size:1.6rem;line-height:1;flex-shrink:0;margin-top:.1rem}
.proj-card-info{flex:1;min-width:0}
.proj-card-name{font-size:.95rem;font-weight:600;margin-bottom:.15rem}
.proj-card-desc{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-card-actions{display:flex;gap:.25rem;flex-shrink:0}

.proj-tpl-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.65rem;color:var(--muted);
  border:1px solid var(--border);border-radius:8px;
  padding:.1rem .45rem;margin-top:.35rem;
}

.proj-card-progress{
  margin-top:.85rem;display:flex;align-items:center;gap:.75rem;
}
.proj-progress-wrap{display:flex;align-items:center;gap:.75rem;margin:.6rem 0 1rem}
.proj-progress-bar{
  flex:1;height:5px;background:var(--border2);
  border-radius:3px;overflow:hidden;
}
.proj-progress-fill{height:100%;background:var(--sage);border-radius:3px;transition:width .3s}
.proj-progress-label{font-size:.7rem;color:var(--muted);white-space:nowrap}

/* Detalle de proyecto */
.proj-detail-header{
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:.6rem;flex-wrap:wrap;
}
.proj-back-btn{
  padding:.38rem .8rem;border-radius:20px;border:1px solid var(--border2);
  background:transparent;color:var(--muted);font-size:.8rem;
  font-family:'Instrument Sans',sans-serif;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.proj-back-btn:hover{color:var(--cream);border-color:var(--cream)}
.proj-detail-title{
  display:flex;align-items:center;gap:.5rem;
  font-family:'Fraunces',serif;font-size:1.35rem;font-weight:700;flex:1;
}
.proj-detail-actions{display:flex;gap:.3rem;margin-left:auto}
.proj-detail-desc{font-size:.82rem;color:var(--muted);margin-bottom:.5rem}
.proj-detail-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:.9rem;flex-wrap:wrap;
}
.proj-task-filters{display:flex;gap:.25rem}

/* Origen de proyecto */
.proj-origin-hint{font-size:.85rem;color:var(--muted);margin-bottom:1.1rem}
.proj-origin-opts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.5rem}
.proj-origin-card{
  padding:1.2rem 1rem;border-radius:14px;
  border:1.5px solid var(--border2);background:var(--surface2);
  cursor:pointer;text-align:center;transition:all .18s;
}
.proj-origin-card:hover{border-color:var(--gold);background:var(--gold-dim)}
.proj-origin-icon{font-size:1.8rem;margin-bottom:.45rem}
.proj-origin-label{font-size:.9rem;font-weight:600;margin-bottom:.2rem}
.proj-origin-sub{font-size:.73rem;color:var(--muted)}

/* Elegir plantilla */
.pick-tpl-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem;max-height:320px;overflow-y:auto}
.pick-tpl-item{
  display:flex;align-items:center;gap:.8rem;
  padding:.85rem 1rem;border-radius:12px;
  border:1.5px solid var(--border2);background:var(--surface2);
  cursor:pointer;transition:all .15s;
}
.pick-tpl-item:hover{border-color:var(--gold);background:var(--gold-dim)}
.pick-tpl-icon{font-size:1.5rem;flex-shrink:0}
.pick-tpl-name{font-size:.9rem;font-weight:600}
.pick-tpl-sub{font-size:.73rem;color:var(--muted)}

/* Modal wide para plantillas */
.modal-wide{max-width:580px}

/* Grid plantillas */
.proj-tpl-grid{display:flex;flex-direction:column;gap:.7rem}
.proj-tpl-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.8rem;margin-bottom:1rem;flex-wrap:wrap;
}
.proj-tpl-hint{font-size:.8rem;color:var(--muted);max-width:400px}

.proj-tpl-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:1rem 1.2rem;
}
.proj-tpl-card-top{display:flex;align-items:flex-start;gap:.85rem}

.tpl-task-preview{
  display:flex;flex-wrap:wrap;gap:.35rem;
  margin-top:.75rem;padding-top:.65rem;
  border-top:1px solid var(--border);
}
.tpl-task-chip{
  font-size:.67rem;padding:.18rem .5rem;border-radius:20px;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--muted);
}
.tpl-chip-more{color:var(--gold);border-color:var(--gold-dim)}

/* Editor de tareas de plantilla */
.tpl-tasks-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.6rem}
.tpl-task-row{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:10px;padding:.7rem .85rem;
}
.tpl-task-row-top{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.tpl-task-row-top .fi{flex:1}
.tpl-task-row-meta{display:flex;gap:.5rem;flex-wrap:wrap}
.tpl-task-row-meta .fs{flex:1;min-width:120px;font-size:.8rem;padding:.46rem .7rem}
.tpl-task-remove{width:26px;height:26px;flex-shrink:0;font-size:.7rem}
.tpl-add-task-btn{
  width:100%;padding:.52rem;border-radius:10px;
  border:1.5px dashed var(--border2);background:transparent;
  color:var(--muted);font-size:.82rem;font-family:'Instrument Sans',sans-serif;
  cursor:pointer;transition:all .15s;
}
.tpl-add-task-btn:hover{border-color:var(--gold);color:var(--gold)}

/* ══════════════════════════════
   SETTINGS
══════════════════════════════ */
.settings-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:1.4rem;margin-bottom:1.2rem;
}
.settings-card-title{
  font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;
  margin-bottom:1rem;
}
.alert{
  padding:.75rem 1rem;border-radius:10px;
  font-size:.85rem;margin-bottom:1.2rem;
}
.alert-ok{background:var(--sage-dim);border:1px solid var(--sage);color:var(--sage)}
.alert-err{background:var(--terra-dim);border:1px solid var(--terra);color:var(--terra)}

/* ══════════════════════════════
   TOAST
══════════════════════════════ */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;
  background:var(--surface2);color:var(--cream);
  border:1px solid var(--border2);border-left:3px solid var(--sage);
  padding:.75rem 1.1rem;border-radius:12px;
  font-size:.82rem;z-index:300;
  opacity:0;transform:translateY(8px);
  transition:all .3s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0)}

/* ══════════════════════════════
   EMPTY STATE
══════════════════════════════ */
.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty-i{font-size:2.5rem;margin-bottom:.8rem}
.empty-t{font-family:'Fraunces',serif;font-size:1rem;font-style:italic}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:640px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .people-cols{grid-template-columns:1fr}
  .topbar,.main-content,.nav-tabs{padding-left:1rem;padding-right:1rem}
  .tb-username{display:none}
  .fg-row{flex-direction:column;gap:.95rem}
  .rem-card{grid-template-columns:40px 1fr;gap:.6rem}
  .rem-right{display:none}
  .bday-card{grid-template-columns:40px 1fr;gap:.6rem}
  .bday-right{display:none}
  .task-card{grid-template-columns:20px 1fr auto}
}
@media(max-width:400px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .login-wordmark{font-size:2.8rem}
}

/* ══════════════════════════════════════
   COCHES
══════════════════════════════════════ */

/* Dos colores extra que no tiene la paleta base */
:root{
  --steel:      #6E90B8;
  --steel-dim:  rgba(110,144,184,.15);
  --violet:     #9878C8;
  --violet-dim: rgba(152,120,200,.15);
}
[data-theme="light"]{
  --steel:      #3060A0;
  --steel-dim:  rgba(48,96,160,.13);
  --violet:     #5838A0;
  --violet-dim: rgba(88,56,160,.13);
}

/* ── Selector de coche ── */
.car-selector{
  display:flex;gap:.6rem;margin-bottom:1.6rem;flex-wrap:wrap;align-items:stretch;
}
.car-tab-btn{
  display:flex;align-items:center;gap:.6rem;
  padding:.65rem 1rem;border-radius:14px;
  border:1px solid var(--border2);background:var(--surface);
  color:var(--muted);font-family:'Instrument Sans',sans-serif;
  text-align:left;transition:all .18s;cursor:pointer;
}
.car-tab-btn:hover{border-color:var(--gold);color:var(--cream)}
.car-tab-btn.active{
  background:var(--gold-dim);border-color:var(--gold);color:var(--cream);
}
.car-tab-icon{font-size:1.5rem;line-height:1;flex-shrink:0}
.car-tab-name{font-size:.88rem;font-weight:600;line-height:1.2}
.car-tab-sub{font-size:.68rem;color:var(--muted);margin-top:.1rem}
.car-tab-btn.active .car-tab-sub{color:var(--gold)}
.car-tab-edit{
  margin-left:.2rem;opacity:0;transition:opacity .15s;flex-shrink:0;
}
.car-tab-btn:hover .car-tab-edit{opacity:1}
.car-tab-add{
  color:var(--muted);font-size:.82rem;font-weight:500;
  border-style:dashed;
}
.car-tab-add:hover{border-color:var(--gold);color:var(--gold)}

/* ── Barras de filtro ── */
.car-cat-bar,.car-year-bar{
  display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.55rem;
}
.car-year-bar{margin-bottom:1.3rem}

.cbtn,.ybtn{
  padding:.3rem .75rem;border-radius:20px;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-family:'Instrument Sans',sans-serif;
  font-size:.72rem;font-weight:500;cursor:pointer;transition:all .14s;
}
.cbtn:hover,.ybtn:hover{color:var(--cream);border-color:var(--muted)}
.cbtn.active,.ybtn.active{background:var(--cream);color:var(--bg);border-color:var(--cream)}

/* ── Grupo por año ── */
.car-year-group{margin-bottom:.5rem}
.car-year-header{
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:.65rem;margin-top:1.6rem;
}
.car-year-group:first-child .car-year-header{margin-top:0}
.cyh-year{
  font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;
  color:var(--cream);white-space:nowrap;
}
.cyh-line{flex:1;height:1px;background:var(--border)}
.cyh-meta{font-size:.68rem;color:var(--muted);white-space:nowrap}

/* ── Tarjeta de servicio ── */
.car-service-list{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.5rem}

.car-service-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
  transition:border-color .18s,box-shadow .15s;
}
.car-service-card:hover{border-color:var(--border2);box-shadow:0 4px 18px rgba(0,0,0,.22)}
.car-marcador{opacity:.65;border-style:dashed}
.car-marcador:hover{opacity:1}

.csc-main{
  display:grid;grid-template-columns:36px 1fr auto;
  gap:.75rem;padding:.85rem 1rem;align-items:start;
}
.csc-cat-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;flex-shrink:0;
}
.csc-body{min-width:0}
.csc-title{font-size:.88rem;font-weight:500;margin-bottom:.28rem;line-height:1.3}
.csc-meta{
  display:flex;flex-wrap:wrap;gap:.5rem .8rem;
  font-size:.7rem;color:var(--muted);margin-bottom:.2rem;
}
.csc-kms{font-weight:600;color:var(--cream)}
.csc-amount-row{margin-top:.15rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.csc-amount{font-size:.78rem;font-weight:600;color:var(--cream)}
.car-amount-free{color:var(--sage)}
.car-amount-big{color:var(--terra)}

.csc-actions{display:flex;flex-direction:column;gap:.25rem;align-items:flex-end;flex-shrink:0}
.car-comm-toggle{
  padding:.22rem .55rem;border-radius:20px;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-size:.68rem;cursor:pointer;
  transition:all .14s;white-space:nowrap;
}
.car-comm-toggle:hover{border-color:var(--gold);color:var(--gold)}
.car-comm-empty{opacity:.45}

/* ── Sección de comentarios ── */
.car-comments{
  border-top:1px solid var(--border);
  padding:.75rem 1rem .75rem calc(36px + .75rem + 1rem);
  display:flex;flex-direction:column;gap:.4rem;
}
.csc-comment-item{
  position:relative;
  background:var(--surface2);border-radius:8px;
  padding:.4rem .65rem .4rem .55rem;
  font-size:.75rem;color:var(--muted);line-height:1.5;
}
.csc-comment-text{white-space:pre-wrap;word-break:break-word}
.csc-comment-date{font-size:.62rem;color:var(--muted);opacity:.55;margin-top:.2rem}
.csc-comment-del{
  position:absolute;top:.35rem;right:.35rem;
  border:none;background:none;color:var(--muted);
  font-size:.6rem;cursor:pointer;opacity:0;
  transition:opacity .13s;line-height:1;padding:.15rem;
}
.csc-comment-item:hover .csc-comment-del{opacity:.7}
.csc-comment-del:hover{opacity:1!important;color:var(--terra)}

.csc-add-comment{
  display:flex;gap:.4rem;margin-top:.25rem;align-items:flex-end;
}
.csc-comment-input{
  flex:1;border:1px solid var(--border2);border-radius:8px;
  background:var(--bg);color:var(--cream);
  font-family:'Instrument Sans',sans-serif;font-size:.75rem;
  padding:.4rem .6rem;outline:none;resize:vertical;
  min-height:34px;transition:border-color .15s;
}
.csc-comment-input:focus{border-color:var(--gold)}
.csc-comment-send{
  padding:.35rem .8rem;border-radius:8px;border:none;
  background:var(--gold);color:var(--bg);
  font-family:'Instrument Sans',sans-serif;font-size:.75rem;font-weight:600;
  cursor:pointer;flex-shrink:0;transition:opacity .15s;
}
.csc-comment-send:hover{opacity:.85}

/* ── Colores de categoría (icono) ── */
.ccat-revision   {background:var(--sage-dim);  color:var(--sage)}
.ccat-frenos     {background:var(--terra-dim); color:var(--terra)}
.ccat-neumaticos {background:var(--amber-dim); color:var(--amber)}
.ccat-bateria    {background:var(--gold-dim);  color:var(--gold)}
.ccat-chapa      {background:var(--steel-dim); color:var(--steel)}
.ccat-cristal    {background:var(--rose-dim);  color:var(--rose)}
.ccat-motor      {background:var(--violet-dim);color:var(--violet)}
.ccat-electrica  {background:var(--gold-dim);  color:var(--gold)}
.ccat-marcador   {background:rgba(107,101,96,.1);color:var(--muted)}
.ccat-otros      {background:var(--surface2);  color:var(--muted)}

/* ── Responsive ── */
@media(max-width:600px){
  .car-tab-btn{padding:.55rem .8rem}
  .car-comments{padding:.65rem .85rem .65rem calc(36px + .55rem + .85rem)}
  .csc-main{grid-template-columns:32px 1fr auto;gap:.55rem;padding:.75rem .85rem}
  .csc-cat-icon{width:32px;height:32px;font-size:.9rem}
}

/* ── Toggle Historial / Visitas ── */
.car-view-toggle{
  display:flex;gap:.25rem;background:var(--surface);
  border:1px solid var(--border);border-radius:30px;
  padding:.3rem;margin-bottom:1.2rem;width:fit-content;
}
.cvt-btn{
  padding:.38rem 1rem;border-radius:20px;border:none;
  background:transparent;color:var(--muted);
  font-family:'Instrument Sans',sans-serif;font-size:.82rem;font-weight:500;
  cursor:pointer;transition:all .16s;
}
.cvt-btn.active{background:var(--gold);color:var(--bg);font-weight:600}
.cvt-btn:not(.active):hover{color:var(--cream)}

/* ── Tarjeta de visita ── */
.cv-list{display:flex;flex-direction:column;gap:.6rem}
.cv-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
  transition:border-color .18s,box-shadow .15s;
}
.cv-card:hover{border-color:var(--border2);box-shadow:0 4px 18px rgba(0,0,0,.22)}
.cv-card-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.75rem;padding:.9rem 1rem .65rem;
}
.cv-card-left{min-width:0;flex:1}
.cv-workshop{
  font-size:.92rem;font-weight:600;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.25rem;
}
.cv-meta{
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;
  font-size:.7rem;color:var(--muted);
}
.cv-total{font-weight:600;color:var(--gold)}
.cv-card-actions{display:flex;gap:.25rem;flex-shrink:0}

/* ── Servicios dentro de la visita ── */
.cv-services{
  border-top:1px solid var(--border);
  padding:.55rem 1rem .7rem;
}
.cv-svc-label{
  font-size:.62rem;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);margin-bottom:.4rem;
}
.cv-svc-list{display:flex;flex-direction:column;gap:.2rem}
.cv-svc-item{
  display:flex;align-items:center;gap:.5rem;
  font-size:.78rem;color:var(--muted);line-height:1.3;
  padding:.15rem 0;
}
.cv-svc-icon{
  width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;flex-shrink:0;
}
.cv-svc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-svc-amount{font-weight:600;color:var(--cream);flex-shrink:0;font-size:.74rem}

/* ── PDF en visita ── */
.cv-pdf-bar{
  border-top:1px solid var(--border);
  padding:.5rem 1rem;
  display:flex;align-items:center;gap:.6rem;
}
.cv-pdf-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .75rem;border-radius:20px;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-size:.72rem;cursor:pointer;
  text-decoration:none;transition:all .14s;font-family:'Instrument Sans',sans-serif;
}
.cv-pdf-btn:hover{border-color:var(--gold);color:var(--gold)}
.cv-pdf-del{
  border:none;background:none;color:var(--muted);font-size:.68rem;
  cursor:pointer;padding:.2rem .4rem;border-radius:6px;transition:color .13s;
}
.cv-pdf-del:hover{color:var(--terra)}

/* ── Selector de servicios en modal ── */
.cv-svc-picker{
  max-height:180px;overflow-y:auto;
  border:1.5px solid var(--border2);border-radius:10px;
  background:var(--surface2);
}
.cv-svc-empty{padding:.65rem .9rem;font-size:.8rem;color:var(--muted);font-style:italic}
.cv-svc-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .9rem;cursor:pointer;transition:background .12s;
  border-bottom:1px solid var(--border);
}
.cv-svc-row:last-child{border-bottom:none}
.cv-svc-row:hover{background:var(--surface)}
.cv-svc-row input[type=checkbox]{
  width:15px;height:15px;accent-color:var(--gold);flex-shrink:0;cursor:pointer;
}
.cv-svc-row-icon{
  width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;flex-shrink:0;
}
.cv-svc-row-body{flex:1;min-width:0}
.cv-svc-row-name{font-size:.8rem;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-svc-row-meta{font-size:.67rem;color:var(--muted)}

/* ── File picker en modal ── */
.cv-file-label{display:block;cursor:pointer}
.cv-file-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:10px;
  border:1.5px dashed var(--border2);background:var(--surface2);
  color:var(--muted);font-size:.82rem;font-family:'Instrument Sans',sans-serif;
  transition:all .14s;
}
.cv-file-label:hover .cv-file-btn{border-color:var(--gold);color:var(--gold)}
.cv-pdf-selected{font-size:.78rem;color:var(--sage);margin-top:.4rem}
.cv-pdf-current{
  display:flex;align-items:center;gap:.5rem;
  padding:.4rem .75rem;border-radius:8px;background:var(--surface2);
  border:1px solid var(--border2);margin-bottom:.5rem;font-size:.78rem;
}
.cv-pdf-current a{color:var(--gold);text-decoration:none}
.cv-pdf-current a:hover{text-decoration:underline}

/* ── Badge "en visita" en tarjetas de servicio ── */
.csc-visit-badge{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.15rem .45rem;border-radius:20px;
  background:var(--sage-dim);border:1px solid var(--sage);
  color:var(--sage);font-size:.62rem;font-weight:500;cursor:default;
}

/* ══════════════════════════════════════
   INVENTARIO
══════════════════════════════════════ */

/* ── Barra de espacios ── */
.inv-space-bar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.inv-sbtn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--cream);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  position: relative;
}
.inv-sbtn:hover { border-color: var(--sage); background: var(--sage-dim); }
.inv-sbtn.active { border-color: var(--sage); background: var(--sage-dim); color: var(--sage); font-weight: 600; }

.inv-sbtn-icon  { font-size: 1rem; }
.inv-sbtn-name  { }
.inv-sbtn-count {
  background: var(--border);
  color: var(--muted);
  font-size: .72rem;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}
.inv-sbtn.active .inv-sbtn-count { background: var(--sage-dim); color: var(--sage); }

.inv-sbtn-edit {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .75rem;
  opacity: 0;
  padding: 0;
  transition: opacity .15s;
}
.inv-sbtn:hover .inv-sbtn-edit { opacity: .7; }

.inv-sbtn-add {
  border-style: dashed;
  color: var(--muted);
}
.inv-sbtn-add:hover { color: var(--sage); border-color: var(--sage); background: var(--sage-dim); }

/* ── Vacío ── */
.inv-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}
.inv-empty-inner {
  padding: .6rem 1rem;
  color: var(--muted);
  font-size: .82rem;
}
.inv-link-btn {
  background: none;
  border: none;
  color: var(--sage);
  cursor: pointer;
  font-size: .82rem;
  padding: 0;
  text-decoration: underline;
}

/* ── Contenedor raíz ── */
.inv-cont-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  margin-bottom: .75rem;
  overflow: hidden;
}

.inv-cont-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.inv-cont-header:hover { background: var(--surface2); }

.inv-cont-icon { font-size: 1.2rem; flex-shrink: 0; }
.inv-cont-name { font-weight: 600; font-size: .95rem; color: var(--cream); flex: 1; }
.inv-cont-count {
  font-size: .78rem;
  color: var(--muted);
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.inv-cont-actions {
  display: flex;
  gap: .2rem;
  opacity: 0;
  transition: opacity .15s;
}
.inv-cont-header:hover .inv-cont-actions { opacity: 1; }

.inv-act-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 7px;
  font-size: .78rem;
  cursor: pointer;
  color: var(--muted);
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.inv-act-btn:hover { border-color: var(--sage); color: var(--sage); background: var(--sage-dim); }
.inv-act-del:hover { border-color: var(--terra); color: var(--terra); background: var(--terra-dim); }

.inv-cont-chevron {
  font-size: .75rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .2s;
}

.inv-cont-body { padding: 0 .75rem .75rem; }
.inv-cont-body.collapsed { display: none; }

/* ── Sub-contenedor ── */
.inv-subcont-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: .5rem;
  overflow: hidden;
}

.inv-subcont-header {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.inv-subcont-header:hover { background: var(--border); }
.inv-subcont-header:hover .inv-cont-actions { opacity: 1; }

/* ── Ítem ── */
.inv-item-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .5rem;
  border-radius: 8px;
  transition: background .15s;
}
.inv-item-row:hover { background: var(--border); }
.inv-item-row:hover .inv-item-actions { opacity: 1; }

.inv-item-cat {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.inv-item-name { flex: 1; font-size: .88rem; color: var(--cream); }
.inv-item-qty {
  font-size: .78rem;
  color: var(--amber);
  font-weight: 600;
  background: var(--amber-dim);
  padding: 2px 7px;
  border-radius: 10px;
}
.inv-item-notes { font-size: .85rem; cursor: default; opacity: .7; }

.inv-item-actions {
  display: flex;
  gap: .15rem;
  opacity: 0;
  transition: opacity .15s;
}

/* ── Categorías ── */
.icat-cama         { background: var(--sage-dim);   color: var(--sage)   }
.icat-abrigo       { background: var(--steel-dim);  color: var(--steel)  }
.icat-verano       { background: var(--amber-dim);  color: var(--amber)  }
.icat-interior     { background: var(--rose-dim);   color: var(--rose)   }
.icat-bano         { background: var(--sage-dim);   color: var(--sage)   }
.icat-deco         { background: var(--violet-dim); color: var(--violet) }
.icat-herramientas { background: var(--terra-dim);  color: var(--terra)  }
.icat-documentos   { background: var(--gold-dim);   color: var(--gold)   }
.icat-juguetes     { background: var(--amber-dim);  color: var(--amber)  }
.icat-electronica  { background: var(--steel-dim);  color: var(--steel)  }
.icat-otros        { background: var(--surface2);   color: var(--muted)  }

/* ── Búsqueda global ── */
.inv-search-header {
  font-size: .82rem;
  color: var(--muted);
  padding: .4rem 0 .6rem;
  font-weight: 500;
}

.inv-search-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: .4rem;
  transition: background .15s;
}
.inv-search-row:hover { background: var(--surface2); }
.inv-search-row:hover .inv-item-actions { opacity: 1; }

.inv-search-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.inv-search-name { font-size: .9rem; color: var(--cream); font-weight: 500; }
.inv-search-path { font-size: .75rem; color: var(--muted); }
.inv-search-notes { font-size: .75rem; color: var(--muted); font-style: italic; }

/* ── Modal ítem — etiqueta de ubicación ── */
.inv-item-location {
  font-size: .8rem;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 8px;
  padding: .4rem .7rem;
  margin-bottom: .75rem;
}

/* ── Responsive ── */
@media(max-width:600px) {
  .inv-space-bar { gap: .35rem; }
  .inv-sbtn { padding: .4rem .7rem; font-size: .8rem; }
  .inv-cont-header { padding: .65rem .75rem; }
  .inv-cont-actions { opacity: 1; }
  .inv-item-actions { opacity: 1; }
}


/* ══════════════════════════════════════
   VIAJES
══════════════════════════════════════ */

/* ── Sub-header de navegación ── */
.trip-subhdr {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.2rem;
}
.trip-back {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 20px;
  padding: .35rem .9rem;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.trip-back:hover { border-color: var(--cream); color: var(--cream); }
.trip-subhdr-title {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  color: var(--cream);
}
.trips-section-title {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  color: var(--cream);
  margin: 0;
}

/* ── Tarjetas de viaje ── */
.trip-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: .65rem;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.trip-card:hover { border-color: var(--gold); background: var(--surface2); }

.trip-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .55rem;
}
.trip-card-destino {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cream);
}
.trip-card-sub {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 2px;
}

.trip-estado-badge {
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.test-borrador   { background: var(--surface2);   color: var(--muted); border: 1px solid var(--border); }
.test-lista      { background: var(--sage-dim);   color: var(--sage);  border: 1px solid var(--sage); }
.test-completado { background: var(--gold-dim);   color: var(--gold);  border: 1px solid var(--gold); }

.trip-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .55rem;
}
.trip-tipo-pill {
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.trip-pill-trans { color: var(--amber); border-color: var(--amber-dim); background: var(--amber-dim); }

.trip-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trip-card-viaj { font-size: .8rem; color: var(--muted); }
.trip-card-actions { display: flex; gap: .25rem; }

/* ── Formulario ── */
.trip-derived {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .9rem;
  margin-bottom: .95rem;
  font-size: .85rem;
  color: var(--sage);
  display: flex;
  gap: .6rem;
  align-items: center;
}
.trip-derived-sep { color: var(--border2); }

.trip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.trip-chip {
  padding: .4rem .85rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.trip-chip:hover { border-color: var(--cream); color: var(--cream); }
.trip-chip.active {
  border-color: var(--sage);
  background: var(--sage-dim);
  color: var(--sage);
  font-weight: 600;
}

.trip-viajeros-list { display: flex; flex-direction: column; gap: .3rem; }
.trip-viajero-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: background .12s;
}
.trip-viajero-row:hover { background: var(--surface2); }
.trip-viajero-name { flex: 1; font-size: .88rem; color: var(--cream); }
.trip-viajero-rol  { font-size: .85rem; }
.trip-viajero-edad { font-size: .75rem; color: var(--muted); }
.trol-nino   { }
.trol-adulto { }

/* ── Pack list: barra de progreso ── */
.trip-progress-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}
.trip-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.trip-progress-fill {
  height: 100%;
  background: var(--sage);
  border-radius: 3px;
  transition: width .3s ease;
}
.trip-progress-txt { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.trip-view-toggle  { display: flex; gap: .3rem; }

.trip-pack-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  flex-wrap: wrap;
}
.trip-pack-destino {
  font-weight: 700;
  font-size: .95rem;
  color: var(--cream);
}
.trip-pack-dates { font-size: .78rem; color: var(--muted); }

/* ── Grupos ── */
.trip-group { margin-bottom: .9rem; }
.trip-group-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .5rem;
  margin-bottom: .3rem;
}
.trip-group-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.trip-group-name  { font-weight: 600; font-size: .88rem; color: var(--cream); flex: 1; }
.trip-group-count { font-size: .75rem; color: var(--muted); }

/* ── Items de la lista ── */
.trip-item-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .5rem;
  border-radius: 8px;
  transition: background .12s;
}
.trip-item-row:hover { background: var(--surface2); }
.trip-item-row:hover .trip-item-del { opacity: 1; }

.trip-item-chk { flex-shrink: 0; accent-color: var(--sage); width: 16px; height: 16px; cursor: pointer; }
.trip-item-cat-icon {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0;
}
.trip-item-label {
  flex: 1;
  font-size: .87rem;
  color: var(--cream);
  transition: color .15s, text-decoration .15s;
}
.trip-item-done .trip-item-label { color: var(--muted); text-decoration: line-through; }

.trip-item-hist   { font-size: .75rem; cursor: default; }
.trip-item-manual {
  font-size: .68rem;
  color: var(--amber);
  background: var(--amber-dim);
  border-radius: 8px;
  padding: 1px 6px;
}
.trip-item-del {
  opacity: 0;
  transition: opacity .15s;
}

/* ── Pie de la lista ── */
.trip-pack-footer {
  display: flex;
  gap: .6rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ── Cierre ── */
.trip-close-hint {
  font-size: .85rem;
  color: var(--muted);
  margin: 0 0 .8rem;
}
.trip-close-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .5rem;
  border-radius: 8px;
  cursor: pointer;
}
.trip-close-row:hover { background: var(--surface2); }
.trip-close-label { flex: 1; font-size: .87rem; color: var(--cream); }
.trip-close-hint2 { font-size: .72rem; color: var(--muted); }

/* ── Reglas ── */
.trip-rule-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: .3rem;
  transition: background .12s;
}
.trip-rule-inactive { opacity: .45; }
.trip-rule-main { flex: 1; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.trip-rule-label { font-size: .87rem; color: var(--cream); }
.trip-rule-hist {
  font-size: .68rem; color: var(--violet); background: var(--violet-dim);
  border-radius: 8px; padding: 1px 6px;
}
.trip-rule-unused {
  font-size: .68rem; color: var(--amber); background: var(--amber-dim);
  border-radius: 8px; padding: 1px 6px;
}
.trip-rule-meta { display: flex; gap: .4rem; align-items: center; }
.trip-rule-cond {
  font-size: .72rem; color: var(--muted); background: var(--surface2);
  border-radius: 8px; padding: 2px 7px; white-space: nowrap;
}
.trip-rule-pp {
  font-size: .72rem; color: var(--muted); white-space: nowrap;
}
.trip-rule-motivo { font-size: .82rem; cursor: default; }
.trip-rule-actions { display: flex; gap: .25rem; align-items: center; }

/* ── Colores de categoría ── */
.tcat-ropa    { background: var(--sage-dim);   color: var(--sage)   }
.tcat-higiene { background: var(--rose-dim);   color: var(--rose)   }
.tcat-docs    { background: var(--gold-dim);   color: var(--gold)   }
.tcat-electro { background: var(--steel-dim);  color: var(--steel)  }
.tcat-ninos   { background: var(--amber-dim);  color: var(--amber)  }
.tcat-varios  { background: var(--surface2);   color: var(--muted)  }

/* ── Responsive ── */
@media(max-width:600px) {
  .trip-progress-row { flex-wrap: wrap; }
  .trip-view-toggle  { width: 100%; }
  .trip-pack-footer  { flex-direction: column; }
  .trip-rule-meta    { display: none; }
}


/* ══════════════════════════════════════
   DASHBOARD
══════════════════════════════════════ */

/* ── Cabecera ── */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}
.dash-greeting {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  color: var(--cream);
  font-weight: 700;
}
.dash-date {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 2px;
  text-transform: capitalize;
}
.dash-refresh {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .15s, color .15s, transform .3s;
  flex-shrink: 0;
}
.dash-refresh:hover { border-color: var(--cream); color: var(--cream); transform: rotate(180deg); }

/* ── Secciones ── */
.dash-section { margin-bottom: 1.5rem; }

.dash-section-hdr {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.dash-hdr-urgente { color: var(--terra); }

/* ── Todo en orden ── */
.dash-allgood {
  padding: .9rem 1.1rem;
  border-radius: 12px;
  background: var(--sage-dim);
  border: 1px solid var(--sage);
  color: var(--sage);
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/* ── Cards ── */
.dash-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
  cursor: default;
}
.dash-card-terra { border-color: var(--terra);  background: var(--terra-dim); }
.dash-card-amber { border-color: var(--amber);  background: var(--amber-dim); }
.dash-card-rose  { border-color: var(--rose);   background: var(--rose-dim);  }
.dash-card-viaje { cursor: pointer; transition: border-color .15s, background .15s; }
.dash-card-viaje:hover { border-color: var(--gold); background: var(--gold-dim); }

.dash-card-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .55rem;
}
.dash-card-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.dash-card-row-sb { justify-content: space-between; }
.dash-card-icon { font-size: 1.2rem; flex-shrink: 0; }
.dash-card-body { flex: 1; }
.dash-card-title { font-size: .95rem; font-weight: 600; color: var(--cream); }
.dash-card-sub   { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ── Items dentro de una card ── */
.dash-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .32rem 0;
  border-top: 1px solid rgba(255,255,255,.04);
}
.dash-item:first-of-type { border-top: none; margin-top: .35rem; }
.dash-item-icon { font-size: .9rem; flex-shrink: 0; width: 20px; text-align: center; }
.dash-item-text { flex: 1; font-size: .84rem; color: var(--cream); }
.dash-item-proj { font-size: .72rem; color: var(--muted); margin-left: .3rem; }
.dash-item-age  { font-size: .72rem; color: var(--muted); margin-left: .3rem; }

/* ── Badges ── */
.dash-badge {
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-badge-terra { background: var(--terra-dim);  color: var(--terra); }
.dash-badge-amber { background: var(--amber-dim);  color: var(--amber); }
.dash-badge-rose  { background: var(--rose-dim);   color: var(--rose);  }
.dash-badge-gold  { background: var(--gold-dim);   color: var(--gold);  }
.dash-badge-sage  { background: var(--sage-dim);   color: var(--sage);  }
.dash-badge-muted { background: var(--surface2);   color: var(--muted); }
.dash-item-time   { color: var(--muted); font-size: .78rem; }

/* ── Contador total de tareas ── */
.dash-count {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}

/* ── Prioridad dot ── */
.dash-prio {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-prio-alta  { background: var(--terra); }
.dash-prio-media { background: var(--amber); }
.dash-prio-baja  { background: var(--border2); }

/* ── Proyectos ── */
.dash-proj-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem 0;
  border-top: 1px solid rgba(255,255,255,.04);
}
.dash-proj-row:first-of-type { margin-top: .35rem; }
.dash-proj-info { flex: 1; }
.dash-proj-name { font-size: .84rem; color: var(--cream); margin-bottom: 4px; }
.dash-proj-bar  { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.dash-proj-fill { height: 100%; background: var(--sage); border-radius: 2px; }
.dash-proj-pct  { font-size: .75rem; color: var(--muted); width: 34px; text-align: right; flex-shrink: 0; }

/* ── Viaje: barra de progreso ── */
.dash-viaje-prog {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .6rem;
}
.dash-prog-txt { font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* ── Responsive ── */
@media(max-width:480px) {
  .dash-greeting { font-size: 1.2rem; }
  .dash-card     { padding: .7rem .85rem; }
}

/* ════════════════════════════════════════════════════
   EXTRAESCOLARES
════════════════════════════════════════════════════ */

/* Sub-nav toggle */
.extra-view-toggle {
  display: flex;
  gap: .4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.evt-btn {
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .85rem;
  transition: background .15s, color .15s, border-color .15s;
}
.evt-btn.active, .evt-btn:hover {
  background: var(--gold);
  color: #111;
  border-color: var(--gold);
}

/* Toolbar */
.extra-toolbar {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.2rem;
}

/* Empty / loading */
.extra-empty, .extra-loading {
  text-align: center;
  color: var(--muted);
  padding: 2.5rem 1rem;
  font-size: .95rem;
}

/* ── Timetable ── */
.extra-timetable {
  overflow-x: auto;
  padding-bottom: 1rem;
}
.extra-tt-inner {
  display: flex;
  min-width: 360px;
}
.extra-tt-hours {
  position: relative;
  width: 44px;
  flex-shrink: 0;
}
.extra-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
  width: 100%;
}
.extra-hour-line span {
  font-size: .65rem;
  color: var(--muted);
  position: relative;
  top: -9px;
  padding-right: 4px;
}
.extra-tt-days {
  display: flex;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.extra-day-col {
  flex: 1;
  min-width: 90px;
  border-right: 1px solid var(--border);
}
.extra-day-col:last-child { border-right: none; }
.extra-day-head {
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  padding: .3rem .2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.extra-day-body {
  position: relative;
}
.extra-day-hline {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--border);
  pointer-events: none;
  opacity: .5;
}
.extra-block {
  position: absolute;
  border-radius: 5px;
  padding: 4px 6px;
  cursor: pointer;
  overflow: hidden;
  transition: opacity .15s;
  box-sizing: border-box;
}
.extra-block:hover { opacity: .75; }
.extra-block-name  { font-size: .75rem; font-weight: 700; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.extra-block-child { font-size: .65rem; color: var(--cream); opacity: .8; }
.extra-block-time  { font-size: .63rem; color: var(--cream); opacity: .7; }

/* ── Activity cards ── */
.extra-child-group { margin-bottom: 1.5rem; }
.extra-child-head {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .6rem;
  padding-left: 2px;
}
.extra-act-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
}
.exac-card {
  background: var(--surface2);
  border-radius: 10px;
  border-left: 4px solid var(--gold);
  padding: .75rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.exac-top {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.exac-name {
  font-weight: 600;
  flex: 1;
  font-size: .95rem;
}
.exac-inactive {
  font-size: .7rem;
  background: var(--surface3, #333);
  color: var(--muted);
  border-radius: 4px;
  padding: .1rem .35rem;
}
.exac-edit {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  opacity: .6;
  padding: 0;
}
.exac-edit:hover { opacity: 1; }
.exac-row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  font-size: .78rem;
  color: var(--muted);
}
.exac-center, .exac-meta-item { white-space: nowrap; }
.exac-scheds {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.exac-sched {
  font-size: .73rem;
  background: var(--border2);
  border-radius: 4px;
  padding: .1rem .35rem;
  color: var(--cream);
}
.exac-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .1rem;
}
.exac-price {
  font-weight: 600;
  font-size: .85rem;
  color: var(--gold);
}
.exac-price small { font-weight: 400; color: var(--muted); }
.exac-pay-btn {
  font-size: .75rem;
  padding: .2rem .55rem;
  border-radius: 6px;
  background: var(--gold);
  color: #111;
  border: none;
  cursor: pointer;
}
.exac-pay-btn:hover { opacity: .85; }

/* ── Payments ── */
.exp-month-group { margin-bottom: 1.2rem; }
.exp-month-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: .3rem;
  margin-bottom: .5rem;
}
.exp-month-total { color: var(--gold); }
.exp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .6rem;
  background: var(--surface2);
  border-radius: 7px;
  margin-bottom: .35rem;
  gap: .5rem;
}
.exp-row-left {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  align-items: center;
  flex: 1;
}
.exp-row-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.exp-act    { font-weight: 600; font-size: .85rem; }
.exp-child  { font-size: .75rem; color: var(--muted); }
.exp-period { font-size: .75rem; color: var(--muted); }
.exp-notes  { font-size: .73rem; color: var(--muted); font-style: italic; }
.exp-amount { font-weight: 600; color: var(--gold); font-size: .9rem; }
.exp-del {
  background: none;
  border: none;
  cursor: pointer;
  opacity: .55;
  font-size: .85rem;
  padding: 0;
}
.exp-del:hover { opacity: 1; }

/* ── Schedule editor in modal ── */
.extra-sched-section { margin-top: .8rem; }
.extra-sched-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .4rem;
}
.btn-add-sched {
  font-size: .75rem;
  padding: .2rem .5rem;
  border-radius: 6px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--text);
  cursor: pointer;
}
.btn-add-sched:hover { background: var(--border); }
.extra-sched-empty {
  font-size: .8rem;
  color: var(--muted);
  padding: .3rem 0;
}
.extra-sched-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}
.extra-sched-row .fs  { min-width: 80px; flex: 0 0 80px; }
.extra-sched-row .fi  { min-width: 88px; flex: 0 0 88px; font-size: .82rem; padding: .3rem .4rem; }
.extra-sched-sep      { color: var(--muted); font-size: .85rem; }
.extra-sched-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: .85rem;
  padding: 0 .2rem;
}
.extra-sched-del:hover { color: var(--terra, #c0392b); }

/* fi-readonly (display-only field in modals) */
.fi-readonly {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: .45rem .65rem;
  font-size: .9rem;
  color: var(--muted);
  min-height: 2.2rem;
}

/* ════════════════════════════════════════════════════
   LIMPIEZA
════════════════════════════════════════════════════ */

/* Cabecera */
.cl-header { margin-bottom: .9rem; }
.cl-person-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
}
.cl-person-sel { flex: 1; }
.cl-month-nav {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}
.cl-nav-btn {
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  color: var(--cream);
  width: 32px; height: 32px;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.cl-nav-btn:hover { background: var(--border2); }
.cl-month-label {
  font-weight: 700;
  font-size: 1rem;
  flex: 1;
}

/* Stats mes */
.cl-month-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: 1rem;
}
.cl-stat {
  background: var(--surface2);
  border-radius: 10px;
  padding: .6rem .5rem;
  text-align: center;
  border-top: 3px solid transparent;
}
.cl-stat-gold  { border-color: var(--gold);  }
.cl-stat-terra { border-color: var(--terra); }
.cl-stat-sage  { border-color: var(--sage);  }
.cl-stat-amber { border-color: var(--amber); }
.cl-stat-n { display: block; font-weight: 700; font-size: .95rem; color: var(--cream); }
.cl-stat-l { display: block; font-size: .68rem; color: var(--muted); margin-top: .1rem; }

/* Pago badge */
.cl-pay-badge {
  border-radius: 8px;
  padding: .5rem .8rem;
  font-size: .82rem;
  margin-bottom: .7rem;
  font-weight: 600;
}
.cl-pay-ok      { background: var(--sage-dim);  color: var(--sage);  border: 1px solid var(--sage);  }
.cl-pay-pending { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber); }

/* Visit cards */
.cl-visits-list { margin-bottom: .9rem; }
.clv-card {
  background: var(--surface2);
  border-radius: 9px;
  padding: .6rem .85rem;
  margin-bottom: .45rem;
  border-left: 4px solid transparent;
}
.clv-came   { border-left-color: var(--sage);  }
.clv-missed { border-left-color: var(--terra); }
.clv-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.clv-status-icon { font-size: .9rem; flex-shrink: 0; }
.clv-date   { font-weight: 600; font-size: .9rem; flex: 1; min-width: 80px; }
.clv-cost   { font-size: .82rem; color: var(--gold); font-weight: 600; }
.clv-reason { font-size: .8rem; color: var(--terra); font-style: italic; }
.clv-notes  { font-size: .78rem; color: var(--muted); margin-top: .25rem; font-style: italic; }
.clv-edit, .clv-del {
  background: none; border: none; cursor: pointer;
  font-size: .85rem; opacity: .55; padding: 0;
  flex-shrink: 0;
}
.clv-edit:hover { opacity: 1; }
.clv-del:hover  { opacity: 1; color: var(--terra); }

/* Month actions */
.cl-month-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .2rem;
}

/* Summary */
.cl-year-nav {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .9rem;
}
.cl-year-label { font-weight: 700; font-size: 1rem; flex: 1; }
.cls-wrap { overflow-x: auto; }
.cls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.cls-table th {
  text-align: left;
  padding: .4rem .5rem;
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cls-table td {
  padding: .45rem .5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.cls-table tfoot td { border-top: 2px solid var(--border2); border-bottom: none; }
.cls-table tbody tr:hover td { background: var(--surface2); }
.cls-empty td { color: var(--muted); opacity: .5; }
.cls-month { font-weight: 500; }
.cls-num   { text-align: right; }
.cls-total { color: var(--gold); font-weight: 600; }
.cls-paid    { color: var(--sage); font-size: .8rem; }
.cls-pending { color: var(--amber); font-size: .9rem; }

/* Person cards */
.clpr-card {
  background: var(--surface2);
  border-radius: 9px;
  padding: .7rem .9rem;
  margin-bottom: .55rem;
  border-left: 4px solid var(--gold);
}
.clpr-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
}
.clpr-name  { font-weight: 600; flex: 1; }
.clpr-badge { font-size: .7rem; border-radius: 4px; padding: .1rem .4rem; }
.clpr-active   { background: var(--sage-dim);  color: var(--sage);  }
.clpr-inactive { background: var(--terra-dim); color: var(--terra); }
.clpr-meta { font-size: .78rem; color: var(--muted); }

@media(max-width:480px) {
  .cl-month-stats { grid-template-columns: repeat(2, 1fr); }
  .cls-table th, .cls-table td { padding: .35rem .3rem; font-size: .75rem; }
}

/* ═══════════════════════════════════════════
   DENTISTA
═══════════════════════════════════════════ */
.dtv-scheduled { border-left-color: var(--steel);  }
.dtv-done      { border-left-color: var(--sage);   }
.dtv-missed    { border-left-color: var(--terra);  }
.dtv-cancelled { border-left-color: var(--muted);  }

.dtv-member, .dtv-clinic {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}
.dtv-treatment {
  font-size: .85rem;
  font-weight: 500;
  margin-top: .2rem;
}
.dtv-next {
  font-size: .78rem;
  color: var(--steel);
  margin-top: .25rem;
}
.dtv-next-hint {
  display: none;
  font-size: .74rem;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 7px;
  padding: .5rem .65rem;
  margin: -.3rem 0 .95rem;
  line-height: 1.4;
}

.fl-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--cream);
  cursor: pointer;
}
.fl-check input { width: 16px; height: 16px; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   VISTA (oftalmólogo / óptica)
═══════════════════════════════════════════ */
.vis-filter-bar {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.vis-filter-bar .fs { flex: 1; min-width: 140px; }

.vis-glasses-badge {
  display: inline-block;
  font-size: .78rem;
  color: var(--rose);
  background: var(--rose-dim);
  border-radius: 6px;
  padding: .18rem .55rem;
  margin-top: .35rem;
}

@media(max-width:480px) {
  .vis-filter-bar { flex-direction: column; }
  .vis-filter-bar .fs { width: 100%; }
}