/* ══════════ ESCRITORIO v2 (28/09/2026) ══════════
   Sustituye a la rejilla de 11-escritorio.css (body con tope de 2200 px,
   columna de 300/340 y main de 1180/1320). La auditoría midió que el menú
   (184 px) y la cabecera flotaban centrados en su columna, sin fondo, con tres
   bordes izquierdos distintos, y que el contenido usaba el 65-69 % del ancho.

   Ahora: barra lateral FIJA de arriba abajo y pegada al borde (tono «papel»),
   con los grupos del menú; barra superior con el título, la búsqueda, el + y
   la campanita; el contenido a la izquierda hasta 1360 px; y en Agenda, desde
   1440 px, una columna derecha. De 900 a 1279 px la barra se queda en iconos. */

.barra-sup, .rail, .nav-grupo{ display:none }

@media (min-width:900px){
  :root{ --ancho-lateral:248px; --lat-fondo:#E7EAE4; --lat-borde:#D3D9CF; --lat-rotulo:#6B7A70; --lat-texto:#2B3A4F }
  body{ display:block; max-width:none; margin:0; padding:0 0 32px var(--ancho-lateral) }

  /* ── La barra lateral ── */
  #lateral{
    /* align-self:stretch: el start que dejó la rejilla vieja (12-react.css) hace que un
       elemento fijo se encoja a su contenido en vez de ir de top a bottom. */
    position:fixed; left:0; top:0; bottom:0; width:var(--ancho-lateral); z-index:40; box-sizing:border-box; align-self:stretch; grid-row:auto;
    display:flex; flex-direction:column; max-height:none; overflow-y:auto; scrollbar-width:thin;
    padding:16px 12px 14px; background:var(--lat-fondo); border-right:1px solid var(--lat-borde);
  }
  #lateral>header{ position:static; padding:0 6px; margin:0 0 10px; max-width:none; display:block }
  #lateral>header h1.logo{ display:flex }
  #lateral>header h1.logo img{ width:auto; max-width:100%; max-height:52px; background:#FFFFFF; border-radius:12px; padding:4px 10px; box-sizing:border-box }
  #lateral .sec-nombre, #lateral .cab-acciones{ display:none }

  #nav{
    position:static; display:flex; flex-direction:column; align-items:stretch; align-self:stretch; gap:2px;
    padding:0; margin:0; max-width:none; overflow:visible; top:auto;
  }
  #nav .nav-grupo{
    display:block; margin:14px 0 4px 10px; font-family:'IBM Plex Mono',monospace; font-size:.6rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--lat-rotulo);
  }
  #nav .nav-grupo:first-child{ margin-top:4px }
  #nav button{
    position:relative; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px;
    height:38px; min-height:0; padding:0 10px 0 8px; margin:0; border:0; border-radius:10px; box-shadow:none;
    background:transparent; color:var(--lat-texto); text-align:left;
    font-family:'Instrument Sans',system-ui,sans-serif; font-size:.84rem; font-weight:600; letter-spacing:0; text-transform:none;
  }
  #nav button:hover{ background:rgba(255,255,255,.55) }
  #nav button > span{ display:inline; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  #nav button > small{ display:none }
  #nav .nav-todas{ display:none }
  /* El icono, sobre su pastilla de color (antes el color era de todo el botón). */
  #nav button > i{
    width:28px; height:28px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center;
    background:var(--pastel,#EEF0EC); font-size:1rem;
  }
  #nav button > i img{ width:22px; height:22px; object-fit:contain }
  #nav button > i .ico-osc{ display:block }
  #nav button > i .ico-clr{ display:none }
  #nav button[data-id="agenda"]{ --pastel:#FEEEE2 } #nav button[data-id="comida"]{ --pastel:#FEECDF }
  #nav button[data-id="finanzas"]{ --pastel:#F6F3EB } #nav button[data-id="salud"]{ --pastel:#E4F0E6 }
  #nav button[data-id="viajes"]{ --pastel:#F2EFE6 } #nav button[data-id="musica"]{ --pastel:#F3E9EF }
  #nav button[data-id="teatro"]{ --pastel:#FEEDE1 } #nav button[data-id="cine"]{ --pastel:#EAEBED }
  #nav button[data-id="escape"]{ --pastel:#FEE9DB } #nav button[data-id="juegos"]{ --pastel:#F3E9EF }
  #nav button[data-id="videojuegos"]{ --pastel:#ECE8F5 } #nav button[data-id="libros"]{ --pastel:#F2EFE6 }
  /* El activo: píldora blanca con una marca roja a la izquierda. */
  #nav button.on{
    background:#FFFFFF; color:var(--tinta); font-weight:700; border:0; box-shadow:0 1px 3px rgba(27,42,65,.12);
  }
  #nav button.on::before{
    display:block; content:""; position:absolute; left:-12px; top:8px; width:4px; height:22px;
    border:0; border-radius:0 3px 3px 0; background:var(--sello); transform:none;
  }
  #nav button:focus-visible{ outline:2.5px solid var(--sello); outline-offset:1px }

  /* Al pie de la barra: la copia de seguridad. */
  .lateral-copia{ display:block; margin:auto 0 0; padding:12px 10px 2px; border-top:1px solid var(--lat-borde); color:var(--lat-rotulo) }

  /* ── La barra superior ── */
  .barra-sup{
    display:flex; align-items:center; gap:20px; position:sticky; top:0; z-index:30;
    height:64px; box-sizing:border-box; padding:0 32px; margin:0 0 20px;
    background:#F7F8F5; border-bottom:1px solid #DDE2DC;
  }
  .barra-titulo{ margin:0; min-width:160px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:-.02em; color:var(--tinta) }
  .barra-buscar{
    width:min(400px, 34vw); height:40px; box-sizing:border-box; display:flex; align-items:center; gap:10px; padding:0 12px; cursor:pointer;
    border-radius:10px; border:1.5px solid #D5DBD3; background:#FFFFFF; color:#7A8699; font:inherit; font-size:.88rem; text-align:left;
  }
  .barra-buscar:hover{ border-color:var(--tinta) }
  .barra-buscar span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .barra-buscar kbd{ font-family:'IBM Plex Mono',monospace; font-size:.66rem; padding:2px 6px; border:1px solid #D5DBD3; border-radius:5px; background:#F7F8F5 }
  .barra-hueco{ flex:1 }
  #avisosSup{ display:flex }
  #avisosSup #btnAvisos{ border-radius:10px; width:40px; height:40px }

  /* ── El contenido: a la izquierda, con un tope amplio ── */
  main, #reactMain{ max-width:1360px; margin:0; padding:0 32px; box-sizing:border-box; min-width:0 }
  .alta{ max-width:640px }

  /* El pie: solo si hay algo que avisar del guardado, y fuera de la barra lateral. */
  footer{ left:var(--ancho-lateral); padding-left:32px; padding-right:32px }
  footer.todo-bien{ display:none }
}

