/* ==========================================================================
   PulgaDigital · hoja de estilos única
   Mundo visual: arcade/terminal oscuro fijado por el dueño (ver DESIGN.md).
   Fondo cian profundo, texto fósforo menta, acento ámbar en oscuro y lima en
   claro (mismo rol, distinto material), bordes de 2px con sombra dura
   (lenguaje pixel), cursor parpadeante, marquee y sello VENDIDO.
   ========================================================================== */

:root {
  /* Tema oscuro (por defecto): Cian glaciar, saturado */
  --fondo: #04141B;
  --panel: #0A2029;
  --linea: #1B414E;         /* divisores decorativos */
  --linea-fuerte: #4E9EAC;  /* bordes interactivos, 6.1:1 sobre el fondo */
  --texto: #E4FFF6;         /* 17.8:1 sobre el fondo */
  --tenue: #7FD4C4;         /* 9.7:1 sobre el panel */
  --verde: #35F5AC;         /* estados positivos, 11.8:1 sobre panel */
  --ambar: #FFB042;         /* acento de relleno: botones, chips, foco; 10.3:1 */
  --ambar-hover: #FFD07E;
  --acento-texto: #FFB042;  /* acento como texto (precios, cursor); en oscuro es el mismo */
  --sobre-ambar: #04141B;   /* texto sobre rellenos ámbar, 10.3:1 */
  --sobre-verde: #04141B;   /* texto sobre rellenos verdes, 13.2:1 */
  --error: #FF8573;
  --sombra: #020E13;
  --tipografia-px: "Press Start 2P", monospace;
  --tipografia-terminal: "VT323", monospace;
  color-scheme: dark;
}

/* Tema claro: Glaciar de día con acento lima.
   El relleno del acento es lima brillante con texto oscuro encima;
   el acento como texto (precios) va en lima oscuro para dar 4.5:1.
   Los tokens conservan el nombre --ambar por rol, no por color. */
html[data-tema="claro"] {
  --fondo: #E9F2EF;
  --panel: #FBFDFC;
  --linea: #C9DBD5;
  --linea-fuerte: #5F837D;  /* 3.66:1 sobre el fondo */
  --texto: #0E2529;         /* 14:1 sobre el fondo */
  --tenue: #456B64;         /* 5.8:1 sobre el panel */
  --verde: #0E7A5F;         /* 5.18:1 */
  --ambar: #A9E42B;         /* relleno lima: 10.5:1 con el texto oscuro encima */
  --ambar-hover: #93CC15;   /* lima más oscuro al pasar el cursor: 8.3:1 */
  --acento-texto: #4C7000;  /* lima oscuro como texto: 5.1:1 sobre el fondo */
  --sobre-ambar: #0E2529;
  --sobre-verde: #FBFDFC;
  --error: #B3382B;
  --sombra: #C9DAD4;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* El atributo hidden siempre gana: .barra-consulta y .login usan display:flex. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--linea-fuerte) var(--panel);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipografia-terminal);
  font-size: 1.35rem; /* VT323 corre pequeño: 21.6px base */
  line-height: 1.45;
}

/* Textura CRT muy sutil: identidad fija del sitio (ver brief), no decoración.
   En modo claro no aplica (luz de día, sin monitor de fósforo). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.13) 0 1px, transparent 1px 3px);
  opacity: 0.3;
}

html[data-tema="claro"] body::after {
  display: none;
}

::selection {
  background: var(--ambar);
  color: var(--sobre-ambar);
}

h1, h2, h3 {
  font-family: var(--tipografia-px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--texto);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.05rem, 2.6vw, 1.5rem); }
h2 { font-size: 0.95rem; }
h3 { font-size: 0.72rem; }

p { margin: 0 0 1em; }

a {
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--linea-fuerte);
}

a:hover {
  color: var(--verde);
  text-decoration-color: var(--verde);
}

/* El skip link tiene fondo ámbar: el hover no debe ponerle texto verde encima. */
.saltar:hover {
  color: var(--sobre-ambar);
}

img { max-width: 100%; }

.mascota {
  image-rendering: pixelated;
}

/* La mascota con halo crema solo vive en el tema oscuro; en claro, sin halo. */
.solo-claro { display: none; }

html[data-tema="claro"] .solo-oscuro { display: none; }
html[data-tema="claro"] .solo-claro { display: inline-block; }

