/* public/css/shell.css — marco de la aplicación (D §4.1). Reemplaza la versión de la tarea 13. */
.shell.on { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; height: auto; }
body { overflow: visible; }

#sidebar {
  width: auto; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; background: var(--superficie); border-right: 1px solid var(--linea);
}
.sb-top { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); border-bottom: 1px solid var(--linea); }
.sb-marca { display: flex; gap: var(--e-3); align-items: center; }
.sb-logo { width: 44px; height: auto; }
.sb-nav { flex: 1; padding: var(--e-3) var(--e-2); display: flex; flex-direction: column; gap: 2px; }
.sb-lbl { margin: 0; padding: var(--e-4) var(--e-2) var(--e-1); font-size: var(--letra-12); font-weight: 600; color: var(--texto-3); }
.sb-item {
  display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-control); color: var(--texto-2); text-decoration: none; font-weight: 600;
}
.sb-item:hover { background: var(--hover-fila); color: var(--texto); }
.sb-item[aria-current="page"] { background: var(--tinta-suave); color: var(--tinta); box-shadow: inset 3px 0 0 var(--tinta); }
.sb-item.on::before { display: none; }

.columna { display: flex; flex-direction: column; min-width: 0; }
.barra-superior {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-3) var(--e-4);
  padding: var(--e-3) var(--e-6); background: var(--fondo); border-bottom: 1px solid var(--linea);
}
.titulo-vista { margin: 0 auto 0 0; font-size: var(--letra-19); font-weight: 800; color: var(--texto); }
.sello-custodia {
  display: inline-flex; align-items: center; gap: var(--e-2); box-sizing: border-box; min-height: 44px; min-width: 44px;
  padding: var(--e-1) var(--e-4); max-width: 19rem; border: 2px solid currentColor; border-radius: var(--radio-chip); text-decoration: none;
  font-size: var(--letra-13); font-weight: 800; line-height: 1.25; color: var(--texto-2);
}
.sello-custodia .ico { width: 18px; height: 18px; flex: none; }
.sello-custodia[data-estado="integra"] { color: var(--custodia); background: var(--custodia-suave); }
.sello-custodia[data-estado="cadena"], .sello-custodia[data-estado="parcial"] { color: var(--pendiente); background: var(--pendiente-suave); }
.sello-custodia[data-estado="comprometida"] { color: var(--alerta); background: var(--alerta-suave); }
.tema { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--letra-13); color: var(--texto-2); }
.tema select { width: auto; min-height: 44px; }
.usuario { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--letra-13); color: var(--texto-2); }
.usuario b { color: var(--texto); }
main#vista { flex: 1; padding: var(--e-5) var(--e-6) var(--e-8); overflow: visible; }

.saltar {
  position: absolute; left: var(--e-3); top: -100px; z-index: 900; min-height: 44px; padding: var(--e-2) var(--e-4);
  border: 0; border-radius: var(--radio-control); background: var(--tinta); color: var(--sobre-tinta); font: inherit;
}
.saltar:focus { top: var(--e-3); }
body:not([data-rol]) .saltar { display: none; }
.barra-inferior, .solo-movil { display: none; }

/* Presentación por rol. El control real está en el Worker (PERMISOS). */
body[data-rol="direccion"] [data-escritura] { display: none !important; }

/* Tablet: barra lateral solo con iconos (la etiqueta queda para lectores de pantalla). */
@media (max-width: 1023px) {
  .shell.on { grid-template-columns: 76px minmax(0, 1fr); }
  #sidebar:not(.abierto) .sb-marca div, #sidebar:not(.abierto) .sb-lbl, #sidebar:not(.abierto) .sb-item span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  #sidebar:not(.abierto) .sb-item { justify-content: center; }
  .usuario { display: none; }
}

/* Móvil: barra inferior con 3 destinos + Más; la barra lateral se abre como panel. */
@media (max-width: 639px) {
  .shell.on { display: block; }
  #sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 300; width: min(86vw, 320px); height: 100%;
    transform: translateX(-105%); visibility: hidden; transition: transform 0.2s, visibility 0s 0.2s; box-shadow: var(--sombra-capa);
  }
  #sidebar.abierto { transform: none; visibility: visible; transition: transform 0.2s; }
  .solo-movil { display: inline-flex; }
  .barra-superior { position: static; padding: var(--e-2) var(--e-4); }
  .titulo-vista { font-size: var(--letra-15); }
  .sello-custodia { padding: var(--e-1) var(--e-3); max-width: none; flex: 1 1 100%; }
  main#vista { padding: var(--e-4) var(--e-4) calc(72px + var(--e-4)); }
  .barra-inferior {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset: auto 0 0 0; z-index: 200;
    background: var(--superficie); border-top: 1px solid var(--linea);
  }
  .barra-inferior a, .barra-inferior button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px;
    background: none; border: 0; color: var(--texto-2); text-decoration: none; font-size: var(--letra-12); font-weight: 600;
  }
  .barra-inferior [aria-current="page"] { color: var(--tinta); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid2, .frow { grid-template-columns: 1fr !important; }
  .card { overflow-x: auto; }
  .bar { flex-wrap: wrap; }
}

.lg-campo { margin-bottom: var(--e-3); }
.lg-campo:last-of-type { margin-bottom: var(--e-5); }
.lg-entrar { width: 100%; }
h1.lg-t, p.lg-s { margin-top: 0; }