/* ============================================================
   AUTOMYN S.R.L. — Design System v4 "Rojo vino + Rojo señal"
   Paleta de colores.jpeg aplicada en familia roja completa
   Tipografías: Sora (títulos) · Inter (texto) · JetBrains Mono (códigos)
   ============================================================ */

:root {
  /* Compatibilidad con el asistente de chat (variables del diseño anterior) */
  --naranja-automyn: var(--naranja);
  --azul-automyn: var(--marino);
  --azul-automyn-hover: var(--marino-800);
  --azul-claro: var(--marino-claro);

  /* Paleta principal (familia roja derivada del rojo de la imagen) */
  --marino: #2b060d;
  --marino-800: #350811;
  --marino-700: #420b16;
  --marino-600: #57101d;
  --marino-claro: #f7e9ec;
  --marino-muy-claro: #faf1f3;

  --naranja: #fc021b;
  --naranja-hover: #d90217;
  --naranja-claro: #ffe9ec;
  --naranja-sombra: rgba(252, 2, 27, 0.32);

  /* Neutrales */
  --hueso: #f7f8f5;
  --blanco: #ffffff;
  --gris-claro: #f7f8f5; /* alias legacy usado en vistas */
  --texto: #16202e;
  --texto-suave: #5c6b7f;
  --borde: #e3e7ee;
  --borde-suave: #e9edf3;

  /* Sistema */
  --radio: 12px;
  --radio-sm: 8px;
  --sombra-card: 0 1px 2px rgba(43, 6, 13, 0.05), 0 4px 14px rgba(43, 6, 13, 0.06);
  --sombra-hover: 0 6px 14px rgba(43, 6, 13, 0.08), 0 16px 32px rgba(43, 6, 13, 0.12);
  --sombra-naranja: 0 4px 14px rgba(252, 2, 27, 0.3);
  --transicion: 0.2s ease;

  --fuente-titulo: 'Sora', 'Inter', 'Segoe UI', sans-serif;
  --fuente-texto: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --fuente-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente-texto);
  color: var(--texto);
  background: radial-gradient(1200px 500px at 85% -10%, #f6ebef 0%, transparent 60%),
              radial-gradient(900px 400px at -10% 30%, #fdedf0 0%, transparent 50%),
              var(--hueso);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .fs-seccion, .contador-numero {
  font-family: var(--fuente-titulo);
  letter-spacing: -0.01em;
}

.fuente-mono, .codigo-producto {
  font-family: var(--fuente-mono);
  font-size: 0.85em;
}

a { text-decoration: none; }
img { max-width: 100%; }

section { scroll-margin-top: 90px; } /* compensa navbar sticky al anclar #ids */

/* ---------- Botones ---------- */
.btn { border-radius: var(--radio-sm); }

.btn-primario-automyn {
  background: linear-gradient(135deg, #ff7a1a 0%, var(--naranja) 100%);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  box-shadow: var(--sombra-naranja);
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.btn-primario-automyn:hover,
.btn-primario-automyn:focus {
  background: var(--naranja-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 95, 0, 0.35);
}

.btn-azul-automyn {
  background: var(--marino);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  transition: background var(--transicion), transform var(--transicion);
}
.btn-azul-automyn:hover {
  background: var(--marino-600);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-automyn {
  border: 2px solid var(--marino);
  color: var(--marino);
  font-weight: 600;
  border-radius: 10px;
  transition: background var(--transicion), color var(--transicion);
}
.btn-outline-automyn:hover {
  background: var(--marino);
  color: #fff;
}

/* ---------- Topbar ---------- */
.topbar-automyn {
  background: var(--marino);
  color: #f3dce0;
  font-size: 0.82rem;
  border-bottom: 3px solid var(--naranja);
}
.topbar-item { display: inline-flex; align-items: center; color: #f3dce0; }
.topbar-enlace {
  text-decoration: none; color: #f3dce0;
  transition: color var(--transicion);
}
.topbar-enlace:hover { color: var(--naranja); }

/* ---------- Navbar ---------- */
.navbar-automyn {
  background: linear-gradient(90deg, var(--marino) 0%, var(--marino-800) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 4px 18px rgba(43, 6, 13, 0.25);
  transition: padding var(--transicion), box-shadow var(--transicion);
}
.navbar-automyn.navbar-scrolled {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  box-shadow: 0 2px 12px rgba(43, 6, 13, 0.35);
}
.navbar-automyn .navbar-brand {
  color: #fff;
  font-weight: 700;
  transition: color var(--transicion);
}
.navbar-automyn .navbar-brand:hover { color: var(--naranja); }
.navbar-automyn .navbar-brand img { border: 1px solid rgba(255,255,255,0.35); }

.navbar-automyn .navbar-nav .nav-link {
  color: #e8eef6;
  font-weight: 500;
  border-radius: var(--radio-sm);
  transition: color var(--transicion), background var(--transicion);
}
.navbar-automyn .navbar-nav .nav-link:hover,
.navbar-automyn .navbar-nav .nav-link:focus {
  color: #fff;
  background: rgba(255,255,255,0.09);
}
.navbar-automyn .navbar-nav .nav-link.active {
  color: #ffb46e;
  font-weight: 600;
}

.navbar-automyn .dropdown-menu {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra-hover);
}
.navbar-automyn .dropdown-menu .dropdown-item {
  color: var(--marino);
  border-radius: var(--radio-sm);
}
.navbar-automyn .dropdown-menu .dropdown-item:hover {
  background: var(--marino-claro);
  color: var(--marino);
}

.navbar-automyn .navbar-toggler { border-color: rgba(255,255,255,0.5); }
.navbar-automyn .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,106,0,0.4); }

@media (max-width: 991.98px) {
  .navbar-automyn .navbar-nav .nav-link { padding: 8px 12px; margin: 2px 0; }
  .navbar-automyn .navbar-nav .nav-link:hover,
  .navbar-automyn .navbar-nav .nav-link.active { background: rgba(255,255,255,0.10); }
}

/* ---------- Mega menú de categorías ---------- */
.mega-menu {
  min-width: 640px;
  padding: 0.75rem;
}
.mega-menu .mega-column h6 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  margin-bottom: 0.5rem;
}
.mega-menu .mega-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--marino);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radio-sm);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background var(--transicion);
}
.mega-menu .mega-item:hover { background: var(--marino-claro); }
.mega-menu .mega-item .mega-count {
  background: var(--naranja-claro);
  color: var(--naranja);
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 50rem;
}
.mega-menu .mega-banner {
  background: linear-gradient(135deg, var(--marino) 0%, var(--marino-600) 100%);
  color: #fff;
  border-radius: var(--radio);
  padding: 1rem;
}

