:root {
  --color-principal: #111111;
  --color-texto-principal: #ffffff;
  --color-secundario: #ffffff;
  --color-fondo: #f6f6f6;
  --color-texto-fondo: #222222;
  --color-contenedores: #ffffff;
  --color-texto-contenedores: #222222;
  --color-navegacion: #ffffff;
  --color-texto-navegacion: #222222;
  --color-footer: #ffffff;
  --color-texto-footer: #222222;
  --color-texto: #222222;
  --color-borde: #dddddd;
  --color-whatsapp: #25d366;
  --sombra: 0 8px 24px rgba(0, 0, 0, 0.08);
  --radio: 18px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--color-secundario);
  border-bottom: 1px solid var(--color-borde);
}

.negocio-identidad {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.logo-negocio {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  background: #ffffff;
}

.negocio-identidad h1 {
  margin: 0;
  font-size: 1.25rem;
}

.negocio-identidad p {
  margin: 4px 0 0;
  color: #666666;
  font-size: 0.9rem;
}

.boton-carrito {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: var(--color-principal);
  color: #ffffff;
  font-weight: 700;
}

#contador-carrito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-principal);
}

main {
  width: min(1200px, calc(100% - 28px));
  margin: 0 auto;
}

.seccion-buscador {
  padding: 22px 0 14px;
}

#buscador {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  background: #ffffff;
  outline: none;
}

#buscador:focus {
  border-color: var(--color-principal);
}

.categorias {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 0 18px;
  scrollbar-width: none;
}

.categorias::-webkit-scrollbar {
  display: none;
}

.boton-categoria {
  flex-shrink: 0;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  padding: 10px 15px;
  background: #ffffff;
}

.boton-categoria.activo {
  background: var(--color-principal);
  color: #ffffff;
  border-color: var(--color-principal);
}

.catalogo {
  padding-bottom: 40px;
}

.mensaje-estado {
  padding: 28px;
  text-align: center;
  color: var(--color-texto-fondo);
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tarjeta-producto {
  overflow: hidden;
  border-radius: var(--radio);
  background: #ffffff;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.producto-imagen-contenedor {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #eeeeee;
}

.producto-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.etiqueta-producto {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.85);
  color: #ffffff;
  font-size: 0.75rem;
}

.producto-contenido {
  padding: 14px;
}

.producto-nombre {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.25;
  min-height: 1.25em;
  max-height: 1.25em;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.producto-precios {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 48px;
  gap: 2px;
  margin-bottom: 12px;
}

.producto-precio {
  font-weight: 800;
}

.producto-precio-anterior {
  display: block;
  color: #999999;
  text-decoration: line-through;
  font-size: 0.8rem;
  line-height: 1.2;
}

.boton-agregar {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  background: var(--color-principal);
  color: var(--color-texto-principal);
  font-weight: 700;
}

.boton-agregar:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.panel-carrito {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
  background: #ffffff;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.16);
  transform: translateX(105%);
  transition: transform 0.25s ease;
}

.panel-carrito.abierto {
  transform: translateX(0);
}

.panel-carrito-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--color-borde);
}

.panel-carrito-encabezado h2 {
  margin: 0;
}

#cerrar-carrito {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #eeeeee;
  font-size: 1.5rem;
}

.lista-carrito {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.item-carrito {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-borde);
}

.item-carrito h3 {
  margin: 0 0 5px;
  font-size: 0.95rem;
}

.item-carrito p {
  margin: 0;
  color: #666666;
  font-size: 0.85rem;
}

.controles-cantidad {
  display: flex;
  align-items: center;
  gap: 8px;
}

.controles-cantidad button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: #eeeeee;
}

.boton-eliminar {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #b00020;
  padding: 0;
  font-size: 0.8rem;
}

.panel-carrito-pie {
  flex: 0 0 auto;
  padding: 18px;
  padding-bottom: max(18px, calc(12px + env(safe-area-inset-bottom)));
  border-top: 1px solid var(--color-borde);
  background: inherit;
}

.boton-vaciar-carrito {
  width: 100%;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  background: transparent;
  color: #b00020;
  font-weight: 750;
  cursor: pointer;
}

.total-carrito {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.boton-whatsapp {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px;
  background: var(--color-whatsapp);
  color: #ffffff;
  font-weight: 800;
}

.boton-whatsapp:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.fondo-carrito {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.45);
}

.pie-pagina {
  position: relative;
  padding: 28px 20px;
  text-align: center;
  background: #ffffff;
  border-top: 1px solid var(--color-borde);
}

.redes-sociales {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.redes-sociales a {
  color: var(--color-principal);
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 700px) {
  .encabezado {
    padding: 20px 32px;
  }

  .productos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1000px) {
  .productos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =========================================================
   PANEL ADMINISTRATIVO
========================================================= */

.admin-body {
  min-height: 100vh;
  background: #f3f4f6;
}

.pantalla-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tarjeta-login {
  width: min(420px, 100%);
  padding: 28px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--sombra);
}

.tarjeta-login h1 {
  margin: 6px 0 10px;
}

.marca-inkuva {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-principal);
}

.texto-secundario {
  margin: 0 0 22px;
  color: #666666;
  line-height: 1.5;
}

.tarjeta-login form {
  display: grid;
  gap: 10px;
}

.tarjeta-login label,
.admin-formulario label {
  font-size: 0.9rem;
  font-weight: 700;
}

.tarjeta-login input,
.admin-formulario input,
.admin-formulario textarea,
.admin-formulario select {
  width: 100%;
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  padding: 13px 14px;
  background: #ffffff;
  color: var(--color-texto);
  outline: none;
}

.tarjeta-login input:focus,
.admin-formulario input:focus,
.admin-formulario textarea:focus,
.admin-formulario select:focus {
  border-color: var(--color-principal);
}

.admin-formulario textarea {
  resize: vertical;
}

.boton-principal {
  border: 0;
  border-radius: 12px;
  padding: 13px 17px;
  background: var(--color-principal);
  color: #ffffff;
  font-weight: 800;
}

.boton-principal:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.boton-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  padding: 11px 14px;
  background: #ffffff;
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 700;
}

.enlace-volver {
  display: block;
  margin-top: 18px;
  text-align: center;
  color: var(--color-principal);
  text-decoration: none;
  font-weight: 700;
}

.mensaje-formulario {
  min-height: 20px;
  margin: 4px 0 0;
  font-size: 0.88rem;
}

.mensaje-formulario.exito {
  color: #0b7a36;
}

.mensaje-formulario.error {
  color: #b00020;
}

.panel-admin {
  min-height: 100vh;
}

.admin-encabezado {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--color-borde);
}

.admin-encabezado h1 {
  margin: 4px 0 0;
  font-size: 1.4rem;
}

.admin-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-navegacion {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--color-borde);
  scrollbar-width: none;
}

.admin-navegacion::-webkit-scrollbar {
  display: none;
}

.admin-pestana {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: #eeeeee;
  color: var(--color-texto);
  font-weight: 700;
}

.admin-pestana.activa {
  background: var(--color-principal);
  color: #ffffff;
}

.admin-contenido {
  width: min(1050px, calc(100% - 28px));
  margin: 0 auto;
  padding: 24px 0 50px;
}

.admin-seccion {
  padding: 20px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--sombra);
}

.admin-titulo-seccion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.admin-titulo-seccion h2 {
  margin: 0;
}

.admin-titulo-seccion p {
  margin: 6px 0 0;
  color: #666666;
}

.admin-formulario {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

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

.campo-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.campo-check input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.campo-check label {
  margin: 0;
}

.vista-logo-admin {
  display: block;
  width: 120px;
  height: 120px;
  margin-top: 14px;
  padding: 8px;
  object-fit: contain;
  border: 1px solid var(--color-borde);
  border-radius: 16px;
  background: #ffffff;
}

.lista-admin {
  display: grid;
  gap: 12px;
}

.item-admin {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-borde);
  border-radius: 16px;
  background: #ffffff;
}

.item-admin-contenido {
  min-width: 0;
}

.item-admin h3 {
  margin: 0 0 6px;
}

.item-admin p {
  margin: 0;
  color: #666666;
  font-size: 0.9rem;
}

.item-admin-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.boton-admin-accion {
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 9px 12px;
  background: #ffffff;
  font-weight: 700;
}

.boton-admin-peligro {
  color: #b00020;
}

.estado-disponible {
  color: #0b7a36;
  font-weight: 700;
}

.estado-agotado {
  color: #9a6700;
  font-weight: 700;
}

.estado-oculto {
  color: #777777;
  font-weight: 700;
}