.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ambar);
  color: var(--sobre-ambar);
  font-family: var(--tipografia-px);
  font-size: 0.7rem;
  padding: 12px 16px;
}

.saltar:focus-visible {
  left: 8px;
  top: 8px;
}

/* Foco visible siempre: borde discontinuo ámbar, lenguaje retro. */
:focus-visible {
  outline: 3px dashed var(--ambar);
  outline-offset: 3px;
}

/* ---------- botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  font-family: var(--tipografia-px);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--texto);
  background: var(--panel);
  border: 2px solid var(--linea-fuerte);
  box-shadow: 4px 4px 0 var(--sombra);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.boton:hover {
  color: var(--verde);
  border-color: var(--verde);
}

.boton:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--sombra);
}

.boton--primario {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--sobre-ambar);
}

.boton--primario:hover {
  background: var(--ambar-hover);
  border-color: var(--ambar-hover);
  color: var(--sobre-ambar);
}

.boton--agregado {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--sobre-verde);
}

.boton--agregado:hover {
  color: var(--sobre-verde);
  border-color: var(--verde);
  filter: brightness(0.93);
}

.boton--mini {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 0.7rem;
  box-shadow: 3px 3px 0 var(--sombra);
}

.boton--archivo {
  position: relative;
  overflow: hidden;
}

/* Botón de tema: icono dibujado (sol/luna), el icono muestra el modo destino. */
.boton--tema {
  padding: 12px 14px;
  line-height: 0;
}

.boton--tema .icono-luna { display: none; }

html[data-tema="claro"] .boton--tema .icono-sol { display: none; }
html[data-tema="claro"] .boton--tema .icono-luna { display: inline-block; }

.cabecera-derecha {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  border-bottom: 2px solid var(--linea);
  padding: 6px 0;
  color: var(--acento-texto);
  font-size: 1.3rem;
}

.marquee__pista {
  display: inline-flex;
  white-space: nowrap;
  animation: desfile 30s linear infinite;
}

.marquee__pista > span {
  padding-right: 56px;
}

/* Pausa al pasar el cursor o al enfocar con teclado: el lector puede detener la cinta. */
.marquee:hover .marquee__pista,
.marquee:focus-within .marquee__pista {
  animation-play-state: paused;
}

@keyframes desfile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- cabecera ---------- */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.marca:hover { text-decoration: none; }

.marca__texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.marca__nombre {
  font-family: var(--tipografia-px);
  font-size: 0.95rem;
  color: var(--verde);
}

.marca__lema {
  font-size: 1.15rem;
  color: var(--tenue);
}

.navegacion {
  display: flex;
  gap: 22px;
}

.navegacion a {
  font-size: 1.35rem;
  padding: 8px 4px;
}

/* ---------- hero ---------- */

.heroe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.heroe__texto {
  max-width: 58ch;
}

.cursor::after {
  content: "_";
  color: var(--acento-texto);
  animation: parpadeo 1s steps(1) infinite;
}

@keyframes parpadeo {
  50% { opacity: 0; }
}

.heroe__subtitulo {
  font-size: 1.4rem;
  margin-bottom: 26px;
}

.heroe__mascota {
  flex-shrink: 0;
}

/* ---------- catálogo ---------- */

.catalogo {
  padding-bottom: 72px;
}

.catalogo__cabecera {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--linea);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.catalogo__cabecera h2 { margin: 0; }

.catalogo__conteo {
  margin: 0;
  color: var(--tenue);
}

.catalogo__controles {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.buscador {
  width: min(340px, 100%);
  padding: 10px 14px;
  font-family: var(--tipografia-terminal);
  font-size: 1.35rem;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--linea-fuerte);
  caret-color: var(--ambar);
}

.buscador::placeholder {
  color: var(--tenue);
  opacity: 1;
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  min-height: 44px;
  padding: 8px 14px;
  font-family: var(--tipografia-terminal);
  font-size: 1.25rem;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--linea-fuerte);
  cursor: pointer;
}

.chip:hover {
  color: var(--verde);
  border-color: var(--verde);
}

.chip[aria-pressed="true"] {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--sobre-ambar);
}

.chip[aria-pressed="true"]:hover {
  color: var(--sobre-ambar);
  filter: brightness(1.06);
}

/* En claro, aclarar el ámbar bajaría el contraste del texto claro: se oscurece. */
html[data-tema="claro"] .chip[aria-pressed="true"]:hover {
  filter: brightness(0.9);
}