/* ---------- Buscador con sugerencias ---------- */
.buscador-automyn { position: relative; }
.buscador-automyn .form-control {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  border-radius: 50rem;
  padding-left: 2.4rem;
}
.buscador-automyn .form-control::placeholder { color: #b7c6d9; }
.buscador-automyn .form-control:focus {
  background: #fff;
  color: var(--texto);
  box-shadow: 0 0 0 3px rgba(255,106,0,0.35);
}
.buscador-automyn .bi-search {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #b7c6d9; z-index: 5;
}
.sugerencias-automyn {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1200;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-hover); overflow: hidden; display: none;
}
.sugerencias-automyn.visible { display: block; }
.sugerencias-automyn a {
  display: flex; align-items: center; gap: 10px;
  padding: 0.55rem 0.9rem; color: var(--texto);
  font-size: 0.9rem; transition: background var(--transicion);
}
.sugerencias-automyn a:hover { background: var(--marino-muy-claro); }
.sugerencias-automyn a img {
  width: 38px; height: 38px; object-fit: cover; border-radius: var(--radio-sm);
}
.sugerencias-automyn .sug-errores { padding: 0.75rem; color: var(--texto-suave); font-size: 0.85rem; }

/* ---------- Hero ---------- */
.hero-automyn {
  position: relative;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(252,2,27,0.30) 0%, transparent 55%),
    radial-gradient(700px 420px at 0% 110%, rgba(158,32,52,0.55) 0%, transparent 55%),
    linear-gradient(160deg, #6e1524 0%, var(--marino) 45%, var(--marino-800) 100%);
  color: #fff;
  padding: 118px 0 104px;
  overflow: hidden;
}
/* Capa fotográfica con overlay rojizo (degrada bien si la imagen falta) */
.hero-foto {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(900px 460px at 88% -12%, rgba(252,2,27,0.32) 0%, transparent 55%),
    linear-gradient(160deg, rgba(110,21,36,0.94) 0%, rgba(87,16,29,0.86) 48%, rgba(66,11,22,0.93) 100%),
    url('../img/hero-automatizacion.jpg');
  background-size: cover;
  background-position: center;
  animation: hero-zoom-suave 22s ease-in-out infinite alternate;
}
@keyframes hero-zoom-suave {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
/* Rejilla técnica de fondo */
.hero-automyn::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(750px 480px at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(750px 480px at 50% 30%, #000 30%, transparent 80%);
}
.hero-automyn .container { position: relative; z-index: 2; }

/* Partículas / nodos de circuito flotantes */
.hero-particulas {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
.hero-particulas span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,154,77,0.85);
  box-shadow: 0 0 12px 2px rgba(255,106,0,0.45);
  opacity: 0;
  animation: particula-flotar 14s ease-in-out infinite;
}
.hero-particulas span:nth-child(1) { left: 8%;  top: 72%; animation-delay: 0s;    }
.hero-particulas span:nth-child(2) { left: 18%; top: 30%; width: 4px; height: 4px; animation-delay: 2.2s; }
.hero-particulas span:nth-child(3) { left: 28%; top: 58%; animation-delay: 4.5s; }
.hero-particulas span:nth-child(4) { left: 38%; top: 20%; width: 3px; height: 3px; animation-delay: 1.1s; }
.hero-particulas span:nth-child(5) { left: 47%; top: 66%; width: 5px; height: 5px; animation-delay: 5.8s; }
.hero-particulas span:nth-child(6) { left: 57%; top: 26%; animation-delay: 3.4s; }
.hero-particulas span:nth-child(7) { left: 67%; top: 52%; width: 4px; height: 4px; animation-delay: 6.9s; }
.hero-particulas span:nth-child(8) { left: 76%; top: 34%; animation-delay: 2.9s; }
.hero-particulas span:nth-child(9) { left: 86%; top: 62%; width: 5px; height: 5px; animation-delay: 5.1s; }
.hero-particulas span:nth-child(10){ left: 93%; top: 24%; width: 3px; height: 3px; animation-delay: 7.6s; }
@keyframes particula-flotar {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 0.9; }
  50%  { opacity: 0.35; transform: translateY(-46px); }
  85%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-92px); }
}

