/* =========================================================================
   Datos Iquique · estilos del panel de administración (solo admin.html)
   Se carga después de styles.css y usa sus tokens: escala tipográfica (--fs-*), espaciado
   (--space-*), alturas de control (--control-*), filete (--rule), movimiento (--dur-fast,
   --ease) y capas (--z-*). Colores, sombras, espaciado, tipografía y capas salen de los tokens;
   solo son literales los anchos de columna (rem) y los trazos de 1,5 y 2 px, como en styles.css.

   Mismas reglas que el sitio (estilo de pos.aisystem.cl, 2026-10-26): botones índigo o blancos con
   borde, fichas y paneles blancos con borde fino y esquinas de 12 px (--radius), el gris azulado claro
   solo como hover (--surface-2) y cabecera de tabla (--table-head-bg), hover solo con puntero y foco
   de 2 px en --focus.

   Orden del archivo:
     1 Cabecera y portada · 2 Estructura (tarjetas y pestañas) · 3 Avisos · 4 Formularios
     5 Botones del panel · 6 Desplegables (historial, estaciones, productos) · 7 Tablas de precios
     8 Tiendas por comuna · 9 Hover (solo con puntero) · 10 Pulsado · 11 Responsive
     12 Colores forzados.
   Las clases e ids que usa admin.js se conservan (contrato en CLAUDE.md).
   ========================================================================= */

/* ---- 1 · Cabecera y portada ---- */

/* El sitio público estrenó fondo gris azulado, rótulos de 14 px, controles de 44 px con dedo y cabecera de 56 px en el teléfono
   (2026-10-30). El panel es otra herramienta: conserva sus valores de antes con los mismos tokens. */
.admin {
  --bg: var(--admin-bg);
  --canvas: var(--admin-canvas);
  --muted: var(--admin-muted);
  --header-muted: var(--admin-muted);
  --table-head-bg: var(--admin-canvas);
  --table-head-muted: var(--admin-muted);
  --control-md: 40px;
}

.admin .badge,
.admin .label {
  font-size: var(--fs-xs);
}

@media (max-width: 640px) {
  .admin .topbar {
    min-height: var(--header-h);
  }

  .admin .site-brand {
    min-height: var(--header-h);
    padding: var(--space-2) 0;
  }
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* «Ver sitio» y «Cerrar sesión» en la barra: sin la flecha de los enlaces con forma de botón, que
   entre dos botones se lee como una miga de pan. */
.site-header .btn.ghost {
  color: var(--header-text);
}

.header-actions a.btn::after {
  display: none;
}

/* Portada compacta: es una herramienta de trabajo, no una página de lectura. */
.hero-inner.compact {
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
}

.hero-inner.compact h1 {
  font-size: var(--fs-4xl);
  max-width: none;
}

.hero-inner.compact .lead {
  max-width: calc(var(--measure) + var(--measure-narrow));
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-md);
  font-weight: 400;
}

/* ---- 2 · Estructura: contenido, tarjetas y pestañas ---- */

.admin main {
  padding-top: var(--space-5);
  padding-bottom: var(--space-9);
}

/* Ritmo de la tarjeta: título, 8 px, ayuda, 16 px, contenido; entre tarjetas, 24 px. */
.card {
  background: var(--surface);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.card.narrow {
  max-width: 28rem;
  margin: var(--space-5) auto;
}

.card h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-heading);
}

.card > h2 {
  margin-bottom: var(--space-2);
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

/* Con un botón o un buscador la cabecera es una barra de herramientas: 16 px hasta el contenido. */
.card-head:has(.btn, input) {
  margin-bottom: var(--space-4);
}

.card-head input[type='search'] {
  flex: 1 1 15rem;
  max-width: 20rem;
  min-width: 0;
}

.tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
  scrollbar-width: thin;
}

/* La pestaña activa se distingue por el color y el filete azul, no por el peso: así las demás
   no se corren al cambiar de pestaña. */
