/* OnSite by Gestacore, hoja 3 de 4: los cascarones -- las páginas públicas y las cinco carcasas
   (panel, proveedor, campo, portal, hardware) con su nav, sus barras y su responsive.
   Se carga DESPUÉS de componentes.css. */
/* ---------- Público (login, recuperar, enlaces) ---------- */
.publico { min-height: calc(100dvh / var(--zoom)); display: grid; place-items: center; padding: var(--s-6) var(--s-4); }
.publico .tarjeta { width: min(100%, 420px); padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-5); }
.publico .logo { display: grid; justify-items: center; gap: var(--s-2); }
.publico .logo img { height: 48px; width: auto; }
.publico .logo .producto { font-weight: 700; font-size: var(--t-lg); letter-spacing: -.01em; }
.publico .logo .producto span { color: var(--primary); }
.publico form { display: grid; gap: var(--s-4); }
.publico .pie { font-size: var(--t-sm); color: var(--muted-fg); text-align: center; }
:root[data-tema="oscuro"] .publico .logo img { filter: brightness(1.15); }
/* `/z/` (H16 T3, Diseño §3): columna más ancha que el resto de las públicas -- 560 px, no 420,
   para que el folio mono grande y la fecha de eliminación no partan en tres líneas. */
.publico .tarjeta.ancho-zip { width: min(100%, 560px); }

/* ---------- Carcasa Panel: nav lateral → barra superior → barra inferior (T12) ---------- */
/* `overflow-y: auto` (Tamaño de la página, 2026-10-20): en Grande, con una ventana de 700 px de alto o menos, el menú
   con la fila de Tamaño en su pie no cabe (medido); así se recorre en vez de cortarse, y sin barra cuando sí cabe. */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100dvh / var(--zoom)); }
.nav { background: var(--surface); border-right: 1px solid var(--border); padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 0; height: calc(100dvh / var(--zoom)); overflow-y: auto; }
.marca { display: flex; align-items: center; gap: var(--s-3); }
.marca img { height: 34px; width: auto; }
.marca .producto small { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--muted-fg); letter-spacing: 0; line-height: 1; }
.marca .producto { font-weight: 700; font-size: var(--t-md); letter-spacing: -.01em; }
.marca .producto span { color: var(--primary); }
/* Cabecera del nav (T5, Tanda 1 de campanita, Diseño §3.1): la campana se cuelga junto a la
   marca, alineada a la derecha -- antes `.marca` era hijo directo de `.nav` (columna); ahora vive
   dentro de esta fila junto al botón de la campana, sin tocar el resto del nav (el `<ul>` de
   abajo sigue siendo el siguiente hijo de `.nav`, mismo `gap` de columna de siempre). */
.nav-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-md); color: var(--fg); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--primary-bg); color: var(--primary); font-weight: 600; }
.nav .pie { margin-top: auto; display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--muted-fg); }
.nav .pie a { color: var(--fg); font-weight: 600; text-decoration: none; }
.nav .pie a:hover { color: var(--primary); }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }
.cabecera .sub { color: var(--muted-fg); margin-top: 2px; }
/* H28b: el flash verde (`.aviso.ok`) y la cabecera eran hermanos pegados y el aviso se leía como parte del título. La cabecera gana su
   margen SOLO cuando hay flash (`.ok` no es el aviso oculto del push, que siempre es el hermano anterior); el portal y el campo ya
   tienen su `gap`, por eso va acotado a `.contenedor` (panel, proveedor y hardware). */
.contenedor > .aviso.ok + .cabecera { margin-top: var(--s-4); }
.barra-sup, .barra-inf { display: none; }
/* Densidad del nav según la ALTURA de pantalla: laptops con escala de Windows (p.ej. 1080@125% = 864,
   menos las barras del navegador ~760) tienen poco alto. El nav se compacta para caber SIN scrollbar
   interna (los items bajan de 44 a 38/34px, un tamaño cómodo en escritorio; el nav es solo desktop,
   en móvil se reemplaza por la barra inferior). */
@media (max-height: 860px) {
  .nav { padding: var(--s-4) var(--s-4); gap: var(--s-3); }
  .nav a { min-height: 38px; }
  .nav .pie { gap: var(--s-1); }
}
@media (max-height: 730px) {
  .nav a { min-height: 34px; }
  .marca img { height: 28px; }
}

