/* =========================================================================
   ARMAZÓN — barra, contenido, capas y recados.
   Lo que rodea a las pantallas. Los primitivos están en base.css; aquí solo
   va lo que es de la PÁGINA, no de un componente.
   ========================================================================= */

/* El salto al contenido: invisible hasta que se tabula. Con listas de 300
   filas, pasar la barra con el teclado es media pantalla de tabulador. */
.salto{
  position:fixed; top:var(--e2); left:var(--e2); z-index:100;
  transform:translateY(-200%);
  background:var(--acento); color:var(--sobre-acento);
  padding:var(--e2) var(--e4); border-radius:var(--r-1);
  font:600 var(--f13)/1 var(--ui); text-decoration:none;
}
.salto:focus{transform:none}

/* ---------- barra ----------
   Opaca, no translúcida: un `backdrop-filter` se recompone en cada fotograma
   justo encima de la lista que se está recorriendo, y esa lista es el
   producto. El filete de abajo ya la separa. */
.barra{
  position:sticky; top:0; z-index:20;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--e4);
  padding:0 var(--e4);
  height:56px;
  background:var(--papel-2);
  border-bottom:1px solid var(--filete);
}

.marca{display:flex; align-items:center; gap:var(--e2); text-decoration:none; color:var(--tinta)}
.marca-cuadro{
  display:grid; place-items:center;
  width:26px; height:26px;
  background:var(--acento); color:var(--sobre-acento);
  font:700 var(--f15)/1 var(--mono);
  border-radius:var(--r-1);
}
.marca-texto{font:600 var(--f15)/1 var(--ui); letter-spacing:.01em}

.secciones{display:flex; gap:var(--e1); overflow-x:auto; scrollbar-width:none}
.secciones::-webkit-scrollbar{display:none}
.secciones a{
  display:grid; place-items:center;
  min-height:var(--tacto); padding:0 var(--e3);
  color:var(--tinta-2); text-decoration:none;
  font:500 var(--f13)/1 var(--ui);
  border-radius:var(--r-1);
  white-space:nowrap;
  /* El subrayado de la activa se dibuja con el borde de abajo, que ocupa
     sitio siempre (transparente) para que al activarse no salte nada */
  border-bottom:2px solid transparent;
}
.secciones a:hover{color:var(--tinta); background:color-mix(in srgb, var(--tinta) var(--velo), transparent)}
.secciones a.activa{color:var(--tinta); border-bottom-color:var(--acento); font-weight:600}

.barra-fin{display:flex; align-items:center; gap:var(--e2)}

/* El pulso del bot. Vive en la barra y no en una pantalla porque, si el
   monitor está parado, TODO lo que se ve es de antes: eso no puede depender
   de en qué sección estés. */
.latido-barra{
  display:flex; align-items:center; gap:var(--e2);
  font:500 var(--f12)/1 var(--ui);
  color:var(--tinta-2);
  padding:0 var(--e2);
  white-space:nowrap;
}
.latido-barra.parado{color:var(--error)}
.latido-barra.parado .latido{background:var(--error); animation:none}

.avatar{
  width:32px; height:32px; padding:0;
  border-radius:var(--r-redondo);
  background:var(--acento); color:var(--sobre-acento);
  font:700 var(--f12)/1 var(--ui);
  display:grid; place-items:center;
}

/* ---------- contenido ---------- */

main{
  display:block;
  max-width:var(--ancho-max);
  margin:0 auto;
  padding:var(--e6) var(--e4) var(--e12);
}
main:focus{outline:none}

/* ---------- capas ----------
   Panel lateral en pantalla ancha, hoja de abajo en móvil: en el teléfono la
   mano llega abajo, no arriba a la derecha. */

.capa{
  position:fixed; inset:0; z-index:40;
  background:color-mix(in srgb, var(--tinta) 40%, transparent);
  display:grid;
  justify-items:end;
}
body.con-capa{overflow:hidden}