.tab {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: var(--rule) solid transparent;
  min-height: var(--control-lg);
  padding: 0 var(--space-4);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.tab[aria-selected='true'] {
  color: var(--text-strong);
  border-bottom-color: var(--accent);
}

.tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* ---- 3 · Avisos ---- */

/* Misma anatomía que .map-hint y .form-error (styles.css): 12 × 16, 14 px, peso 400 y filete de
   3 px a la izquierda; solo cambian el fondo y el filete según el significado. */
.notice {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--warn-soft);
  border-left: var(--rule) solid var(--warn-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-body);
}

.notice a {
  color: inherit;
}

/* Aviso flotante: ancho del texto, hasta 40 rem; en el teléfono ocupa el ancho con 16 px por lado. */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  z-index: var(--z-toast);
  width: max-content;
  max-width: min(40rem, calc(100% - 2 * var(--space-4)));
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--text);
  color: var(--inverse-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  box-shadow: var(--shadow-overlay);
}

.toast.error {
  background: var(--danger-solid);
  color: var(--on-danger);
}

/* Por encima de la barra pegajosa (hasta 129 px), para no tapar sus botones justo tras guardar. */
@media (min-width: 641px) {
  .toast {
    bottom: calc(var(--control-lg) * 3);
  }
}

.toast:not([hidden]) {
  animation: toast-in calc(var(--dur-fast) * 2) var(--ease) both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, var(--space-2));
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes toast-in-top {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--space-2)));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.status-line {
  margin: 0 0 var(--space-2);
  max-width: calc(var(--measure) + var(--measure-narrow));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.status-line.error {
  color: var(--danger);
}

/* ---- 4 · Formularios ---- */

.stack {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
  align-items: start;
}

.settings-grid.wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.card h2 + .settings-grid {
  margin-top: var(--space-4);
}

.settings-grid .form-actions {
  grid-column: 1 / -1;
  margin-top: 0;
}

/* El campo de hora tiene tres segmentos; el anillo acompaña a todos. */
input[type='time']:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* Rótulo de 14 px en peso 600; el texto escrito va en 16 px (en el teléfono, menos de 16 px
   hace que el navegador amplíe la página al tocar el campo). */
.input-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.admin input,
.admin select,
.admin textarea {
  font-size: var(--fs-md);
}

.input-field input,
.input-field select,
.input-field textarea {
  width: 100%;
  font-weight: 400;
}

.input-field textarea {
  resize: vertical;
  line-height: var(--lh-snug);
}

.store-local {
  color: var(--muted);
  font-weight: 400;
}

.field-help {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 400;
}

/* Casillas: 20 px, en índigo como los botones. */
.switch,
.check-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-md);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.switch input,
.check-field input,
.price-table input[type='checkbox'] {
  display: block;
  flex: none;
  width: 1.25rem; /* 20 px: sin token en styles.css */
  height: 1.25rem;
  margin: 0;
  accent-color: var(--action);
  cursor: pointer;
}

/* Las casillas con texto largo (editor de medicamentos) alinean la casilla con la primera línea. */
.check-field {
  align-items: flex-start;
  min-height: 0;
}

/* Suelta, la casilla lleva el anillo por fuera, como los botones. */
.switch input:focus-visible,
.check-field input:focus-visible,
.price-table input[type='checkbox']:focus-visible {
  outline-offset: 2px;
}

/* «Ejecutar automáticamente» queda en la misma línea que los campos de su fila. */
#catalogo-config .settings-grid > .switch {
  align-self: end;
  min-height: var(--control-lg);
}

/* Barra de acciones: una sola, pegada abajo mientras se recorre el formulario (ajustes, catálogo
   y editores de lista). Dentro de una tarjeta lleva 16 px de aire sobre ella. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-4);
}

.sticky-actions,
#catalogo-config > .form-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  margin-top: 0;
  padding: var(--space-3) 0;
  background: var(--bg);
  border-top: 1px solid var(--border-strong);
}

.card .sticky-actions {
  margin-top: var(--space-4);
}

/* La barra pegajosa mide hasta 129 px (dos filas en pantallas angostas): el foco con Tab no debe
   quedar bajo ella. */
html {
  scroll-padding-bottom: 9rem;
}