/* ── La columna derecha (Agenda), desde 1440 px ── */
@media (min-width:1440px){
  body.con-rail .rail{
    display:flex; flex-direction:column; gap:14px; position:fixed; z-index:20;
    top:84px; right:32px; bottom:24px; width:320px; overflow-y:auto; scrollbar-width:thin;
  }
  body.con-rail main{ margin-right:352px; max-width:none }
}

/* ── 900-1279 px: la barra se queda en iconos ── */
@media (min-width:900px) and (max-width:1279px){
  :root{ --ancho-lateral:72px }
  #lateral{ padding:12px 10px; align-items:center }
  #lateral>header{ padding:0; margin-bottom:8px }
  #lateral>header h1.logo img{ max-height:44px; padding:3px; width:48px; object-fit:contain }
  #nav{ width:100% }
  #nav .nav-grupo{ font-size:0; height:1px; margin:6px 10px; background:var(--lat-borde) }
  #nav button{ justify-content:center; padding:0; height:44px }
  #nav button > span{ display:none }
  #nav button > i{ width:32px; height:32px }
  #nav button.on::before{ left:-10px; top:11px }
  .lateral-copia{ font-size:0; padding:0; border:0 }
  .barra-sup{ padding:0 24px; gap:14px }
  .barra-titulo{ min-width:0; font-size:1.4rem }
  main, #reactMain{ padding:0 24px }
}

/* ── Las cajas de la columna derecha (RailAgenda.tsx) ──
   Son .sis-caja con su rótulo; aquí solo las filas de dentro. «Tal día como
   hoy» es la excepción de la columna: la pieza de Memoria, sobre --noche. */