@media (min-width: 700px) {
  .admin-encabezado {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 22px 32px;
  }

  .admin-titulo-seccion {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .admin-formulario {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-seccion {
    padding: 28px;
  }

  .item-admin {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .item-admin-acciones {
    justify-content: flex-end;
  }
}

/* =========================================================
   MODALES DEL PANEL ADMIN
========================================================= */

.modal-admin {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
}

.fondo-modal-admin {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.contenido-modal-admin {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.encabezado-modal-admin {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.encabezado-modal-admin h2 {
  margin: 4px 0 0;
}

.cerrar-modal-admin {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: #eeeeee;
  font-size: 1.5rem;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body.modal-abierto {
  overflow-y: hidden;
}

/* =========================================================
   PRODUCTOS: VISTA PREVIA DE IMÁGENES
========================================================= */

.vista-previa-producto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.item-vista-previa {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  background: #eeeeee;
}

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

.item-vista-previa button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 1rem;
}

.item-vista-previa-portada::after {
  content: "Portada";
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
}

@media (min-width: 700px) {
  .vista-previa-producto {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =========================================================
   RECORTADOR DE IMÁGENES
========================================================= */

.modal-recorte-contenido {
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: 560px;
  max-height: 88vh;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.contenedor-recorte {
  width: 100%;
  height: min(48vh, 380px);
  overflow: hidden;
  border-radius: 16px;
  background: #111111;
}

#imagen-recorte {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.acciones-recorte {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 600px) {
  #modal-recorte {
    padding: 10px;
    overflow: hidden;
  }

#modal-recorte .modal-recorte-contenido {
  box-sizing: border-box;
  width: calc(100vw - 20px);
  max-width: calc(100vw - 20px);
  min-width: 0;
  max-height: 92vh;
  margin: auto;
  padding: 14px;
  border-radius: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}
  #modal-recorte .contenedor-recorte {
    width: 100%;
    height: 300px;
    max-height: 42vh;
  }

  #modal-recorte .encabezado-modal-admin h2 {
    font-size: 1.2rem;
  }

  #modal-recorte .texto-secundario {
    font-size: 0.9rem;
  }

  #modal-recorte .acciones-recorte {
    flex-direction: column-reverse;
  }

  #modal-recorte .acciones-recorte button {
    width: 100%;
  }
}

/* =========================================================
   ÍCONOS DE REDES Y MAPS
========================================================= */

.boton-red-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-principal);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.boton-red-social:hover {
  transform: translateY(-2px);
  background: #f1f1f1;
}

.boton-red-social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* =========================================================
   HORARIOS DEL NEGOCIO
========================================================= */

.encabezado-horarios {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.encabezado-horarios .texto-secundario {
  margin: 6px 0 0;
}

.lista-horarios {
  display: grid;
  gap: 10px;
}

.fila-horario {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  background: #fafafa;
}

.control-dia {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-dia input {
  width: 20px;
  height: 20px;
}

.fila-horario input[type="time"] {
  width: 100%;
}

.fila-horario.cerrado {
  opacity: 0.58;
}

.fila-horario.cerrado input[type="time"] {
  pointer-events: none;
}

@media (min-width: 700px) {
  .encabezado-horarios {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .fila-horario {
    grid-template-columns:
      minmax(100px, 1fr)
      minmax(110px, auto)
      140px
      auto
      140px;
    align-items: center;
  }
}

/* =========================================================
   HORARIOS EN EL CATÁLOGO
========================================================= */

#datos-contacto {
  display: grid;
  gap: 12px;
}

#datos-contacto p {
  margin: 0;
}

.horarios-publicos {
  display: grid;
  gap: 5px;
  justify-content: center;
}

.horarios-publicos strong {
  margin-bottom: 3px;
}

.horarios-publicos span {
  color: #666666;
  font-size: 0.9rem;
}

/* =========================================================
   OFERTA PRINCIPAL COMPACTA
========================================================= */

.hero-oferta {
  margin: 14px 0 18px;
}

.hero-oferta-contenido {
  display: grid;
  grid-template-columns: 1fr 110px;
  min-height: 130px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-principal);
  color: #ffffff;
  box-shadow: var(--sombra);
}

.hero-oferta-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 16px;
}

.hero-etiqueta {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.hero-oferta-texto h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.08;
}

.hero-oferta-texto p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
  line-height: 1.35;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hero-precios {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-precio-actual {
  font-size: 1rem;
  font-weight: 900;
}

.hero-precio-anterior {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  text-decoration: line-through;
}

.hero-boton {
  align-self: flex-start;
  border: 0;
  border-radius: 9px;
  padding: 8px 11px;
  background: #ffffff;
  color: var(--color-principal);
  font-size: 0.76rem;
  font-weight: 900;
}

.hero-oferta-imagen-contenedor {
  width: 110px;
  height: 100%;
  min-height: 130px;
  background: rgba(255, 255, 255, 0.08);
}

.hero-oferta-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 700px) {
  .hero-oferta-contenido {
    grid-template-columns: 1fr 190px;
    max-width: 760px;
    min-height: 160px;
    margin: 0 auto;
  }

  .hero-oferta-texto {
    padding: 20px 24px;
  }

  .hero-oferta-texto h2 {
    font-size: 1.45rem;
  }

  .hero-oferta-imagen-contenedor {
    width: 190px;
    min-height: 160px;
  }
}

/* =========================================================
   MEDIDOR DE ALMACENAMIENTO
========================================================= */

.medidor-almacenamiento {
  margin: 14px 0 20px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
}

.medidor-almacenamiento-encabezado {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.88rem;
}

.medidor-almacenamiento-encabezado strong {
  white-space: nowrap;
}

.barra-almacenamiento {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.progreso-almacenamiento {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-principal);
  transition: width 0.3s ease;
}

.mensaje-almacenamiento {
  display: block;
  margin-top: 8px;
  color: #6b7280;
  font-size: 0.75rem;
}

/* =========================================================
   PLANTILLAS VISUALES
========================================================= */

/* CATÁLOGO LIMPIO */
body.plantilla-catalogo-clean {
  background: var(--color-fondo);
}

body.plantilla-catalogo-clean .tarjeta-producto {
  border-radius: 18px;
  background: #ffffff;
}

/* MENÚ VISUAL */
body.plantilla-menu-explorer {
  background: var(--color-fondo);
}


body.plantilla-menu-explorer #contenedor-productos {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin-inline: auto;
  gap: 18px;
}

body.plantilla-menu-explorer .tarjeta-producto {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 190px;
  border: 1px solid rgba(86, 52, 31, 0.12);
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(86, 52, 31, 0.08);
}

body.plantilla-menu-explorer .tarjeta-producto img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  aspect-ratio: auto;
  object-fit: cover;
}

body.plantilla-menu-explorer .producto-contenido {
  display: flex;
  flex-direction: column;
  padding: 18px;
}

body.plantilla-menu-explorer .producto-nombre {
  font-size: 1.05rem;
  font-weight: 800;
  color: #352117;
}

body.plantilla-menu-explorer .producto-precios {
  margin-top: auto;
}

body.plantilla-menu-explorer .producto-precio {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-principal);
}

body.plantilla-menu-explorer .hero-oferta-contenido {
  background:
    linear-gradient(
      135deg,
      var(--color-principal),
      #2f1c12
    );
}

@media (max-width: 600px) {
  body.plantilla-menu-explorer .tarjeta-producto {
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 150px;
    border-radius: 16px;
  }

  body.plantilla-menu-explorer .tarjeta-producto img {
    min-height: 150px;
  }

  body.plantilla-menu-explorer .producto-contenido {
    padding: 14px;
  }
}

/* PREMIUM OSCURO */
body.plantilla-dark-premium {
  background: var(--color-fondo);
  color: var(--color-texto-fondo);
}

body.plantilla-dark-premium .tarjeta-producto,
body.plantilla-dark-premium .categorias,
body.plantilla-dark-premium .panel-carrito {
  border-color: #2e2e2e;
  background: #1b1b1b;
  color: #ffffff;
}

body.plantilla-dark-premium .tarjeta-producto p,
body.plantilla-dark-premium #descripcion-negocio {
  color: #b8b8b8;
}

body.plantilla-dark-premium .navegacion-catalogo,
body.plantilla-menu-dark .navegacion-catalogo {
  margin-bottom: 20px;
  padding: 14px;
  border-radius: 18px;
  background: #171717;
  border: 1px solid #2e2e2e;
}

body.plantilla-dark-premium #buscador {
  background: #1f1f1f;
  color: #ffffff;
  border-color: #343434;
}

body.plantilla-dark-premium #buscador::placeholder {
  color: #8f8f8f;
}

