/* CRM con la base del rediseño (fase 2): barras, Hoy, Mensajes, acceso y móvil. Todo lo nuevo vive dentro de .ui;
   lo viejo (styles.css) no entra en .ui gracias a @scope. Tokens y componentes: base.css. */
body{background:radial-gradient(1200px 600px at 0 0,var(--fog-light),transparent 70%),var(--fog)}

/* ---------- Disposición ---------- */
.layout{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.sidebar-hidden .layout{grid-template-columns:0 minmax(0,1fr)}
.sidebar-hidden .ui.sidebar{visibility:hidden}

/* ---------- Barra lateral flotante ---------- */
.ui.sidebar{position:sticky;top:12px;margin:12px 0 12px 12px;height:calc(100vh - 24px);display:flex;flex-direction:column;padding:var(--s-4) var(--s-3);gap:var(--s-4);overflow:hidden;z-index:20}
.ui .sidebar-head{padding:var(--s-1) var(--s-3)}
.ui .sidebar-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s-6)}
.ui .side-group{display:grid;gap:2px}.ui .side-group+.side-group{margin-top:var(--s-3)}
.ui .side-section{display:grid;gap:2px}
.ui .side-label{padding:0 var(--s-3);margin:0 0 var(--s-1);font:var(--t-label);letter-spacing:.01em;color:var(--text-3)}
.ui .side-list{display:grid;gap:2px}
.ui .navitem{display:flex;align-items:center;gap:var(--s-3);width:100%;height:38px;padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);font:500 14px/1 var(--font);cursor:pointer;text-align:left;transition:background var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.ui .navitem:hover{background:color-mix(in srgb,var(--card-2) 80%,transparent);color:var(--text)}
.ui .navitem.active{background:var(--ink);color:var(--on-ink)}
.ui .navtext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui .navcount{font:var(--t-label);color:var(--text-3);font-variant-numeric:tabular-nums}.ui .navcount:empty{display:none}
.ui .navitem.active .navcount{color:var(--on-ink-2)}
.ui .navcount.alert{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--amber-bg);color:var(--amber)}
.ui .navitem.active .navcount.alert{background:var(--on-ink);color:var(--ink)}
.ui .sidebar-foot{border-top:1px solid var(--line);padding-top:var(--s-3)}
.ui .user-button .avatar{width:28px;height:28px;font-size:11px;background:var(--card-2);color:var(--text)}

/* ---------- Menús flotantes ---------- */
.ui.context-menu{position:fixed;z-index:60;min-width:220px;padding:6px;display:grid;gap:2px;color:var(--text);font:var(--t-body)}
.ui.context-menu button{display:flex;align-items:center;gap:var(--s-3);height:36px;padding:0 var(--s-3);border:0;border-radius:var(--r-inner);background:transparent;color:var(--text);font:400 14px/1 var(--font);text-align:left;cursor:pointer}
.ui.context-menu button>span:nth-child(2){flex:1}
.ui.context-menu button:hover,.ui.context-menu button:focus-visible{background:var(--card-2);outline:none}
.ui.context-menu button.danger{color:var(--red)}
.ui.context-menu button:disabled{opacity:.45;cursor:default}
.ui.context-menu hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
/* Las pantallas aún sin rehacer se ven como una gran tarjeta blanca sobre la niebla, sin cambiar por dentro. */
.main{background:transparent}
#content:not(.ui){background:var(--canvas);border-radius:var(--r-card);box-shadow:var(--shadow-card);margin:0 12px 12px 12px}
/* Cristal en elementos que son a la vez .ui y flotantes (base.css solo lo aplica a descendientes de .ui). */
.ui.glass{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:var(--shadow-float);border-radius:var(--r-card)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ui.glass{background:var(--card)}}

