/* ══════════════════════════════════════════════════════════
   IMPULSO · Layout y componentes de aplicación
   ══════════════════════════════════════════════════════════ */

*{ box-sizing: border-box; }
html,body{ height:100%; }

/* `hidden` debe ganar siempre: varias clases del sistema fijan
   display:flex/grid y eso anula la regla del navegador. */
[hidden]{ display:none !important; }
body{
  margin:0;
  background-color: var(--bg);
  background-image: var(--veil-page);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition: background .3s var(--ease), color .3s var(--ease);
}
h1,h2,h3,p{ margin:0; }
code{
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: .92em;
  background: var(--surface);
  border-radius: 6px; padding: 2px 6px;
  box-shadow: inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light);
}
.muted{ color: var(--text-2); font-size: 12.5px; }

.shell{
  display: grid;
  grid-template-columns: 246px 1fr;
  gap: var(--gap);
  height: 100vh;
  padding: var(--gap);
}

/* ─────────────── SIDEBAR ─────────────── */
.sidebar{
  display:flex; flex-direction:column; gap: 20px;
  padding: 22px 18px;
  overflow-y: auto;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{ font-size:16px; letter-spacing:-.01em; }
.brand-text span{ font-size:10.5px; color: var(--text-3); letter-spacing:.02em; }

.nav{ display:flex; flex-direction:column; gap:8px; }
.nav-btn{
  appearance:none; border:0; cursor:pointer; font:inherit;
  display:flex; align-items:center; gap:12px;
  padding: 11px 14px;
  font-size:13.5px; font-weight:600;
  color: var(--text-2);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: 4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light);
  transition: all .2s var(--ease);
}
.nav-btn .ico{ font-size:15px; }
.nav-btn:hover{ color: var(--text); }
.nav-btn.is-active{
  color: var(--accent-txt);
  box-shadow: inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light);
}

.side-card{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.side-card-title{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-3); }
.load-ring-wrap{ position:relative; width:130px; margin:0 auto; }
.load-ring{ width:130px; height:130px; transform: rotate(-90deg); }
.lr-bg{ fill:none; stroke: var(--sh-dark); stroke-width:11; opacity:.55; }
.lr-fg{
  fill:none; stroke: url(#ringGrad); stroke-width:11; stroke-linecap:round;
  stroke-dasharray: 314; stroke-dashoffset: 314;
  transition: stroke-dashoffset .6s var(--ease), stroke .3s var(--ease);
}
.load-ring-txt{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
}
.load-ring-txt b{ font-size:22px; letter-spacing:-.02em; }
.load-ring-txt span{ font-size:10.5px; color: var(--text-3); }
.load-legend{ font-size:11.5px; color: var(--text-2); text-align:center; }

.side-foot{ margin-top:auto; display:flex; gap:8px; }
.side-foot .neu-btn{ flex:1; }

/* ─────────────── MAIN ─────────────── */
.main{ display:flex; flex-direction:column; gap:12px; min-width:0; overflow:hidden; }

.topbar{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.date-nav{ display:flex; align-items:center; gap:6px; padding:8px 10px; }
.date-label{ display:flex; flex-direction:column; align-items:center; min-width:150px; line-height:1.2; }
.date-label b{ font-size:14.5px; letter-spacing:-.01em; }
.date-label span{ font-size:10.5px; color: var(--text-3); }

.quickadd{ flex:1; min-width:280px; display:flex; align-items:center; gap:10px; padding:7px 8px 7px 16px; border-radius: var(--r-lg); }
.qa-ico{ color: var(--text-3); font-size:15px; }
.quickadd input{ flex:1; box-shadow:none; background:transparent; padding:8px 0; }
.quickadd input:focus{ box-shadow:none; }
.topbar-actions{ display:flex; gap:8px; align-items:center; }

/* ─────────────── LOGO ───────────────
   El SVG se usa como máscara para que el vórtice tome el degradado
   del usuario en lugar de un color fijo. */
.logo{
  display:block; flex:0 0 auto;
  background: var(--grad);
  -webkit-mask: url(../img/logo.svg) center / contain no-repeat;
          mask: url(../img/logo.svg) center / contain no-repeat;
}
.logo-md{ width:48px; height:48px; }
.logo-lg{ width:64px; height:64px; }
.logo-xl{ width:74px; height:74px; }

/* ─────────────── COMPOSITOR ─────────────── */
.composer{ padding:14px 16px; display:flex; flex-direction:column; gap:14px; flex:0 0 auto; }
.composer-row{ display:flex; align-items:center; gap:10px; }
.c-ico{ color: var(--text-3); font-size:16px; }
.composer-row input[type="text"]{
  flex:1; box-shadow:none; background:transparent; font-size:15px; padding:10px 0;
}
.composer-row input[type="text"]:focus{ box-shadow:none; }
#composerToggle{ transition: transform .25s var(--ease); }
.composer.collapsed #composerToggle{ transform: rotate(180deg); }
.composer.collapsed .composer-grid{ display:none; }

.composer-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-top:12px; border-top:1px solid var(--sh-dark);
}
.cfield{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.clabel{ font-size:11px; font-weight:700; letter-spacing:.04em; color: var(--text-3); text-transform:uppercase; }
.clabel i{ font-style:normal; text-transform:none; letter-spacing:0; opacity:.75; }
.crow{ display:flex; gap:8px; align-items:center; }
.crow input[type="time"]{ flex:1; }

.cchips{ display:flex; gap:6px; flex-wrap:wrap; }
.cchips button{
  appearance:none; border:0; cursor:pointer; font:inherit;
  font-size:12px; font-weight:650; color: var(--text-2);
  background: var(--surface); border-radius: var(--r-sm);
  padding:8px 11px;
  box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
  transition: all .16s var(--ease);
}
.cchips button:hover{ color: var(--text); }
.cchips button.is-on{
  color: var(--accent-txt);
  box-shadow: inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);
}
.cchips.diff button{ min-width:38px; text-align:center; }

.ctoggle{
  appearance:none; border:0; cursor:pointer; font:inherit;
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:12.5px; font-weight:650; color: var(--text-2);
  background: var(--surface); border-radius: var(--r-sm); padding:10px 8px;
  box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
  transition: all .16s var(--ease); white-space:nowrap;
}
.ctoggle b{ font-size:14px; filter: grayscale(1); opacity:.6; transition: all .16s var(--ease); }
.ctoggle:hover{ color: var(--text); }
.ctoggle.is-on{
  color: var(--accent-txt);
  box-shadow: inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);
}
.ctoggle.is-on b{ filter:none; opacity:1; }