/* En una pantalla baja (teléfono horizontal, zoom del 400 %) la barra se llevaría media pantalla. */
@media (max-height: 30rem) {
  .sticky-actions,
  #catalogo-config > .form-actions {
    position: static;
  }
}

/* La barra de Ajustes cierra su formulario; la tarjeta siguiente no queda pegada a ella. */
#ajustes-general {
  margin-bottom: var(--space-5);
}

.dirty-note {
  color: var(--warn);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Campo y botón de la misma fila miden lo mismo: 40 px. */
.inline-form input[type='number'],
.inline-form select {
  min-height: var(--control-md);
  padding-top: 0;
  padding-bottom: 0;
}

.inline-form input[type='number'] {
  width: 7rem;
}

.inline-form .btn.small {
  min-height: var(--control-md);
}

.station-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-4);
  align-items: end;
}

.station-form .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  grid-column: 1 / -1;
}

.subcard {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.subcard h3 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-md);
  font-weight: 600;
}

/* ---- 5 · Botones y etiquetas del panel ----
   El peligro («Quitar», «Eliminar estación», «Volver a la lista predeterminada») es un botón con borde
   más y solo se tiñe de rojo al pasar el puntero o al pulsarlo. */
.btn.danger {
  color: var(--tertiary);
  border-color: var(--tertiary-border);
}

/* «Oficial» y «Lista predeterminada»: etiqueta neutra con filete, no un relleno azul. */
.admin .badge.official {
  background: transparent;
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.item-actions {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

.item-actions .btn {
  min-width: var(--control-sm);
  justify-content: center;
  padding: 0 var(--space-2);
}

/* ---- 6 · Desplegables ----
   Un solo patrón: chevrón con el trazo del acordeón del sitio, a la izquierda del título, filas de
   48 px y hover gris. Sirve al historial, a las estaciones y a los productos de las listas. */
.sync-log > summary::before,
.admin-station > summary::before {
  content: '';
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  margin: 0 var(--space-1);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease);
}

.sync-log[open] > summary::before,
.admin-station[open] > summary::before {
  transform: rotate(45deg);
}

.sync-log > summary::-webkit-details-marker,
.admin-station > summary::-webkit-details-marker {
  display: none;
}

.sync-log > summary,
.admin-station > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: var(--control-lg);
  padding: var(--space-2) var(--space-4);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

/* Historial: filetes arriba y abajo y una fila por registro. */
.sync-log {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sync-log > summary {
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.sync-log ul {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.sync-log li {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}

/* Estaciones y productos. */
.admin-list {
  display: grid;
  gap: var(--space-2);
}

/* overflow: clip, para que el gris del hover del resumen no se salga de las esquinas (su foco va por dentro). */
.admin-station {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
  background: var(--surface);
}

.admin-station[open] {
  border-color: var(--border-strong);
}

.summary-address {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-station-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-4);
}

/* Producto de una lista: título a la izquierda; subir, bajar y quitar a la derecha. */
.list-item > summary {
  justify-content: space-between;
}

.item-title {
  flex: 1 1 15rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.item-title strong {
  font-weight: 600;
}

.item-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: start;
}

/* ---- 7 · Tablas de precios ----
   La anatomía de .top-table (styles.css): caja redondeada, cabecera gris azulada clara y filetes finos,
   con celdas más densas (12 × 16). En el teléfono cada fila pasa a ser una ficha con el nombre en una
   franja gris azulada. */
.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.price-table th,
.price-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.price-table thead th {
  color: var(--table-head-text);
  background: var(--table-head-bg);
  font-weight: 600;
}

.price-table tbody th {
  font-weight: 600;
}

.price-table small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 400;
}

/* Catálogo: los selectores y los números ocupan su columna, con un máximo. */
#catalogo-tiendas td > select,
#catalogo-tiendas td > input[type='number'] {
  width: 100%;
  max-width: 12rem;
}

#catalogo-tiendas td > input[type='number'] {
  max-width: 7rem;
}