body.plantilla-dark-premium .boton-categoria {
  background: #242424;
  color: #f5f5f5;
  border-color: #383838;
}

body.plantilla-dark-premium .boton-categoria.activo,
body.plantilla-dark-premium .boton-categoria.activa {
  background: var(--color-principal);
  color: #ffffff;
}

body.plantilla-dark-premium .tarjeta-producto {
  border: 1px solid #303030;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* MODAL DE PRODUCTO EN TEMA OSCURO */

body.plantilla-dark-premium .modal-producto-contenido,
body.plantilla-menu-dark .modal-producto-contenido {
  background: #ffffff;
  color: #111111;
}

body.plantilla-dark-premium .modal-producto-contenido h2,
body.plantilla-dark-premium .modal-producto-contenido p,
body.plantilla-dark-premium .modal-producto-contenido .producto-precio,
body.plantilla-menu-dark .modal-producto-contenido h2,
body.plantilla-menu-dark .modal-producto-contenido p,
body.plantilla-menu-dark .modal-producto-contenido .producto-precio {
  color: #111111;
}

body.plantilla-dark-premium .modal-producto-contenido .producto-precio-anterior,
body.plantilla-menu-dark .modal-producto-contenido .producto-precio-anterior {
  color: #888888;
}

/* FOOTER EN TEMA OSCURO */

body.plantilla-dark-premium footer {
  background: #151515;
  color: #f5f5f5;
}

body.plantilla-dark-premium footer p,
body.plantilla-dark-premium footer a,
body.plantilla-dark-premium footer strong {
  color: #f5f5f5;
}

body.plantilla-dark-premium footer .boton-red-social {
  color: var(--color-principal);
  background: #1f1f1f;
  border-color: #3a3a3a;
}

body.plantilla-dark-premium .horarios-publicos,
body.plantilla-dark-premium .horarios-publicos strong,
body.plantilla-dark-premium .horarios-publicos span,
body.plantilla-menu-dark .horarios-publicos,
body.plantilla-menu-dark .horarios-publicos strong,
body.plantilla-menu-dark .horarios-publicos span {
  color: #f5f5f5;
}

/* =========================================================
   IMAGEN IZQUIERDA OSCURA
========================================================= */

body.plantilla-menu-dark {
  background: var(--color-fondo);
  color: var(--color-texto-fondo);
}

body.plantilla-menu-dark #contenedor-productos {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin-inline: auto;
  gap: 18px;
}

body.plantilla-menu-dark .tarjeta-producto {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 190px;
  overflow: hidden;
  border: 1px solid #303030;
  border-radius: 20px;
  background: #1b1b1b;
  color: #ffffff;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

body.plantilla-menu-dark .producto-imagen-contenedor {
  width: 220px;
  height: 100%;
  min-height: 190px;
}

body.plantilla-menu-dark .producto-imagen {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}

body.plantilla-menu-dark .producto-contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 18px;
}

body.plantilla-menu-dark .producto-nombre,
body.plantilla-menu-dark .producto-precio {
  color: #ffffff;
}

body.plantilla-menu-dark .producto-precio-anterior {
  color: #8f8f8f;
}

@media (max-width: 600px) {
  body.plantilla-menu-dark .tarjeta-producto {
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 150px;
    border-radius: 16px;
  }

  body.plantilla-menu-dark .producto-imagen-contenedor {
    width: 120px;
    min-height: 150px;
  }

  body.plantilla-menu-dark .producto-imagen {
    min-height: 150px;
  }

  body.plantilla-menu-dark .producto-contenido {
    padding: 14px;
  }
}

/* FOOTER OSCURO — IMAGEN IZQUIERDA OSCURA */

body.plantilla-menu-dark footer {
  background: #151515;
  color: #f5f5f5;
  border-color: #303030;
}

body.plantilla-menu-dark footer p,
body.plantilla-menu-dark footer strong,
body.plantilla-menu-dark .horarios-publicos,
body.plantilla-menu-dark .horarios-publicos strong,
body.plantilla-menu-dark .horarios-publicos span {
  color: #f5f5f5;
}

body.plantilla-menu-dark footer .boton-red-social {
  color: var(--color-principal);
  background: #1f1f1f;
  border-color: #3a3a3a;
}

/* =========================================================
   IMAGEN DERECHA OSCURA
========================================================= */

body.plantilla-fast-dark {
  background: var(--color-fondo);
  color: var(--color-texto-fondo);
}

body.plantilla-fast-dark #contenedor-productos {
  grid-template-columns: 1fr;
  gap: 14px;
}

body.plantilla-fast-dark .tarjeta-producto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  width: 100%;
  min-height: 138px;
  overflow: hidden;
  border: 1px solid #303030;
  border-radius: 18px;
  background: #1b1b1b;
  color: #ffffff;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

body.plantilla-fast-dark .producto-imagen-contenedor {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 118px;
  height: 100%;
  min-height: 138px;
  overflow: hidden;
}

body.plantilla-fast-dark .producto-imagen {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 138px;
  object-fit: cover;
}

body.plantilla-fast-dark .producto-contenido {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  box-sizing: border-box;
}

body.plantilla-fast-dark .producto-nombre,
body.plantilla-fast-dark .producto-precio {
  color: #ffffff;
}

body.plantilla-fast-dark .producto-precio-anterior {
  color: #8f8f8f;
}

body.plantilla-fast-dark .boton-agregar {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.1;
}

@media (min-width: 720px) {
  body.plantilla-fast-dark #contenedor-productos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.plantilla-fast-dark .tarjeta-producto {
    grid-template-columns: minmax(0, 1fr) 145px;
    min-height: 160px;
  }

  body.plantilla-fast-dark .producto-imagen-contenedor {
    width: 145px;
    min-height: 160px;
  }

  body.plantilla-fast-dark .producto-imagen {
    min-height: 160px;
  }

  body.plantilla-fast-dark .producto-contenido {
    padding: 16px;
  }
}

/* BUSCADOR Y CATEGORÍAS — IMAGEN DERECHA OSCURA */

body.plantilla-fast-dark .navegacion-catalogo {
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid #2e2e2e;
  border-radius: 18px;
  background: #171717;
}

body.plantilla-fast-dark #buscador {
  border-color: #343434;
  background: #1f1f1f;
  color: #ffffff;
}

body.plantilla-fast-dark #buscador::placeholder {
  color: #8f8f8f;
}

body.plantilla-fast-dark .boton-categoria {
  border-color: #383838;
  background: #242424;
  color: #f5f5f5;
}

body.plantilla-fast-dark .boton-categoria.activo,
body.plantilla-fast-dark .boton-categoria.activa {
  background: var(--color-principal);
  color: #ffffff;
}


/* FOOTER — IMAGEN DERECHA OSCURA */

body.plantilla-fast-dark footer {
  border-color: #303030;
  background: #151515;
  color: #f5f5f5;
}

body.plantilla-fast-dark footer p,
body.plantilla-fast-dark footer strong,
body.plantilla-fast-dark .horarios-publicos,
body.plantilla-fast-dark .horarios-publicos strong,
body.plantilla-fast-dark .horarios-publicos span {
  color: #f5f5f5;
}

body.plantilla-fast-dark footer .boton-red-social {
  border-color: #3a3a3a;
  background: #1f1f1f;
  color: var(--color-principal);
}




/* =========================================================
   PEDIDO RÁPIDO
========================================================= */

body.plantilla-fast-order #contenedor-productos {
  grid-template-columns: 1fr;
  gap: 14px;
}

body.plantilla-fast-order .tarjeta-producto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  width: 100%;
  min-height: 138px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

body.plantilla-fast-order .producto-imagen-contenedor {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 118px;
  height: 100%;
  min-height: 138px;
  overflow: hidden;
}

body.plantilla-fast-order .producto-imagen {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 138px;
  object-fit: cover;
}

body.plantilla-fast-order .producto-contenido {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  box-sizing: border-box;
}

body.plantilla-fast-order .producto-nombre {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1rem;
  line-height: 1.2;
}

body.plantilla-fast-order .producto-precios {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 48px;
}

body.plantilla-fast-order .producto-precio-anterior {
  font-size: 0.78rem;
  line-height: 1.2;
}

body.plantilla-fast-order .producto-precio {
  font-size: 1rem;
  font-weight: 900;
}

body.plantilla-fast-order .boton-agregar {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.1;
}

/* COMPUTADORA */

@media (min-width: 720px) {
  body.plantilla-fast-order #contenedor-productos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.plantilla-fast-order .tarjeta-producto {
    grid-template-columns: minmax(0, 1fr) 145px;
    min-height: 160px;
  }

  body.plantilla-fast-order .producto-imagen-contenedor {
    width: 145px;
    min-height: 160px;
  }

  body.plantilla-fast-order .producto-imagen {
    min-height: 160px;
  }

  body.plantilla-fast-order .producto-contenido {
    padding: 16px;
  }
}