.composer-preview{
  font-size:12.5px; color: var(--text-2); line-height:1.6;
  padding:11px 14px; border-radius: var(--r-sm);
  box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
}
.composer-preview b{ color: var(--text); }
.qpill{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  padding:2px 8px; border-radius:999px; color:#fff; margin:0 2px;
}
.qpill.q1{ background: var(--q1); } .qpill.q2{ background: var(--q2); }
.qpill.q3{ background: var(--q3); } .qpill.q4{ background: var(--q4); }

/* Vistas */
.view{ display:none; flex:1; min-height:0; overflow:auto; padding: 2px; }
.view.is-active{ display:block; }

/* Paneles */
.panel{ padding:18px; display:flex; flex-direction:column; gap:14px; min-height:0; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.panel-head h2{ font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color: var(--text-3); }
.panel-head.sub{ margin-top:4px; }
.panel-foot{ margin-top:auto; }
.filters{ display:flex; gap:6px; flex-wrap:wrap; }

/* ─────────────── VISTA HOY ─────────────── */
.today-grid{
  display:grid;
  grid-template-columns: 290px minmax(0,1fr) 290px;
  gap: var(--gap);
  height: 100%;
}
.inbox-panel, .timeline-panel, .next-panel{ height:100%; overflow:hidden; }

.inbox-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px; margin:-4px; }
.inbox-list:empty::after{
  content:"Todo programado 🎉";
  display:block; text-align:center; color: var(--text-3); font-size:12.5px; padding:24px 0;
}

/* Tarjeta de tarea */
.task{
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 12px 13px 12px 16px;
  position: relative;
  cursor: grab;
  box-shadow: 4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.task:hover{ transform: translateY(-2px); box-shadow: 6px 6px 13px var(--sh-dark), -6px -6px 13px var(--sh-light); }
.task:active{ cursor: grabbing; }
.task.dragging{ opacity:.4; }
.task::before{
  content:""; position:absolute; left:7px; top:12px; bottom:12px;
  width:4px; border-radius:4px; background: var(--qc, var(--q4));
}
.task-top{ display:flex; align-items:flex-start; gap:8px; }
.task-title{ font-size:13.5px; font-weight:600; flex:1; word-break:break-word; }
.task.done .task-title{ text-decoration: line-through; color: var(--text-3); }
.task-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.tag{
  font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:3px 7px; border-radius:999px;
  color: var(--text-2);
  box-shadow: inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light);
}
.tag.q{ color: var(--qc); }
.tag.cat{ display:flex; align-items:center; gap:5px; }
.tag.cat i{ width:7px; height:7px; border-radius:50%; background: var(--cc); display:block; }
.diff{ display:flex; gap:2px; align-items:center; }
.diff i{ width:6px; height:6px; border-radius:50%; background: var(--sh-dark); display:block; }
.diff i.on{ background: var(--accent-2); }
.task-check{
  width:20px; height:20px; flex:0 0 auto; border-radius:50%; cursor:pointer; border:0;
  background: var(--surface); color: var(--ok); font-size:11px; line-height:1;
  display:grid; place-items:center;
  box-shadow: 2px 2px 5px var(--sh-dark), -2px -2px 5px var(--sh-light);
  transition: all .18s var(--ease);
}
.task-check:hover{ box-shadow: inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light); }
.task.done .task-check{ box-shadow: inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light); }