/* Texto con degradado animado */
.texto-degradado-animado {
  background: linear-gradient(90deg, #ff9a4d 0%, var(--naranja) 25%, #ffd29e 50%, var(--naranja) 75%, #ff9a4d 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: degradado-mover 6s linear infinite;
}
@keyframes degradado-mover {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

.hero-automyn h1 {
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.hero-automyn p.lead {
  color: #d9e5f2;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.hero-automyn h1 .resaltado { color: #ff9a4d; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
  border-radius: 50rem;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #ffe7d2;
}

.hero-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50rem;
  padding: 7px 14px;
  font-size: 0.82rem;
  color: #e9f0f8;
}
.hero-chip i { color: var(--naranja); }

@keyframes hero-subir {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.hero-anim { opacity: 0; animation: hero-subir 0.7s ease forwards; }
.hero-anim-1 { animation-delay: 0.1s; }
.hero-anim-2 { animation-delay: 0.28s; }
.hero-anim-3 { animation-delay: 0.46s; }

/* ---------- Secciones ---------- */
.seccion-titulo {
  color: var(--marino);
  font-weight: 700;
  position: relative;
  padding-bottom: 12px;
}
.seccion-titulo::after {
  content: "";
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, var(--naranja) 0%, #ffa15c 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 2px;
}
.seccion-titulo.centrada::after { left: 50%; transform: translateX(-50%); }
.seccion-titulo .seccion-ico { color: var(--naranja); }
.seccion-sub {
  color: var(--texto-suave);
  max-width: 620px;
}

/* ---------- Tarjetas ---------- */
.card-automyn {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
}
.card-automyn .card-header,
.card-automyn .card-footer {
  background: var(--blanco);
  border-color: var(--borde-suave);
}

.card-servicio {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  height: 100%;
  background: var(--blanco);
  box-shadow: var(--sombra-card);
}
.card-servicio:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-hover);
  border-color: rgba(255,106,0,0.35);
}
.card-servicio .icono { font-size: 2.1rem; color: var(--naranja); }

.icono-circulo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--marino-claro);
  color: var(--marino);
  border: 1px solid rgba(15,47,82,0.08);
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.card-servicio:hover .icono-circulo {
  background: var(--naranja);
  color: #fff;
  transform: scale(1.04);
}

/* ---------- Tarjetas de producto ---------- */
.card-producto {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--blanco);
  box-shadow: var(--sombra-card);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.card-producto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}
.card-producto .card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f2f5f9, #e8edf3);
  overflow: hidden;
}
.card-producto .card-img-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .6rem;
  transition: transform 0.4s ease;
}
.card-producto:hover .card-img-wrap img { transform: scale(1.05); }
.card-producto .card-body { padding: 1rem; }

/* Filtros laterales del catálogo: sticky con tope, sin invadir el footer */
@media (min-width: 992px) {
  .filtros-laterales {
    position: sticky;
    top: 96px;
    align-self: flex-start;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    border-radius: var(--radio);
  }
}

.badge-categoria {
  background: rgba(15,47,82,0.85);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 50rem;
  padding: 0.35em 0.75em;
}