.catalogo__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 20px;
}

.articulo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--panel);
  border: 2px solid var(--linea-fuerte);
  box-shadow: 5px 5px 0 var(--sombra);
}

/* Toda la tarjeta es clicable (abre el detalle); los botones van encima. */
.articulo:hover {
  border-color: var(--verde);
}

.articulo__ver {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.articulo__ver:focus-visible {
  outline: 3px dashed var(--ambar);
  outline-offset: -3px;
}

/* Solo los botones de acción viven sobre la tarjeta estirada;
   el sello VENDIDO es un overlay dentro del marco de la foto. */
.articulo .boton {
  position: relative;
  z-index: 2;
}

.articulo__foto {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 2px solid var(--linea);
  overflow: hidden;
  margin-bottom: 4px;
}

.articulo__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Artículo sin foto: la mascota ocupa el marco. */
.articulo__foto-placeholder {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  opacity: 0.85;
}

.articulo__nombre {
  margin: 0 0 2px;
  font-size: 0.72rem;
  line-height: 1.6;
  /* 2 líneas reservadas: los precios de la fila quedan alineados */
  min-height: 3.2em;
}

.articulo__spec {
  margin: 0;
  color: var(--tenue);
  font-size: 1.25rem;
}

.articulo__precio {
  margin: 0;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--acento-texto);
}

.articulo__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-info {
  padding: 2px 8px;
  border: 1px solid var(--linea-fuerte);
  color: var(--tenue);
  font-size: 1.1rem;
  white-space: nowrap;
}

.articulo__desc {
  margin: 0;
  color: var(--tenue);
  font-size: 1.25rem;
  line-height: 1.3;
}

.articulo .boton--agregar {
  margin-top: auto;
  align-self: flex-start;
}

.articulo--agotado .articulo__nombre,
.articulo--agotado .articulo__desc,
.articulo--agotado .articulo__spec {
  color: var(--tenue);
}

.articulo--agotado .articulo__precio {
  color: var(--tenue);
}

/* Sello VENDIDO: tinta estampada sobre la foto, como en un mercado real. */
.sello {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(10deg);
  padding: 9px 13px;
  font-family: var(--tipografia-px);
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: var(--verde);
  border: 3px solid currentColor;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  pointer-events: none;
}

.catalogo__vacio {
  grid-column: 1 / -1;
  padding: 28px 18px;
  border: 2px dashed var(--linea-fuerte);
  text-align: center;
}

.catalogo__vacio p {
  margin-bottom: 14px;
  font-size: 1.4rem;
}

/* ---------- colores del sitio (panel) ---------- */

#formulario-colores fieldset.colores {
  border: 2px solid var(--linea);
  margin: 0 0 16px;
  padding: 12px 14px 14px;
}

#formulario-colores legend {
  font-family: var(--tipografia-px);
  font-size: 0.7rem;
  padding: 0 8px;
}

.colores-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px 18px;
}

.color-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 1.25rem;
}

.color-fila input[type="color"] {
  width: 44px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--linea-fuerte);
  background: none;
  cursor: pointer;
  flex: none;
}

.avisos-contraste {
  color: var(--error);
  font-size: 1.25rem;
  margin: 0 0 12px;
}

/* ---------- barra de consulta ---------- */

.barra-consulta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 2px solid var(--linea-fuerte);
}

.barra__resumen {
  margin: 0;
  font-size: 1.35rem;
  color: var(--texto);
}

.con-barra {
  padding-bottom: 96px;
}

@media (max-width: 720px) {
  /* la barra apila resumen + 2 botones: reserva más espacio */
  .con-barra {
    padding-bottom: 170px;
  }
}

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 6, 4, 0.82);
}

.modal[hidden] { display: none; }

.modal__caja {
  width: min(580px, 100%);
  max-height: 90dvh;
  overflow: auto;
  padding: 22px;
  background: var(--panel);
  border: 2px solid var(--linea-fuerte);
  box-shadow: 8px 8px 0 var(--sombra);
}

.modal__titulo { margin-bottom: 14px; }

.modal__lista {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.modal__lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea);
}

.modal__item-nombre {
  flex: 1 1 220px;
}

.modal__item-precio {
  color: var(--acento-texto);
}

.modal__etiqueta {
  display: block;
  margin-bottom: 6px;
  font-family: var(--tipografia-px);
  font-size: 0.7rem;
  line-height: 1.8;
  color: var(--tenue);
}