/* ─────────────── TIMELINE ─────────────── */
.timeline-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; border-radius: var(--r-md); padding-right:4px; }
.timeline{ display:grid; grid-template-columns: 56px 1fr; position:relative; }
.tl-gutter{ position:relative; }
.tl-hour{
  position:absolute; left:0; right:8px; text-align:right;
  font-size:10.5px; font-weight:700; color: var(--text-3);
  transform: translateY(-6px); letter-spacing:.03em;
}
.tl-track{
  position:relative;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light);
  overflow:hidden;
}
.tl-line{ position:absolute; left:0; right:0; height:1px; background: var(--sh-dark); opacity:.5; }
.tl-line.half{ opacity:.22; }
.tl-peak{
  position:absolute; left:0; right:0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  pointer-events:none;
}
.tl-now{ position:absolute; left:0; right:0; height:2px; background: var(--danger); z-index:6; pointer-events:none; }
.tl-now i{ position:absolute; left:-1px; top:-4px; width:10px; height:10px; border-radius:50%; background: var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.tl-ghost{
  position:absolute; left:8px; right:8px; display:none;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  z-index:5; pointer-events:none;
}

.tl-block{
  position:absolute; left:8px; right:8px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: 4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light);
  padding: 7px 10px 7px 14px;
  overflow:hidden; cursor:grab; z-index:3;
  transition: box-shadow .18s var(--ease), opacity .2s var(--ease);
}
.tl-block:hover{ box-shadow: 6px 6px 13px var(--sh-dark), -6px -6px 13px var(--sh-light); z-index:4; }
.tl-block::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px;
  width:4px; border-radius:4px; background: var(--qc, var(--q4));
}
.tl-block .b-title{ font-size:12.5px; font-weight:650; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-block .b-sub{ font-size:10.5px; color: var(--text-3); margin-top:2px; display:flex; gap:6px; align-items:center; }
.tl-block.short{ padding-top:4px; padding-bottom:4px; }
.tl-block.short .b-sub{ display:none; }
.tl-block.done{ opacity:.55; }
.tl-block.done .b-title{ text-decoration: line-through; }
.tl-block.now{ box-shadow: 0 0 0 2px var(--accent), 5px 5px 12px var(--sh-dark), -5px -5px 12px var(--sh-light); }
.tl-block.brk{
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 8px, var(--surface-2) 8px, var(--surface-2) 16px);
  box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
  cursor: default;
}
.tl-block.brk::before{ background: var(--ok); }
.tl-resize{
  position:absolute; left:0; right:0; bottom:0; height:9px; cursor:ns-resize;
}
.tl-resize::after{
  content:""; position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:26px; height:3px; border-radius:3px; background: var(--sh-dark); opacity:.6;
}
.tl-track.drop-on{ box-shadow: inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light), 0 0 0 2px var(--accent); }

.zoom{ display:flex; gap:6px; }

/* ─────────────── PANEL AHORA/SIGUIENTE ─────────────── */
.next-panel{ overflow-y:auto; }
.now-card{ padding:16px; display:flex; flex-direction:column; gap:8px; }
.now-label{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color: var(--accent-txt); }
.now-title{ font-size:16px; font-weight:700; line-height:1.25; }
.now-time{ font-size:12px; color: var(--text-2); }
.now-bar{ height:8px; border-radius:999px; box-shadow: inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light); overflow:hidden; }
.now-bar i{ display:block; height:100%; border-radius:999px; background: var(--grad); transition: width .5s var(--ease); }
.now-empty{ color: var(--text-3); font-size:12.5px; text-align:center; padding:10px 0; }
.now-actions{ display:flex; gap:8px; margin-top:4px; }

.mini-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ms{ padding:12px; border-radius: var(--r-md); display:flex; flex-direction:column; gap:2px;
     box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); }
.ms b{ font-size:19px; letter-spacing:-.02em; }
.ms span{ font-size:10.5px; color: var(--text-3); letter-spacing:.02em; }

.alarm-list{ display:flex; flex-direction:column; gap:7px; }
.al-item{ display:flex; align-items:center; gap:9px; font-size:12px; padding:9px 12px; border-radius: var(--r-sm);
          box-shadow: inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light); }
.al-item b{ font-variant-numeric: tabular-nums; color: var(--accent-txt); }
.al-item span{ color: var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-empty{ font-size:12px; color: var(--text-3); }

/* Imagen de la tarea */
.img-box{ display:flex; flex-direction:column; gap:10px; }
.img-vista{
  height:150px; border-radius: var(--r-md); overflow:hidden;
  background: var(--surface-2) center/cover no-repeat;
  box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
  display:grid; place-items:center; color: var(--text-3); font-size:12px;
}
.img-acciones{ display:flex; gap:8px; }
.img-acciones .neu-btn{ flex:1; }

/* Miniatura en tarjetas y bloques */
.task-foto{
  width:38px; height:38px; flex:0 0 auto; border-radius:9px;
  background: var(--surface-2) center/cover no-repeat;
  box-shadow: 2px 2px 6px var(--sh-dark), -2px -2px 6px var(--sh-light);
}
.tl-block .b-foto{
  position:absolute; right:8px; top:6px; width:30px; height:30px; border-radius:7px;
  background: var(--surface-2) center/cover no-repeat;
  box-shadow: 2px 2px 5px var(--sh-dark);
}
.tl-block.short .b-foto{ width:20px; height:20px; top:3px; }
.dia-b .mini-foto{
  width:14px; height:14px; border-radius:4px; display:inline-block;
  vertical-align:-3px; margin-right:4px;
  background: var(--surface-2) center/cover no-repeat;
}

/* Selector de días de la semana para las tareas que se repiten */
.cdias{ display:flex; gap:5px; }
.cdias button{
  appearance:none; border:0; cursor:pointer; font:inherit;
  flex:1; min-width:0; padding:8px 0; border-radius: var(--r-sm);
  font-size:12px; font-weight:700; color: var(--text-2);
  background: var(--surface);
  box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
  transition: all .16s var(--ease);
}
.cdias button.is-on{
  color: var(--accent-txt);
  box-shadow: inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);
}
.serie-nota{
  font-size:12.5px; color: var(--text-2); padding:11px 13px; border-radius: var(--r-sm);
  box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
}
.serie-nota b{ color: var(--accent-txt); }

