/* ============ RESET BASE ============
   Lo que el contenedor del prototipo aplicaba por su cuenta y ahora
   tiene que vivir en la hoja de estilos de la app. */
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

  /* ============ TOKENS — material neumórfico (sistema NEXO) ============ */
  :root{
    --canvas:#E0E0E8;
    --surface:#E0E0E8;
    --ink:#12121E;
    --ink-2:#54546A;
    --ink-3:#8A8A9E;
    --accent:#0E5F63;          /* petrol Cauce */
    --accent-ink:#FFFFFF;
    --tint:color-mix(in srgb, var(--accent) 12%, var(--surface));
    --good:#0D9F70;
    --warn:#CF7A00;
    --crit:#D93A40;
    --pin:#B03AA0;
    --nd:163,163,180;          /* RGB sombra */
    --nl:255,255,255;          /* RGB luz */
    --spec1:rgba(255,255,255,.65);
    --spec2:rgba(255,255,255,.45);
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --canvas:#2E2E34; --surface:#2E2E34;
      --ink:#E2E3E9; --ink-2:#9294A2; --ink-3:#6E7080;
      --accent:#57BEC2; --accent-ink:#06282A;
      --tint:color-mix(in srgb, var(--accent) 16%, var(--surface));
      --good:#34D399; --warn:#F5A623; --crit:#F87171; --pin:#E07BD0;
      --nd:0,0,0; --nl:84,84,96;         /* luz = gris de rebote, nunca blanca */
      --spec1:rgba(255,255,255,.09); --spec2:rgba(255,255,255,.06);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --canvas:#2E2E34; --surface:#2E2E34;
    --ink:#E2E3E9; --ink-2:#9294A2; --ink-3:#6E7080;
    --accent:#57BEC2; --accent-ink:#06282A;
    --tint:color-mix(in srgb, var(--accent) 16%, var(--surface));
    --good:#34D399; --warn:#F5A623; --crit:#F87171; --pin:#E07BD0;
    --nd:0,0,0; --nl:84,84,96;
    --spec1:rgba(255,255,255,.09); --spec2:rgba(255,255,255,.06);
    color-scheme:dark;
  }
  /* Sombras compuestas: 3 escalones + especular + oclusión (fórmula NEXO) */
  :root{
    --neu-raised:
      3px 5px 10px rgba(var(--nd),.45), 7px 10px 24px rgba(var(--nd),.28), 14px 18px 44px rgba(var(--nd),.12),
      -3px -4px 8px rgba(var(--nl),.6), -7px -9px 22px rgba(var(--nl),.42), -14px -18px 44px rgba(var(--nl),.22),
      inset .5px 1px 2px var(--spec1), inset 0 .5px 1px var(--spec2), inset -.5px -1px 2px rgba(var(--nd),.24);
    --neu-raised-sm:
      2px 3px 6px rgba(var(--nd),.4), 4px 6px 14px rgba(var(--nd),.24), 8px 12px 26px rgba(var(--nd),.1),
      -2px -3px 6px rgba(var(--nl),.55), -4px -6px 14px rgba(var(--nl),.36),
      inset .5px 1px 1.5px var(--spec1), inset -.5px -1px 1.5px rgba(var(--nd),.22);
    --neu-pressed:
      1px 1px 3px rgba(var(--nd),.3),
      inset 2px 3px 6px rgba(var(--nd),.44), inset 4px 6px 14px rgba(var(--nd),.24),
      inset -2px -2px 5px rgba(var(--nl),.5), inset -4px -4px 12px rgba(var(--nl),.28);
    --neu-sunken:
      inset 2px 3px 7px rgba(var(--nd),.47), inset 4px 6px 16px rgba(var(--nd),.26),
      inset -2px -2px 6px rgba(var(--nl),.58), inset -4px -4px 14px rgba(var(--nl),.32),
      inset .5px .5px 1px rgba(var(--nl),.42), inset 0 1px 2px rgba(var(--nd),.4);
    --neu-sunken-soft:
      inset 1.5px 2px 5px rgba(var(--nd),.36), inset 3px 5px 12px rgba(var(--nd),.19),
      inset -1.5px -1.5px 5px rgba(var(--nl),.46), inset -3px -3px 10px rgba(var(--nl),.24),
      inset 0 1px 1.5px rgba(var(--nd),.3);
    --neu-track:
      inset 1.5px 2px 5px rgba(var(--nd),.52), inset 3px 4px 10px rgba(var(--nd),.26),
      inset -1px -1px 3px rgba(var(--nl),.55), inset .5px .5px 1px rgba(var(--nl),.36);
    --neu-accent:
      2px 4px 10px rgba(var(--nd),.45), 5px 8px 20px rgba(var(--nd),.25), -2px -3px 8px rgba(var(--nl),.5),
      inset .5px 1px 2px rgba(255,255,255,.35), inset -.5px -1px 2px rgba(0,0,0,.18);
    --ease:cubic-bezier(.16,1,.3,1);
  }

  *{box-sizing:border-box}
  html,body{height:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%}
  body{
    margin:0; background:var(--canvas); color:var(--ink);
    font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:15px; line-height:1.45; overflow:hidden; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:"Sora","Manrope",system-ui,sans-serif; text-wrap:balance; margin:0}
  button{font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0}
  input,select,textarea{font:inherit; color:inherit}
  /* iOS: sin auto-zoom al enfocar controles */
  @media (hover:none) and (pointer:coarse){ input,select,textarea{font-size:16px!important} }
  .mono{font-family:"Spline Sans Mono",ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
  @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }
  *{scrollbar-width:thin; scrollbar-color:rgba(var(--nd),.5) transparent}

  /* ---- clases del material: mismo fondo SIEMPRE, forma = solo sombras ---- */
  .raised,.raised-sm,.sunken,.sunken-soft,.inpt,.track{background-color:var(--surface); border:none}
  .raised{box-shadow:var(--neu-raised); transition:box-shadow .25s var(--ease), transform .25s var(--ease)}
  .raised-sm{box-shadow:var(--neu-raised-sm); transition:box-shadow .25s var(--ease), transform .25s var(--ease)}
  .press:active:not(:disabled){transform:scale(.97); box-shadow:var(--neu-pressed)}
  .sunken{box-shadow:var(--neu-sunken)}
  .sunken-soft{box-shadow:var(--neu-sunken-soft)}
  .inpt{box-shadow:var(--neu-sunken-soft)}
  .track{box-shadow:var(--neu-track); overflow:hidden}
  .fill{height:100%; border-radius:10px; position:relative; box-shadow:.5px 1px 2px rgba(0,0,0,.15), -.5px -.5px 1px rgba(255,255,255,.45)}
  .fill::after{content:""; position:absolute; top:1px; left:4px; right:4px; height:3px; background:rgba(255,255,255,.4); border-radius:10px}
  .accent-el{border:none; box-shadow:var(--neu-accent); transition:box-shadow .25s var(--ease), transform .25s var(--ease)}
  .accent-el.press:active:not(:disabled){
    transform:scale(.97);
    box-shadow:1px 1px 3px rgba(var(--nd),.3), inset 2px 3px 6px rgba(0,0,0,.28), inset -2px -2px 5px rgba(255,255,255,.18);
  }
  :root[data-theme="dark"] .raised, :root[data-theme="dark"] .raised-sm{
    background-image:linear-gradient(145deg, rgba(255,255,255,.03) 0%, transparent 50%, rgba(0,0,0,.05) 100%);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .raised, :root:not([data-theme="light"]) .raised-sm{
      background-image:linear-gradient(145deg, rgba(255,255,255,.03) 0%, transparent 50%, rgba(0,0,0,.05) 100%);
    }
  }
  @keyframes vista-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
  .vista-in{animation:vista-in .22s ease-out}

  /* ============ SHELL ============ */
  #app{display:grid; grid-template-columns:238px 1fr; height:100vh; height:100dvh}
  #side{display:flex; flex-direction:column; padding:20px 14px 14px; gap:4px; overflow-y:auto}
  .brand{display:flex; align-items:center; gap:11px; padding:2px 8px 18px}
  .brand .logo{
    width:38px; height:38px; border-radius:13px; background:var(--accent); flex:none;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--neu-accent);
  }
  .brand b{font-family:"Sora",sans-serif; font-size:20px; font-weight:800; letter-spacing:-.02em}
  .brand small{display:block; font-size:11px; color:var(--ink-3); font-weight:600}
  .navlbl{font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:16px 10px 8px}
  .nav-item{
    display:flex; align-items:center; gap:11px; width:100%; text-align:left;
    padding:9px 12px; border-radius:16px; color:var(--ink-2); font-weight:700; font-size:13.5px;
    background:var(--surface); transition:color .15s, box-shadow .25s var(--ease);
  }
  .nav-item svg{flex:none; opacity:.8}
  .nav-item:hover{color:var(--ink)}
  .nav-item[aria-current="true"]{box-shadow:var(--neu-raised-sm); color:var(--accent)}
  .nav-item[aria-current="true"] svg{opacity:1}
  .nav-item .count{margin-left:auto; font-size:11.5px; color:var(--ink-3); font-weight:600}
  .proj-dot{width:9px; height:9px; border-radius:50%; flex:none; box-shadow:.5px 1px 2px rgba(0,0,0,.25), inset .5px .5px 1px rgba(255,255,255,.4)}
  #side-foot{margin-top:auto; padding-top:16px; display:flex; gap:8px; align-items:center}
  .chipbtn{
    display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px;
    font-size:12.5px; font-weight:700; color:var(--ink-2); background:var(--surface);
    box-shadow:var(--neu-raised-sm);
  }
  .chipbtn:hover{color:var(--accent)}
  .chipbtn[aria-pressed="true"]{background:var(--pin); color:#fff; box-shadow:var(--neu-accent)}

  /* ---- main ---- */
  /* min-height:0 es imprescindible: sin él, el item de grid no puede encoger
   * por debajo de su contenido, el shell crece más que la ventana y los
   * paneles internos nunca desbordan (= no hay scroll en escritorio). */
  #main{display:flex; flex-direction:column; min-width:0; min-height:0}
  #topbar{display:flex; align-items:center; gap:14px; padding:18px 24px 12px}
  #topbar h1{font-size:20px; font-weight:700; letter-spacing:-.01em; white-space:nowrap}
  #capture{
    flex:1; max-width:600px; display:flex; align-items:center; gap:9px; position:relative;
    background:var(--surface); border-radius:18px; padding:11px 14px; box-shadow:var(--neu-sunken-soft);
  }
  #capture:focus-within{outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px}
  #capture svg{flex:none; color:var(--ink-3)}
  #capture input{flex:1; border:none; background:none; outline:none; min-width:0}
  #capture input::placeholder{color:var(--ink-3)}
  #capture kbd{
    font-family:"Spline Sans Mono",monospace; font-size:10px; color:var(--ink-3); font-weight:600;
    background:var(--tint); border-radius:6px; padding:2px 6px; white-space:nowrap;
  }
  #topdate{margin-left:auto; text-align:right; white-space:nowrap}
  #topdate .d1{font-size:13px; font-weight:700; text-transform:capitalize}
  #topdate .d2{font-size:11.5px; color:var(--ink-3)}
  #view{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column}

  /* ============ INICIO (patrón NEXO) ============ */
  .pane{flex:1; overflow-y:auto; padding:8px 24px 28px}
  .pane-inner{max-width:920px; display:flex; flex-direction:column; gap:22px}
  /* anchos por vista: antes iban en atributos style del HTML y no podían
   * responder al tamaño de pantalla */
  #pane-hoy .pane-inner{max-width:880px}
  #pane-revision .pane-inner{max-width:720px}
  #pane-habitos .panel{max-width:640px}
  .hero h2{font-size:25px; font-weight:800; line-height:1.2}
  .hero p{margin:3px 0 0; font-size:13.5px; color:var(--ink-2)}
  .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .kpi{border-radius:22px; padding:16px 18px; box-shadow:var(--neu-raised); background:var(--surface)}
  .kpi .v{font-family:"Sora",sans-serif; font-size:30px; font-weight:800; line-height:1.1}
  .kpi .l{font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em}
  .kpi .s{font-size:12px; color:var(--ink-3); margin-top:3px}
  .kpi.k-accent .v{color:var(--accent)}
  .kpi.k-good .v{color:var(--good)}
  .kpi.k-warn .v{color:var(--warn)}
  .quick{display:flex; gap:6px; flex-wrap:wrap}
  .qa{display:flex; width:80px; flex-direction:column; align-items:center; gap:7px}
  .qa .c{
    width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--surface); box-shadow:var(--neu-raised-sm); color:var(--accent);
    transition:box-shadow .25s var(--ease), transform .25s var(--ease);
  }
  .qa:active .c{transform:scale(.95); box-shadow:var(--neu-pressed)}
  .qa.primario .c{background:var(--accent); color:var(--accent-ink); box-shadow:var(--neu-accent)}
  .qa span{font-size:12px; font-weight:700; text-align:center; line-height:1.25}
  .panel{border-radius:22px; box-shadow:var(--neu-raised); background:var(--surface)}
  .panel-h{display:flex; align-items:center; gap:10px; padding:16px 18px 4px}
  .panel-h h2{font-size:16px; font-weight:700}
  .panel-h .sub{font-size:12px; color:var(--ink-3); margin-left:auto; font-weight:600}
  .panel-h .verlink{margin-left:auto; font-size:12.5px; font-weight:800; color:var(--accent)}
  .panel-b{padding:10px 18px 16px}
  /* ---- muro Pro (vista Revisión sin derechos) ---- */
  .muro-pro-b{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:36px 22px}
  .muro-ico{font-size:30px}
  .muro-pro-b h2{font-size:17px}
  .muro-pro-b p{font-size:13px; color:var(--ink-3); font-weight:600; max-width:36em}
  .muro-acts{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px}
  .row-item{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 2px; border-radius:12px}
  .row-item + .row-item{box-shadow:0 -1px 0 rgba(var(--nd),.35)}
  .row-item .ic{
    width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--surface); box-shadow:var(--neu-sunken-soft); color:var(--ink-2);
  }
  .row-item .tx{flex:1; min-width:0}
  .row-item .tx b{display:block; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .row-item .tx span{font-size:11.5px; color:var(--ink-3); font-weight:600}
  .row-empty{color:var(--ink-3); font-size:13px; padding:12px 2px}
  .proj-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px}
  .proj-card{border-radius:18px; padding:13px 15px; box-shadow:var(--neu-raised-sm); background:var(--surface); text-align:left}
  .proj-card .nm{display:flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; margin-bottom:2px}
  .proj-card .st{font-size:11.5px; color:var(--ink-3); font-weight:600}
  .proj-card .track{height:9px; border-radius:10px; margin-top:9px}

  /* ============ KANBAN ============ */
  #board{flex:1; display:flex; gap:18px; padding:10px 24px 24px; overflow-x:auto; align-items:stretch}
  .col{
    flex:0 0 270px; display:flex; flex-direction:column; min-height:0; position:relative;
    background:var(--surface); border-radius:24px; box-shadow:var(--neu-sunken-soft);
  }
  .col.dragover{outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:3px}
  .col-head{display:flex; align-items:center; gap:8px; padding:14px 16px 8px}
  .col-head .cname{font-family:"Sora",sans-serif; font-weight:700; font-size:14px}
  .col-head .cn{font-size:12px; color:var(--ink-3); font-weight:600}
  .wip{
    margin-left:auto; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px;
    background:var(--surface); box-shadow:var(--neu-sunken-soft); color:var(--ink-2);
  }
  .wip.over{color:var(--warn)}
  .col-body{flex:1; overflow-y:auto; padding:6px 12px 12px; display:flex; flex-direction:column; gap:11px}
  .col-hint{font-size:12px; color:var(--ink-3); padding:10px 8px; text-align:center; font-weight:600}
  /* ---- filtros del tablero: selects con aspecto de chip (picker nativo en móvil) ---- */
  #board-filtros{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:6px 24px 4px}
  .fchip{
    appearance:none; -webkit-appearance:none; cursor:pointer;
    padding:8px 30px 8px 13px; border-radius:999px; font-size:12.5px; font-weight:700;
    color:var(--ink-2); background:var(--surface); box-shadow:var(--neu-sunken-soft);
    background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:calc(100% - 17px) 55%, calc(100% - 12px) 55%;
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
    max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .fchip:focus{outline:none}
  .fchip:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px}
  .fchip.on{color:var(--accent); box-shadow:var(--neu-raised-sm)}
  #filtros-clear{
    padding:8px 13px; border-radius:999px; font-size:12.5px; font-weight:800;
    color:var(--crit); background:var(--surface); box-shadow:var(--neu-raised-sm);
  }

  .card{
    background:var(--surface); border-radius:18px; padding:12px 13px 11px;
    box-shadow:var(--neu-raised-sm); cursor:grab; position:relative;
    transition:box-shadow .25s var(--ease), transform .25s var(--ease);
    /* iOS: la pulsación larga no debe disparar selección de texto ni callout */
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  }
  .card:active{cursor:grabbing}
  .card.dragging{opacity:.45}
  .card.ghost{position:fixed; z-index:70; pointer-events:none; opacity:.95; margin:0; transform:scale(1.04) rotate(1.5deg); box-shadow:var(--neu-raised)}
  .card .t{font-weight:700; font-size:13.5px; line-height:1.35; margin:0 0 7px; display:flex; gap:9px; align-items:flex-start}
  .card.done-card .t span{text-decoration:line-through; color:var(--ink-3)}
  .ck{
    flex:none; width:19px; height:19px; margin-top:1px; border-radius:50%;
    background:var(--surface); box-shadow:var(--neu-sunken-soft);
    display:inline-flex; align-items:center; justify-content:center; color:transparent; font-size:11px;
  }
  .ck.on{background:var(--good); color:#fff; box-shadow:var(--neu-accent)}
  .meta{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
  .tag{
    font-size:10.5px; font-weight:800; padding:2.5px 8px; border-radius:999px; white-space:nowrap;
    background:var(--tint); color:var(--ink-2);
    box-shadow:.5px 1px 2px rgba(0,0,0,.1), inset .5px .5px 1px rgba(255,255,255,.3);
  }
  .tag.proj{color:#fff}
  .tag.due{font-family:"Spline Sans Mono",monospace; font-weight:600}
  .tag.due.today{color:var(--accent)}
  .tag.due.late{background:color-mix(in srgb, var(--crit) 16%, var(--surface)); color:var(--crit)}
  .tag.energy{background:var(--surface); box-shadow:var(--neu-sunken-soft); color:var(--ink-3); font-weight:600}
  .tag.p1{background:color-mix(in srgb, var(--crit) 16%, var(--surface)); color:var(--crit)}
  .tag.pro{background:var(--warn); color:#fff; letter-spacing:.04em}
  .nav-item .tag.pro{margin-left:auto}

  /* ============ HOY ============ */
  .today-grid{display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start}
  .today-item{display:flex; align-items:center; gap:11px; padding:10px 2px}
  .today-item + .today-item{box-shadow:0 -1px 0 rgba(var(--nd),.35)}
  .today-item .tt{flex:1; font-weight:700; font-size:13.5px; min-width:0}
  .today-item.doneit .tt{text-decoration:line-through; color:var(--ink-3)}
  .today-empty{color:var(--ink-3); font-size:13.5px; padding:14px 4px}
  .ritual{list-style:none; margin:0; padding:0}
  .ritual li{display:flex; gap:10px; align-items:baseline; padding:6px 0; font-size:13.5px; color:var(--ink-2); font-weight:500}
  .ritual .n{font-family:"Spline Sans Mono",monospace; font-size:11px; color:var(--accent); font-weight:600}
  /* ---- ritual editable ---- */
  .rit-row{display:flex; align-items:center; gap:8px; padding:5px 0}
  .rit-row .n{
    font-family:"Spline Sans Mono",monospace; font-size:11px; color:var(--accent);
    font-weight:600; flex:none; width:20px;
  }
  .rit-row input{
    flex:1; min-width:0; padding:9px 12px; border-radius:12px; font-size:13px;
    background:var(--surface); color:var(--ink); box-shadow:var(--neu-sunken-soft);
  }
  .rit-b{
    flex:none; width:30px; height:30px; border-radius:10px; font-size:13px;
    background:var(--surface); color:var(--ink-3); box-shadow:var(--neu-raised-sm);
  }
  .rit-b:hover:not(:disabled){color:var(--ink)}
  .rit-b:disabled{opacity:.35}
  .rit-b.danger{color:var(--crit)}
  .rit-foot{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
  .rit-help{font-size:11.5px; color:var(--ink-3); margin:10px 0 0; font-weight:500}
  #focus{text-align:center; padding:16px 16px 20px}
  #focus .seg{max-width:270px; margin:0 auto 4px}
  /* cinco opciones no caben en el ancho del conmutador de modo: se reparten */
  #focus .f-min{max-width:360px; flex-wrap:wrap; row-gap:4px; justify-content:center}
  #focus .f-min button{flex:0 1 auto; min-width:56px; padding:8px 7px; font-size:11.5px}
  .f-dial{position:relative; width:132px; margin:14px auto 8px}
  .f-dial svg{display:block; width:100%; height:auto}
  .fd-bg{stroke:var(--ink-3); opacity:.2}
  .fd-fg{stroke:var(--accent); transition:stroke-dashoffset .35s linear}
  #focus.f-brk .fd-fg{stroke:var(--good)}
  #focus .time{
    position:absolute; inset:0; display:grid; place-items:center; margin:0;
    font-family:"Spline Sans Mono",monospace; font-size:29px; font-weight:600;
    letter-spacing:.02em; font-variant-numeric:tabular-nums;
  }
  #focus.run .time{color:var(--accent)}
  #focus.f-brk.run .time{color:var(--good)}
  #focus .who{font-size:12.5px; color:var(--ink-3); min-height:18px; margin:0 0 12px; font-weight:600}
  .f-min button{font-family:"Spline Sans Mono",monospace; font-size:12px}
  .f-libre{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:10px; font-size:12.5px; color:var(--ink-3); font-weight:600;
  }
  .f-libre input{
    width:84px; padding:8px 10px; border-radius:12px; text-align:center;
    font-family:"Spline Sans Mono",monospace; font-size:14px; font-weight:600;
    background:var(--surface); color:var(--ink); box-shadow:var(--neu-sunken-soft);
  }
  .f-sug{margin:9px 0 0; font-size:11.5px; color:var(--ink-3); font-weight:600}
  .f-ctrl{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px}
  .f-stat{margin:13px 0 0; font-size:12px; color:var(--ink-3); font-weight:600}
  .f-stat b{color:var(--accent); font-family:"Spline Sans Mono",monospace; font-size:13.5px}
  .f-stat .verlink{font-size:12px; padding:2px 4px}
  .btn{
    display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:16px;
    background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:13.5px;
    box-shadow:var(--neu-accent); transition:box-shadow .25s var(--ease), transform .25s var(--ease);
  }
  .btn.ghost{background:var(--surface); color:var(--ink-2); box-shadow:var(--neu-raised-sm)}
  .btn:disabled{opacity:.4; cursor:default; box-shadow:var(--neu-sunken-soft)}
  .btn.danger{background:var(--surface); color:var(--crit); box-shadow:var(--neu-raised-sm)}

  /* ============ HÁBITOS ============ */
  .habit-row{display:grid; grid-template-columns:1fr repeat(7,34px) 56px; gap:6px; align-items:center; padding:10px 0}
  .habit-row + .habit-row{box-shadow:0 -1px 0 rgba(var(--nd),.35)}
  .habit-row.hdr{font-size:10.5px; color:var(--ink-3); font-weight:800; text-transform:uppercase; letter-spacing:.06em; text-align:center}
  .habit-row.hdr :first-child{text-align:left}
  .hname{font-weight:800; font-size:13.5px}
  .hname small{display:block; font-weight:600; font-size:11.5px; color:var(--ink-3)}
  .hcell{
    width:30px; height:30px; margin:0 auto; border-radius:10px; background:var(--surface);
    box-shadow:var(--neu-sunken-soft); display:flex; align-items:center; justify-content:center;
    color:transparent; font-size:13px; transition:box-shadow .2s var(--ease);
  }
  .hcell.on{background:var(--good); color:#fff; box-shadow:var(--neu-accent)}
  .hcell:disabled{opacity:.35; cursor:default}
  .streak{font-family:"Spline Sans Mono",monospace; font-size:12.5px; color:var(--warn); font-weight:600; text-align:right}

  /* ============ REVISIÓN ============ */
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative}
  .stat{border-radius:20px; padding:15px 17px; box-shadow:var(--neu-raised-sm); background:var(--surface)}
  .stat .v{font-family:"Spline Sans Mono",monospace; font-size:27px; font-weight:600; line-height:1.1}
  .stat .l{font-size:11.5px; color:var(--ink-3); margin-top:2px; font-weight:700}
  .stat.hero{background:var(--accent); box-shadow:var(--neu-accent)}
  .stat.hero .v,.stat.hero .l{color:var(--accent-ink)}
  .stat.hero .l{opacity:.85}
  .rev-item{display:flex; gap:12px; align-items:flex-start; padding:11px 2px}
  .rev-item + .rev-item{box-shadow:0 -1px 0 rgba(var(--nd),.35)}
  .rev-item .rt{flex:1}
  .rev-item .rt b{display:block; font-weight:800; font-size:13.5px}
  .rev-item .rt span{font-size:12.5px; color:var(--ink-3); font-weight:500}
  .rev-item.doneit .rt b{text-decoration:line-through; color:var(--ink-3)}

  /* ============ DRAWER / SHEET ============ */
  #drawer{
    position:fixed; inset:0 0 0 auto; width:min(400px,100%); background:var(--surface);
    box-shadow:var(--neu-raised); z-index:56;
    transform:translateX(103%); transition:transform .25s var(--ease); display:flex; flex-direction:column;
  }
  #drawer.open{transform:none}
  #drawer header{display:flex; align-items:center; padding:18px 20px 8px; gap:10px}
  #drawer header h2{font-size:14px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.08em}
  #drawer .x{margin-left:auto; color:var(--ink-3); width:34px; height:34px; border-radius:50%; background:var(--surface); box-shadow:var(--neu-raised-sm); display:flex; align-items:center; justify-content:center}
  #drawer .body{padding:8px 20px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:15px}
  .fld label{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
  .fld input,.fld select,.fld textarea{
    width:100%; background:var(--surface); border:none; border-radius:14px;
    padding:10px 13px; outline:none; box-shadow:var(--neu-sunken-soft); font-weight:600;
  }
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px}
  .fld textarea{resize:vertical; min-height:74px}
  /* campos de una línea que crecen con el texto: nunca se recorta el título/nombre/motivo */
  .fld textarea.grow{resize:none; min-height:0; overflow:hidden; line-height:1.4; field-sizing:content}
  .fld-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  #drawer .foot{margin-top:auto; padding:16px 20px; display:flex; gap:12px}
  #scrim{position:fixed; inset:0; background:rgba(10,10,20,.35); z-index:50; opacity:0; pointer-events:none; transition:opacity .2s}
  #scrim.on{opacity:1; pointer-events:auto}

  /* ============ TOAST ============ */
  #toast{
    position:fixed; bottom:24px; left:50%; transform:translate(-50%,10px); z-index:60;
    background:var(--ink); color:var(--canvas); padding:10px 18px; border-radius:14px;
    font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:all .22s;
    box-shadow:4px 8px 24px rgba(0,0,0,.3);
  }
  #toast.on{opacity:1; transform:translate(-50%,0)}

  /* ============ MOBILE-FIRST SHELL ============ */
  #tabbar,#fab,#col-pills,.m-only{display:none}

  @media (max-width:860px){
    /* En móvil manda el scroll del DOCUMENTO (fiable en iOS), no paneles
     * internos con overflow: el shell deja de ser de altura fija y solo
     * la tab bar, el FAB y las hojas quedan fixed. */
    html,body{height:auto}
    body{overflow:auto; overflow-x:hidden}
    /* overflow-x:clip: iOS Safari ignora overflow-x:hidden en body para el
     * paneo horizontal; clip recorta sin crear contenedor de scroll (los
     * fixed y sticky siguen funcionando). Solo scroll vertical, como pediste. */
    #app{display:block; height:auto; min-height:100dvh; overflow-x:clip}
    #main{display:block; min-width:auto}
    #view{display:block; overflow:visible}
    .pane{overflow:visible}
    #side{display:none}

    #topbar{gap:10px; padding:16px 16px 6px}
    /* títulos de tarea a dos líneas en vez de «…» a una */
    .row-item .tx b{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3}
    /* accesos rápidos: reparten el ancho en vez de 80 px fijos */
    .quick{gap:6px; flex-wrap:nowrap}
    .qa{flex:1 1 0; width:auto; min-width:0}
    /* "Revisión semanal" es el título más largo: sin min-width:0 el flex
     * item nunca encoge por debajo de su contenido y empuja #m-actions
     * fuera de la pantalla (desborde horizontal en iPhone). */
    /* El tamaño sigue al ancho real del viewport: con Safari a zoom 125 %
     * un iPhone 16 Pro Max se queda en 352 px y «Revisión» salía «Rev…».
     * La elipsis se mantiene solo como último recurso. */
    #topbar h1{font-size:clamp(17px, 5vw, 22px); font-weight:800; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
    #topdate{display:none}
    .m-only{display:flex}
    #m-brand{align-items:center; flex:none}
    #m-brand .logo{width:32px; height:32px; border-radius:11px; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:var(--neu-accent)}
    /* cinco acciones: 36 px y 6 px de hueco dejan sitio al título */
    #m-actions{margin-left:auto; gap:6px; flex:none}
    #m-actions button{
      width:36px; height:36px; border-radius:50%; background:var(--surface);
      box-shadow:var(--neu-raised-sm); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink-2);
    }
    #m-actions button[aria-pressed="true"]{background:var(--pin); color:#fff; box-shadow:var(--neu-accent)}

    /* captura = hoja inferior abierta por el FAB */
    #capture{
      display:none; position:fixed; left:12px; right:12px; z-index:55;
      bottom:calc(92px + env(safe-area-inset-bottom));
      padding:14px 15px; box-shadow:var(--neu-raised); border-radius:20px;
    }
    body.capture-open #capture{display:flex}
    #capture kbd{display:none}

    /* tab bar: canal hundido, pestaña activa = píldora extruida (NEXO) */
    #tabbar{
      display:flex; position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom));
      z-index:45; gap:2px; align-items:stretch;
      background:var(--surface); box-shadow:var(--neu-sunken); border-radius:26px; padding:6px;
    }
    #tabbar button{
      position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
      padding:8px 2px 6px; border-radius:20px; font-size:10px; font-weight:800; color:var(--ink-3);
      background:var(--surface); box-shadow:none; transition:box-shadow .25s var(--ease), color .15s;
    }
    #tabbar button svg{width:20px; height:20px}
    #tabbar button[aria-current="true"]{box-shadow:var(--neu-raised-sm); color:var(--accent)}
    #tabbar button:active{transform:scale(.96)}
    #tabbar .tag.pro{position:absolute; top:2px; right:8px; font-size:8px; padding:1.5px 5px}

    #fab{
      display:flex; position:fixed; right:18px; z-index:46;
      bottom:calc(96px + env(safe-area-inset-bottom));
      width:56px; height:56px; border-radius:50%; align-items:center; justify-content:center;
      background:var(--accent); color:var(--accent-ink); box-shadow:var(--neu-accent);
      transition:transform .25s var(--ease);
    }
    #fab svg{width:24px; height:24px}
    body.capture-open #fab{transform:rotate(45deg)}

    /* kanban: una columna por pantalla + píldoras en canal hundido.
     * Las píldoras van sticky: siguen visibles (y siguen siendo destino de
     * arrastre) aunque la columna sea larga y se haya hecho scroll. */
    #col-pills{
      display:flex; gap:4px; margin:4px 16px 12px; padding:5px; overflow-x:auto; scrollbar-width:none;
      background:var(--surface); box-shadow:var(--neu-sunken-soft); border-radius:999px;
      position:sticky; top:8px; z-index:30;
    }
    #col-pills::-webkit-scrollbar{display:none}
    .cpill{
      flex:none; font-size:12px; font-weight:800; padding:6px 13px; border-radius:999px;
      color:var(--ink-3); background:var(--surface);
    }
    .cpill.on{box-shadow:var(--neu-raised-sm); color:var(--accent)}
    .cpill.dragover{background:var(--accent); color:var(--accent-ink); box-shadow:var(--neu-raised-sm)}
    #board-filtros{padding:0 16px 10px; gap:6px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
    #board-filtros::-webkit-scrollbar{display:none}
    .fchip{flex:none; font-size:12px; padding:7px 26px 7px 12px; max-width:160px}
    /* Limpiar va primero: en una fila desplazable, el último elemento es el
     * que queda fuera de pantalla, y este es el único que deshace el filtro */
    #filtros-clear{flex:none; font-size:12px; padding:7px 12px; order:-1}
    /* una sola columna a la vez: la píldora activa decide cuál se ve.
     * La columna crece con su contenido y desplaza el documento. */
    #board{display:block; padding:4px 16px calc(104px + env(safe-area-inset-bottom)); overflow-x:hidden}
    .col{display:none; width:100%}
    .col.m-active{display:flex; min-height:55vh}
    .col-body{overflow:visible; flex:none}
    .card{padding:13px 14px 12px}
    .card .t{font-size:14px}
    .ck{width:21px; height:21px}

    .pane{padding:4px 16px calc(112px + env(safe-area-inset-bottom))}
    .pane-inner{gap:18px}
    .kpis{grid-template-columns:repeat(3,1fr); gap:10px}
    .kpi{border-radius:18px; padding:12px 12px}
    .kpi .v{font-size:22px}
    .kpi .l{font-size:10px}
    .kpi .s{display:none}
    .today-grid{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr); gap:12px}
    .proj-grid{grid-template-columns:repeat(2,1fr); gap:10px}

    /* detalle como bottom sheet */
    #drawer{
      inset:auto 0 0 0; width:100%; max-height:88dvh;
      border-radius:24px 24px 0 0; transform:translateY(103%);
    }
    #drawer.open{transform:none}
    #drawer .foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

    .habit-row{grid-template-columns:1fr repeat(7,25px) 40px; gap:4px}
    .hcell{width:23px; height:23px; border-radius:8px}
    .hname{font-size:13px} .hname small{font-size:11px}
  }

  /* ============================================================
     AMBITO + HABITOS V2
     Todo con el material existente: mismo fondo --surface, forma
     solo con sombras, radios generosos, cero bordes.
     ============================================================ */

  /* ---- control segmentado (patrón de la tab bar móvil) ---- */
  .seg{
    display:flex; gap:2px; padding:5px; border-radius:999px;
    background:var(--surface); box-shadow:var(--neu-sunken-soft);
  }
  .seg button{
    flex:1 1 0; min-width:0; padding:8px 6px; border-radius:999px;
    font-size:12.5px; font-weight:800; color:var(--ink-3); background:var(--surface);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:box-shadow .25s var(--ease), color .15s;
  }
  .seg button:hover{color:var(--ink-2)}
  .seg button[aria-checked="true"],
  .seg button[aria-pressed="true"]{box-shadow:var(--neu-raised-sm); color:var(--accent)}
  .seg button:active{transform:scale(.96)}
  .seg.dias button{padding:8px 0; font-size:12px; letter-spacing:.02em}

  /* ---- alta de equipo en línea (nada de prompt) ---- */
  .newteam{
    background:var(--surface); box-shadow:var(--neu-sunken-soft);
    border-radius:18px; padding:14px; margin-top:12px;
    display:flex; flex-direction:column; gap:12px;
  }
  .newteam .btn{align-self:flex-start; padding:9px 18px; font-size:13px}
  #f-equipo-wrap{display:flex; flex-direction:column; gap:0}
  #f-reparto-wrap{margin-top:14px}
  .rep-row{display:flex; align-items:center; gap:10px; padding:5px 0}
  .rep-n{
    flex:0 0 84px; font-size:12.5px; font-weight:800; color:var(--ink-2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .rep-q{
    flex:1; min-width:0; background:var(--surface); border:none; border-radius:13px;
    padding:9px 12px; outline:none; box-shadow:var(--neu-sunken-soft); font-weight:600; font-size:13px;
  }
  .rep-q:focus{outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px}
  .rep-vacio{font-size:12.5px; color:var(--ink-3); font-weight:600; padding:4px 0}
  .tag.scope{background:var(--tint); color:var(--ink-2)}

  /* ---- hábitos: día no programado ---- */
  .hcell.libre{opacity:.25; box-shadow:none; cursor:default}
  .habit-row{grid-template-columns:1fr repeat(7,34px) 46px 30px}
  .hmore{
    width:26px; height:26px; margin-left:auto; border-radius:50%;
    background:var(--surface); box-shadow:var(--neu-raised-sm); color:var(--ink-3);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:800; line-height:1;
    transition:box-shadow .25s var(--ease), transform .25s var(--ease), color .15s;
  }
  .hmore:hover{color:var(--accent)}
  /* ---- ordenar hábitos y rutinas (▲▼) ---- */
  .ord{display:inline-flex; flex-direction:column; gap:2px; flex:none; align-self:center}
  .ord button{
    width:20px; height:15px; font-size:9px; line-height:1; border-radius:6px; color:var(--ink-3);
    background:var(--surface); box-shadow:var(--neu-raised-sm); display:flex; align-items:center; justify-content:center;
  }
  .ord button:hover{color:var(--accent)}
  .ord button:disabled{opacity:.25; box-shadow:none; cursor:default}
  .hname{display:flex; align-items:center; gap:8px; min-width:0}
  .hname > span{min-width:0}
  .rut-li{display:flex; align-items:center; gap:8px}
  .rut-li + .rut-li{box-shadow:0 -1px 0 rgba(var(--nd),.35)}
  .rut-li .rut-row{flex:1 1 auto; min-width:0}

  /* ---- panel Cumplimiento ---- */
  .cump-top{display:flex; align-items:center; gap:14px; padding:2px 0 14px}
  .cump-kpi{
    font-family:"Sora","Manrope",sans-serif; font-size:38px; font-weight:800;
    line-height:1; color:var(--accent); font-variant-numeric:tabular-nums;
  }
  .cump-lbl{font-size:11.5px; font-weight:700; color:var(--ink-3); line-height:1.3}
  .cbar{display:flex; align-items:center; gap:10px; padding:4px 0}
  .cb-l{flex:0 0 44px; font-size:11px; font-weight:800; color:var(--ink-3); text-align:right}
  .cb-t{flex:1; min-width:0; height:10px; border-radius:10px; display:block}
  .cb-p{flex:0 0 38px; font-size:11.5px; font-weight:600; color:var(--ink-2); text-align:right}

  /* ---- hoja de hábito: mismo patrón que #drawer ---- */
  #hsheet{
    position:fixed; inset:0 0 0 auto; width:min(400px,100%); background:var(--surface);
    box-shadow:var(--neu-raised); z-index:57;
    transform:translateX(103%); transition:transform .25s var(--ease);
    display:flex; flex-direction:column;
  }
  #hsheet.open{transform:none}
  #hsheet header{display:flex; align-items:center; padding:18px 20px 8px; gap:10px}
  #hsheet header h2{font-size:14px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.08em}
  #hsheet .x{
    margin-left:auto; color:var(--ink-3); width:34px; height:34px; border-radius:50%;
    background:var(--surface); box-shadow:var(--neu-raised-sm);
    display:flex; align-items:center; justify-content:center;
  }
  #hsheet .body{padding:8px 20px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:15px}
  #hsheet .foot{margin-top:auto; padding:16px 20px; display:flex; gap:12px}
  .hs-lbl{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
  .hs-lbl2{font-size:11px; font-weight:700; color:var(--ink-3); margin:14px 0 8px}
  #hs-hist{display:block}

  /* ---- rutinas ---- */
  .rut-seg{max-width:320px; margin-bottom:2px}
  #hab-wrap,#rut-wrap{display:flex; flex-direction:column; gap:22px}
  .rut-h .fchip{margin-left:auto}
  .rut-row{
    display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; gap:10px; align-items:center;
    width:100%; padding:11px 2px; text-align:left;
  }
  .rut-nm{font-weight:800; font-size:13.5px; min-width:0}
  .rut-nm small{display:block; font-weight:600; font-size:11.5px; color:var(--ink-3)}
  .rut-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0}
  .rut-freq{font-size:11.5px; font-weight:700; color:var(--ink-3)}
  .rut-prox{font-family:"Spline Sans Mono",monospace; font-size:11.5px; color:var(--ink-3); white-space:nowrap}
  .rut-prox.hoy{color:var(--accent); font-weight:700}
  .rut-item .tt small{display:block; font-weight:600; font-size:11px; color:var(--ink-3)}
  .ck-note{
    width:36px; height:36px; border-radius:50%; flex:none; font-size:15px;
    background:var(--surface); box-shadow:var(--neu-sunken-soft); opacity:.6;
    display:flex; align-items:center; justify-content:center;
  }
  .ck-note.has{opacity:1; box-shadow:var(--neu-raised-sm)}
  .dias-grid{display:grid; grid-template-columns:repeat(10,1fr); gap:5px}
  .dias-grid.q{grid-template-columns:repeat(5,1fr)}
  .dias-grid button{
    aspect-ratio:1; border-radius:10px; font-size:12.5px; font-weight:800; color:var(--ink-3);
    background:var(--surface); box-shadow:var(--neu-sunken-soft);
  }
  .dias-grid button[aria-pressed="true"]{color:var(--accent); box-shadow:var(--neu-raised-sm)}
  .rs-hint{font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:8px; line-height:1.4}
  .rs-info,.cs-que{font-size:12.5px; color:var(--ink-3); font-weight:600}
  /* solo el botón recibe toques: el toast entero seguiría tapando el pie de
   * las hojas móviles (Guardar/Eliminar) durante los avisos de validación */
  #toast .toast-b{
    pointer-events:auto; margin-left:10px; padding:7px 12px; border-radius:999px; font-weight:800; font-size:12px;
    background:var(--canvas); color:var(--ink);
  }
  /* hojas de rutina, de cierre y de cuenta: mismo patrón que #hsheet */
  #rsheet,#csheet,#usheet{
    position:fixed; inset:0 0 0 auto; width:min(400px,100%); background:var(--surface);
    box-shadow:var(--neu-raised); z-index:57;
    transform:translateX(103%); transition:transform .25s var(--ease);
    display:flex; flex-direction:column;
  }
  #csheet{z-index:58}
  #usheet{z-index:59}
  #rsheet.open,#csheet.open,#usheet.open{transform:none}
  #rsheet header,#csheet header,#usheet header{display:flex; align-items:center; padding:18px 20px 8px; gap:10px}
  #rsheet header h2,#csheet header h2,#usheet header h2{font-size:14px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.08em}
  #rsheet .x,#csheet .x,#usheet .x{
    margin-left:auto; color:var(--ink-3); width:34px; height:34px; border-radius:50%;
    background:var(--surface); box-shadow:var(--neu-raised-sm);
    display:flex; align-items:center; justify-content:center;
  }
  #rsheet .body,#csheet .body,#usheet .body{padding:8px 20px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:15px}
  #rsheet .foot,#csheet .foot,#usheet .foot{margin-top:auto; padding:16px 20px; display:flex; gap:12px}
  /* ---- cuenta: pestañas Entrar/Crear, avisos y estado del plan ---- */
  #us-anon .btn,#us-anon .verlink{width:100%; justify-content:center}
  #us-tabs{margin-bottom:2px}
  .us-msg{font-size:12.5px; font-weight:600; color:var(--ink-3); line-height:1.45}
  .us-err{color:var(--crit)}
  .us-correo{font-weight:700; font-size:13.5px}
  #us-dentro .btn{width:100%; justify-content:center}
  #us-plan{font-size:13px; font-weight:700; color:var(--ink-2)}
  /* estado de la sincronización en la nube (ver js/sync.js) */
  .us-sync{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .us-sync .verlink{margin:0; padding:2px 4px; font-size:12.5px; font-weight:800; color:var(--accent)}
  .hs-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px}
  .hs-stat{border-radius:16px; padding:11px 12px; background:var(--surface); box-shadow:var(--neu-raised-sm)}
  .hs-stat .v{font-family:"Spline Sans Mono",monospace; font-size:18px; font-weight:600; line-height:1.15}
  .hs-stat .l{font-size:10.5px; font-weight:700; color:var(--ink-3); margin-top:2px}

  /* heatmap: 12 semanas × 7 días, cabe de sobra en 390px */
  #hs-heat{
    display:flex; flex-direction:column; gap:4px; padding:12px 13px;
    background:var(--surface); box-shadow:var(--neu-sunken-soft); border-radius:18px;
  }
  .hm-row{display:grid; grid-template-columns:26px repeat(7,1fr); gap:4px; align-items:center}
  .hm-m{font-size:9.5px; font-weight:800; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
  .hm{height:14px; border-radius:5px; background:var(--surface)}
  .hm.no{box-shadow:var(--neu-sunken-soft)}
  .hm.ok{background:var(--good); box-shadow:var(--neu-accent)}
  .hm.libre{opacity:.2; box-shadow:var(--neu-sunken-soft)}
  .hm.futuro{visibility:hidden}
  .hs-leg{display:flex; gap:14px; margin-top:10px; font-size:11px; font-weight:700; color:var(--ink-3)}
  .hs-leg span{display:inline-flex; align-items:center; gap:5px}
  .hs-leg .lg{width:11px; height:11px; border-radius:4px; background:var(--surface); display:inline-block}
  .hs-leg .lg.done{background:var(--good); box-shadow:var(--neu-accent)}
  .hs-leg .lg.miss{box-shadow:var(--neu-sunken-soft)}
  .hs-leg .lg.off{opacity:.2; box-shadow:var(--neu-sunken-soft)}

  @media (max-width:860px){
    .seg{padding:4px}
    .seg button{padding:9px 4px; font-size:12px}
    .seg.dias button{font-size:12.5px}
    .rep-n{flex-basis:70px}
    /* la fila de hábitos tiene ahora una columna más: se aprieta el paso */
    .habit-row{grid-template-columns:minmax(0,1fr) repeat(7,24px) 38px 24px; gap:3px}
    .habit-row.hdr{letter-spacing:.03em} /* «RACHA» no cabía en 34 px */
    .hcell{width:22px; height:22px; border-radius:8px}
    .hmore{width:24px; height:24px; font-size:14px}
    .streak{font-size:11.5px}
    .cump-kpi{font-size:32px}
    .cb-l{flex-basis:38px; font-size:10.5px}
    .cb-p{flex-basis:34px; font-size:11px}
    #hs-heat{padding:10px}
    .hm{height:13px}
    .hm-row{grid-template-columns:24px repeat(7,1fr); gap:3px}
    #hsheet{
      inset:auto 0 0 0; width:100%; max-height:88dvh;
      border-radius:24px 24px 0 0; transform:translateY(103%);
    }
    #hsheet.open{transform:none}
    #hsheet .foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
    #rsheet,#csheet,#usheet{
      inset:auto 0 0 0; width:100%; max-height:88dvh;
      border-radius:24px 24px 0 0; transform:translateY(103%);
    }
    #rsheet.open,#csheet.open,#usheet.open{transform:none}
    #rsheet .foot,#csheet .foot,#usheet .foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
    .rut-row{grid-template-columns:minmax(0,1fr) auto; gap:6px 10px}
    .rut-row .rut-meta{grid-column:1 / -1}
    .dias-grid{grid-template-columns:repeat(6,1fr)}
    .rut-h{flex-wrap:wrap}
  }

  /* ============ NAVEGABILIDAD CON HOJAS ABIERTAS ============ */
  /* Con el detalle, la hoja de hábito o la captura abiertos, el fondo no
   * se desplaza: evita el salto de scroll de iOS al abrir un panel. */
  @media (max-width:860px){
    body.sheet-open{overflow:hidden}
  }

  /* ============================================================
     GESTOR DE EQUIPOS
     Mismo material que el resto: fondo --surface, forma solo con
     sombras, radios generosos, cero bordes. Las personas se
     escriben SIEMPRE en casillas individuales (nunca por comas).
     ============================================================ */

  /* ---- lista de casillas: una persona por fila ---- */
  .pers-list{display:flex; flex-direction:column; gap:8px}
  .pers-row{display:flex; align-items:center; gap:8px}
  .pers-row .pers-i{
    flex:1 1 auto; width:auto; min-width:0;
    background:var(--surface); border:none; border-radius:14px;
    padding:10px 13px; outline:none; box-shadow:var(--neu-sunken-soft);
    color:var(--ink); font-weight:600; font-size:13.5px; font-family:inherit;
  }
  .pers-row .pers-i:focus{
    outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px;
  }
  .pers-x{
    flex:none; width:32px; height:32px; border-radius:50%;
    background:var(--surface); box-shadow:var(--neu-raised-sm); color:var(--ink-3);
    display:flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:800; line-height:1;
    transition:box-shadow .25s var(--ease), transform .25s var(--ease), color .15s;
  }
  .pers-x:hover{color:var(--crit)}
  .addp{
    align-self:flex-start; margin-top:10px; padding:8px 15px; border-radius:999px;
    background:var(--surface); box-shadow:var(--neu-raised-sm); color:var(--ink-2);
    font-size:12.5px; font-weight:700; line-height:1.2;
    transition:box-shadow .25s var(--ease), transform .25s var(--ease), color .15s;
  }
  .addp:hover{color:var(--accent)}

  /* ---- reparto: fila de persona nueva (nombre + qué le toca) ---- */
  .rep-row.nueva{gap:8px}
  .rep-row .rep-nm{
    flex:0 0 96px; width:auto; min-width:0;
    background:var(--surface); border:none; border-radius:13px;
    padding:9px 11px; outline:none; box-shadow:var(--neu-sunken-soft);
    color:var(--ink); font-weight:800; font-size:12.5px; font-family:inherit;
  }
  .rep-row .rep-nm:focus{
    outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px;
  }

  /* ---- equipos en Inicio y en la barra lateral ---- */
  .team-ic{flex:none; font-size:13px; line-height:1}
  .team-card{display:block; width:100%}
  .team-card .st{
    line-height:1.4; overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .team-card .st.n{margin-top:6px; color:var(--accent); font-weight:800; -webkit-line-clamp:1}
  .team-empty{
    grid-column:1 / -1; border-radius:18px; padding:14px 16px;
    background:var(--surface); box-shadow:var(--neu-sunken-soft);
    font-size:12.5px; font-weight:600; color:var(--ink-3); line-height:1.45;
  }
  .team-item .team-nm,
  .team-add .team-nm{
    flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .team-add{color:var(--ink-3)}
  .team-add:hover{color:var(--accent)}

  /* ---- hoja de equipo: mismo patrón que #hsheet ---- */
  #tsheet{
    position:fixed; inset:0 0 0 auto; width:min(400px,100%); background:var(--surface);
    box-shadow:var(--neu-raised); z-index:58;
    transform:translateX(103%); transition:transform .25s var(--ease);
    display:flex; flex-direction:column;
  }
  #tsheet.open{transform:none}
  #tsheet header{display:flex; align-items:center; padding:18px 20px 8px; gap:10px}
  #tsheet header h2{font-size:14px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.08em}
  #tsheet .x{
    margin-left:auto; color:var(--ink-3); width:34px; height:34px; border-radius:50%;
    background:var(--surface); box-shadow:var(--neu-raised-sm);
    display:flex; align-items:center; justify-content:center;
  }
  #tsheet .body{padding:8px 20px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:15px}
  #tsheet .foot{margin-top:auto; padding:16px 20px; display:flex; gap:12px}
  .ts-info{
    border-radius:16px; padding:12px 14px;
    background:var(--surface); box-shadow:var(--neu-sunken-soft);
    font-size:12.5px; font-weight:600; color:var(--ink-3); line-height:1.45;
  }

  @media (max-width:860px){
    #tsheet{
      inset:auto 0 0 0; width:100%; max-height:88dvh;
      border-radius:24px 24px 0 0; transform:translateY(103%);
    }
    #tsheet.open{transform:none}
    #tsheet .foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
    /* en móvil los controles suben a 16px (anti-zoom de iOS): la casilla de
     * nombre necesita algo más de sitio para no comerse el placeholder */
    .rep-row .rep-nm{flex-basis:100px; padding:9px 8px}
    .pers-row .pers-i{font-size:13px}
  }


  /* ==========================================================================
     PANTALLAS GRANDES
     Los anchos de la app estaban pensados para un portátil: a partir de 1400 px
     dejaban una franja muerta a los lados. Aquí crece por escalones, y a partir
     de 1560 px la vista Inicio se reparte en dos columnas en vez de estirar
     líneas de texto imposibles de leer.
     ========================================================================== */
  @media (min-width:1400px){
    #app{grid-template-columns:252px 1fr}
    #topbar{padding:20px 32px 14px}
    #capture{max-width:760px}
    #view{--pad-x:32px}
    .pane{padding-left:0; padding-right:0}
    .pane-inner{max-width:1180px; gap:24px; margin-inline:auto; width:100%}
    #pane-hoy .pane-inner{max-width:1180px}
    #pane-revision .pane-inner{max-width:1000px}
    #pane-habitos .panel{max-width:none}
    #pane-habitos .pane-inner{max-width:1180px}
    .today-grid{grid-template-columns:minmax(0,1fr) 340px; gap:24px}
    .proj-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:16px}
    /* las columnas del tablero reparten el ancho en vez de dejarlo vacío */
    #board{gap:20px; padding:12px 32px 28px}
    .col{flex:1 1 270px; min-width:250px; max-width:400px}
  }

  @media (min-width:1560px){
    /* Inicio a dos columnas: encabezado y accesos ocupan el ancho completo,
     * y los paneles se emparejan por filas */
    #pane-inicio .pane-inner{
      display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
      align-content:start; column-gap:24px;
    }
    #pane-inicio .pane-inner > .hero,
    #pane-inicio .pane-inner > .kpis,
    #pane-inicio .pane-inner > .quick{grid-column:1 / -1}
    /* Hábitos: la semana y el cumplimiento, uno al lado del otro */
    #pane-habitos .pane-inner{
      display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
      align-items:start; column-gap:24px;
    }
  }

  @media (min-width:1760px){
    #app{grid-template-columns:276px 1fr}
    #topbar{padding:24px 40px 16px}
    #topbar h1{font-size:23px}
    #board{gap:24px; padding:14px 40px 32px}
    .col{flex:1 1 300px; max-width:440px}
    .pane-inner,
    #pane-hoy .pane-inner,
    #pane-habitos .pane-inner{max-width:1500px}
    #pane-revision .pane-inner{max-width:1160px}
    .today-grid{grid-template-columns:minmax(0,1fr) 380px}
    .kpis{gap:20px}
    .kpi{padding:20px 22px}
    .kpi .v{font-size:34px}
    .kpi .l{font-size:12.5px}
    .kpi .s{font-size:12.5px}
    .hero h2{font-size:28px}
    .panel-h h2{font-size:16.5px}
    .card .t{font-size:14.5px}
    .today-item .tt,
    .row-item .tt{font-size:14.5px}
    .proj-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
    .f-dial{width:154px}
    #focus .time{font-size:33px}
  }

  @media (min-width:2100px){
    /* Por encima de 2100 px seguir estirando volvería ilegible el texto: el
     * contenido se topa aquí y se centra, y solo el tablero sigue creciendo. */
    #app{grid-template-columns:300px 1fr}
    .pane-inner,
    #pane-hoy .pane-inner,
    #pane-habitos .pane-inner{max-width:1900px}
    #pane-revision .pane-inner{max-width:1320px}
    #pane-inicio .pane-inner{grid-template-columns:repeat(3, minmax(0,1fr))}
    #pane-inicio .pane-inner > .hero,
    #pane-inicio .pane-inner > .kpis,
    #pane-inicio .pane-inner > .quick{grid-column:1 / -1}
    .col{flex:1 1 320px; max-width:500px}
    #board{padding:16px 48px 36px}
    #topbar{padding:26px 48px 18px}
  }


  /* ==========================================================================
     CAPTURA CON DOS DESTINOS Y HOJA DE PROYECTO
     ========================================================================== */
  .cap-seg{display:flex; gap:3px; flex:none; padding:3px; border-radius:999px; box-shadow:var(--neu-sunken-soft)}
  .cap-seg button{
    padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:800;
    color:var(--ink-3); background:transparent; white-space:nowrap;
  }
  .cap-seg button[aria-pressed="true"]{color:var(--accent); background:var(--surface); box-shadow:var(--neu-raised-sm)}

  .pt-row{padding:11px 0; box-shadow:0 -1px 0 rgba(var(--nd),.3)}
  .pt-row:first-child{box-shadow:none; padding-top:2px}
  .pt-top{display:flex; align-items:center; gap:8px}
  .pt-n{
    flex:none; width:22px; font-family:"Spline Sans Mono",monospace; font-size:11px;
    color:var(--accent); font-weight:700;
  }
  .pt-top input{
    flex:1; min-width:0; padding:9px 12px; border-radius:12px; font-size:13px;
    background:var(--surface); color:var(--ink); box-shadow:var(--neu-sunken-soft);
  }
  .pt-sub{display:flex; gap:6px; margin:7px 0 0 30px}
  .pt-sub select, .pt-sub input{
    flex:1; min-width:0; padding:8px 9px; border-radius:11px; font-size:12px;
    background:var(--surface); color:var(--ink-2); box-shadow:var(--neu-sunken-soft);
  }
  .tag.proy{background:var(--surface); color:var(--ink-2); box-shadow:var(--neu-raised-sm)}
  .proy-item .count{font-family:"Spline Sans Mono",monospace}

  /* ---- hoja de proyecto: mismo patrón que #hsheet ---- */
  #psheet{
    position:fixed; inset:0 0 0 auto; width:min(440px,100%); background:var(--surface);
    box-shadow:var(--neu-raised); z-index:57;
    transform:translateX(103%); transition:transform .25s var(--ease);
    display:flex; flex-direction:column;
  }
  #psheet.open{transform:none}
  #psheet header{display:flex; align-items:center; padding:18px 20px 8px; gap:10px}
  #psheet header h2{font-size:14px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.08em}
  #psheet .x{
    margin-left:auto; color:var(--ink-3); width:34px; height:34px; border-radius:50%;
    background:var(--surface); box-shadow:var(--neu-raised-sm);
    display:flex; align-items:center; justify-content:center;
  }
  #psheet .body{padding:8px 20px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:15px}
  #psheet .foot{margin-top:auto; padding:16px 20px; display:flex; gap:12px}

  @media (max-width:860px){
    #psheet{
      inset:auto 0 0 0; width:100%; max-height:88dvh;
      border-radius:24px 24px 0 0; transform:translateY(103%);
    }
    #psheet.open{transform:none}
    #psheet .foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
    .pt-sub{flex-wrap:wrap; margin-left:0}
    .cap-seg button{padding:8px 10px}
  }


  /* ==========================================================================
     HISTÓRICO DE CUMPLIMIENTO
     ========================================================================== */
  .rv-seg{max-width:340px; margin:4px 0 14px}
  .rv-met{margin-top:18px}
  .rv-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
  .rv-k{padding:12px 13px; border-radius:16px; box-shadow:var(--neu-raised-sm); background:var(--surface)}
  .rv-k .l{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
  .rv-k .v{
    font-family:"Spline Sans Mono",monospace; font-size:25px; font-weight:600;
    line-height:1.1; margin-top:7px; font-variant-numeric:tabular-nums;
  }
  .rv-k .d{font-size:11.5px; font-weight:700; margin-top:4px; color:var(--ink-3)}
  .rv-k .d.up{color:var(--good)}
  .rv-k .d.dn{color:var(--crit)}

  .rv-chart{display:flex; align-items:flex-end; gap:5px; height:132px; padding:16px 0 26px}
  .rv-col{
    flex:1; min-width:0; position:relative; display:flex; flex-direction:column;
    justify-content:flex-end; height:100%; cursor:default;
  }
  .rv-col i{
    display:block; border-radius:5px 5px 2px 2px; min-height:2px;
    background:var(--accent); opacity:.55; transition:opacity .15s;
  }
  .rv-col:hover i{opacity:.9}
  .rv-col.now i{opacity:1; box-shadow:0 0 0 1px var(--surface), 0 0 12px -3px var(--accent)}
  .rv-col.nulo i{background:var(--ink-3); opacity:.22}
  .rv-col b{
    position:absolute; top:-15px; left:0; right:0; text-align:center;
    font-family:"Spline Sans Mono",monospace; font-size:10px; font-weight:600;
    color:var(--ink-3); white-space:nowrap;
  }
  .rv-col.now b{color:var(--accent)}
  .rv-col span{
    position:absolute; bottom:-22px; left:0; right:0; text-align:center;
    font-family:"Spline Sans Mono",monospace; font-size:9.5px; color:var(--ink-3);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  .rv-tab{margin-top:8px}
  .rv-row{
    display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); /* periodo + 4 métricas */
    gap:8px; padding:9px 4px; align-items:center; font-size:12.5px;
  }
  .rv-row + .rv-row{box-shadow:0 -1px 0 rgba(var(--nd),.35)}
  .rv-row.hdr{
    font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    color:var(--ink-3); padding-bottom:6px;
  }
  .rv-row.hdr + .rv-row{box-shadow:none}
  .rv-row.now{color:var(--accent); font-weight:700}
  .rv-row .p{font-weight:700}
  .rv-row .n{
    text-align:right; font-family:"Spline Sans Mono",monospace;
    font-variant-numeric:tabular-nums; color:var(--ink-2);
  }
  .rv-row.now .n{color:var(--accent)}
  .rv-row .n.vacio{color:var(--ink-3); opacity:.6}
  .rv-vacio{padding:18px 4px; font-size:12.5px; color:var(--ink-3); font-weight:600}

  @media (max-width:860px){
    .rv-kpis{grid-template-columns:1fr; gap:8px}
    .rv-k{display:flex; align-items:baseline; gap:10px; padding:11px 13px}
    .rv-k .v{margin-top:0; font-size:21px}
    .rv-k .d{margin-top:0; margin-left:auto}
    .rv-chart{height:108px; gap:3px}
    .rv-row{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr)); font-size:11.5px; gap:4px}
  }


  /* ==========================================================================
     TABLERO EN PORTÁTIL
     Con las columnas clavadas a 270 px, cinco columnas + riel + huecos pedían
     más de 1700 px: en un portátil de 1366 la última quedaba fuera. Entre
     1100 y 1400 px se reparten el ancho en vez de desbordarse.
     ========================================================================== */
  @media (min-width:1100px) and (max-width:1399px){
    #app{grid-template-columns:206px 1fr}
    #topbar{padding:16px 18px 10px}
    #board{gap:12px; padding:10px 18px 22px; overflow-x:hidden}
    .col{flex:1 1 0; min-width:0}
    .card .t{font-size:13px}
    .card .meta{gap:5px}
  }

  /* Por debajo de 1100 px cinco columnas no caben sin volverse ilegibles:
     ahí sí tiene sentido desplazarse, pero con columnas más estrechas. */
  @media (min-width:861px) and (max-width:1099px){
    #app{grid-template-columns:206px 1fr}
    #board{gap:12px; padding:10px 16px 22px}
    .col{flex:0 0 218px}
  }


  /* ==========================================================================
     HOJA DE ÁREA
     ========================================================================== */
  #asheet{
    position:fixed; inset:0 0 0 auto; width:min(400px,100%); background:var(--surface);
    box-shadow:var(--neu-raised); z-index:57;
    transform:translateX(103%); transition:transform .25s var(--ease);
    display:flex; flex-direction:column;
  }
  #asheet.open{transform:none}
  #asheet header{display:flex; align-items:center; padding:18px 20px 8px; gap:10px}
  #asheet header h2{font-size:14px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.08em}
  #asheet .x{
    margin-left:auto; color:var(--ink-3); width:34px; height:34px; border-radius:50%;
    background:var(--surface); box-shadow:var(--neu-raised-sm);
    display:flex; align-items:center; justify-content:center;
  }
  #asheet .body{padding:8px 20px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:15px}
  #asheet .foot{margin-top:auto; padding:16px 20px; display:flex; gap:12px}

  .as-colors{display:grid; grid-template-columns:repeat(6,1fr); gap:9px}
  .as-colors button{
    aspect-ratio:1; border-radius:12px; box-shadow:var(--neu-raised-sm);
    position:relative; display:block; width:100%;
  }
  .as-colors button::after{
    content:""; position:absolute; inset:0; border-radius:12px;
    box-shadow:inset 0 0 0 0 var(--surface); transition:box-shadow .15s;
  }
  .as-colors button[aria-checked="true"]::after{box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 5px currentColor}
  .as-colors button:active{transform:scale(.93)}

  @media (max-width:860px){
    #asheet{
      inset:auto 0 0 0; width:100%; max-height:88dvh;
      border-radius:24px 24px 0 0; transform:translateY(103%);
    }
    #asheet.open{transform:none}
    #asheet .foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  }


  /* ==========================================================================
     DESTINO AL CAPTURAR Y ACCIONES DEL RIEL
     ========================================================================== */
  #cap-dest{
    flex:none; max-width:170px; padding:7px 9px; border-radius:12px; font-size:12px;
    font-weight:700; color:var(--ink-2); background:var(--surface);
    box-shadow:var(--neu-sunken-soft); cursor:pointer;
  }
  #cap-dest:focus{outline:none; box-shadow:var(--neu-pressed)}
  body.cap-proy #cap-dest{display:none}

  .nav-acts{display:flex; gap:6px; margin-top:2px}
  .nav-acts button{
    flex:1; min-width:0; padding:9px 8px; border-radius:12px; font-size:11.5px;
    font-weight:800; color:var(--ink-3); background:var(--surface);
    box-shadow:var(--neu-raised-sm); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }
  .nav-acts button:hover:not(:disabled){color:var(--accent)}
  .nav-acts button:disabled{opacity:.4; box-shadow:var(--neu-sunken-soft); cursor:default}

  @media (max-width:860px){
    /* el campo se lleva su propia línea y el destino queda debajo, a lo ancho:
     * con todo en una fila el texto se quedaba en 57 px */
    #capture{flex-wrap:wrap; row-gap:9px}
    #capture #capture-input{flex:1 1 100%; order:-1; min-width:0}
    #cap-dest{max-width:none; flex:1 1 auto}
    .cap-seg{flex:0 0 auto}
  }


  .ver-app{
    margin:4px 0 0; text-align:center; font-size:11px; font-weight:600;
    color:var(--ink-3); font-family:"Spline Sans Mono",monospace; letter-spacing:.06em;
  }

  /* ================================================================
     AVISO DE EJEMPLOS · GUÍA · BUSCADOR  (6 sep 2026)
     ================================================================ */

  /* ---- botón Buscar de la cabecera (escritorio) ---- */
  #btn-buscar{
    display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:16px; flex:none;
    background:var(--surface); box-shadow:var(--neu-raised-sm); color:var(--ink-2); font-weight:700; font-size:13px;
  }
  #btn-buscar:hover{color:var(--accent)}
  #btn-buscar kbd{
    font-family:"Spline Sans Mono",monospace; font-size:10px; color:var(--ink-3); font-weight:600;
    background:var(--tint); border-radius:6px; padding:2px 6px; white-space:nowrap;
  }

  /* ---- aviso «Estás viendo datos de ejemplo» ---- */
  .demo-banner .panel-b{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; padding:16px 18px}
  .demo-banner .db-tx{flex:1 1 260px; min-width:0}
  .demo-banner .db-tx b{display:block; font-size:14.5px; font-weight:800}
  .demo-banner .db-tx span{display:block; font-size:12.5px; color:var(--ink-2); font-weight:600; margin-top:3px; line-height:1.4}
  .demo-banner .db-acts{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
  .demo-banner .db-acts .btn{padding:9px 16px; font-size:13px}
  .demo-banner .verlink{font-size:12.5px; font-weight:800; color:var(--accent); padding:4px 2px}
  .bk-acts{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

  /* ---- GUÍA ---- */
  #pane-guia .pane-inner{max-width:880px}
  .g-search{
    display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:18px;
    background:var(--surface); box-shadow:var(--neu-sunken-soft); color:var(--ink-3);
  }
  .g-search:focus-within{outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:2px}
  .g-search input{flex:1; min-width:0; border:none; background:none; outline:none; color:var(--ink)}
  .g-search input::placeholder{color:var(--ink-3)}
  .g-search input::-webkit-search-cancel-button{-webkit-appearance:none}
  .g-tabs{display:flex; gap:8px; overflow-x:auto; padding:6px 4px 10px; scrollbar-width:none; -ms-overflow-style:none}
  .g-tabs::-webkit-scrollbar{display:none}
  .g-tab{
    flex:none; padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ink-2);
    background:var(--surface); box-shadow:var(--neu-raised-sm); white-space:nowrap;
  }
  .g-tab:hover{color:var(--accent)}
  .g-tab[aria-selected="true"]{color:var(--accent); box-shadow:var(--neu-pressed)}
  #g-body{display:flex; flex-direction:column; gap:20px}
  .g-intro{margin:0 4px; font-size:14.5px; line-height:1.55; color:var(--ink-2); font-weight:600}
  .g-block .panel-b{display:flex; flex-direction:column; gap:12px; font-size:13.5px; line-height:1.5; color:var(--ink-2)}
  .g-block p{margin:0}
  .g-block .g-sub{color:var(--ink-3); font-size:12.5px; font-weight:600; margin-top:-4px}
  .g-block b, .g-block h3{color:var(--ink)}
  .g-block h3{font-size:14.5px; font-weight:800; margin:0}
  .g-eyebrow{display:block; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:3px}
  .g-chip{
    display:inline-block; padding:1px 7px; border-radius:7px; background:var(--tint); color:var(--ink);
    font-size:12px; font-weight:700; white-space:nowrap; vertical-align:baseline;
  }
  .g-chip.tab{color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); background:transparent}
  .g-block kbd, .bq-foot kbd{
    display:inline-block; font-family:"Spline Sans Mono",monospace; font-size:11px; font-weight:600; color:var(--ink-2);
    padding:1px 6px; border-radius:6px; background:var(--surface); box-shadow:var(--neu-raised-sm); vertical-align:baseline;
  }
  .g-block code{font-family:"Spline Sans Mono",monospace; font-size:12px; color:var(--accent); background:var(--tint); padding:1px 5px; border-radius:5px}
  .g-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
  .g-steps li{display:flex; gap:10px; align-items:flex-start}
  .g-num{
    flex:none; width:22px; height:22px; border-radius:50%; margin-top:1px;
    background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--neu-accent);
  }
  .g-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
  .g-list li{position:relative; padding-left:16px}
  .g-list li::before{content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accent)}
  .g-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px}
  .g-card{padding:13px 14px; border-radius:16px; background:var(--surface); box-shadow:var(--neu-sunken-soft)}
  .g-card h3{font-size:14px; margin-bottom:4px}
  .g-card p{font-size:13px}
  .g-recipe{padding:14px 0 4px}
  .g-recipe + .g-recipe{box-shadow:0 -1px 0 rgba(var(--nd),.35); margin-top:6px; padding-top:18px}
  .g-recipe-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px}
  .g-recipe-head .g-show{flex:none; padding:8px 14px; font-size:12.5px; color:var(--accent)}
  .g-when,.g-result,.g-tip{font-size:13px}
  .g-when{margin-bottom:10px!important}
  .g-result{margin-top:10px!important}
  .g-result b{color:var(--good)}
  .g-tip b{color:var(--accent)}
  .g-faq{border-radius:14px; background:var(--surface); box-shadow:var(--neu-sunken-soft); padding:0 14px}
  .g-faq summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 0;
    font-weight:800; font-size:13.5px; color:var(--ink);
  }
  .g-faq summary::-webkit-details-marker{display:none}
  .g-faq summary .chev{margin-left:auto; color:var(--ink-3); font-size:18px; transition:transform .2s var(--ease)}
  .g-faq[open] summary .chev{transform:rotate(90deg)}
  .g-faq p{padding:0 0 13px; margin:0; font-size:13px}
  .g-hit{
    display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; padding:13px 16px;
    border-radius:16px; background:var(--surface); box-shadow:var(--neu-raised-sm);
  }
  .g-hit b{font-size:14px; color:var(--ink)}
  .g-hit > span:last-child{font-size:12.5px; color:var(--ink-2); line-height:1.4}
  .g-hit .g-eyebrow{margin:0}
  .g-count{margin:0 4px}
  .g-empty{margin:0 4px; color:var(--ink-3); font-size:13.5px; font-weight:600}
  mark{background:color-mix(in srgb, var(--accent) 22%, transparent); color:inherit; border-radius:3px; padding:0 1px}
  @keyframes g-flash{0%,60%{box-shadow:var(--neu-raised), 0 0 0 3px var(--accent)} 100%{box-shadow:var(--neu-raised)}}
  .g-flash{animation:g-flash 1.8s var(--ease)}

  /* ---- foco sobre un control real («Mostrar» de la guía) ---- */
  @keyframes spot-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)} 100%{box-shadow:0 0 0 14px transparent}}
  .spot-ring{
    position:fixed; z-index:95; pointer-events:none; border-radius:16px;
    border:3px solid var(--accent); animation:spot-pulse 1.1s ease-out infinite;
  }
  .spot-tag{
    position:fixed; z-index:96; pointer-events:none; transform:translate(-50%,-100%);
    background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:800; white-space:nowrap;
    padding:5px 11px; border-radius:999px; box-shadow:var(--neu-accent);
  }

  /* ---- BUSCADOR GLOBAL (paleta) ---- */
  #buscador{
    position:fixed; z-index:59; left:50%; top:9vh; transform:translate(-50%,-8px);
    width:min(640px, calc(100vw - 32px)); max-height:78vh;
    display:flex; flex-direction:column; background:var(--surface); border-radius:24px; box-shadow:var(--neu-raised);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s var(--ease), transform .22s var(--ease), visibility 0s .22s;
  }
  #buscador.open{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s}
  .bq-head{display:flex; align-items:center; gap:10px; padding:16px 16px 10px 20px; color:var(--ink-3)}
  .bq-head input{flex:1; min-width:0; border:none; background:none; outline:none; color:var(--ink); font-size:16px; font-weight:600}
  .bq-head input::placeholder{color:var(--ink-3); font-weight:500}
  .bq-head input::-webkit-search-cancel-button{-webkit-appearance:none}
  .bq-head .x{
    flex:none; width:34px; height:34px; border-radius:50%; color:var(--ink-3);
    background:var(--surface); box-shadow:var(--neu-raised-sm); display:flex; align-items:center; justify-content:center;
  }
  .bq-body{flex:1; min-height:0; overflow-y:auto; padding:4px 12px 12px; display:flex; flex-direction:column; gap:4px; overscroll-behavior:contain}
  .bq-grp{font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:12px 8px 4px}
  .bq-item{
    display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 10px; border-radius:14px;
    transition:box-shadow .15s var(--ease);
  }
  .bq-item .ic{
    width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--surface); box-shadow:var(--neu-sunken-soft); color:var(--ink-2); font-size:14px; font-weight:700;
  }
  .bq-item .tx{flex:1; min-width:0}
  .bq-item .tx b{display:block; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
  .bq-item .tx span{display:block; font-size:11.5px; color:var(--ink-3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .bq-item.done .tx b{text-decoration:line-through; color:var(--ink-2)}
  .bq-item[aria-selected="true"]{box-shadow:var(--neu-raised-sm)}
  .bq-item[aria-selected="true"] .tx b{color:var(--accent)}
  .bq-item .go{flex:none; color:var(--ink-3); font-size:16px; opacity:0}
  .bq-item[aria-selected="true"] .go{opacity:1}
  .bq-chips{display:flex; flex-wrap:wrap; gap:8px; padding:4px 8px 6px}
  .bq-chip{
    padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ink-2);
    background:var(--surface); box-shadow:var(--neu-raised-sm);
  }
  .bq-chip:hover{color:var(--accent)}
  .bq-empty{padding:18px 10px 12px; color:var(--ink-3); font-size:13.5px; font-weight:600}
  .bq-foot{
    flex:none; display:flex; gap:6px; align-items:center; padding:10px 20px 14px;
    font-size:11.5px; color:var(--ink-3); font-weight:600; box-shadow:0 -1px 0 rgba(var(--nd),.35);
  }

  @media (max-width:860px){
    #btn-buscar{display:none}
    #m-actions{gap:8px}
    #m-actions button{width:36px; height:36px}
    .demo-banner .db-acts{width:100%}
    .demo-banner .db-acts .btn{flex:1 1 auto; justify-content:center}
    .g-cards{grid-template-columns:1fr}
    .g-recipe-head{flex-direction:column; align-items:stretch}
    .g-recipe-head .g-show{align-self:flex-start}
    #buscador{
      left:0; top:0; transform:translateY(-8px); width:100%; max-height:none; height:100dvh;
      border-radius:0; padding-top:env(safe-area-inset-top);
    }
    #buscador.open{transform:none}
    .bq-head{padding:14px 12px 8px 16px}
    .bq-body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
    .bq-foot{display:none}
  }

  /* ============================================================
     PANTALLAS ESTRECHAS (<= 400 px: iPhone mini/SE o Safari con zoom)
     Nada del cromo fijo debe contraerse con «…»: el logo cede su sitio
     al título y las acciones se aprietan un punto más.
     ============================================================ */
  @media (max-width:400px){
    #topbar{padding:16px 14px 6px}
    #m-brand{display:none}
    /* hábitos: el nombre ocupa su propia línea y las casillas van debajo */
    .habit-row{grid-template-columns:repeat(7,1fr) 38px 24px; row-gap:4px}
    .habit-row .hname{grid-column:1 / -1}
    .habit-row.hdr > :first-child{display:none}
    .hcell{justify-self:center}
    /* selectores de 4 opciones (métrica de Revisión, frecuencia de rutina): 2×2 */
    .seg.rv-met, #rs-freq{display:grid; grid-template-columns:1fr 1fr; border-radius:22px}
    .seg.rv-met button, #rs-freq button{border-radius:16px}
    .rv-row.hdr{font-size:9.5px; letter-spacing:.02em}
  }
  @media (max-width:360px){
    #m-actions{gap:4px}
    #m-actions button{width:34px; height:34px; font-size:14px}
  }