/* ---- 8 · Tiendas por comuna ----
   Un solo marco con filetes entre filas; el nombre a la izquierda y, a su derecha, una casilla
   «Mostrar en …» por comuna (con el local, si la tienda tiene varios). */
.store-rows {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow: clip;
}

.store-row {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

.store-row + .store-row {
  border-top: 1px solid var(--border);
}

.store-name {
  display: flex;
  align-items: center;
  min-height: var(--control-md);
  font-weight: 600;
}

.store-comunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
}

.store-comuna {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.store-row-note {
  margin: 0;
}

.store-row-note:empty {
  display: none;
}

/* ---- 9 · Hover: solo con puntero real ---- */
@media (hover: hover) {
  .tab:hover {
    color: var(--text-strong);
    background: var(--surface-2);
  }

  .sync-log > summary:hover,
  .admin-station > summary:hover {
    background: var(--surface-2);
  }

  .site-header .btn.ghost:not(:disabled):hover {
    background: var(--header-hover);
    border-color: transparent;
    color: var(--header-text);
  }

  .btn.danger:not(:disabled):hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
  }

  .notice a:hover {
    text-decoration-thickness: 2px;
  }
}

/* ---- 10 · Pulsado (también en pantallas táctiles, donde no hay hover) ---- */
.site-header .btn.ghost:not(:disabled):active {
  background: var(--header-border);
  border-color: transparent;
  color: var(--header-text);
}

.btn.danger:not(:disabled):active {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

/* ---- 11 · Responsive ----
   Puntos de corte por contenido (medidos; no admiten var()):
     900 px  una estación con dos insignias y una dirección larga cabe en columnas alineadas desde 900 px
             (la tabla del catálogo, desde unos 860): bajo 900 px las tablas de precios pasan a fichas, en
             dos columnas, y la estación se envuelve
     720 px  las seis pestañas necesitan 631 px de ancho: bajo 720 px van en dos filas que se reparten el ancho
     640 px  teléfono: fichas de una columna (más (pointer: coarse) para los objetivos táctiles)
     420 px  la marca y «Ver sitio» + «Cerrar sesión» no caben juntas (bajo 404 px se parten solas):
             la segunda fila se alinea con la marca y lleva el filete del menú público */

@media (min-width: 900px) {
  /* Estación: marca, dirección, comuna e insignias en columnas alineadas. */
  .admin-station:not(.list-item) > summary {
    display: grid;
    grid-template-columns: var(--space-4) 7.5rem minmax(10rem, 18rem) 9rem;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }

  .price-table tbody tr:last-child > * {
    border-bottom: 0;
  }

  /* Con varias estaciones abiertas, las columnas quedan en el mismo lugar. */
  .admin-station-body .price-table {
    table-layout: fixed;
  }

  .admin-station-body .price-table th:nth-child(1) {
    width: 14%;
  }

  .admin-station-body .price-table th:nth-child(2) {
    width: 25%;
  }

  .admin-station-body .price-table th:nth-child(4) {
    width: 19%;
  }

  /* Contraseña: tres campos en tres columnas y el botón debajo (con auto-fit, el botón que ocupa
     toda la fila crea una cuarta columna vacía y los campos no llegan al borde). */
  #clave-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Catálogo en tabla: los controles no se encogen hasta cortar su valor. */
  #catalogo-tiendas td > [name$='.motor'] {
    min-width: 11rem;
  }

  #catalogo-tiendas td > [name$='.modo'] {
    min-width: 6rem;
  }

  #catalogo-tiendas td > input[type='number'] {
    min-width: 4.5rem;
  }
}

@media (max-width: 899px) {
  /* Tablas de precios: una ficha por fila, con el nombre en una franja gris azulada (como las del sitio). */
  .price-table {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .price-table thead {
    display: none;
  }

  .price-table,
  .price-table tr,
  .price-table th,
  .price-table td {
    display: block;
  }

  .price-table tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .price-table tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    overflow: clip;
  }

  .price-table tbody th {
    color: var(--table-head-text);
    background: var(--table-head-bg);
    border-bottom: 1px solid var(--border);
  }

  .price-table tbody th small {
    color: var(--table-head-muted);
  }

  .price-table td:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }

  .price-table td:last-child {
    border-bottom: 0;
  }

  .price-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    color: var(--muted);
    font-size: var(--fs-xs);
  }

  /* Catálogo: rótulo a la izquierda y control a la derecha, todos en la misma columna. */
  #catalogo-tiendas td[data-label] {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
  }

  #catalogo-tiendas td[data-label]::before {
    margin: 0;
    font-size: var(--fs-sm);
  }

  #catalogo-tiendas td > select,
  #catalogo-tiendas td > input[type='number'] {
    max-width: none;
  }
}