/* ─────────────── SEMANA Y MES ─────────────── */
.rango-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.rango-head b{ font-size:16px; letter-spacing:-.01em; text-align:center; flex:1; }

.semana{ display:grid; grid-template-columns: repeat(7, 1fr); gap:10px; align-items:start; }
.dia{
  background: var(--surface); border-radius: var(--r-md); padding:12px 10px;
  box-shadow: 5px 5px 11px var(--sh-dark), -5px -5px 11px var(--sh-light);
  display:flex; flex-direction:column; gap:9px; min-height:200px; cursor:pointer;
  transition: transform .16s var(--ease);
}
.dia:hover{ transform: translateY(-2px); }
.dia.hoy{ box-shadow: 0 0 0 2px var(--accent), 5px 5px 11px var(--sh-dark), -5px -5px 11px var(--sh-light); }
.dia.pasado{ opacity:.6; }
.dia-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.dia-cab b{ font-size:18px; letter-spacing:-.02em; }
.dia-cab span{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-3); }
.dia-carga{ height:6px; border-radius:999px; box-shadow: inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light); overflow:hidden; }
.dia-carga i{ display:block; height:100%; border-radius:999px; background: var(--grad); }
.dia-carga.alta i{ background: var(--warn); }
.dia-carga.llena i{ background: var(--danger); }
.dia-lista{ display:flex; flex-direction:column; gap:5px; }
.dia-b{
  font-size:11px; line-height:1.3; padding:5px 7px; border-radius:7px;
  border-left:3px solid var(--qc); background: var(--surface-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dia-b b{ font-variant-numeric: tabular-nums; color: var(--text-2); font-weight:700; }
.dia-b.done{ opacity:.5; text-decoration: line-through; }
.dia-pie{ margin-top:auto; font-size:10.5px; color: var(--text-3); }
.dia-vacio{ font-size:11px; color: var(--text-3); text-align:center; padding:14px 0; }

.mes-dias{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; margin-bottom:8px; }
.mes-dias span{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--text-3); text-align:center; }
.mes{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; }
.celda{
  background: var(--surface); border-radius: var(--r-sm); padding:9px;
  box-shadow: 4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light);
  min-height:82px; display:flex; flex-direction:column; gap:6px; cursor:pointer;
  transition: transform .16s var(--ease);
}
.celda:hover{ transform: translateY(-2px); }
.celda.fuera{ opacity:.32; }
.celda.hoy{ box-shadow: 0 0 0 2px var(--accent), 4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light); }
.celda b{ font-size:14px; letter-spacing:-.01em; }
.celda-info{ margin-top:auto; font-size:10px; color: var(--text-3); line-height:1.35; }
.celda-carga{ height:5px; border-radius:999px; box-shadow: inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light); overflow:hidden; }
.celda-carga i{ display:block; height:100%; border-radius:999px; background: var(--grad); }
.celda-carga.alta i{ background: var(--warn); }
.celda-carga.llena i{ background: var(--danger); }

.mes-leyenda{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:11.5px; color: var(--text-3); }
.mes-leyenda span{ display:flex; align-items:center; gap:6px; }
.pt{ width:10px; height:10px; border-radius:3px; display:block; }
.pt.libre{ background: var(--sh-dark); }
.pt.poco{ background: var(--accent-1); }
.pt.medio{ background: var(--warn); }
.pt.lleno{ background: var(--danger); }

/* ─────────────── MATRIZ ─────────────── */
.matrix-head{ margin-bottom:14px; color: var(--text-2); font-size:13px; }
.matrix{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap: var(--gap); min-height: 640px; }
.quad{ padding:16px; display:flex; flex-direction:column; gap:12px; min-height:0; }
.quad header{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.quad header b{ font-size:13.5px; }
.quad header small{ font-size:11px; color: var(--text-3); width:100%; padding-left:19px; }
.dot{ width:10px; height:10px; border-radius:50%; }
.dot.q1{ background: var(--q1); } .dot.q2{ background: var(--q2); }
.dot.q3{ background: var(--q3); } .dot.q4{ background: var(--q4); }
.quad-body{
  flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:9px;
  border-radius: var(--r-md); padding:12px;
  box-shadow: inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light);
  min-height:130px;
}
.quad-body.drop-on{ box-shadow: inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light), 0 0 0 2px var(--accent); }

/* ─────────────── ENFOQUE ─────────────── */
.focus-wrap{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--gap); align-items:start; }
.focus-dial{ padding:30px; display:grid; place-items:center; position:relative; aspect-ratio:1; max-width:520px; margin:0 auto; width:100%; }
.dial{ width:100%; max-width:400px; transform: rotate(-90deg); }
.dial-bg{ fill:none; stroke: var(--sh-dark); stroke-width:16; opacity:.5; }
.dial-fg{
  fill:none; stroke: url(#dialGrad); stroke-width:16; stroke-linecap:round;
  stroke-dasharray: 703.7; stroke-dashoffset: 0;
  transition: stroke-dashoffset .95s linear, stroke .3s var(--ease);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent));
}
.dial-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:0 60px; }
.dial-mode{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--accent-txt); }
.dial-time{ font-size:56px; font-weight:800; letter-spacing:-.03em; font-variant-numeric: tabular-nums; line-height:1; }
.dial-task{ font-size:12.5px; color: var(--text-2); }
.focus-side{ display:flex; flex-direction:column; gap: var(--gap); }
.focus-presets{ display:flex; gap:8px; flex-wrap:wrap; }
.focus-presets .neu-btn{ flex:1; }
.focus-controls{ display:flex; gap:8px; }
.focus-controls .neu-btn{ flex:1; }
.focus-log{ padding:12px; font-size:12.5px; color: var(--text-2); text-align:center; }
.tip-panel p{ font-size:12.5px; color: var(--text-2); }

