/* Maquetación de la app sobre el sistema de diseño "Almacén".
   Colores, tipografía, espacios y radios vienen de tokens.css; los componentes (inv-*) de bundle.css.
   Aquí solo va la estructura de las pantallas y lo que el sistema aún no define. */
h1 { margin: 0; font: 700 28px/34px var(--font-sans); letter-spacing: -.02em; }
h2 { margin: 0 0 var(--space-3); font: 600 16px/24px var(--font-sans); }
h3 { margin: 0; font: 600 16px/24px var(--font-sans); }
p { margin: 0 0 var(--space-3); }
main a:not([class]) { color: var(--primary); text-decoration: none; font-weight: 600; }
main a:not([class]):hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[hidden] { display: none !important; }
.tenue { color: var(--ink-muted); font-size: 13px; line-height: 18px; }

/* Estructura */
body.panel { display: flex; min-height: 100vh; }
body.panel .inv-side { position: sticky; top: 0; height: 100vh; min-height: 0; overflow-y: auto; flex: none; }
.inv-side__brand { display: block; color: var(--ink); text-decoration: none; }
form.inv-side__user { align-items: baseline; gap: var(--space-2); }
button.inv-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; }
main { flex: 1; min-width: 0; padding: var(--space-6); }
body.publico main { max-width: 1072px; margin: 0 auto; }
.tope { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); }
.tope .inv-side__brand { padding: var(--space-2) 0; }
.cab { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.cab h1 .inv-badge { vertical-align: middle; }
.acciones, .botones { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.botones { justify-content: flex-end; }
.bloque { margin-top: var(--space-6); }
.estrecho { max-width: 480px; margin: var(--space-4) auto; }
.estrecho.ancho { max-width: 640px; }
.estrecho h1, .publico main > h1 { margin-bottom: var(--space-4); }

/* Formularios: la etiqueta envuelve al campo */
label.inv-field { font: 600 13px/18px var(--font-sans); color: var(--ink); }
.inv-field.corto { max-width: 160px; }
.inv-input[type=file] { height: auto; padding: 7px var(--space-3); font-size: 13px; }
input[type=radio] { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.pila { display: flex; flex-direction: column; gap: var(--space-4); }
.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: var(--space-4); }
.tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--space-4); align-items: start; margin-top: var(--space-5); }
.formulario { max-width: 736px; }
.inv-card.formulario { margin-top: var(--space-4); }
.opciones { border: 0; padding: 0; margin: 0; display: flex; gap: var(--space-5); flex-wrap: wrap; }
.opciones legend { padding: 0; margin-bottom: var(--space-2); font: 600 13px/18px var(--font-sans); }
.opciones label { display: flex; align-items: center; gap: var(--space-2); }
.buscar { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 544px; }
.buscar.grande { max-width: none; }
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
.en-linea { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.en-linea .inv-input { width: auto; min-width: 192px; flex: 1; }

.exportar { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.exportar .inv-field { gap: var(--space-1); }
.exportar .inv-input { width: 152px; }
.cab { align-items: flex-end; }
.acciones { align-items: flex-end; justify-content: flex-end; }
#salida:target { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Avisos */
.aviso { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--success-soft); color: var(--success); font-weight: 600; }
.aviso.error { background: var(--danger-soft); color: var(--danger); }
.aviso.alerta { background: var(--warning-soft); color: var(--warning); }
.inv-empty { align-items: flex-start; text-align: left; }
.inv-empty p { max-width: 70ch; }

/* Pestañas como enlaces */
.inv-tabs { flex-wrap: wrap; margin-bottom: var(--space-4); }
a.inv-tab { display: inline-flex; align-items: center; text-decoration: none; }
.inv-tab[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Tablas */
.desliza { overflow-x: auto; border-radius: var(--radius-lg); }
.inv-table th.num { text-align: right; font: 500 12px/16px var(--font-sans); }
.inv-table .num { white-space: nowrap; }
.inv-table .num .inv-badge { font-family: var(--font-sans); margin-left: var(--space-2); }
.inv-table .mini { width: 56px; padding-right: 0; }
.inv-table .mini img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.acciones-fila { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; min-width: 208px; }
details summary { cursor: pointer; color: var(--primary); font-weight: 600; }
details[open] { width: 100%; padding: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); }
details[open] summary { margin-bottom: var(--space-3); }
.persona { margin: 0 0 var(--space-2); }

/* Fichas e indicadores */
.stats { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
a.inv-stat { color: var(--ink); text-decoration: none; }
.inv-stat .inv-badge { align-self: flex-start; margin-top: var(--space-1); }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.ficha dt { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.ficha dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ficha-fila { display: grid; grid-template-columns: minmax(180px, auto) 1fr; gap: var(--space-4); align-items: start; }
.ficha-fila .ficha { margin: 0; }
.fotos { list-style: none; display: flex; gap: var(--space-3); flex-wrap: wrap; padding: 0; margin: var(--space-4) 0 0; }
.fotos li { text-align: center; font-size: 13px; }
.fotos img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); display: block; margin-bottom: var(--space-1); }

/* Checkout */
.catalogo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: var(--space-4); }
.catalogo li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.catalogo h2 { margin: 0; font: 600 15px/22px var(--font-sans); }
.catalogo p { margin: 0; }
.catalogo .inv-btn { margin-top: auto; }
.catalogo .foto { aspect-ratio: 4 / 3; background: var(--surface-sunken); border-radius: var(--radius-sm); overflow: hidden; }
.catalogo .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalogo .sin { color: var(--danger); font: 600 13px/18px var(--font-sans); }
.otro { margin-top: var(--space-5); }
.folio { margin: 0; font: 600 16px/24px var(--font-sans); }
.folio .inv-mono { font-size: 20px; }

dialog { width: calc(100% - 32px); max-width: 448px; padding: var(--space-5); background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
dialog::backdrop { background: rgba(20, 26, 36, .5); }
dialog p { margin-bottom: var(--space-5); }

@media (max-width: 860px) {
  body.panel { display: block; }
  body.panel .inv-side { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: var(--space-2) var(--space-3); }
  .inv-side__brand { padding-bottom: var(--space-2); }
  .inv-nav { flex-direction: row; overflow-x: auto; }
  .inv-nav a { white-space: nowrap; gap: var(--space-2); }
  .inv-nav__group { display: none; }
  form.inv-side__user { margin-top: var(--space-2); }
  main { padding: var(--space-4); }
  .tope { padding: var(--space-2) var(--space-4); }
  .ficha-fila { grid-template-columns: 1fr; }
  h1 { font-size: 24px; line-height: 30px; }
}