.modal__nota {
  margin: 8px 0 0;
  color: var(--tenue);
  font-size: 1.15rem;
}

.modal__acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* ---------- modal de detalle de artículo ---------- */

.modal__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 2px solid var(--linea-fuerte);
  color: var(--texto);
  cursor: pointer;
  line-height: 0;
}

.modal__cerrar:hover {
  color: var(--verde);
  border-color: var(--verde);
}

.modal-detalle {
  position: relative;
  width: min(860px, 100%);
  display: grid;
  grid-template-columns: minmax(220px, 42%) 1fr;
  gap: 20px;
}

.modal-detalle__foto {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 2px solid var(--linea);
  overflow: hidden;
  align-self: start;
}

.modal-detalle__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-detalle__miga {
  margin: 0 0 8px;
  font-size: 1.15rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tenue);
}

.modal-detalle__nombre {
  font-size: 0.85rem;
  line-height: 1.9;
  margin: 0 0 10px;
  padding-right: 40px;
}

.modal-detalle__precio {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--acento-texto);
  margin: 0 0 14px;
}

.modal-detalle__tabla {
  margin: 0 0 12px;
}

.modal-detalle__tabla > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linea);
}

.modal-detalle__tabla dt {
  font-size: 1.15rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tenue);
}

.modal-detalle__tabla dd {
  margin: 0;
  font-size: 1.25rem;
  text-align: right;
}

.modal-detalle__desc {
  color: var(--tenue);
  font-size: 1.3rem;
  line-height: 1.35;
  margin: 0 0 6px;
}

.modal-detalle__acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.modal-detalle__acciones .boton {
  flex: 1 1 200px;
}

@media (max-width: 720px) {
  .modal-detalle {
    grid-template-columns: 1fr;
  }

  .modal-detalle__nombre {
    padding-right: 0;
  }
}

/* ---------- formulario compartido ---------- */

.entrada {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--tipografia-terminal);
  font-size: 1.3rem;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--linea-fuerte);
  caret-color: var(--ambar);
}

.entrada::placeholder {
  color: var(--tenue);
  opacity: 1;
}

textarea.entrada {
  resize: vertical;
  min-height: 96px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.campo label {
  font-family: var(--tipografia-px);
  font-size: 0.7rem;
  line-height: 1.8;
  color: var(--tenue);
}

.campo--fila {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.campo--fila label {
  margin: 0;
}

.campo--fila input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--ambar);
}

.campo--fila .entrada {
  flex: 1 1 200px;
}

.campo__ayuda {
  margin: 6px 0 0;
  color: var(--tenue);
  font-size: 1.05rem;
}

.foto-previa {
  width: 130px;
  border: 2px solid var(--linea-fuerte);
  margin-top: 10px;
  display: block;
}

.tabla__foto {
  width: 44px;
  height: 33px;
  object-fit: cover;
  border: 1px solid var(--linea-fuerte);
  display: block;
  margin-bottom: 5px;
}

.error {
  color: var(--error);
  min-height: 1.4em;
  margin: 0 0 10px;
}

.exito {
  color: var(--verde);
  min-height: 1.4em;
  margin: 0;
}

.aviso {
  color: var(--tenue);
  border: 1px dashed var(--linea-fuerte);
  padding: 10px 14px;
  margin: 0 0 16px;
}

.aviso code, .bloque code {
  color: var(--acento-texto);
}

/* ---------- pie ---------- */

.pie {
  padding-top: 36px;
  padding-bottom: 44px;
  border-top: 2px solid var(--linea);
}

.pie .mascota {
  display: block;
  margin-bottom: 12px;
}

.pie__texto {
  margin-bottom: 6px;
  font-size: 1.3rem;
}

.pie__contacto { margin-bottom: 6px; }

.pie__redes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}

.pie__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--linea-fuerte);
  color: var(--texto);
  transition: color .15s, border-color .15s, transform .15s;
}

.pie__redes a:hover {
  color: var(--verde);
  border-color: var(--verde);
  transform: translateY(-2px);
}

.pie__legal {
  margin: 0;
  color: var(--tenue);
  font-size: 1.15rem;
}

/* ---------- panel de administración ---------- */

.cuerpo-admin {
  padding-bottom: 0;
}

.panel {
  padding-bottom: 60px;
}