/* ─────────────── MÉTRICAS ─────────────── */
.stats-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--gap); align-items:start; }
.stat-big{ display:flex; gap:14px; align-items:center; }
.stat-big b{ font-size:34px; letter-spacing:-.03em; line-height:1; }
.stat-big span{ font-size:12px; color: var(--text-3); }
.bars{ display:flex; flex-direction:column; gap:11px; }
.bar-row{ display:grid; grid-template-columns: 92px 1fr 46px; gap:10px; align-items:center; font-size:12px; }
.bar-row .bl{ color: var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row .bv{ text-align:right; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bar-track{ height:11px; border-radius:999px; box-shadow: inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light); overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; transition: width .6s var(--ease); }
.spark{ display:flex; align-items:flex-end; gap:7px; height:120px; padding:10px; border-radius: var(--r-md);
        box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); }
.spark div{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; height:100%; }
.spark i{ display:block; width:100%; border-radius:6px 6px 3px 3px; background: var(--grad); min-height:3px; transition: height .6s var(--ease); }
.spark span{ font-size:9.5px; color: var(--text-3); }

/* ─────────────── GUÍA ─────────────── */
.guide-head{ display:flex; align-items:center; gap:20px; padding:24px 26px; margin-bottom:14px; }
.guide-head h1{ font-size:22px; letter-spacing:-.02em; margin-bottom:4px; }
.guide-head p{ font-size:13px; color: var(--text-2); max-width:60ch; }

.guide-index{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.guide-index button{
  appearance:none; border:0; cursor:pointer; font:inherit;
  font-size:12px; font-weight:650; color: var(--text-2);
  background: var(--surface); border-radius:999px; padding:8px 14px;
  box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
  transition: all .16s var(--ease);
}
.guide-index button:hover{ color: var(--accent-txt); }
.guide-index button:active{ box-shadow: inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light); }

.guide{ display:grid; grid-template-columns: repeat(auto-fit, minmax(360px,1fr)); gap: var(--gap); align-items:start; }
.guide .panel{ scroll-margin-top:16px; }
.guide p, .guide li{ font-size:13px; color: var(--text-2); }
.guide ul, .guide ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.guide b{ color: var(--text); }
.guide .steps{ counter-reset:s; list-style:none; padding-left:0; gap:10px; }
.guide .steps li{ position:relative; padding-left:34px; }
.guide .steps li::before{
  counter-increment:s; content: counter(s);
  position:absolute; left:0; top:0;
  width:23px; height:23px; border-radius:50%;
  display:grid; place-items:center;
  font-size:11px; font-weight:800; color:#fff;
  background: var(--grad);
}
.guide-note{
  padding:11px 14px; border-radius: var(--r-sm); font-size:12.5px;
  box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
}
.guide .kbd li{ font-size:12.5px; }

.qgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qcard{
  padding:13px; border-radius: var(--r-sm); border-left:4px solid var(--qc);
  box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
}
.qcard b{ display:block; font-size:13px; color: var(--qc); }
.qcard span{ display:block; font-size:10.5px; color: var(--text-3); margin:2px 0 6px; }
.qcard p{ font-size:12px; }
.qcard.q1{ --qc: var(--q1); } .qcard.q2{ --qc: var(--q2); }
.qcard.q3{ --qc: var(--q3); } .qcard.q4{ --qc: var(--q4); }

.sound-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sound-card{ padding:13px; }
.sound-card b{ display:block; font-size:13px; margin-bottom:5px; }
.sound-card p{ font-size:12px; }

/* ─────────────── AJUSTES DE COLOR ─────────────── */
.grad-presets{ display:grid; grid-template-columns: repeat(auto-fill, minmax(64px,1fr)); gap:8px; }
.grad-presets button{
  appearance:none; border:0; cursor:pointer; height:38px; border-radius: var(--r-sm);
  box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
  position:relative; transition: transform .16s var(--ease);
}
.grad-presets button:hover{ transform: translateY(-2px); }
.grad-presets button.is-on::after{
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.grad-pickers{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.grad-preview{
  height:46px; border-radius: var(--r-md); background: var(--grad);
  box-shadow: 4px 4px 9px var(--sh-dark), -4px -4px 9px var(--sh-light);
}

/* ─────────────── AJUSTES ─────────────── */
.settings-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--gap); align-items:start; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field > span, .field-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-3); }
.field.row{ flex-direction:row; align-items:center; justify-content:space-between; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }
.cat-list{ display:flex; flex-direction:column; gap:8px; }
.cat-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius: var(--r-sm);
           box-shadow: inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light); font-size:13px; }
.cat-item i{ width:12px; height:12px; border-radius:50%; }
.cat-item button{ margin-left:auto; background:none; border:0; cursor:pointer; color: var(--text-3); font-size:13px; }
.cat-item button:hover{ color: var(--danger); }
.cat-add{ display:grid; grid-template-columns: 1fr 58px auto; gap:8px; align-items:center; }