/* ---------- Barra superior ---------- */
.main>.ui.toolbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:64px;padding:0 var(--s-4);background:transparent;border:0}
.ui.toolbar.scrolled{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}
.ui .toolbar-start,.ui .toolbar-end{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.ui .toolbar-title{font:600 15px/1 var(--font);letter-spacing:-.01em;opacity:0;transition:opacity var(--d) var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.ui.toolbar.show-title .toolbar-title{opacity:1}
.ui .icon-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);cursor:pointer;transition:background var(--d-fast) var(--ease),color var(--d-fast)}
.ui .icon-btn:hover{background:var(--card);color:var(--text)}
.ui .mobile-back{display:none}
.ui .search-pill{display:inline-flex;align-items:center;gap:var(--s-2);height:40px;min-width:240px;padding:0 8px 0 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--text-3);font:400 14px/1 var(--font);cursor:pointer;box-shadow:var(--shadow-card)}
.ui .search-pill span{flex:1;text-align:left}
.ui kbd{font:var(--t-label);padding:4px 8px;border-radius:var(--r-pill);background:var(--card-2);color:var(--text-3)}
body[data-view="builder"] .new-btn{display:none}
.ui .bell-count{position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font:600 11px/18px var(--font);text-align:center;font-variant-numeric:tabular-nums}
/* Cronómetro: píldora negra que se rellena (un tono más claro) hasta las horas planificadas; ámbar al pasarse. */
.ui .timer-slot{display:flex;align-items:center;gap:var(--s-2)}
.ui .timer-pill{--fill:0%;display:inline-flex;align-items:center;height:40px;border-radius:var(--r-pill);overflow:hidden;color:var(--on-ink);box-shadow:var(--shadow-card);
 background:linear-gradient(90deg,color-mix(in srgb,var(--on-ink) 22%,var(--ink)) var(--fill),var(--ink) var(--fill))}
.ui .timer-pill.over{background:var(--amber-bg);color:var(--amber)}
.ui .timer-pill button{display:inline-flex;align-items:center;gap:var(--s-2);height:100%;border:0;background:transparent;color:inherit;font:500 13px/1 var(--font);cursor:pointer}
.ui .timer-pill-main{padding:0 var(--s-3) 0 14px}.ui .timer-pill-toggle{padding:0 12px 0 4px}
.ui .timer-pill-text{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.78}
.ui .timer-pill strong{font-weight:600;font-variant-numeric:tabular-nums}
.ui .timer-error{font:var(--t-small);color:var(--red);margin:0}

/* ---------- Paleta ⌘K ---------- */
.ui.search-dialog{border:0;padding:0;margin:12vh auto auto;width:min(640px,calc(100% - 32px));max-height:76vh;color:var(--text);overflow:hidden}
.ui.search-dialog[open]{display:flex;flex-direction:column}
.ui.search-dialog::backdrop{background:rgba(0,0,0,.25)}
.ui .search-top{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-4) var(--s-3);border-bottom:1px solid var(--line);color:var(--text-3)}
.ui .search-top input{flex:1;min-width:0;border:0;background:transparent;font:400 18px/1.3 var(--font);color:var(--text);outline:none}
.ui .search-top .close{border:0;background:transparent;cursor:pointer;padding:0}
.ui .search-actions,.ui .search-results{overflow-y:auto}
.ui .search-results{padding-bottom:var(--s-2)}
.ui .search-actions h3,.ui .search-group h3{font:var(--t-label);color:var(--text-3);margin:var(--s-3) var(--s-4) var(--s-1)}
.ui .palette-action,.ui .search-result{display:flex;align-items:center;gap:var(--s-3);width:calc(100% - 16px);margin:0 8px;min-height:40px;padding:6px var(--s-3);border:0;border-radius:var(--r-inner);background:transparent;color:var(--text);text-align:left;cursor:pointer;font:400 14px/1.3 var(--font)}
.ui .palette-action>span{flex:1}
.ui .search-result>span:first-child{flex:1;display:grid}.ui .search-result small{color:var(--text-2);font:var(--t-small)}
.ui .palette-action.selected,.ui .search-result.selected,.ui .palette-action:hover,.ui .search-result:hover{background:var(--card-2)}
.ui .search-group .subline,.ui .search-message{font:var(--t-small);color:var(--text-3);margin:var(--s-2) var(--s-4)}

/* ---------- Campana ---------- */
.ui.bell-panel{position:fixed;top:64px;right:var(--s-4);z-index:55;width:min(380px,calc(100% - 32px));max-height:min(520px,70vh);display:flex;flex-direction:column;padding:var(--s-4);color:var(--text);font:var(--t-body)}
.ui.bell-panel[hidden]{display:none}
.ui .bell-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-2)}
.ui .bell-list{overflow-y:auto;outline:none;margin:0 calc(var(--s-2) * -1)}
.ui .bell-list .empty{padding:var(--s-3) var(--s-2)}
.ui .bell-row{width:100%;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:var(--r-inner);padding:var(--s-3) var(--s-2);font:inherit}
.ui .bell-row:hover{background:var(--card-2)}
.ui .bell-row .icon{color:var(--text-2)}
.ui .bell-row.unseen strong::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-right:8px;vertical-align:1px}