.capa-caja{
  background:var(--papel);
  width:min(760px, 100vw);
  height:100%;
  overflow:auto; overscroll-behavior:contain;
  border-left:1px solid var(--filete-2);
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.capa-caja:focus{outline:none}

/* La cabecera y el pie de una capa se quedan fijos: en una tabla de 20 filas
   el botón de crear no puede estar a un scroll de distancia. */
.capa-cab{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:var(--e4);
  padding:var(--e4);
  background:var(--papel-2);
  border-bottom:1px solid var(--filete);
}
.capa-cab h2{font:600 var(--f17)/var(--lh-1) var(--ui); margin:0}
.capa-cuerpo{padding:var(--e4); display:grid; gap:var(--e5); align-content:start}
.capa-pie{
  position:sticky; bottom:0;
  display:flex; justify-content:flex-end; gap:var(--e2);
  padding:var(--e4);
  background:var(--papel-2);
  border-top:1px solid var(--filete);
}

@media (max-width:720px){
  .capa{justify-items:stretch; align-items:end}
  .capa-caja{
    width:100%; height:min(92vh, 100%);
    border-left:0; border-top:1px solid var(--filete-2);
    border-radius:var(--r-2) var(--r-2) 0 0;
  }
  .marca-texto{display:none}
  main{padding:var(--e4) var(--e2) var(--e10)}
}

/* ---------- recados ----------
   Abajo a la derecha, apilados. Los de error NO se van solos (ver app.js):
   si algo falló, tiene que seguir ahí cuando levantes la vista. */

/* ⚠️ Con una capa abierta, el recado se apartaba: se apila justo encima del pie de la
   capa, que es donde vive el botón principal, y se lo tragaba. Medido en vivo. Bajarlo de
   nivel no vale: un recado lanzado DESDE la capa dejaría de verse. */
.recados{
  position:fixed; right:var(--e4); bottom:var(--e4); z-index:60;
  display:grid; gap:var(--e2);
  width:min(380px, calc(100vw - var(--e8)));
  pointer-events:none;
}
.recado{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:var(--e3);
  padding:var(--e3) var(--e3) var(--e3) var(--e4);
  background:var(--carta);
  border:1px solid var(--filete-2);
  border-left:3px solid var(--acento);
  border-radius:var(--r-1);
  font:var(--f13)/var(--lh-2) var(--ui);
  color:var(--tinta);
}
.recado-error{border-left-color:var(--error)}
.recado-aviso{border-left-color:var(--aviso)}
.recado-texto{flex:1; min-width:0}
.recado-cerrar{
  border:0; background:none; cursor:pointer;
  color:var(--tinta-3); font-size:var(--f17); line-height:1;
  min-width:24px; min-height:24px;
}
.recado-cerrar:hover{color:var(--tinta)}

/* ---------- cabecera de pantalla ----------
   La comparten las cuatro secciones, así que vive aquí y no repetida en cada
   hoja de pantalla. */

.pantalla-cab{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--e4); flex-wrap:wrap;
  margin-bottom:var(--e5);
}
.pantalla-titulo{font:600 var(--f26)/var(--lh-1) var(--ui); margin:0}
.pantalla-sub{font:var(--f13)/var(--lh-2) var(--ui); color:var(--tinta-2); margin:var(--e1) 0 0}
.pantalla-acciones{display:flex; gap:var(--e2); flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .entra{animation:none}
}

/* El pie de una capa mide 44 de botón + 16+16 de relleno + su filete ≈ 77 px */
body.con-capa .recados{bottom:calc(77px + var(--e4))}

/* 🟢 Estado del sistema, fijo abajo a la izquierda (22 sep 2026) */
.sistema{
  position:fixed; left:12px; bottom:12px; z-index:50;
  display:flex; align-items:center; gap:8px;
  font:700 var(--f12)/1 var(--ui);
  letter-spacing:.04em;
  padding:8px 12px;
  border:1px solid var(--linea, currentColor);
  border-radius:var(--r-redondo, 999px);
  background:var(--fondo, Canvas);
  color:var(--tinta-2);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.sistema .punto{width:10px; height:10px; border-radius:50%; background:currentColor}
.sistema.on{color:var(--acento)}
.sistema.on .punto{animation:latido 1.6s ease-in-out infinite}
.sistema.off{color:var(--error)}
.sistema.duda{color:var(--tinta-2)}
@media (max-width:600px){ .sistema{left:8px; bottom:8px; padding:6px 10px} }