/* =========================================================
   ENCABEZADO MÓVIL COMPACTO
========================================================= */

@media (max-width: 600px) {
  .encabezado {
    gap: 8px;
    padding: 10px 12px;
  }

  .negocio-identidad {
    gap: 8px;
    flex: 1;
  }

  .logo-negocio {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .negocio-identidad h1 {
    font-size: 0.98rem;
    line-height: 1.05;
  }

  .negocio-identidad p {
    display: none;
  }

  .boton-carrito {
    padding: 8px 11px;
    font-size: 0.76rem;
  }

  #contador-carrito {
    min-width: 21px;
    height: 21px;
    margin-left: 4px;
    padding: 0 6px;
    font-size: 0.7rem;
  }
}

/* =========================================================
   INTERACCIÓN DE TARJETAS
========================================================= */

.tarjeta-producto:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.tarjeta-producto:active {
  transform: translateY(-1px) scale(0.99);
}

/* =========================================================
   VISTA PREVIA DE PORTADA EN ADMIN
========================================================= */

.vista-portada-admin {
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 9;
  margin-top: 12px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}

/* =========================================================
   ENCABEZADO CON PORTADA
========================================================= */

.encabezado:has(.encabezado-portada:not([hidden])) {
  position: relative;
  display: block;
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.encabezado-portada {
  position: relative;
  width: 100%;
  height: clamp(150px, 24vw, 260px);
  overflow: visible;
  background: #111111;
}

.imagen-portada-negocio {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  overflow: hidden;
}

.encabezado-portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.18)
    );
  pointer-events: none;
}

.boton-carrito-portada {
  position: absolute;
  right: 18px;
  bottom: -22px;
  z-index: 2;
  border: 3px solid var(--color-secundario);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
  padding: 0;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.boton-carrito-portada svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#contador-carrito-portada {
  position: absolute;
  top: -5px;
  right: -5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 21px;
  height: 21px;
  padding: 0 5px;

  border: 2px solid #ffffff;
  border-radius: 999px;

  background: var(--color-principal);
  color: #ffffff;

  font-size: 0.68rem;
  font-weight: 800;
}

.encabezado-identidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.portada-texto {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;

  max-width: 70%;
  color: #ffffff;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45);
}