/* ---------- Contenido rehecho (Hoy, Mensajes) ---------- */
#content.ui{padding:var(--s-2) var(--s-8) var(--s-12);width:100%;max-width:1280px;color:var(--text);font:var(--t-body);font-variant-numeric:tabular-nums}
#content.ui.enter{animation:ui-rise var(--d-slow) var(--ease)}
.ui .actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ui .today-head{margin:var(--s-2) 0 var(--s-6)}
.ui .today-head .label{margin:0 0 var(--s-2)}
.ui .today-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-6);align-items:start}
.ui .today-main{display:grid;gap:var(--s-6);min-width:0}
.ui .today-side{display:grid;gap:var(--s-6);position:sticky;top:80px}
.ui .today-next .label{margin:0}
.ui .today-next h2{font:var(--t-title);letter-spacing:-.02em;margin:var(--s-2) 0 var(--s-1)}
.ui .today-next .muted{margin:0}
.ui .today-next-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0 var(--s-3)}
.ui .today-next .faint{margin:0}
.ui .today-agenda{display:grid;gap:var(--s-6)}
.ui .agenda-bucket>h2,.ui .agenda-bucket>summary{display:flex;align-items:center;gap:var(--s-2);font:600 13px/1.3 var(--font);letter-spacing:0;color:var(--text-2);margin:0 0 var(--s-2) var(--s-2);list-style:none}
.ui .agenda-bucket>summary{cursor:pointer}.ui .agenda-bucket>summary::-webkit-details-marker{display:none}
.ui .agenda-bucket>summary::after{content:"›";color:var(--text-3);transition:transform var(--d-fast) var(--ease)}
.ui .agenda-bucket[open]>summary::after{transform:rotate(90deg)}
.ui .agenda-bucket .count{font:var(--t-label);color:var(--text-3);background:var(--card-2);border-radius:var(--r-pill);padding:2px 8px}
.ui .agenda-bucket.late>h2{color:var(--red)}
.ui .agenda-bucket .card{padding:var(--s-1) var(--s-4)}
.ui .agenda-row{gap:var(--s-3)}
.ui .agenda-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--card-2);color:var(--text-2)}
.ui .agenda-icon .icon{width:18px;height:18px}
.ui .agenda-check{width:32px;height:32px;flex:none;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.ui .agenda-check span{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--text-3);transition:background var(--d-fast),border-color var(--d-fast)}
.ui .agenda-check:hover span{border-color:var(--ink);background:var(--card-2)}
.ui .agenda-when{font:var(--t-small);color:var(--text-3);white-space:nowrap}
.ui .agenda-when.late{color:var(--red)}.ui .agenda-when.today{color:var(--amber)}
.ui .agenda-actions{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.ui .figures{padding:var(--s-1) var(--s-4)}
.ui .figure{width:100%;border:0;border-top:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.ui .figure:first-child{border-top:0}
.ui .figure .label{display:block;margin-bottom:2px}
.ui .figure-value{display:block;font:600 20px/1.2 var(--font);font-variant-numeric:tabular-nums}
.ui .figure>small{text-align:right;max-width:45%}
.ui .figure-loading{display:block;width:96px;height:22px}
.ui .month-goal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3)}
.ui .month-goal-head .label{display:block;margin-bottom:var(--s-1)}
.ui .month-goal strong{font:600 24px/1.2 var(--font);font-variant-numeric:tabular-nums}
.ui .month-goal strong small{font:400 14px/1.3 var(--font);color:var(--on-ink-2)}
.ui .month-goal .progress{background:color-mix(in srgb,var(--on-ink) 18%,transparent);margin:var(--s-4) 0 var(--s-3)}
.ui .month-goal .progress>span{background:var(--on-ink)}
.ui .month-goal p{margin:0 0 var(--s-2)}
@media (max-width:1100px){.ui .today-grid{grid-template-columns:1fr}.ui .today-side{position:static}}