@media (max-width: 1024px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; }
  .nav { display: none; }
  .barra-sup { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
}
@media (max-width: 640px) {
  .contenedor { padding: var(--s-4); padding-bottom: 88px; }
  /* grid-auto-flow en vez de repeat(N,1fr): la misma barra sirve para los 5 ítems del panel y los 5 del proveedor (D279) */
  .barra-inf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); padding: var(--s-1) 0 calc(var(--s-1) + env(safe-area-inset-bottom) / var(--zoom)); z-index: 10; }
  .barra-inf a { display: grid; justify-items: center; gap: 2px; min-height: 48px; padding-top: 6px; font-size: var(--t-xs); color: var(--muted-fg); text-decoration: none; }
  .barra-inf a[aria-current="page"] { color: var(--primary); font-weight: 600; }
}

/* ---------- Carcasa Proveedor: nav superior corta (D25), densidad 5 ---------- */
.shell-proveedor { min-height: calc(100dvh / var(--zoom)); display: flex; flex-direction: column; }
.nav-sup { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-5); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.nav-sup ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-1); flex-wrap: wrap; }
.nav-sup a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-md); color: var(--fg); text-decoration: none; font-weight: 500; }
.nav-sup a:hover { background: var(--surface-2); }
.nav-sup a[aria-current="page"] { background: var(--primary-bg); color: var(--primary); font-weight: 600; }
@media (max-width: 640px) {
  .nav-sup ul { display: none; }
}

/* ---------- Carcasa Campo: una columna, aireada, densidad 3 ---------- */
.columna-560 { max-width: 560px; margin: 0 auto; min-height: calc(100dvh / var(--zoom)); display: grid; grid-template-rows: auto 1fr auto; }
/* La carcasa de campo es célular-primero (el técnico vive en su teléfono), pero en un monitor
   la columna de 560 se veía "como si no hubiera espacio" (Joe, 2026-08-31, en /campo/contrato).
   En escritorio respira a 760px: lectura cómoda (~75 caracteres por línea) sin volverse sábana
   -- una lista de visitas a 1400px sería peor de leer, no mejor. */
@media (min-width: 700px) { .columna-560 { max-width: 760px; } }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.marca-campo { font-weight: 600; }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted-fg); }
.sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.sync.pend::before { background: var(--warn); }
.sync.error::before { background: var(--bad); }
/* Candado de contrato (H12 T5): mismo tokens/receta que `.chip-warn`, pero es un enlace clicable
   (lleva a /campo/contrato) en vez de un chip informativo -- por eso no comparte la clase `.chip`. */
.banner-contrato { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); text-decoration: none; }
.banner-contrato:hover { text-decoration: underline; }
.cuerpo { padding: var(--s-4) var(--s-4) var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.acciones-fijas { position: sticky; bottom: 0; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom) / var(--zoom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--border); display: grid; gap: var(--s-2); }
.acciones-fijas:empty { display: none; }

/* ---------- Carcasa Portal: columna de lectura, registro profesional ---------- */
.columna-720 { max-width: 720px; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-12); display: grid; gap: var(--s-5); min-width: 0; }
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.encabezado img { height: 32px; width: auto; }
.nav-portal { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.nav-portal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-2); color: var(--fg); text-decoration: none; font-weight: 500; border-radius: var(--r-md); }
.nav-portal a:hover { background: var(--surface-2); }
.nav-portal a[aria-current="page"] { color: var(--primary); font-weight: 600; }
@media (max-width: 640px) {
  .encabezado { flex-direction: column; align-items: flex-start; }
}

/* ---------- Tamaño de la página en los cascarones (2026-10-20) ----------
   Las tres A (`comunes/_tamano.html`) solo se ven a más de 1024 px (una sola regla, en `componentes.css`): el panel en
   el pie del menú lateral, el proveedor y hardware en la `.nav-sup`, el portal en `.nav-portal` y campo en su `.topbar`. */
/* Si la fila de campana y Salir del proveedor (o la de Salir de hardware) no cabe junto al menú (de 641 a ~700 px, o la
   tableta en Grande), baja a un segundo renglón: a la derecha, donde queda Salir en el escritorio. */
.nav-sup > .fila { margin-left: auto; }
/* En el portal va entre "Perfil" y "Salir": un poco de aire para que "Tamaño" no se lea pegado a "Perfil". */
.nav-portal .tamano { margin-inline: var(--s-2); }