.login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login__caja {
  width: min(420px, 100%);
  padding: 26px;
  background: var(--panel);
  border: 2px solid var(--linea-fuerte);
  box-shadow: 8px 8px 0 var(--sombra);
}

.login__titulo {
  font-size: 0.85rem;
}

.panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0 18px;
}

.panel__cabecera h1 { margin: 0; }

.pestanas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.pestaña {
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--tipografia-px);
  font-size: 0.7rem;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--linea-fuerte);
  cursor: pointer;
}

.pestaña:hover {
  color: var(--verde);
  border-color: var(--verde);
}

.pestaña[aria-selected="true"] {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--sobre-ambar);
}

.pestaña[aria-selected="true"]:hover {
  color: var(--sobre-ambar);
  filter: brightness(1.06);
}

html[data-tema="claro"] .pestaña[aria-selected="true"]:hover {
  filter: brightness(0.9);
}

/* En claro, el lima brillante no contrasta sobre fondo claro: foco, caret
   y casillas usan el lima oscuro del acento de texto. */
html[data-tema="claro"] :focus-visible,
html[data-tema="claro"] .articulo__ver:focus-visible {
  outline-color: var(--acento-texto);
}

html[data-tema="claro"] .buscador,
html[data-tema="claro"] .entrada {
  caret-color: var(--acento-texto);
}

html[data-tema="claro"] .campo--fila input[type="checkbox"] {
  accent-color: var(--acento-texto);
}

.panel__acciones {
  margin-bottom: 16px;
}

.formulario {
  padding: 18px;
  margin-bottom: 24px;
  background: var(--panel);
  border: 2px solid var(--linea-fuerte);
}

.formulario h2 { margin-bottom: 14px; }

.formulario__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.campo--completo {
  grid-column: 1 / -1;
}

.formulario__acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tabla-scroll {
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
}

.tabla th {
  padding: 10px;
  text-align: left;
  font-family: var(--tipografia-px);
  font-size: 0.7rem;
  line-height: 1.8;
  color: var(--tenue);
  border-bottom: 2px solid var(--linea-fuerte);
}

.tabla td {
  padding: 10px;
  font-size: 1.25rem;
  vertical-align: top;
  border-bottom: 1px solid var(--linea);
}

.tabla__spec {
  display: block;
  color: var(--tenue);
  font-size: 1.1rem;
}

.tabla__acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vacio {
  color: var(--tenue);
  padding: 18px 0;
}

.bloques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.bloque {
  padding: 18px;
  background: var(--panel);
  border: 2px solid var(--linea-fuerte);
}

.bloque h2 { margin-bottom: 10px; }

.bloque__acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ---------- movimiento (MOTION 2): retro, flash pero barato.
   Solo transform y opacity: nada que dispare layout o paint por frame. ---------- */

@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes estampar {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(10deg) scale(1.6); }
}

@keyframes subir {
  from { transform: translateY(100%); }
}

@keyframes fundir {
  from { opacity: 0; }
}

@keyframes entrar-modal {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

@keyframes flotar {
  to { transform: translateY(-6px); }
}

@keyframes pulso {
  35% { transform: scale(1.12); }
}

/* Entrada escalonada del inventario: tope de 12 tarjetas para no encadenar
   cientos de animaciones en catálogos largos. */
.articulo {
  animation: aparecer 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms);
}

.sello {
  animation: estampar 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms + 0.15s);
}

.barra-consulta {
  animation: subir 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.modal {
  animation: fundir 0.18s ease-out;
}

.modal__caja {
  animation: entrar-modal 0.18s ease-out;
}

.heroe__mascota {
  animation: flotar 3.2s ease-in-out infinite alternate;
}

.pulso {
  animation: pulso 0.3s ease-out;
  transform-origin: left center;
}

/* ---------- movimiento y responsive ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .marquee__pista {
    animation: none;
    white-space: normal;
    flex-wrap: wrap;
  }

  .marquee__eco { display: none; }

  .cursor::after { animation: none; }

  .articulo, .sello, .barra-consulta,
  .modal, .modal__caja, .heroe__mascota, .pulso {
    animation: none;
  }
}

@media (max-width: 720px) {
  .heroe {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 22px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .heroe__mascota {
    width: 132px;
    height: auto;
    align-self: center;
  }

  .formulario__rejilla,
  .bloques {
    grid-template-columns: 1fr;
  }

  .barra-consulta .boton {
    flex: 1 1 auto;
  }

  .sello {
    right: -6px;
  }
}