.portada-tipo {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 999px;

  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;

  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;

  text-shadow: none;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


@media (max-width: 600px) {
  .encabezado-portada {
    height: 165px;
  }

  .boton-carrito-portada {
    right: 14px;
    top: auto;
    bottom: -22px;
    width: 44px;
    height: 44px;
  }

  .boton-carrito-portada svg {
    width: 21px;
    height: 21px;
  }

  .portada-texto {
    left: 18px;
    bottom: 16px;
    max-width: 55%;
  }

  .portada-tipo {
    font-size: 1.05rem;
  }

}

body.plantilla-catalogo-clean .portada-tipo {
  font-family: Arial, sans-serif;
  font-weight: 800;
}

body.plantilla-menu-explorer .portada-tipo {
  font-family: Georgia, serif;
  font-weight: 400;
}

body.plantilla-dark-premium .portada-tipo {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
}

body.plantilla-fast-order .portada-tipo {
  font-family: Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

/* =========================================================
   PRESENTACIÓN DEL NEGOCIO
========================================================= */

.presentacion-negocio {
  max-width: 760px;
  margin: 42px auto 8px;
  padding: 0 20px;
  text-align: center;
}

.presentacion-negocio p {
  margin: 0;
  color: var(--color-texto-fondo);
  font-size: 0.95rem;
  line-height: 1.65;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .presentacion-negocio p {
  color: var(--color-texto-fondo);
}

@media (max-width: 600px) {
.presentacion-negocio {
  margin-top: 38px;
  padding: 0 16px;
}

  .presentacion-negocio p {
    font-size: 0.86rem;
    line-height: 1.55;
  }
}

/* =========================================================
   MODAL DE PRODUCTO
========================================================= */

.modal-producto {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-producto-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-producto-contenido {
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  max-height: 88vh;
  overflow-y: auto;

  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.cerrar-modal-producto {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;

  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;

  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.modal-producto-imagen {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.modal-producto-info {
  padding: 24px;
}

.modal-producto-info h2 {
  margin: 0 0 10px;
  font-size: 1.7rem;
}

.modal-producto-descripcion {
  margin: 0 0 18px;
  color: #5f6368;
  line-height: 1.6;
}

.modal-producto-agregar {
  margin-top: 18px;
}

@media (max-width: 600px) {
  .modal-producto {
    padding: 12px;
  }

  .modal-producto-contenido {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px;
  }

  .modal-producto-imagen {
    max-height: 330px;
  }

  .modal-producto-info {
    padding: 20px;
  }

  .modal-producto-info h2 {
    font-size: 1.4rem;
  }
}

.navegacion-catalogo {
  position: sticky;
  top: 0;
  z-index: 15;
  background: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}

.boton-ver-mas {
  display: block;
  margin: 28px auto 0;
  padding: 12px 24px;

  border: 0;
  border-radius: 999px;

  background: var(--color-principal);
  color: #ffffff;

  font-size: 0.95rem;
  font-weight: 700;

  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.boton-ver-mas:hover {
  transform: translateY(-2px);
}

.modal-producto-miniaturas {
  display: flex;
  gap: 10px;
  padding: 12px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
}

.modal-producto-miniaturas::-webkit-scrollbar {
  display: none;
  
}

.modal-miniatura {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;

  border: 2px solid transparent;
  border-radius: 10px;

  background: transparent;
  overflow: hidden;
  cursor: pointer;

  scroll-snap-align: start;
}

.modal-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-miniatura.activa {
  border-color: var(--color-principal);
}

/* =========================================================
   ACORDEONES DEL PANEL
========================================================= */

.seccion-acordeon {
  grid-column: 1 / -1;

  border: 1px solid #e4e4e4;
  border-radius: 16px;

  background: #ffffff;
  overflow: hidden;
}

.seccion-acordeon + .seccion-acordeon {
  margin-top: 14px;
}

.seccion-acordeon > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 20px;

  font-size: 1rem;
  font-weight: 800;

  cursor: pointer;
  list-style: none;
}

.seccion-acordeon > summary::-webkit-details-marker {
  display: none;
}

.seccion-acordeon > summary::after {
  content: "+";

  font-size: 1.4rem;
  line-height: 1;
}

.seccion-acordeon[open] > summary::after {
  content: "−";
}

.seccion-acordeon[open] > summary {
  border-bottom: 1px solid #ececec;
}

.contenido-acordeon {
  padding: 20px;
}

.ayuda-campo {
  margin: 7px 0 0;

  color: #6b7280;
  font-size: 0.82rem;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .seccion-acordeon > summary {
    padding: 16px;
  }

  .contenido-acordeon {
    padding: 16px;
  }
}

.selector-colores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 12px;
}

.opcion-color {
  width: 34px;
  height: 34px;
  padding: 0;

  border: 2px solid #d1d5db;
  border-radius: 50%;

  background: var(--color-opcion);
  cursor: pointer;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.opcion-color:hover {
  transform: scale(1.08);
}

.opcion-color.activa {
  outline: 3px solid #111111;
  outline-offset: 2px;
}

.color-personalizado {
  width: 52px;
  height: 38px;
  padding: 2px;
  cursor: pointer;
}

.negocio-identidad,
.negocio-identidad h1,
.negocio-identidad p {
  color: var(--color-texto-encabezado);
}

.boton-eliminar-producto,
.boton-eliminar-categoria {
  width: 38px;
  height: 38px;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #fee2e2;
  color: #b91c1c;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1rem;
  cursor: pointer;
}

.boton-eliminar-producto:hover,
.boton-eliminar-categoria:hover {
  background: #fecaca;
  transform: translateY(-1px);
}

.acordeon-productos-admin {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

.acordeon-productos-admin + .acordeon-productos-admin {
  margin-top: 14px;
}

.acordeon-productos-admin summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px 24px;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  background: #f8fafc;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.acordeon-productos-admin summary::-webkit-details-marker {
  display: none;
}

.acordeon-productos-admin summary::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  color: #64748b;
}

.acordeon-productos-admin[open] summary::after {
  content: "−";
}

.acordeon-productos-admin summary:hover {
  background: #f1f5f9;
}

.acordeon-productos-admin summary strong {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  justify-self: center;
  background: #111827;
  color: #ffffff;
  font-size: 13px;
}

.presentacion-negocio h1 {
  margin: 0 0 10px;
  color: var(--color-texto-fondo);
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .presentacion-negocio h1 {
  color: var(--color-texto-fondo);
}

.contenido-acordeon-productos {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
}

.mensaje-categoria-vacia {
  margin: 0;
  padding: 12px;
  text-align: center;
  color: #64748b;
}

.acordeon-productos-admin summary span {
  min-width: 0;
}

.input-archivo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.boton-cargar-imagen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  background: #111111;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.cropper-container,
.cropper-wrap-box,
.cropper-canvas {
  max-width: 100% !important;
  max-height: 100% !important;
}

.pie-pagina .credito-inkuva {
  display: block;
  width: 100%;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  color: inherit;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.8;
}

.credito-inkuva span,
.credito-inkuva a {
  display: block;
}

.credito-inkuva a {
  margin-top: 5px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.acceso-admin {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
  text-decoration: none;
  opacity: 0.20;
}

.acceso-admin:hover {
  opacity: 0.8;
  transform: rotate(30deg);
}

/* =========================================================
   ESTABILIDAD RESPONSIVE Y CONTRASTE
========================================================= */

.modal-producto-sin-imagen {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 280px;
  padding: 24px;
  background: #eeeeee;
  color: #666666;
  text-align: center;
  font-weight: 700;
}

.etiqueta-agotado {
  background: rgba(153, 27, 27, 0.92);
}

.estado-carrito-agotado {
  margin-top: 6px !important;
  color: #b91c1c !important;
  font-weight: 700;
}

.admin-seccion,
.admin-formulario,
.admin-formulario > *,
.seccion-acordeon,
.contenido-acordeon,
.item-admin,
.item-admin-contenido,
.item-admin-acciones,
.acordeon-productos-admin,
.contenido-acordeon-productos,
.medidor-almacenamiento,
.modal-admin,
.contenido-modal-admin,
.vista-previa-producto,
.item-vista-previa {
  min-width: 0;
  max-width: 100%;
}

.admin-formulario input,
.admin-formulario textarea,
.admin-formulario select,
.fila-horario input,
.contenido-modal-admin img {
  min-width: 0;
  max-width: 100%;
}

.item-admin h3,
.item-admin p,
.mensaje-formulario,
.ayuda-campo,
.texto-secundario,
.acordeon-productos-admin summary span {
  overflow-wrap: anywhere;
}

.medidor-almacenamiento-encabezado,
.admin-acciones,
.item-admin-acciones {
  flex-wrap: wrap;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) #buscador {
  border-color: #3a3a3a;
  background: #1f1f1f;
  color: #ffffff;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) #buscador::placeholder {
  color: #a3a3a3;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .boton-categoria {
  border-color: #3a3a3a;
  background: #242424;
  color: #f5f5f5;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .boton-categoria.activo {
  border-color: var(--color-principal);
  background: var(--color-principal);
  color: #ffffff;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .mensaje-estado {
  color: #d4d4d4;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .panel-carrito {
  border-left: 1px solid #303030;
  background: #171717;
  color: #ffffff;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .panel-carrito h2,
body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .panel-carrito h3,
body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .panel-carrito strong,
body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .panel-carrito span {
  color: #ffffff;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .panel-carrito p {
  color: #b8b8b8;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .panel-carrito-encabezado,
body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .panel-carrito-pie,
body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .item-carrito {
  border-color: #333333;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) #cerrar-carrito,
body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .controles-cantidad button {
  background: #2b2b2b;
  color: #ffffff;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .boton-eliminar {
  color: #fca5a5;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .modal-producto-contenido {
  background: #ffffff;
  color: #111111;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .modal-producto-contenido h2,
body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .modal-producto-contenido p,
body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .modal-producto-contenido .producto-precio {
  color: #111111;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .modal-producto-contenido .producto-precio-anterior {
  color: #737373;
}

body:is(
  .plantilla-dark-premium,
  .plantilla-menu-dark,
  .plantilla-fast-dark
) .modal-producto-sin-imagen {
  background: #e5e5e5;
  color: #525252;
}

@media (max-width: 600px) {
  .admin-contenido {
    width: min(100% - 16px, 1050px);
    padding-top: 12px;
  }

  .admin-seccion {
    padding: 14px;
    border-radius: 16px;
  }

  .admin-encabezado {
    padding: 16px;
  }

  .admin-acciones,
  .admin-titulo-seccion,
  .encabezado-horarios,
  .item-admin-acciones {
    width: 100%;
  }

  .admin-acciones > *,
  .admin-titulo-seccion > .boton-principal,
  .encabezado-horarios > .boton-secundario,
  .item-admin-acciones > * {
    max-width: 100%;
  }

  .admin-titulo-seccion > .boton-principal,
  .encabezado-horarios > .boton-secundario {
    width: 100%;
  }

  .modal-admin {
    padding: 8px;
  }

  .contenido-modal-admin {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 16px;
  }

  .fila-horario {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .fila-horario > * {
    min-width: 0;
    max-width: 100%;
  }

  .medidor-almacenamiento-encabezado {
    align-items: flex-start;
  }

  .medidor-almacenamiento-encabezado strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .acordeon-productos-admin summary {
    grid-template-columns: minmax(0, 1fr) 34px 20px;
    gap: 8px;
    padding: 15px;
  }

  .contenido-acordeon-productos {
    padding: 10px;
  }

  .item-admin {
    padding: 13px;
  }

  .vista-previa-producto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-producto-sin-imagen {
    min-height: 220px;
  }
}

/* =========================================================
   EXPERIENCIA 2.1 · NAVEGACIÓN, ESTADOS Y ADMINISTRACIÓN
========================================================= */

:root {
  --alto-encabezado-sticky: 0px;
}

html,
body {
  overflow-x: clip;
}

.panel-admin,
.admin-contenido,
.admin-seccion {
  overflow-x: clip;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-principal) 70%, #ffffff);
  outline-offset: 3px;
}

body.pagina-bloqueada {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.navegacion-catalogo {
  position: -webkit-sticky;
  position: sticky;
  top: var(--alto-encabezado-sticky);
  z-index: 18;
  padding-inline: max(14px, calc((100% - 1200px) / 2));
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

.navegacion-catalogo .seccion-buscador {
  padding-top: 0;
}

.navegacion-catalogo .categorias {
  padding-bottom: 2px;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 18px,
    #000 calc(100% - 34px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 18px,
    #000 calc(100% - 34px),
    transparent 100%
  );
}

.boton-carrito-flotante {
  position: fixed;
  right: 18px;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 28;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--color-principal);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.boton-carrito-flotante svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#contador-carrito-flotante {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
}

.portada-texto {
  max-width: min(76%, 720px);
}


.producto-sin-imagen {
  display: grid;
  place-items: center;
  padding: 16px;
  color: #777777;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
}

.boton-agregar.agregado {
  background: #15803d;
}

.tarjeta-esqueleto {
  cursor: default;
  box-shadow: none;
}

.tarjeta-esqueleto > span {
  display: block;
  background: linear-gradient(90deg, #e7e7e7 25%, #f5f5f5 50%, #e7e7e7 75%);
  background-size: 220% 100%;
  animation: carga-esqueleto 1.35s infinite linear;
}

.esqueleto-imagen {
  aspect-ratio: 1 / 1;
}

.esqueleto-linea {
  height: 13px;
  margin: 14px 14px 0;
  border-radius: 999px;
}

.esqueleto-linea.corta {
  width: 46%;
  margin-top: 10px;
}

.esqueleto-boton {
  height: 40px;
  margin: 16px 14px 14px;
  border-radius: 12px;
}

@keyframes carga-esqueleto {
  to { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.contador-galeria-producto {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
}

.notificacion-publica {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 140;
  width: max-content;
  max-width: calc(100% - 36px);
  padding: 12px 17px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.notificacion-publica.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

#datos-contacto {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  width: min(920px, 100%);
  margin: 18px auto 0;
  text-align: left;
}

.dato-footer {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(128, 128, 128, 0.07);
}

.dato-footer > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.dato-footer strong,
.dato-footer span,
.dato-footer a {
  overflow-wrap: anywhere;
}

.dato-footer a {
  color: inherit;
  text-decoration: none;
}

.icono-dato-footer {
  display: inline-grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-principal);
  color: #ffffff;
}

.icono-dato-footer svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.horarios-publicos {
  justify-content: initial;
}

.horarios-publicos .icono-dato-footer {
  color: #ffffff;
  font-size: initial;
}

.credito-inkuva .credito-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  margin: 7px auto 0;
}

.credito-whatsapp svg {
  width: 20px;
  height: 20px;
  fill: #25d366;
}

/* Panel administrativo */

.admin-body,
.admin-body * {
  min-inline-size: 0;
}

.seccion-acordeon {
  width: 100%;
  max-width: 100%;
  overflow: clip;
  contain: inline-size;
}

.contenido-acordeon {
  width: 100%;
  max-width: 100%;
}

.seccion-acordeon[open],
.contenido-acordeon,
.selector-plantillas,
.opciones-modo-encabezado,
.boton-cargar-imagen,
.vista-portada-admin,
.vista-logo-admin {
  min-width: 0;
  max-width: 100%;
}

.tarjetas-configuracion-admin {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tarjeta-configuracion-admin {
  min-width: 0;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
}

.tarjeta-configuracion-admin h3 {
  margin: 0 0 7px;
}

.tarjeta-configuracion-admin > p {
  margin: 0 0 16px;
  color: #64748b;
  line-height: 1.5;
}

.campo-telefono-whatsapp {
  display: grid;
  grid-template-columns: minmax(138px, 0.46fr) minmax(0, 1fr);
  gap: 8px;
}

.selector-modo-horario {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.selector-modo-horario legend {
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: 800;
}

.opciones-modo-horario {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.opciones-modo-horario label {
  position: relative;
  display: block;
  cursor: pointer;
}

.opciones-modo-horario input {
  position: absolute;
  opacity: 0;
}

.opciones-modo-horario span {
  display: grid;
  min-height: 92px;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 13px;
  background: #ffffff;
}

.opciones-modo-horario small {
  color: #6b7280;
  font-weight: 500;
  line-height: 1.35;
}

.opciones-modo-horario input:checked + span {
  border-color: #111111;
  background: #f8fafc;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08);
}

.opciones-modo-horario input:focus-visible + span,
.opciones-modo-encabezado input:focus-visible + .contenido-opcion-encabezado {
  outline: 3px solid color-mix(in srgb, var(--color-principal) 70%, #ffffff);
  outline-offset: 3px;
}

#horarios-concretos[hidden] {
  display: none;
}

.diagnostico-instalacion {
  margin-bottom: 20px;
  background: #f8fafc;
}

.lista-diagnostico {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 14px;
}

.estado-diagnostico {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  font-size: 0.82rem;
  font-weight: 750;
}

.estado-diagnostico.correcto {
  background: #dcfce7;
  color: #166534;
}

.estado-diagnostico.error {
  background: #fee2e2;
  color: #991b1b;
}

.select-plantilla-respaldo {
  position: absolute;
  width: 1px !important;
  height: 1px;
  margin: -1px;
  padding: 0 !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.selector-plantillas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.opcion-plantilla {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 2px solid #e5e7eb;
  border-radius: 13px;
  background: #ffffff;
  color: #374151;
  font-size: 0.73rem;
  font-weight: 750;
  text-align: left;
}

.opcion-plantilla.activa {
  border-color: #111111;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.1);
}

.mini-plantilla {
  display: grid;
  width: 100%;
  height: 64px;
  gap: 5px;
  padding: 7px;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f4f5;
}

.mini-plantilla i {
  display: block;
  border-radius: 4px;
  background: #d4d4d8;
}

.mini-cuadricula {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.mini-lista {
  grid-template-columns: 36% 1fr;
  grid-template-rows: repeat(3, 1fr);
}

.mini-lista i {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, #a1a1aa 35%, #e4e4e7 35%);
}

.mini-lista.mini-derecha i {
  background: linear-gradient(90deg, #e4e4e7 65%, #a1a1aa 65%);
}

.mini-premium {
  background: #e5e7eb;
  box-shadow: inset 0 0 0 1px #a1a1aa;
}

.mini-premium i {
  background: #71717a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.mini-lista.mini-premium i {
  background: linear-gradient(90deg, #71717a 35%, #d4d4d8 35%);
}

.mini-lista.mini-premium.mini-derecha i {
  background: linear-gradient(90deg, #d4d4d8 65%, #71717a 65%);
}

.vista-colores-admin {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: var(--vista-color-fondo, #ffffff);
  color: var(--vista-color-texto-fondo, #111111);
}

.vista-colores-encabezado {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--vista-color-encabezado, #ffffff);
  color: var(--vista-color-texto-encabezado, #111111);
  font-size: 0.8rem;
}

.vista-colores-navegacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(
    in srgb,
    var(--vista-color-texto-contenedores, #111111) 18%,
    transparent
  );
  border-radius: 10px;
  background: var(--vista-color-contenedores, #ffffff);
  color: var(--vista-color-texto-contenedores, #111111);
  font-size: 0.74rem;
}

.vista-colores-navegacion > span {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid currentColor;
  border-radius: 8px;
  opacity: 0.65;
}

.vista-colores-navegacion > strong {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--vista-color-principal, #111111);
  color: #ffffff;
}

.vista-colores-tarjeta {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  border-radius: 11px;
  background: var(--vista-color-contenedores, #ffffff);
  color: var(--vista-color-texto-contenedores, #111111);
}

.vista-colores-imagen {
  min-height: 92px;
  border-radius: 11px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

.vista-colores-tarjeta > div {
  display: grid;
  align-content: center;
  gap: 5px;
}

.vista-colores-admin button {
  margin-top: 5px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: var(--vista-color-principal, #111111);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
}

.selector-modo-encabezado {
  margin: 0;
  padding: 0;
  border: 0;
}

.selector-modo-encabezado legend {
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: 800;
}

.opciones-modo-encabezado {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.opciones-modo-encabezado label {
  position: relative;
  display: block;
  cursor: pointer;
}

.opciones-modo-encabezado input {
  position: absolute;
  opacity: 0;
}

.opciones-modo-encabezado > label > .contenido-opcion-encabezado {
  display: grid;
  min-height: 150px;
  align-content: start;
  gap: 5px;
  padding: 9px;
  border: 2px solid #e5e7eb;
  border-radius: 13px;
  background: #ffffff;
}

.opciones-modo-encabezado small {
  color: #6b7280;
  font-weight: 500;
  line-height: 1.3;
}

.opciones-modo-encabezado input:checked + .contenido-opcion-encabezado {
  border-color: #111111;
  background: #f8fafc;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08);
}

.mini-encabezado {
  position: relative;
  display: block;
  width: 100%;
  height: 68px;
  margin-bottom: 3px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2f7;
}

.mini-encabezado i {
  position: absolute;
  display: block;
}

.mini-encabezado-logo i:first-child {
  top: 14px;
  left: 12px;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: #94a3b8;
}

.mini-encabezado-logo i:last-child {
  top: 20px;
  right: 12px;
  width: calc(100% - 74px);
  height: 25px;
  border-radius: 4px;
  background: linear-gradient(#64748b 0 7px, transparent 7px 13px, #cbd5e1 13px 18px, transparent 18px);
}

.mini-encabezado-portada {
  background: linear-gradient(135deg, #64748b, #cbd5e1);
}

.mini-encabezado-portada i:first-child {
  left: 10px;
  bottom: 10px;
  width: 54px;
  height: 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

.mini-encabezado-portada i:last-child {
  right: 9px;
  bottom: 9px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.82);
}

.mini-encabezado-automatico {
  background: linear-gradient(135deg, #dbeafe 0 49%, #475569 50% 100%);
}

.mini-encabezado-automatico i:first-child {
  top: 17px;
  left: 13px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #94a3b8;
}

.mini-encabezado-automatico i:last-child {
  right: 10px;
  bottom: 10px;
  width: 49px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

.boton-cargar-imagen {
  display: grid;
  width: min(100%, 520px);
  min-height: 132px;
  align-content: center;
  justify-items: center;
  gap: 7px;
  margin-top: 9px;
  border: 2px dashed #9ca3af;
  background: #f8fafc;
  color: #111827;
}

.icono-carga-imagen {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}

.vista-logo-admin,
.vista-portada-admin {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.barra-guardar-negocio {
  position: sticky;
  bottom: 10px;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(10px);
}

.barra-guardar-negocio .mensaje-formulario {
  grid-column: 1 / -1;
}

.estado-cambios-negocio {
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 750;
}

.estado-cambios-negocio.pendiente {
  color: #9a6700;
}

.filtros-productos-admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 12px;
  margin: 18px 0;
}

.filtros-productos-admin label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 750;
}

.filtros-productos-admin input,
.filtros-productos-admin select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-borde);
  border-radius: 11px;
  background: #ffffff;
}

.miniatura-producto-admin {
  display: grid;
  flex: 0 0 64px;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 12px;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 0.66rem;
  text-align: center;
}

.miniatura-producto-admin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.etiqueta-estado-admin {
  display: inline-flex;
  margin: 3px 4px 0 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 0.72rem;
  font-weight: 800;
}

.etiqueta-estado-admin.destacado {
  background: #ede9fe;
  color: #6d28d9;
}

.estado-vacio-admin {
  padding: 28px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  text-align: center;
}

.progreso-almacenamiento.advertencia {
  background: #d97706;
}

.progreso-almacenamiento.limite {
  background: #b91c1c;
}

@media (min-width: 700px) {
  .selector-plantillas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .portada-texto {
    max-width: calc(100% - 86px);
  }

  .modal-producto-info {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .modal-producto-agregar {
    position: sticky;
    bottom: 10px;
    z-index: 3;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  }

  #datos-contacto {
    grid-template-columns: 1fr;
  }

  .opciones-modo-encabezado,
  .opciones-modo-horario,
  .tarjetas-configuracion-admin,
  .filtros-productos-admin {
    grid-template-columns: 1fr;
  }

  .campo-telefono-whatsapp {
    grid-template-columns: 1fr;
  }

  .admin-formulario input,
  .admin-formulario textarea,
  .admin-formulario select,
  .filtros-productos-admin input,
  .filtros-productos-admin select {
    font-size: 16px;
  }

  .barra-guardar-negocio {
    bottom: 6px;
    grid-template-columns: 1fr 1fr;
  }

  .barra-guardar-negocio .estado-cambios-negocio,
  .barra-guardar-negocio .mensaje-formulario {
    grid-column: 1 / -1;
  }

  .barra-guardar-negocio .boton-secundario,
  .barra-guardar-negocio .boton-principal {
    width: 100%;
    min-height: 46px;
  }

  .item-admin {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
  }

  .item-admin-acciones {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   AJUSTES DEL PANEL
========================================================= */

.panel-admin {
  display: flex;
  flex-direction: column;
}

.admin-contenido {
  flex: 1 0 auto;
}

.boton-icono-admin {
  display: inline-grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);
}

.boton-icono-admin:hover {
  background: #f3f4f6;
}

.boton-icono-admin svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pie-admin {
  margin-top: auto;
  padding: 20px 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 650;
  text-align: center;
}

.lista-horarios {
  gap: 7px;
}

.fila-horario {
  grid-template-columns:
    minmax(78px, 0.72fr)
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 7px;
  padding: 9px 10px;
  border-radius: 11px;
}

.fila-horario > strong {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: 0.88rem;
}

.fila-horario .control-dia {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  gap: 5px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 650;
}

.fila-horario .control-dia input {
  width: 16px;
  height: 16px;
}

.fila-horario .horario-apertura {
  grid-column: 2;
  grid-row: 1 / 3;
}

.fila-horario > span {
  grid-column: 3;
  grid-row: 1 / 3;
  color: #6b7280;
  font-size: 0.76rem;
}

.fila-horario .horario-cierre {
  grid-column: 4;
  grid-row: 1 / 3;
}

.fila-horario input[type="time"] {
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  font-size: 0.86rem;
}

.barra-guardar-negocio {
  bottom: 5px;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 12px;
}

.barra-guardar-negocio .boton-secundario,
.barra-guardar-negocio .boton-principal {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 0.82rem;
  line-height: 1.1;
}

.barra-guardar-negocio .mensaje-formulario {
  margin: 0;
  font-size: 0.78rem;
}

.barra-guardar-negocio .mensaje-formulario:empty {
  display: none;
}

.estado-cambios-negocio {
  font-size: 0.72rem;
  white-space: nowrap;
}

@media (max-width: 699px) {
  .barra-guardar-negocio {
    grid-template-columns: auto minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .barra-guardar-negocio .estado-cambios-negocio {
    grid-column: auto;
  }

  .barra-guardar-negocio .mensaje-formulario {
    grid-column: 1 / -1;
  }

  .barra-guardar-negocio .boton-secundario,
  .barra-guardar-negocio .boton-principal {
    width: 100%;
    min-height: 38px;
  }
}

@media (max-width: 380px) {
  .fila-horario {
    grid-template-columns: 70px minmax(0, 1fr) 9px minmax(0, 1fr);
  }

  .fila-horario input[type="time"] {
    padding-inline: 4px;
    font-size: 0.8rem;
  }
}

/* =========================================================
   SUPERFICIES EDITABLES DEL CATÁLOGO 2.2.0
========================================================= */

body:not(.admin-body) .navegacion-catalogo {
  margin: 14px 0 22px;
  padding: 14px;
  border: 1px solid color-mix(
    in srgb,
    var(--color-texto-navegacion) 16%,
    transparent
  );
  border-radius: var(--radio);
  background: var(--color-navegacion);
  color: var(--color-texto-navegacion);
  box-shadow: var(--sombra);
}

body:not(.admin-body) .navegacion-catalogo .categorias {
  border-color: transparent;
  background: transparent;
  color: var(--color-texto-navegacion);
}

body:not(.admin-body) #buscador {
  border-color: color-mix(
    in srgb,
    var(--color-texto-navegacion) 22%,
    transparent
  );
  background: var(--color-navegacion);
  color: var(--color-texto-navegacion);
}

body:not(.admin-body) #buscador::placeholder {
  color: color-mix(
    in srgb,
    var(--color-texto-navegacion) 58%,
    transparent
  );
}

body:not(.admin-body) .boton-categoria {
  border-color: color-mix(
    in srgb,
    var(--color-texto-navegacion) 22%,
    transparent
  );
  background: var(--color-navegacion);
  color: var(--color-texto-navegacion);
}

body:not(.admin-body) .boton-categoria:is(.activo, .activa) {
  border-color: var(--color-principal);
  background: var(--color-principal);
  color: #ffffff;
}

body:not(.admin-body) .tarjeta-producto {
  background: var(--color-contenedores);
  color: var(--color-texto-contenedores);
}

body:not(.admin-body) .tarjeta-producto .producto-nombre,
body:not(.admin-body) .tarjeta-producto .producto-precio {
  color: var(--color-texto-contenedores);
}

body:not(.admin-body) .tarjeta-producto .producto-precio-anterior {
  color: color-mix(
    in srgb,
    var(--color-texto-contenedores) 60%,
    transparent
  );
}

/* =========================================================
   PERSONALIZACIÓN VISUAL Y ACABADOS 2.2.0
========================================================= */

.personalizacion-avanzada {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid #dbe3ec;
  border-radius: 15px;
  background: #f8fafc;
}

.personalizacion-avanzada > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.personalizacion-avanzada > summary::-webkit-details-marker {
  display: none;
}

.personalizacion-avanzada > summary::before {
  content: "+";
  flex: 0 0 auto;
  order: 3;
  font-size: 1.25rem;
  line-height: 1;
}

.personalizacion-avanzada[open] > summary::before {
  content: "−";
}

.personalizacion-avanzada[open] > summary {
  border-bottom: 1px solid #dbe3ec;
}

.contenido-personalizacion-avanzada {
  padding: 16px;
}

.encabezado-personalizacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
}

.encabezado-personalizacion p {
  margin: 0;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.45;
}

.encabezado-personalizacion button {
  flex: 0 0 auto;
}

.estado-paleta {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.estado-paleta.personalizado {
  background: #fef3c7;
  color: #92400e;
}

.selector-estilo-redes {
  margin: 0;
  padding: 0;
  border: 0;
}

.selector-estilo-redes legend {
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: 800;
}

.opciones-estilo-redes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.opciones-estilo-redes label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.opciones-estilo-redes input {
  position: absolute;
  opacity: 0;
}

.opciones-estilo-redes label > span {
  display: grid;
  min-height: 128px;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 12px 8px;
  border: 2px solid #e5e7eb;
  border-radius: 13px;
  background: #ffffff;
  text-align: center;
}

.opciones-estilo-redes input:checked + span {
  border-color: #111111;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.1);
}

.opciones-estilo-redes input:focus-visible + span {
  outline: 3px solid #94a3b8;
  outline-offset: 2px;
}

.opciones-estilo-redes small {
  color: #64748b;
  line-height: 1.3;
}

.muestra-red {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-style: normal;
  font-weight: 900;
}

.muestra-facebook {
  color: #1877f2;
}

.muestra-instagram {
  border-radius: 9px;
  background: linear-gradient(135deg, #405de6, #c13584, #fd1d1d, #ffdc80);
  color: #ffffff;
}

.muestra-tiktok {
  color: #111111;
  text-shadow: -2px 0 #25f4ee, 2px 0 #fe2c55;
}

.vista-colores-navegacion {
  border-color: color-mix(
    in srgb,
    var(--vista-color-texto-navegacion, #111111) 18%,
    transparent
  );
  background: var(--vista-color-navegacion, #ffffff);
  color: var(--vista-color-texto-navegacion, #111111);
}

.vista-colores-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--vista-color-footer, #ffffff);
  color: var(--vista-color-texto-footer, #111111);
  font-size: 0.78rem;
  font-weight: 750;
}

.vista-redes-sociales {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vista-redes-sociales i {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #ffffff;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.vista-redes-sociales i:nth-child(1) {
  color: #1877f2;
}

.vista-redes-sociales i:nth-child(2) {
  background: linear-gradient(135deg, #405de6, #c13584, #fd1d1d, #ffdc80);
  color: #ffffff;
}

.vista-redes-sociales i:nth-child(3) {
  color: #111111;
  text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55;
}

.vista-colores-admin[data-estilo-redes="minimalista"]
  .vista-redes-sociales i {
  background: transparent;
  box-shadow: none;
}

.vista-colores-admin[data-estilo-redes="pastillas"]
  .vista-redes-sociales i {
  width: 36px;
  border-radius: 999px;
}

body:not(.admin-body) .productos-grid {
  align-items: stretch;
}

body:not(.admin-body) .tarjeta-producto {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
  touch-action: manipulation;
}

body:not(.admin-body) .tarjeta-producto .producto-contenido {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body:is(
  .plantilla-catalogo-clean,
  .plantilla-dark-premium
) .tarjeta-producto {
  display: flex;
  flex-direction: column;
}

body:is(
  .plantilla-catalogo-clean,
  .plantilla-dark-premium
) .tarjeta-producto .producto-contenido {
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}

body:is(
  .plantilla-catalogo-clean,
  .plantilla-dark-premium
) .tarjeta-producto .boton-agregar {
  position: static;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0;
  background: var(--color-principal);
  color: var(--color-texto-principal, #ffffff);
  visibility: visible;
}

body:not(.admin-body) .tarjeta-producto .boton-agregar {
  margin-top: 0;
}

body:is(
  .plantilla-menu-explorer,
  .plantilla-menu-dark,
  .plantilla-fast-order,
  .plantilla-fast-dark
) .tarjeta-producto .boton-agregar {
  margin-top: 0;
}

body:not(.admin-body) .modal-producto-contenido {
  background: var(--color-contenedores);
  color: var(--color-texto-contenedores);
}

body:not(.admin-body) .modal-producto-contenido h2,
body:not(.admin-body) .modal-producto-contenido p,
body:not(.admin-body) .modal-producto-contenido .producto-precio {
  color: var(--color-texto-contenedores);
}

body:not(.admin-body)
  .modal-producto-contenido
  .producto-precio-anterior {
  color: color-mix(
    in srgb,
    var(--color-texto-contenedores) 60%,
    transparent
  );
}

body:not(.admin-body) .pie-pagina {
  border-color: color-mix(
    in srgb,
    var(--color-texto-footer) 16%,
    transparent
  );
  background: var(--color-footer);
  color: var(--color-texto-footer);
}

body:not(.admin-body) .pie-pagina p,
body:not(.admin-body) .pie-pagina strong,
body:not(.admin-body) .pie-pagina span,
body:not(.admin-body) .pie-pagina a {
  color: inherit;
}

body:not(.admin-body) .pie-pagina .dato-footer {
  background: color-mix(
    in srgb,
    var(--color-texto-footer) 7%,
    transparent
  );
}

body:not(.admin-body) .pie-pagina .icono-dato-footer {
  background: var(--color-principal);
  color: var(--color-texto-principal, #ffffff);
}

body:not(.admin-body) .pie-pagina .icono-dato-footer svg,
body:not(.admin-body) .pie-pagina .icono-dato-footer path {
  color: var(--color-texto-principal, #ffffff);
  fill: var(--color-texto-principal, #ffffff) !important;
}

body:not(.admin-body) .pie-pagina .redes-sociales {
  gap: 10px;
}

body:not(.admin-body) .pie-pagina .boton-red-social {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-principal);
  box-shadow: none;
}

body:not(.admin-body) .pie-pagina .boton-red-social svg {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
}

.nombre-red-social {
  display: none;
  white-space: nowrap;
}

body:not(.admin-body)
  .pie-pagina
  .redes-sociales[data-estilo="circulos"]
  .boton-red-social {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

body:not(.admin-body)
  .pie-pagina
  .redes-sociales[data-estilo="pastillas"]
  .boton-red-social {
  width: auto;
  min-width: 112px;
  height: 42px;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: #222222;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
  font-size: 0.8rem;
}

body:not(.admin-body)
  .pie-pagina
  .redes-sociales[data-estilo="pastillas"]
  .nombre-red-social {
  display: inline;
  color: #222222;
}

body:not(.admin-body)
  .pie-pagina
  .redes-sociales[data-estilo="minimalista"]
  .boton-red-social:hover {
  background: transparent;
}

body:not(.admin-body) .red-tiktok svg {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7));
}

body:not(.admin-body) .red-sitio svg {
  color: var(--color-principal);
}

body:not(.admin-body) .encabezado,
body:not(.admin-body) .navegacion-catalogo,
body:not(.admin-body) .pie-pagina,
body:not(.admin-body) .modal-producto-contenido {
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

@media (hover: none) and (pointer: coarse) {
  body:not(.admin-body) .tarjeta-producto.interaccion-tactil {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
  }
}

@media (max-width: 650px) {
  .encabezado-personalizacion {
    align-items: stretch;
    flex-direction: column;
  }

  .encabezado-personalizacion button {
    width: 100%;
  }

  .opciones-estilo-redes {
    grid-template-columns: 1fr;
  }

  .opciones-estilo-redes label > span {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 76px;
    justify-items: start;
    text-align: left;
  }

  .opciones-estilo-redes small {
    grid-column: 2;
  }
}


/* =========================================================
   CONTROL MANUAL DEL SERVICIO · VERSIÓN 2.3
========================================================= */

body.servicio-suspendido {
  min-height: 100dvh;
  background: #f5f5f5;
}

body.servicio-suspendido > :not(#pantalla-servicio-suspendido):not(script) {
  display: none !important;
}

.pantalla-servicio-suspendido {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(17, 17, 17, 0.06), transparent 38%),
    #f5f5f5;
}

.tarjeta-servicio-suspendido {
  width: min(100%, 520px);
  padding: clamp(28px, 6vw, 46px);
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
  text-align: center;
}

.tarjeta-servicio-suspendido h1 {
  margin: 8px 0 12px;
  color: #111111;
  font-size: clamp(1.65rem, 5vw, 2.2rem);
  line-height: 1.12;
}

.tarjeta-servicio-suspendido > p:not(.marca-inkuva) {
  margin: 0 auto 24px;
  color: #5b6472;
  line-height: 1.6;
}

.boton-whatsapp-suspension {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
}

.tarjeta-suspension-admin {
  text-align: center;
}

.tarjeta-suspension-admin .boton-principal,
.tarjeta-suspension-admin .boton-secundario {
  width: 100%;
  margin-top: 10px;
}

.enlace-whatsapp-suspension-admin {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  text-decoration: none;
}

.dato-corte-suspension {
  margin: 14px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f3f4f6;
  color: #374151;
  font-weight: 750;
}

.tarjeta-control-servicio {
  grid-column: 1 / -1;
}

.encabezado-control-servicio {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.encabezado-control-servicio p {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
}

.indicador-servicio {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
}

.indicador-servicio.activo {
  background: #dcfce7;
  color: #166534;
}

.indicador-servicio.suspendido {
  background: #fee2e2;
  color: #991b1b;
}

#texto-dia-corte {
  margin: 16px 0 0;
  color: #334155;
  font-weight: 750;
}

.controles-master-inkuva {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

.controles-master-inkuva > label {
  display: block;
  margin-bottom: 7px;
  font-weight: 750;
}

.fila-control-servicio {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(150px, 0.65fr);
  gap: 10px;
  margin-bottom: 14px;
}

.fila-control-servicio input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
}

.boton-peligro-servicio {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: #b91c1c;
  color: #ffffff;
  font-weight: 850;
}

.boton-peligro-servicio.reactivar {
  background: #15803d;
}

.boton-peligro-servicio:disabled {
  cursor: wait;
  opacity: 0.65;
}

@media (max-width: 650px) {
  .encabezado-control-servicio {
    align-items: stretch;
    flex-direction: column;
  }

  .indicador-servicio {
    align-self: flex-start;
  }

  .fila-control-servicio {
    grid-template-columns: 1fr;
  }
}