/* ─────────────── DRAWER ─────────────── */
.drawer-backdrop{
  position:fixed; inset:0; background: rgba(15,18,28,.35); backdrop-filter: blur(3px);
  opacity:0; pointer-events:none; transition: opacity .28s var(--ease); z-index:40;
}
.drawer-backdrop.on{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:14px; right:14px; bottom:14px; width:400px; max-width: calc(100vw - 28px);
  display:flex; flex-direction:column; z-index:41;
  transform: translateX(calc(100% + 24px)); transition: transform .34s var(--ease);
  padding:20px;
}
.drawer.on{ transform: translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.drawer-head h2{ font-size:15px; }
.drawer-body{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding:4px; margin:-4px; }
.drawer-foot{ display:flex; gap:8px; padding-top:16px; }
.drawer-foot .neu-btn{ flex:1; }
.seg-group{ display:flex; flex-direction:column; gap:8px; }
.seg{ display:flex; gap:8px; }
.seg.vert{ flex-direction:column; }
.seg-item{ display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13px; flex:1;
           padding:10px 12px; border-radius: var(--r-sm);
           box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
           transition: box-shadow .18s var(--ease); }
.seg-item:has(input:checked){ box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); color: var(--accent-txt); }
.seg-item input{ width:16px; height:16px; accent-color: var(--accent); box-shadow:none; padding:0; }
.diff-pick{ display:flex; gap:8px; }
.diff-pick button{
  flex:1; appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:13px;
  padding:11px 0; border-radius: var(--r-sm); color: var(--text-2); background: var(--surface);
  box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
  transition: all .18s var(--ease);
}
.diff-pick button.on{ color: var(--accent-2); box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); }

/* ─────────────── ALARMA ─────────────── */
.alarm-overlay{
  position:fixed; inset:0; display:none; place-items:center; z-index:60;
  background: rgba(12,15,24,.55); backdrop-filter: blur(6px);
}
.alarm-overlay.on{ display:grid; }
.alarm-box{ width:min(420px, calc(100vw - 40px)); padding:34px 30px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; }
.alarm-pulse{ font-size:46px; animation: ring 1.1s var(--ease) infinite; }
@keyframes ring{ 0%,100%{ transform: rotate(0) scale(1); } 20%{ transform: rotate(-14deg) scale(1.08); } 40%{ transform: rotate(12deg) scale(1.08); } 60%{ transform: rotate(-8deg) scale(1.03); } }
.alarm-kind{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color: var(--accent-txt); }
.alarm-box h2{ font-size:22px; letter-spacing:-.02em; }
.alarm-box p{ font-size:13px; color: var(--text-2); }
.alarm-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; justify-content:center; }

/* ─────────────── TOASTS ─────────────── */
.toasts{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:70; align-items:center; }
.toast{
  padding:12px 20px; border-radius: var(--r-md); font-size:13px; font-weight:600;
  background: var(--surface); color: var(--text);
  box-shadow: 6px 6px 14px var(--sh-dark), -6px -6px 14px var(--sh-light);
  animation: pop .3s var(--ease);
}
.toast.warn{ color: var(--warn); }
.toast.ok{ color: var(--ok); }
@keyframes pop{ from{ opacity:0; transform: translateY(12px) scale(.96); } }

/* ─────────────── PANTALLA DE ACCESO ─────────────── */
.auth{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center; padding:24px;
  background: var(--bg);
  overflow-y:auto;
}
.auth-card{
  width:min(400px, 100%); padding:32px 30px;
  display:flex; flex-direction:column; gap:18px;
}
.auth-brand{ display:flex; align-items:center; gap:13px; }
.auth-brand strong{ display:block; font-size:19px; letter-spacing:-.02em; }
.auth-brand span{ display:block; font-size:11.5px; color: var(--text-3); }
.auth-tabs{ display:flex; gap:8px; }
.auth-tabs .chip{ flex:1; padding:10px; font-size:12.5px; }
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-form .neu-btn{ margin-top:4px; }
.auth-error{
  font-size:12.5px; color: var(--danger); font-weight:600;
  padding:10px 12px; border-radius: var(--r-sm);
  box-shadow: inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light);
}
/* Ojo para ver la contraseña: en móvil, escribirla a ciegas es la
   primera causa de "no me deja entrar". */
.pass-wrap{ position:relative; display:block; }
.pass-wrap input{ padding-right:44px; }
.pass-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:15px; line-height:1; padding:6px 8px; border-radius:8px;
  opacity:.45; transition: opacity .16s var(--ease);
}
.pass-eye:hover{ opacity:.9; }
.pass-eye.is-on{ opacity:1; }

.auth-remember{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  font-size:12.5px; color: var(--text-2);
}
.auth-remember input{
  width:16px; height:16px; box-shadow:none; padding:0;
  accent-color: var(--accent); cursor:pointer;
}

.auth-aviso{
  font-size:12.5px; line-height:1.5; color: var(--warn); font-weight:600;
  padding:11px 13px; border-radius: var(--r-sm);
  box-shadow: inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light);
}
.auth-aviso b{ color: var(--danger); }

.auth-sep{ display:flex; align-items:center; gap:12px; color: var(--text-3); font-size:11px; }
.auth-sep::before, .auth-sep::after{ content:""; flex:1; height:1px; background: var(--sh-dark); }
.auth-note{ font-size:11.5px; color: var(--text-3); text-align:center; line-height:1.5; }
.auth-note code{ font-size:10.5px; }