.badge-nuevo {
  background: var(--naranja);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 50rem;
  padding: 0.35em 0.75em;
  box-shadow: var(--sombra-naranja);
}

/* Píldora de disponibilidad, abajo-izquierda del cuadro de foto */
.card-img-wrap .estado-stock {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  z-index: 2;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  border-radius: 50rem;
  padding: .35em .75em;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.estado-stock.en-stock,
.estado-stock.con-stock { color: #15803d; }
.estado-stock.sin-stock { color: #b45309; }

/* Vista lista (catálogo): filas de ancho completo */
.grid-productos.vista-lista > [class*="col-"] {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}
.vista-lista .card-producto { flex-direction: row; border-radius: var(--radio); }
.vista-lista .card-producto .card-img-wrap { aspect-ratio: auto; width: 260px; min-height: 190px; flex-shrink: 0; }
.vista-lista .card-producto .card-body { flex: 1; padding: 1.25rem 1.5rem; }
@media (max-width: 767.98px) {
  .vista-lista .card-producto { flex-direction: column; }
  .vista-lista .card-producto .card-img-wrap { width: 100%; aspect-ratio: 4/3; min-height: 0; }
}

/* ---------- Contadores ---------- */
.card-contador {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-card);
  height: 100%;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.card-contador:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}
.card-contador .contador-numero {
  font-weight: 700;
  font-size: 2.15rem;
  color: var(--marino);
  line-height: 1.1;
}
.card-contador .contador-numero .sufijo { color: var(--naranja); }

/* ---------- Pasos "cómo cotizar" ---------- */
.paso-cotizar {
  position: relative;
  border: 1px solid var(--borde-suave);
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  height: 100%;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.paso-cotizar:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.paso-cotizar .paso-numero {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--marino-claro);
  position: absolute;
  top: 12px;
  right: 16px;
}
.paso-cotizar .paso-icono {
  width: 58px; height: 58px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--naranja-claro);
  color: var(--naranja);
  font-size: 1.4rem;
  border-radius: var(--radio);
}

/* ---------- Marcas ---------- */
.card-marca {
  border: 1px solid var(--borde-suave);
  background: var(--blanco);
  border-radius: var(--radio-sm);
  padding: 16px 10px;
  text-align: center;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  color: var(--marino);
  transition: all var(--transicion);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
  opacity: 0.85;
}
.card-marca:hover {
  border-color: var(--naranja);
  color: var(--naranja);
  box-shadow: var(--sombra-naranja);
  transform: translateY(-2px);
  filter: none;
  opacity: 1;
}

/* ---------- Testimonios ---------- */
.testimonio-card {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-left: 4px solid var(--naranja);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  height: 100%;
}

/* ---------- Teaser IoT ---------- */
.iot-teaser {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #0a2138 0%, var(--marino) 55%, var(--marino-600) 100%);
  border-radius: calc(var(--radio) + 6px);
  color: #fff;
}
.iot-teaser::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.iot-teaser .container { position: relative; z-index: 2; }
.iot-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,106,0,0.18);
  border: 1px solid rgba(255,106,0,0.5);
  color: #ffb06e;
  border-radius: 50rem;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
}
.iot-stat {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radio);
  padding: 0.9rem;
  text-align: center;
  height: 100%;
}
.iot-stat .iot-valor {
  font-family: var(--fuente-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffb06e;
}

/* ---------- Botones flotantes WhatsApp ---------- */
.wa-flotante {
  position: fixed; left: 22px; z-index: 1050;
  height: 48px; padding: 0 16px 0 12px; border-radius: 28px;
  color: #fff; text-decoration: none;
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.wa-flotante i { font-size: 1.4rem; }
.wa-flotante:hover { transform: scale(1.06); box-shadow: 0 8px 28px rgba(0,0,0,0.35); color: #fff; }
.wa-flotante::before {
  content: ""; position: absolute; inset: 0; border-radius: 28px;
  border: 2px solid currentColor; opacity: 0.4;
  animation: whatsapp-pulso 2.5s ease infinite;
}

.wa-electrica { bottom: 196px; background: #f5c518; color: #1a1a1a; }
.wa-electrica:hover { color: #1a1a1a; }
.wa-electrica::before { border-color: #f5c518; }

.wa-conexiones { bottom: 140px; background: #0077b5; }
.wa-conexiones::before { border-color: #0077b5; }

.wa-proyectos { bottom: 84px; background: #fc021b; }
.wa-proyectos::before { border-color: #fc021b; }

.wa-general { bottom: 28px; background: #25d366; }
.wa-general::before { border-color: #25d366; }

@keyframes whatsapp-pulso {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (max-width: 480px) {
  .wa-flotante { left: 14px; height: 42px; padding: 0 12px 0 10px; font-size: 0.78rem; }
  .wa-flotante i { font-size: 1.2rem; }
  .wa-electrica { bottom: 180px; }
  .wa-conexiones { bottom: 128px; }
  .wa-proyectos { bottom: 76px; }
  .wa-general { bottom: 24px; }
}

/* ---------- Volver arriba ---------- */
.volver-arriba {
  position: fixed; right: 22px; bottom: 96px; z-index: 1040;
  width: 46px; height: 46px; border-radius: var(--radio-sm);
  background: var(--marino); color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 1.15rem;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: var(--sombra-hover);
  transition: background var(--transicion), transform var(--transicion);
}
.volver-arriba:hover { background: var(--marino-600); color: #fff; transform: translateY(-2px); }
.volver-arriba.visible { display: inline-flex; }
@media (max-width: 480px) {
  .volver-arriba { right: 14px; bottom: 64px; }
}

/* ---------- CTA fija móvil (detalle) ---------- */
.cta-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: var(--blanco);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 20px rgba(15,47,82,0.10);
  padding: 10px 16px;
  display: none;
}
@media (max-width: 767.98px) {
  .cta-movil { display: block; }
  body { padding-bottom: 70px; }
  /* Burbuja del chat por encima de la barra CTA fija */
  #asistente-widget { bottom: 78px !important; }
  .volver-arriba { bottom: 132px; }
}

/* ---------- Tablas ---------- */
.tabla-automyn thead th {
  background: var(--marino);
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: 0 !important;
}
.tabla-automyn tbody tr { transition: background var(--transicion); }
.tabla-automyn tbody tr:hover { background: var(--marino-muy-claro); }
.tabla-automyn { border-radius: var(--radio); overflow: hidden; }
.tabla-automyn .btn { border-radius: var(--radio-sm); }

/* ---------- Paginación inteligente ---------- */
.paginacion-automyn .page-link {
  color: var(--marino);
  border-color: var(--borde-suave);
  border-radius: var(--radio-sm);
  margin: 0 3px;
  font-weight: 500;
  transition: all var(--transicion);
}
.paginacion-automyn .page-link:hover {
  background: var(--marino-claro);
  color: var(--marino);
}
.paginacion-automyn .page-item.active .page-link {
  background: var(--naranja);
  border-color: var(--naranja);
  color: #fff;
  box-shadow: var(--sombra-naranja);
}
.paginacion-automyn .page-item.disabled .page-link {
  color: #aab4c2;
  background: transparent;
}

/* ---------- Formularios ---------- */
.form-control, .form-select {
  border-radius: var(--radio-sm);
  padding: 0.6rem 0.85rem;
  border-color: #d5dbe3;
}
.form-control:focus, .form-select:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(255,106,0,0.15);
}
.input-grupo-ico .form-control { padding-left: 2.6rem; }
.input-grupo-ico .icono-input {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--marino-600);
  font-size: 1.05rem;
  z-index: 5;
}

/* ---------- Chips de categoría (filtros catálogo) ---------- */
.chip-categoria {
  display: block;
  padding: 9px 13px;
  border-radius: var(--radio-sm);
  color: var(--marino);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background var(--transicion), color var(--transicion);
}
.chip-categoria:hover {
  background: var(--marino-claro);
  color: var(--marino);
}
.chip-categoria.activo {
  background: var(--marino);
  color: #fff;
  box-shadow: var(--sombra-card);
}

/* Botón acordeón de grupos con subgrupos */
button.chip-categoria.grupo-toggle {
  border: 0;
}
/* Solo los grupos SIN selección son transparentes (:not evita pisa el .activo) */
button.chip-categoria.grupo-toggle:not(.activo) {
  background: transparent;
}
button.chip-categoria.grupo-toggle:not(.activo):hover {
  background: var(--marino-claro);
}
.chevron-grupo {
  font-size: 0.75rem;
  transition: transform var(--transicion);
}
.grupo-toggle.abierto .chevron-grupo {
  transform: rotate(180deg);
}

/* Lista colapsable de subgrupos */
.colapso-subgrupos {
  display: none;
}
.colapso-subgrupos.abierto {
  display: block;
  animation: aparecerSubgrupos var(--transicion) ease;
}
@keyframes aparecerSubgrupos {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Fila de categoría: toda la caja es pulsable ----------
   Petición: al pulsar cualquier parte del cuadro deben aparecer los
   subproductos. Se usa el patrón "stretched link": el <a> se estira con un
   ::after hasta cubrir la fila entera, así que nombre, contador y huecos
   sobrantes filtran la categoría. Como el servidor renderiza el grupo abierto
   cuando la categoría está activa, ese clic muestra además los subproductos.
   El chevron queda por encima de la superficie y conserva el despliegue en el
   sitio, sin navegar, para quien solo quiere mirar la lista. */
.fila-categoria {
  position: relative;
  padding: 9px 13px;
  border-radius: var(--radio-sm);
  transition: background var(--transicion);
}
.fila-categoria:hover {
  background: var(--marino-claro);
}
.fila-categoria.activo {
  background: var(--marino);
  color: #fff;
  box-shadow: var(--sombra-card);
}
.fila-categoria.activo .enlace-categoria,
.fila-categoria.activo .small {
  color: #fff;
}
/* El enlace ocupa el espacio sobrante y se estira sobre toda la fila */
.enlace-categoria {
  color: var(--marino);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Capa pulsable: cubre la fila entera, no solo el texto */
.enlace-categoria::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.enlace-categoria:hover,
.enlace-categoria:focus-visible {
  color: var(--marino);
  text-decoration: underline;
}
.fila-categoria.activo .enlace-categoria:hover {
  color: #fff;
}
.enlace-categoria.activo {
  font-weight: 700;
}
.btn-chevron {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 2px 4px;
  border-radius: var(--radio-sm);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Objetivo táctil cómodo: el icono es pequeño pero el área no */
  min-width: 30px;
  min-height: 30px;
  margin: -2px -4px;
  /* Por encima de la capa pulsable de la fila, o el clic iría al enlace */
  position: relative;
  z-index: 2;
}
.btn-chevron:hover {
  background: rgba(15, 47, 82, 0.12);
}
.fila-categoria.activo .btn-chevron:hover {
  background: rgba(255, 255, 255, 0.20);
}
.btn-chevron:focus-visible {
  outline: 2px solid var(--marino);
  outline-offset: 1px;
}

/* ---------- Chips de filtros activos ----------
   Para saber siempre en qué se está filtrando y poder quitar un filtro sin
   perder los demás. Sin esto, si un filtro deja la lista vacía, no había salida
   salvo reiniciar todo a ciegas. */
.filtros-activos {
  padding-bottom: 2px;
}
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--marino-claro);
  color: var(--marino);
  border: 1px solid rgba(15, 47, 82, 0.16);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  max-width: 100%;
  transition: background var(--transicion), color var(--transicion);
}
.chip-filtro:hover,
.chip-filtro:focus-visible {
  background: var(--marino);
  color: #fff;
}
/* Los nombres largos se cortan en lugar de romper la fila de chips */
.chip-filtro-etiqueta {
  opacity: 0.75;
}
.chip-filtro i {
  font-size: 0.7rem;
  opacity: 0.8;
  flex-shrink: 0;
}
.chip-filtro:hover i {
  opacity: 1;
}
.limpiar-todo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Miga de pan con aspecto de botón ----------
   "Inicio" y "Catálogo de productos" se leían como texto suelto dentro de la
   página y no como acciones. Ahora los tres (incluido "Limpiar todo") tienen
   forma de botón, pero cada uno conserva su papel: los que navegan son
   enlaces, y la miga de la página actual queda activa y sin enlace, porque un
   botón pulsable que no lleva a ninguna parte es peor que un texto plano. */
.miga-botones {
  margin-bottom: 0;
}
.miga-botones .breadcrumb-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.miga-botones .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  padding: 0 8px;
  color: var(--texto-suave);
  content: "/";
}
.btn-miga {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--marino);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 6px 12px;
  text-decoration: none;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.btn-miga:hover,
.btn-miga:focus-visible {
  background: var(--marino);
  border-color: var(--marino);
  color: #fff;
}
/* Página actual: parece botón, pero no navega */
.btn-miga.activo,
.btn-miga.activo:hover {
  background: var(--marino);
  border-color: var(--marino);
  color: #fff;
  cursor: default;
}

/* ---------- Toolbar del catálogo ---------- */
.toolbar-catalogo {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 0.8rem 1rem;
  box-shadow: var(--sombra-card);
}
.vista-toggle .btn {
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  border-radius: var(--radio-sm);
  padding: 0.3rem 0.6rem;
}
.vista-toggle .btn.activo {
  background: var(--marino);
  color: #fff;
  border-color: var(--marino);
}

/* ---------- Legibilidad ---------- */
.text-muted { color: #55647a !important; }
label, .form-label { color: #111827; font-weight: 500; }
input::placeholder, textarea::placeholder { color: #8a94a6; }
.text-white-50 { color: #f3dce0 !important; }
.form-text { color: #55647a; }
.texto-azul { color: var(--marino); }
.texto-naranja { color: var(--naranja); }

/* ---------- Varios ---------- */
.miniatura-producto {
  width: 70px; height: 70px; object-fit: cover; border-radius: var(--radio-sm);
  cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s;
}
.miniatura-producto:hover, .miniatura-producto.active-thumb {
  border-color: var(--naranja);
}

.sombra-automyn { box-shadow: var(--sombra-card); }
.badge-estado {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4em 0.7em;
  border-radius: 50rem;
}

.foto-equipo {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  border-radius: var(--radio);
  box-shadow: var(--sombra-hover);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.reveal-activo { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-anim { animation: none; opacity: 1; }
  .hero-foto, .hero-particulas span, .texto-degradado-animado { animation: none; }
}

/* ---------- Auth ---------- */
.auth-shell {
  min-height: calc(100vh - 180px);
  display: flex; align-items: center;
}
.auth-shell .card-automyn {
  border: 0;
  overflow: hidden;
  box-shadow: var(--sombra-hover);
}
.auth-shell .auth-cabecera {
  background: linear-gradient(135deg, var(--marino) 0%, var(--marino-600) 100%);
  color: #fff;
  padding: 1.6rem;
  border-bottom: 3px solid var(--naranja);
}
.auth-shell .icono-circulo {
  background: rgba(255,255,255,0.12);
  color: #ffb06e;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ---------- Contacto ---------- */
.contacto-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}
.contacto-lista li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .88rem;
}
.contacto-lista li > i {
  color: var(--naranja);
  font-size: 1rem;
  line-height: 1.5;
  margin-top: .1rem;
}
.contacto-lista li strong {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-suave);
  margin-bottom: .1rem;
}
.contacto-lista a {
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transicion);
}
.contacto-lista a:hover { color: var(--naranja); }
.contacto-whatsapp {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25d366;
  color: #fff;
  font-size: 1.35rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.contacto-whatsapp:hover {
  transform: translateY(-2px) scale(1.05);
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.55);
}
.contacto-wa-icono {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25d366;
  color: #fff;
  font-size: 1.35rem;
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.contacto-wa-icono:hover {
  transform: translateY(-2px) scale(1.05);
  color: #fff;
  filter: brightness(1.1);
}
.contacto-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.contacto-trust span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--marino);
  background: var(--marino-claro);
  border: 1px solid #d3e0ef;
  border-radius: 999px;
  padding: .42rem .85rem;
}
.contacto-trust i { color: var(--naranja); }

/* ---------- Footer ---------- */
/* Separa el contenido inferior de las páginas del footer (vence a .py-* de Bootstrap) */
.contenedor-con-separacion { padding-bottom: 12rem !important; }
.footer-automyn {
  background: linear-gradient(180deg, #6e1524 0%, var(--marino) 100%);
  color: #c9d7e8;
}
.footer-automyn h6 { color: #fff; letter-spacing: 0.05em; }
.footer-automyn a { color: #c9d7e8; transition: color var(--transicion); }
.footer-automyn a:hover { color: var(--naranja); }
.footer-titulo { font-size: .82rem; text-transform: uppercase; margin-bottom: 1rem; }
.footer-enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-enlaces a { text-decoration: none; color: #c9d7e8; }
.footer-enlaces a:hover { color: var(--naranja); }
.footer-contacto { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-contacto li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contacto i { color: var(--naranja); margin-top: .2rem; }
.footer-contacto a { text-decoration: none; }
.footer-social {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radio-sm);
  color: #fff;
  font-size: 1rem;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}
.footer-social:hover { background: var(--naranja); color: #fff; border-color: var(--naranja); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); font-size: .85rem; }

/* ---------- Componentes de landing ---------- */
.texto-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.mini-etiqueta {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--naranja);
  border: 1px solid rgba(255,106,0,.35);
  border-radius: 999px;
  padding: .32rem .85rem;
}
.seccion-fondo-claro { background: var(--gris-claro); }
.contadores-band { background: var(--gris-claro); }

.hero-destacada {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1rem;
  overflow: hidden;
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(252,2,27,.08);
  animation: hero-flotar 6s ease-in-out infinite;
}
.hero-slides {
  position: relative;
  width: 100%;
  /* La altura sale del ancho, no de un valor fijo. Las fotos de producto
     son casi cuadradas (0.92-0.94), así que un cuadro las deja respirando
     y se adapta solo a cualquier ancho de pantalla. Antes era un alto fijo
     de 460px, más ancho que alto, que obligaba a recortar los productos. */
  aspect-ratio: 1 / 1;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s ease;
}
.hero-slide.activo {
  opacity: 1;
  visibility: visible;
}
.hero-slide img {
  /* La caja se ajusta a la foto con max-*, en vez de estirarla con
     width/height al 100%. Con width:100% + object-fit:contain la caja del
     elemento era mas grande que la foto, asi que el border-radius redondeaba
     esa caja transparente en vez de la foto y las esquinas salian cuadradas.
     Asi el radio redondea justo lo que se ve, y el producto no se recorta. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 0.75rem;
}
.hero-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  transition: background .2s ease, transform .2s ease;
}
.hero-flecha:hover { background: var(--naranja); border-color: transparent; }
.hero-flecha-prev { left: .7rem; }
.hero-flecha-next { right: .7rem; }
.hero-destacada-vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem;
  /* Misma proporción que .hero-slides, para que el hueco no salte de alto
     cuando se agrega o se quita un destacado. */
  aspect-ratio: 1 / 1;
  color: rgba(255,255,255,0.55);
}
.hero-destacada-vacio i { font-size: 3.2rem; }
.hero-destacada-vacio span { font-size: .95rem; letter-spacing: .04em; }

.chip-neumatico {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600;
  color: #dbe7f3;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: .42rem .9rem;
}

@keyframes hero-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- Responsive general ---------- */
@media (max-width: 768px) {
  .hero-automyn { padding: 80px 0 66px; }
  .mega-menu { min-width: 0; }
}

/* ---------- Secciones del inicio con fondo personalizado oscuro ----------
   El editor de inicio permite elegir color de fondo; si es oscuro, el
   contenedor recibe .fondo-oscuro y se aclaran los textos que están
   directamente sobre el fondo (los que viven dentro de tarjetas blancas,
   marcas, contadores, testimonios o el teaser IoT conservan su color). */
.fondo-oscuro :is(h2, h5, h6, p, small):not(:is(.card, .card-producto, .card-marca, .card-contador, .testimonio-card, .iot-teaser, .bg-white) *) {
  color: #f2f5fa;
}
.fondo-oscuro :is(.text-muted):not(:is(.card, .card-producto, .card-marca, .card-contador, .testimonio-card, .iot-teaser, .bg-white) *) {
  color: rgba(255,255,255,0.72) !important;
}
.fondo-oscuro .btn-outline-automyn:not(:hover):not(:focus) {
  color: #fff;
  border-color: rgba(255,255,255,0.65);
}

/* ---------- Editor de inicio (panel admin): bloques arrastrables ---------- */
.editor-inicio-lista form { display: inline-block; margin: 0; }
.editor-inicio-lista button:disabled { opacity: .4; }

.editor-bloque {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra-card);
  transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.editor-bloque:hover {
  box-shadow: var(--sombra-hover);
  border-color: rgba(110,21,36,0.25);
}
.editor-grip {
  cursor: grab;
  color: var(--texto-suave);
  font-size: 1.35rem;
  line-height: 1;
  padding: .35rem .15rem;
  touch-action: none;
  user-select: none;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.editor-grip:active { cursor: grabbing; }

/* Estados durante el arrastre (clases de SortableJS) */
.sortable-ghost.editor-bloque,
.editor-ghost {
  opacity: .45;
  border-style: dashed;
  border-color: var(--naranja);
}
.editor-elegido {
  box-shadow: var(--sombra-hover);
  border-color: rgba(110,21,36,0.4);
}
.editor-arrastrando {
  transform: rotate(1.2deg) scale(1.01);
  opacity: .95;
}

.seccion-oculta { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 12px, #f3f3f3 12px, #f3f3f3 24px); }
.seccion-oculta .fw-semibold { opacity: .75; }
.editor-color-input { cursor: pointer; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* ------------------------------------------------------------------ */
/* Escáner de códigos de barras                                        */
/* ------------------------------------------------------------------ */
.escaner-visor { background: #0b0f19; min-height: 240px; position: relative; }
.escaner-visor video { width: 100% !important; height: auto !important; max-height: 340px; object-fit: cover; }
.escaner-visor canvas { max-width: 100%; }
.escaner-placeholder {
  min-height: 240px;
  border: 2px dashed var(--azul-automyn);
  background: linear-gradient(180deg, #f0f6ff, #ffffff);
}
.escaner-resultado { border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; background: #f8fafc; }
.escaner-lista .list-group-item { border: none; border-bottom: 1px dashed #e5e7eb; padding: .6rem .25rem; }
.escaner-lista .list-group-item:last-child { border-bottom: none; }
.escaner-cantidad { max-width: 70px; }
@media (max-width: 575px) {
  .escaner-placeholder, .escaner-visor { min-height: 200px; }
}