/* Pestañas en dos filas que se reparten el ancho (con la letra del navegador agrandada también
   caben), con un filete por fila; la activa lleva su filete azul. */
@media (max-width: 720px) {
  .tabs {
    flex-wrap: wrap;
    overflow: visible;
    border-bottom: 0;
  }

  .tab {
    flex: 1 1 auto;
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--border);
  }

  .tab[aria-selected='true'] {
    border-bottom-color: var(--accent);
    box-shadow: inset 0 calc(1px - var(--rule)) 0 var(--accent);
  }
}

@media (max-width: 640px) {
  .card {
    padding: var(--space-4);
  }

  .card-head input[type='search'] {
    flex-basis: 100%;
    max-width: none;
  }

  /* Un botón largo («Volver a la lista predeterminada») baja a dos líneas en vez de ensanchar la página. */
  .form-actions .btn {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  /* El aviso va arriba, bajo la cabecera (fila de la marca de 64 px y de los botones de 48), a lo ancho con 16 px por lado. */
  .toast {
    top: calc(var(--header-h) + var(--control-lg) + var(--space-4));
    right: var(--space-4);
    bottom: auto;
    left: var(--space-4);
    width: auto;
    max-width: none;
    transform: none;
  }

  .toast:not([hidden]) {
    animation-name: toast-in-top;
  }

  .card .sticky-actions {
    position: static;
  }

  .admin-station-body {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  /* Estación: el chevrón y la marca arriba; la comuna y las insignias, bajo la marca. */
  .admin-station:not(.list-item) > summary {
    display: grid;
    grid-template-columns: var(--space-4) auto minmax(0, 1fr);
  }

  .admin-station:not(.list-item) > summary > :nth-child(n + 3) {
    grid-column: 2 / -1;
    justify-self: start;
  }

  /* Tiendas: el nombre sobre sus casillas. */
  .store-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-table tbody {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dedo: botones y filas de 40 px o más. */
@media (max-width: 640px), (pointer: coarse) {
  .item-actions .btn {
    min-width: var(--control-md);
  }
}

@media (max-width: 420px) {
  .header-actions {
    width: calc(100% + 2 * var(--space-3));
    margin-left: calc(-1 * var(--space-3));
    border-top: 1px solid var(--header-border);
  }

  .header-actions .btn {
    padding: 0 var(--space-3);
  }
}

/* ---- 12 · Colores forzados (alto contraste de Windows) e impresión ---- */
@media (forced-colors: active) {
  /* Un borde transparente se pinta de negro: las pestañas no activas lo igualan al fondo. */
  .tab {
    border-bottom-color: Canvas;
  }

  .tab[aria-selected='true'] {
    border-bottom-color: Highlight;
  }

  .toast {
    border: 1px solid CanvasText;
  }
}

/* En dos filas cada fila lleva su filete (1 px) y la activa uno grueso (3 px) que sí se distingue. */
@media (forced-colors: active) and (max-width: 720px) {
  .tab {
    border-bottom-color: CanvasText;
  }

  .tab[aria-selected='true'] {
    border-bottom-width: var(--rule);
    border-bottom-color: Highlight;
  }
}

/* Los fondos no se imprimen: cabecera y nombre de las tablas de precios en negro sobre blanco. */
@media print {
  .price-table thead th,
  .price-table tbody th {
    color: var(--text);
    background: none;
  }

  .price-table thead th {
    border-bottom-color: var(--text);
  }

  .price-table tbody th small {
    color: var(--muted);
  }
}