.side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.side-buttons{ display:flex; gap:8px; }
.side-buttons .neu-btn{ flex:1; }
.user-chip{ display:flex; align-items:center; gap:9px; padding:9px 11px; font-size:12px; }
.user-chip i{
  width:24px; height:24px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center; font-style:normal;
  font-size:11px; font-weight:800; color:#fff;
  background: var(--grad);
}
.user-chip span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text-2); }
.link-btn{
  background:none; border:0; cursor:pointer; font:inherit; font-size:11px; font-weight:700;
  color: var(--text-3); padding:0;
}
.link-btn:hover{ color: var(--danger); }

.offline-flag{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:75;
  padding:9px 18px; border-radius:999px; font-size:12px; font-weight:700;
  color: var(--danger); background: var(--surface);
  box-shadow: 5px 5px 12px var(--sh-dark), -5px -5px 12px var(--sh-light);
}

/* ─────────────── DICTADO ─────────────── */
.neu-btn.mic{ --btn-fg: var(--text-2); }
.neu-btn.mic.grabando{
  --btn-fg: var(--danger);
  box-shadow: inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light);
  animation: latido 1.4s var(--ease) infinite;
}
@keyframes latido{ 50%{ box-shadow: inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light), 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); } }

.dictado{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; border-radius: var(--r-md);
  box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
}
.dictado p{ flex:1; font-size:13.5px; color: var(--text-2); min-width:0; }
.dictado-onda{ display:flex; align-items:center; gap:3px; height:22px; flex:0 0 auto; }
.dictado-onda i{
  width:3px; border-radius:3px; background: var(--grad); display:block;
  animation: onda 1s ease-in-out infinite;
}
.dictado-onda i:nth-child(1){ animation-delay:0s }
.dictado-onda i:nth-child(2){ animation-delay:.15s }
.dictado-onda i:nth-child(3){ animation-delay:.3s }
.dictado-onda i:nth-child(4){ animation-delay:.45s }
.dictado-onda i:nth-child(5){ animation-delay:.6s }
@keyframes onda{ 0%,100%{ height:6px } 50%{ height:20px } }

/* ─────────────── HOJAS (revisión y propuesta) ─────────────── */
.sheet-overlay{
  position:fixed; inset:0; display:none; place-items:center; z-index:65;
  background: rgba(12,15,24,.5); backdrop-filter: blur(5px); padding:20px;
}
.sheet-overlay.on{ display:grid; }
.sheet{
  width:min(760px, 100%); max-height: calc(100vh - 40px);
  display:flex; flex-direction:column; padding:22px;
}
.sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.sheet-head h2{ font-size:17px; letter-spacing:-.01em; }
.sheet-head p{ font-size:12.5px; color: var(--text-3); margin-top:4px; max-width:60ch; }
.sheet-body{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px; margin:-4px; }
.sheet-foot{ display:flex; gap:8px; padding-top:16px; }
.sheet-foot .neu-btn{ flex:1; }

/* Tarjeta editable de tarea propuesta */
.prop{
  border-radius: var(--r-md); padding:13px 14px 13px 17px; position:relative;
  box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light);
}
.prop::before{
  content:""; position:absolute; left:7px; top:13px; bottom:13px;
  width:4px; border-radius:4px; background: var(--qc);
}
.prop-top{ display:flex; align-items:center; gap:8px; }
.prop-top input[type="text"]{
  flex:1; box-shadow:none; background:transparent; font-size:14px; font-weight:600; padding:4px 0;
}
.prop-top input[type="text"]:focus{ box-shadow: inset 2px 2px 5px var(--sh-dark), inset -2px -2px 5px var(--sh-light); padding:4px 8px; }
.prop-del{ background:none; border:0; cursor:pointer; color: var(--text-3); font-size:14px; }
.prop-del:hover{ color: var(--danger); }
.prop-ctrl{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.prop-ctrl select, .prop-ctrl input[type="number"], .prop-ctrl input[type="time"]{
  width:auto; font-size:12px; padding:7px 9px;
}
.prop-ctrl input[type="number"]{ width:74px; }
.prop-mini{
  appearance:none; border:0; cursor:pointer; font:inherit; font-size:11.5px; font-weight:700;
  color: var(--text-2); background: var(--surface); border-radius: var(--r-sm); padding:7px 10px;
  box-shadow: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light);
  transition: all .16s var(--ease);
}
.prop-mini.is-on{ color: var(--accent-txt); box-shadow: inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light); }
.prop-why{ font-size:11px; color: var(--text-3); margin-top:8px; }

/* Fila de la agenda propuesta */
.ag{ display:grid; grid-template-columns: 96px 1fr; gap:14px; align-items:start;
     padding:12px 14px; border-radius: var(--r-md);
     box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); }
.ag-h{ font-variant-numeric: tabular-nums; font-weight:800; font-size:13.5px; color: var(--accent-txt); }
.ag-h span{ display:block; font-size:10.5px; font-weight:600; color: var(--text-3); }
.ag-t{ font-size:13.5px; font-weight:600; }
.ag-w{ font-size:11.5px; color: var(--text-3); margin-top:3px; }
.ag.brk .ag-t{ color: var(--text-2); font-weight:500; }
.ag-warn{ padding:12px 14px; border-radius: var(--r-md); font-size:12.5px; color: var(--warn);
          box-shadow: inset 3px 3px 7px var(--sh-dark), inset -3px -3px 7px var(--sh-light); }

/* ─────────────── Scrollbars ─────────────── */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: var(--sh-dark); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--text-3); }