/* ---------- Mensajes ---------- */
.ui .page-head{margin:var(--s-2) 0 var(--s-6)}.ui .page-head .muted{margin:var(--s-1) 0 0}
.ui .inbox-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--s-6);align-items:start}
.ui .inbox{padding:var(--s-2)}
.ui .inbox .empty{padding:var(--s-4)}
.ui .inbox-row{width:100%;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;border-radius:var(--r-inner);padding:var(--s-3) var(--s-2);font:inherit}
.ui .inbox-row+.inbox-row{border-top:1px solid var(--line)}
.ui .inbox-row:hover,.ui .inbox-row.active{background:var(--card-2)}
.ui .inbox-row:not(.unread) strong{font-weight:500}
.ui .inbox-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui .inbox-meta{display:grid;justify-items:end;gap:4px;flex:none}
.ui .inbox-meta small{color:var(--text-3)}
.ui .thread .chat{max-height:60vh}
.ui .thread-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-3)}
.ui .composer .field textarea{min-height:44px}
#client-thread.ui{display:block;color:var(--text);font:var(--t-body)}
@media (max-width:760px){.ui .inbox-layout{grid-template-columns:1fr}.ui .inbox-layout.has-thread .inbox{display:none}.ui .inbox-layout:not(.has-thread) .thread{display:none}}

/* ---------- Acceso ---------- */
body.ui.login-page{min-height:100vh}
.ui .login-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--s-4)}
.ui .login-card{width:min(400px,100%);padding:var(--s-8)}
.ui .login-card .brand{margin:0 0 var(--s-6)}
.ui .login-card h1{font:var(--t-title);letter-spacing:-.02em}
.ui .login-card .muted{margin:var(--s-1) 0 var(--s-6)}
.ui .login-card .error{margin:0}
.ui .login-submit{width:100%;margin-top:var(--s-2)}

/* ---------- Móvil ---------- */
.ui.tabbar{display:none}
@media (max-width:860px){
 .layout{grid-template-columns:minmax(0,1fr)}
 .ui.sidebar{position:fixed;top:12px;bottom:12px;left:12px;margin:0;z-index:70;width:min(300px,calc(100% - 24px));height:auto;visibility:hidden;transform:translateX(calc(-100% - 24px));transition:transform var(--d) var(--ease),visibility 0s var(--d)}
 .sidebar-open .ui.sidebar{visibility:visible;transform:none;transition:transform var(--d) var(--ease)}
 .sidebar-backdrop{z-index:65}
 #content:not(.ui){margin:0 8px 8px}
}
@media (max-width:760px){
 .main>.ui.toolbar{height:56px;padding:0 var(--s-2)}
 .ui .search-pill{min-width:0;width:40px;padding:0;justify-content:center;box-shadow:none;border:0;background:transparent;color:var(--text-2)}
 .ui .search-pill span,.ui .search-pill kbd,.ui .new-btn span,.ui .timer-pill-text{display:none}
 .ui .new-btn{width:40px;padding:0}
 .ui .timer-pill-main{padding:0 10px}
 .ui .timer-pill .timer-pill-toggle{display:none}
 .ui .toolbar-end{gap:2px}
 .ui .toolbar-title{opacity:1;font-size:16px}
 .ui .toolbar-start{flex:1}
 .ui.toolbar .icon-btn[data-shell="toggle-sidebar"]{display:none}
 .mobile-detail .ui .mobile-back{display:inline-grid}
 #content.ui{padding:var(--s-2) var(--s-4) var(--s-12)}
 .ui .hero{font-size:32px}
 .ui .today-head{margin-bottom:var(--s-4)}
 .ui .agenda-row{flex-wrap:wrap}.ui .agenda-actions{width:100%;justify-content:flex-start;padding-left:44px}
 .ui.tabbar{display:flex;position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;gap:2px;padding:6px;border-radius:var(--r-pill);background:var(--ink);box-shadow:var(--shadow-float)}
 .ui.tabbar button{display:grid;place-items:center;align-content:center;gap:3px;min-width:60px;height:52px;padding:0 6px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--on-ink-2);font:500 10px/1 var(--font);cursor:pointer}
 .ui.tabbar button.active{background:color-mix(in srgb,var(--on-ink) 16%,transparent);color:var(--on-ink)}
 .main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
 #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
 .ui.bell-panel{top:56px;right:12px;width:calc(100% - 24px)}
}