.rail-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px }
.rail-lista li button{
  width:100%; display:flex; align-items:baseline; gap:10px; min-height:28px; padding:3px 6px; margin:0 -6px; box-sizing:content-box;
  border:0; border-radius:var(--r-s); background:none; cursor:pointer; text-align:left; font:inherit; color:var(--tx);
}
.rail-lista li button:hover{ background:var(--fondo) }
.rail-lista li b{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rail-cuando{ flex-shrink:0; width:48px; font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.rail-fila-dcha{ justify-content:space-between }
.rail-fila-dcha .rail-cuando{ width:auto; text-align:right }
.rail-caja .sis-vacio{ padding:10px 12px }
.sis-caja.rail-recuerdo{ background:var(--noche); border-color:var(--noche); color:#E8ECF2 }
.rail-recuerdo .sis-caja-tit .sis-rotulo{ color:var(--aviso) }
.rail-recuerdo li button{ color:#E8ECF2 }
.rail-recuerdo li button:hover{ background:rgba(255,255,255,.08) }
.rail-recuerdo .rail-cuando{ color:#9FB0C6 }
.rail-recuerdo li span:last-child{ display:flex; flex-direction:column; min-width:0 }
.rail-recuerdo small{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#9FB0C6 }
.rail-recuerdo .sis-btn.enlace{ align-self:flex-start; height:auto; padding:2px 0; color:var(--aviso); font-size:13px }

/* ══════════ Agenda en escritorio, como el tablero «EscAgenda» ══════════
   La banda arriba; el mes y el ¿Quién? en una fila; el calendario a toda la
   altura, con lo de cada día ESCRITO sobre el pastel de su tipo; la leyenda y
   el «toca un día» sobran (los renglones ya dicen qué es). Desde 1440, «Tal
   día como hoy» y la To do list viven en la columna derecha. */
@media (min-width:900px){
  body[data-area="agenda"] main{ max-width:none }
  .agenda-ancho{ display:flex; flex-direction:column; margin:0 }
  .agenda-ancho > *{ order:5 }
  .agenda-ancho > .sis-banda{ order:0 }
  /* El plan que se está apuntando, ARRIBA: el + lleva ahí, no al final. */
  .agenda-ancho > form[data-plan-form]{ order:1; margin:0 0 16px; width:100% }
  .agenda-ancho > .agenda-barra{ order:2 }
  .agenda-ancho > .agenda-cumples{ order:3 }
  .agenda-ancho > .cal-grid{ order:4 }
  .agenda-ancho > .agenda-leyenda, .agenda-ancho > .agenda-pista{ display:none }

  .cal-nav{ gap:10px }
  .cal-nav h2{ font-size:1.4rem }
  .cal-nav [data-cal-prev]{ order:0 }
  .cal-nav h2{ order:1 }
  .cal-nav [data-cal-next]{ order:2 }
  .cal-nav .cal-hoy{ order:3 }

  .cal-grid{ gap:6px }
  .cal-dow{ text-align:left; padding:0 4px 2px; font-size:10.5px }
  .cal-dow .corto{ display:none }
  .cal-dow .largo{ display:inline }
  .celda{
    /* Las semanas del mes (5 o 6, lo dice agenda.js) se reparten el alto que
       queda debajo de la barra superior, la banda y la fila del mes. */
    min-height:clamp(92px, calc((100vh - 340px) / var(--semanas, 6)), 170px);
    display:flex; flex-direction:column; gap:3px; overflow:hidden;
    padding:7px 8px; border-radius:var(--r-m);
  }
  .celda .num{ font-size:14px }
  .celda .icos, .celda .bandera-fondo{ display:none }
  /* El viaje ya va escrito en su renglón: la celda, blanca como las demás. */
  .celda.viaje{ background:var(--sup); border-color:var(--borde-s) }
  .celda.hoy, .celda.sel{ padding:6px 7px }
  .celda.fuera{ visibility:visible; background:var(--neutro-suave); border-color:transparent; opacity:.55; cursor:default }
  .celda.fuera:hover{ border-color:transparent }
  .cal-cosas{ display:flex; flex-direction:column; gap:3px; min-width:0 }
  .cal-cosa{
    display:block; font-size:11.5px; line-height:1.3; padding:2px 6px; border-radius:5px;
    background:var(--c, var(--neutro-suave)); color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cal-cosa .bandera-img{ width:14px; height:auto; vertical-align:-2px; margin-right:4px; border-radius:2px }
  .cal-mas{ font-family:var(--f-mono); font-size:10px; color:var(--tx2); padding:0 6px }
  .sis-caja.dia-panel{ margin-top:16px }
  .agenda-ancho > .dia-panel, .agenda-ancho > .agenda-memoria, .agenda-ancho > .tareas-caja{ max-width:880px }
}
/* Con la columna derecha, «Tal día como hoy» ya está ahí. */
@media (min-width:1440px){
  body.con-rail .agenda-ancho > .agenda-memoria{ display:none }
}

/* ── La columna derecha: sus dos raíces y la To do list mudada ── */
#railReact{ display:flex; flex-direction:column; gap:14px }
#railTareas:empty{ display:none }
.rail .tareas-caja{ margin:0; padding:14px 16px; gap:10px }
.rail .tarea{ padding:6px 0 }
.rail .tarea-cuerpo span{ font-size:13.5px }
/* Solo la caja de texto hasta que se escribe: quién, fecha y el botón salen al entrar. */
.rail .tareas-alta:not(:focus-within) .dos, .rail .tareas-alta:not(:focus-within) .sis-acciones{ display:none }
.rail .tareas-alta .dos{ gap:8px }
.rail .tareas-alta label{ font-size:.56rem }

/* ══════════ Comida en escritorio ══════════
   La maquetación (banda, tarjeta de la lista con la columna derecha, filas
   a dos columnas) vive ya en el bloque de Comida de 12-react.css, con las
   piezas del sistema. Aquí solo queda soltar el tope de ancho: la carta usa
   la ventana entera, como en el tablero PruComida. */
@media (min-width:900px){
  body[data-area="comida"] #reactMain{ max-width:none }
}