/* ─────────────── Responsive ─────────────── */
@media (max-width: 1240px){
  .today-grid{ grid-template-columns: 260px minmax(0,1fr); }
  .next-panel{ display:none; }
  .focus-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 960px){
  body{ overflow:auto; }
  .shell{ grid-template-columns:1fr; height:auto; }
  .sidebar{ position:sticky; top:0; z-index:20; }
  .nav-btn{ justify-content:center; padding:11px 4px; }
  .nav-btn span:not(.ico){ display:none; }
  .today-grid{ grid-template-columns:1fr; height:auto; }
  .inbox-panel, .timeline-panel{ height:auto; }
  .timeline-scroll{ max-height:600px; }
  .matrix{ grid-template-columns:1fr; }

  /* En una columna sí hay sitio: "Ahora / Siguiente" vuelve, y va
     primero. En el móvil la pregunta es "¿qué toca ahora?", no
     "¿cómo queda el día entero?". */
  .next-panel{ display:flex; order:-1; }
  .mini-stats{ grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════ Móvil: barra inferior ═══════════════
   En vertical la barra lateral se comía media pantalla antes de
   llegar al contenido. Se convierte en dos piezas: una cabecera
   compacta arriba (logo + carga + cuenta) y la navegación FIJA
   abajo, que es donde llega el pulgar. Así cada vista dispone de
   la pantalla entera. */
@media (max-width: 760px){
  .shell{ padding:10px 10px 0; gap:10px; }

  /* Cabecera: todo en una franja horizontal */
  .sidebar{
    flex-direction:row; align-items:center; gap:10px;
    padding:9px 12px; position:sticky; top:0; z-index:25;
  }
  .brand{ gap:0; }
  .brand-text{ display:none; }
  .logo-md{ width:34px; height:34px; }

  /* La carga del día, en pequeño y en horizontal */
  .side-card{ flex:1; flex-direction:row; align-items:center; gap:10px; padding:6px 10px; min-width:0; }
  .side-card-title{ display:none; }
  .load-ring-wrap{ width:40px; flex:0 0 auto; margin:0; }
  .load-ring{ width:40px; height:40px; }
  .load-ring-txt b{ font-size:12px; }
  .load-ring-txt span{ display:none; }
  .load-legend{ text-align:left; font-size:10.5px; line-height:1.25; min-width:0; }

  /* Cuenta y ajustes rápidos: sólo iconos */
  .side-foot{ margin-top:0; flex-direction:row; align-items:center; gap:6px; width:auto; }
  .side-buttons{ gap:6px; }
  .user-chip{ padding:6px; gap:6px; }
  .user-chip span, .lbl{ display:none; }
  .link-btn{ font-size:10px; }

  /* Navegación fija abajo: las ocho vistas en una fila */
  .nav{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:grid; grid-template-columns: repeat(8, 1fr); gap:4px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    margin:0; background: var(--bg);
    box-shadow: 0 -8px 22px rgba(0,0,0,.18);
  }
  .nav-btn{ padding:10px 0; border-radius: var(--r-sm); }
  .nav-btn .ico{ font-size:17px; }

  /* Hueco para que la barra no tape el final del contenido */
  .main{ padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .drawer, .sheet{ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ─────────────── Móvil estrecho ───────────────
   El culpable de que algo se salga de la pantalla casi siempre es
   `white-space: nowrap`: un botón con texto largo fija un ancho
   mínimo mayor que el del teléfono y desborda toda la tarjeta. */
@media (max-width: 620px){
  :root{ --gap: 12px; }
  .shell{ padding: 12px; }

  .neu-btn, .chip, .cchips button, .ctoggle{ white-space: normal; }

  /* Acceso */
  .auth{ padding: 14px; align-items:start; }
  .auth-card{ width:100%; padding: 24px 20px; }
  .auth-brand{ gap:12px; }
  .logo-xl{ width:56px; height:56px; }
  .auth-brand strong{ font-size:17px; }

  /* Cabecera y compositor */
  .topbar{ gap:8px; }
  .date-nav{ flex:1; }
  .date-label{ min-width:0; }
  .topbar-actions{ flex:1; }
  .topbar-actions .neu-btn{ flex:1; text-align:center; }
  .composer{ padding:12px; }
  .composer-row{ flex-wrap:wrap; }
  .composer-row input[type="text"]{ flex:1 1 100%; order:-1; font-size:16px; }
  .composer-row .neu-btn{ flex:1; }
  .composer-grid{ grid-template-columns:1fr; }

  /* Paneles y hojas */
  .panel{ padding:14px; }
  .qgrid, .sound-cards, .grad-pickers{ grid-template-columns:1fr; }
  .mini-stats{ grid-template-columns:1fr 1fr; }
  .guide{ grid-template-columns:1fr; }
  .guide-head{ flex-direction:column; text-align:center; }
  .sheet{ padding:16px; max-height: calc(100vh - 24px); }
  .sheet-foot{ flex-wrap:wrap; }
  .sheet-foot .neu-btn{ flex:1 1 45%; }
  .drawer{ top:0; right:0; bottom:0; width:100%; max-width:100%; border-radius:0; }
  .ag{ grid-template-columns:1fr; gap:4px; }
  .prop-ctrl{ gap:6px; }

  /* Enfoque */
  .dial-time{ font-size:44px; }
  .dial-center{ padding:0 34px; }
  .focus-controls{ flex-wrap:wrap; }

  /* En iOS, un input de menos de 16px hace que el navegador
     haga zoom solo al enfocarlo. */
  input, select, textarea{ font-size:16px; }
}