@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  --rojo: #b51e23;
  --rojo-oscuro: #85151a;
  --amarillo: #ffcc00;
  --negro: #171717;
  --texto: #292929;
  --secundario: #777;
  --fondo: #f5f5f5;
  --borde: #e7e7e7;
  --verde: #218838;
  --azul: #1689c9;
  --sombra: 0 6px 22px rgba(0, 0, 0, .05);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: Montserrat, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(255, 204, 0, .65);
  outline-offset: 2px;
}

.barra-superior {
  min-height: 76px;
  padding: 12px max(20px, calc((100vw - 1250px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fff;
  border-bottom: 1px solid var(--borde);
}

.marca {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  color: var(--negro);
  text-decoration: none;
}

.marca-nombre {
  font-family: Anton, Impact, sans-serif;
  font-size: 31px;
  line-height: 1;
  letter-spacing: 1.1px;
}

.marca-subtitulo {
  color: var(--rojo);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.acciones-sesion {
  display: flex;
  align-items: center;
  gap: 14px;
}

.usuario-admin {
  max-width: 280px;
  color: var(--secundario);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.boton-salir {
  padding: 10px 13px;
  border: 1px solid #f0d0d0;
  border-radius: 9px;
  background: #fff;
  color: var(--rojo);
  font-size: 11px;
  font-weight: 800;
}

.contenedor-principal {
  width: min(1250px, 100%);
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  padding: 26px 24px 55px;
}

h1, h2, h3, p { overflow-wrap: anywhere; }

h1 {
  margin: 6px 0 9px;
  color: var(--negro);
  font-size: clamp(26px, 4vw, 35px);
  font-weight: 900;
  letter-spacing: -.9px;
}

h2 {
  margin: 0;
  color: var(--negro);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.4px;
}

.etiqueta-seccion {
  display: block;
  color: var(--rojo);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.texto-secundario {
  margin: 0;
  color: var(--secundario);
  font-size: 11px;
  line-height: 1.6;
}

/* ACCESO */

.pantalla-login {
  width: min(445px, 100%);
  margin: 35px auto;
}

.tarjeta-login, .tarjeta-mensaje {
  padding: 27px;
  border: 1px solid var(--borde);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sombra);
}

.tarjeta-login h1 { font-size: 29px; }
.tarjeta-login > .texto-secundario { margin-bottom: 22px; }

#formulario-login label {
  display: block;
  margin: 15px 0 7px;
  color: #454545;
  font-size: 11px;
  font-weight: 900;
}

#formulario-login input {
  width: 100%;
  min-height: 45px;
  padding: 12px;
  border: 1px solid #dedede;
  border-radius: 9px;
  background: white;
  color: var(--texto);
  font-size: 13px;
}

#formulario-login input:focus {
  border-color: var(--rojo);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(181, 30, 35, .08);
}

.boton-principal, .boton-secundario {
  min-height: 42px;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 900;
  transition: background .16s ease, transform .16s ease;
}

.boton-principal {
  border: 1px solid var(--rojo);
  background: var(--rojo);
  color: white;
}

.boton-principal:hover { background: var(--rojo-oscuro); }

.boton-secundario {
  border: 1px solid #dedede;
  background: white;
  color: var(--texto);
}

.boton-principal:active,
.boton-secundario:active { transform: scale(.99); }

#boton-ingresar {
  width: 100%;
  margin-top: 20px;
}

.nota-seguridad {
  margin: 19px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eee;
  color: #777;
  font-size: 10px;
  line-height: 1.6;
}

.mensaje {
  margin: 12px 0;
  padding: 11px 12px;
  border: 1px solid #e5dcbf;
  border-radius: 9px;
  background: #fffdf3;
  color: #685520;
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.mensaje.error {
  border-color: #efc7c7;
  background: #fff5f5;
  color: #9e1b20;
}

.mensaje.exito {
  border-color: #c5e4ce;
  background: #f2fbf4;
  color: #176c31;
}

.pantalla-central {
  width: min(540px, 100%);
  margin: 50px auto;
  text-align: center;
}

.pantalla-central > p {
  color: var(--secundario);
  font-size: 12px;
  line-height: 1.6;
}

.tarjeta-mensaje { text-align: center; }
.tarjeta-mensaje h1 { font-size: 26px; }

.icono-mensaje {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffebeb;
  color: var(--rojo);
  font-size: 27px;
  font-weight: 900;
}

.email-mostrado {
  color: var(--rojo);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.acciones-error {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.indicador-carga {
  width: 34px;
  height: 34px;
  margin: 0 auto 18px;
  border: 4px solid #e7e7e7;
  border-top-color: var(--rojo);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* NAVEGACIÓN */

.navegacion-admin {
  display: flex;
  gap: 8px;
  margin-bottom: 27px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e0e0e0;
}

.nav-admin {
  min-height: 42px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #666;
  font-size: 11px;
  font-weight: 900;
}

.nav-admin span { margin-right: 6px; font-size: 15px; }

.nav-admin.activo {
  border-color: #f0d1d1;
  background: #fff1f1;
  color: var(--rojo);
}

.cabecera-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 23px;
}

.cabecera-panel > div { min-width: 0; }
.cabecera-panel .boton-secundario { flex: 0 0 auto; }

/* ESTADO DE LA TIENDA */

.tarjeta-tienda {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--sombra);
}

.tienda-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.tienda-cabecera h2 { margin: 5px 0 6px; }

.badge-tienda {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 8px;
  background: #eee;
  color: #555;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .5px;
}

.badge-tienda.abierta { background: #e7f7eb; color: #176c31; }
.badge-tienda.cerrada { background: #ffebeb; color: #a31319; }

.acciones-tienda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.boton-abrir, .boton-pausar {
  min-height: 42px;
  padding: 11px 15px;
  border: 0;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 900;
}

.boton-abrir { background: var(--verde); color: white; }
.boton-abrir:hover { background: #176d2b; }
.boton-pausar { background: #ffebeb; color: #a31319; }
.boton-pausar:hover { background: #ffdddd; }

.configuracion-aviso {
  display: grid;
  gap: 8px;
  padding-top: 17px;
  border-top: 1px solid #eee;
}

.configuracion-aviso label {
  color: #454545;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.5;
}

.configuracion-aviso textarea {
  width: 100%;
  min-height: 75px;
  padding: 11px;
  resize: vertical;
  border: 1px solid #dedede;
  border-radius: 9px;
  background: #fff;
  color: var(--texto);
  font-size: 11px;
  line-height: 1.5;
}

.configuracion-aviso .boton-secundario { justify-self: start; }

.tarjeta-tienda .nota-seguridad {
  margin-top: 14px;
  padding-top: 12px;
}

/* INDICADORES */

.titulo-seccion { margin: 28px 0 13px; }
.titulo-seccion h2 { margin-top: 5px; }

.resumen-estadisticas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 30px;
}

.estadistica {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--borde);
  border-top: 3px solid #333;
  border-radius: 12px;
  background: white;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .025);
}

.estadistica span {
  display: block;
  color: #777;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.45;
}

.estadistica strong {
  display: block;
  margin-top: 9px;
  color: var(--negro);
  font-size: 28px;
  font-weight: 900;
}

.estadistica.recibido { border-top-color: #dfb400; }
.estadistica.preparacion { border-top-color: #ed8b35; }
.estadistica.listo { border-top-color: var(--verde); }
.estadistica.camino { border-top-color: var(--azul); }

/* LISTADOS Y FILTROS */

.encabezado-listado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 23px 0 14px;
}

.encabezado-listado h2 { margin: 5px 0; }

.enlace-admin {
  flex: 0 0 auto;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--rojo);
  font-size: 10px;
  font-weight: 900;
}

.barra-pedidos {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(170px, 1fr) minmax(160px, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 13px;
  background: white;
}

.barra-pedidos label {
  display: block;
  margin-bottom: 7px;
  color: #555;
  font-size: 10px;
  font-weight: 900;
}

.barra-pedidos input, .barra-pedidos select,
.control-estado select {
  width: 100%;
  min-width: 0;
  min-height: 41px;
  padding: 10px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  font-size: 10px;
}

.cantidad-resultados {
  padding-bottom: 3px;
  color: #666;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.listado-pedidos { display: grid; gap: 13px; }

.pedido-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 13px rgba(0, 0, 0, .025);
}

.pedido-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
}

.pedido-titulo {
  margin: 0;
  color: var(--negro);
  font-size: 17px;
  font-weight: 900;
}

.pedido-fecha {
  display: block;
  margin-top: 5px;
  color: #888;
  font-size: 10px;
}

.estado-badge {
  display: inline-block;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.estado-recibido, .estado-pendiente { background: #fff3bd; color: #725900; }
.estado-preparacion { background: #fff0d9; color: #934900; }
.estado-listo, .estado-entregado, .estado-pagado { background: #e5f6e9; color: #176c31; }
.estado-en_camino, .estado-reembolsado { background: #e1f4ff; color: #075e86; }
.estado-cancelado, .estado-rechazado { background: #ffebeb; color: #a31319; }

.pedido-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.dato { min-width: 0; }

.dato-etiqueta {
  display: block;
  margin-bottom: 5px;
  color: #888;
  font-size: 9px;
  font-weight: 900;
}

.dato-valor {
  display: block;
  color: #333;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.productos-pedido { padding: 14px 0; }

.productos-pedido h3 {
  margin: 0 0 8px;
  color: #444;
  font-size: 11px;
  font-weight: 900;
}

.productos-pedido ul {
  margin: 0;
  padding-left: 19px;
}

.productos-pedido li {
  padding: 3px 0;
  color: #555;
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pedido-total-linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid #eee;
}

.total-etiqueta {
  color: #666;
  font-size: 10px;
  font-weight: 800;
}

.pedido-total {
  color: var(--rojo);
  font-size: 22px;
  font-weight: 900;
}

.controles-pedido {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 10px;
  margin-top: 9px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.control-estado { min-width: 0; }

.control-estado label {
  display: block;
  margin-bottom: 7px;
  color: #555;
  font-size: 10px;
  font-weight: 900;
}

.boton-guardar-estado {
  min-height: 41px;
  padding: 10px 13px;
  border: 0;
  border-radius: 8px;
  background: var(--amarillo);
  color: var(--negro);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.boton-guardar-estado:hover { background: #f2c000; }

/* PEDIDOS ACTIVOS EN INICIO */

.resumen-pedido {
  padding: 17px;
  border-left: 4px solid var(--rojo);
}

.resumen-pedido .pedido-cabecera { padding-bottom: 12px; }

.resumen-pedido .pedido-datos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resumen-pedido > .texto-secundario {
  margin-top: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.resumen-pedido .pedido-total-linea { border-top: 1px solid #eee; }

.resumen-pedido .controles-pedido {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-top: 14px;
}

.resumen-pedido .boton-guardar-estado {
  grid-column: 1 / -1;
  width: 100%;
}

.resumen-pedido .control-estado select { min-height: 43px; }

.estado-vacio {
  padding: 30px 18px;
  border: 1px dashed #d8d8d8;
  border-radius: 12px;
  background: #fff;
  color: #777;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

/* NOTIFICACIONES */

.notificacion {
  position: fixed;
  z-index: 50;
  right: 18px;
  bottom: 18px;
  width: min(440px, calc(100vw - 36px));
  padding: 14px 16px;
  border-radius: 10px;
  background: #262626;
  color: white;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.notificacion.error { background: #a51920; }
.notificacion.exito { background: #218838; }

/* ADAPTACIÓN RESPONSIVE */

@media (max-width: 1000px) {
  .resumen-estadisticas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resumen-pedido .pedido-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .resumen-estadisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra-pedidos { grid-template-columns: 1fr 1fr; }
  .barra-pedidos > div:first-child { grid-column: 1 / -1; }
  .pedido-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controles-pedido { grid-template-columns: 1fr 1fr; }
  .controles-pedido .boton-guardar-estado { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .barra-superior { padding: 12px 14px; }
  .marca-nombre { font-size: 26px; }
  .acciones-sesion {
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
  }
  .usuario-admin { max-width: 155px; text-align: right; font-size: 9px; }
  .boton-salir { padding: 8px; font-size: 9px; }
  .contenedor-principal { padding: 19px 12px 35px; }
  .tarjeta-login, .tarjeta-mensaje { padding: 21px; }
  .cabecera-panel { align-items: flex-start; }
  .cabecera-panel .boton-secundario { padding: 9px; font-size: 9px; }
  .navegacion-admin { gap: 4px; }
  .nav-admin { flex: 1; padding: 10px 5px; font-size: 9px; }
  .nav-admin span { margin-right: 3px; }
  .tarjeta-tienda { padding: 15px; }
  .tienda-cabecera { align-items: flex-start; }
  .badge-tienda { padding: 7px; font-size: 8px; }
  .estadistica { padding: 13px; }
  .estadistica span { font-size: 9px; }
  .estadistica strong { font-size: 25px; }
  .barra-pedidos { grid-template-columns: 1fr; padding: 12px; }
  .barra-pedidos > div:first-child { grid-column: auto; }
  .pedido-card { padding: 13px; }
  .pedido-titulo { font-size: 15px; }
  .pedido-datos { gap: 12px 9px; }
  .dato-valor, .productos-pedido li { font-size: 10px; }
  .controles-pedido { grid-template-columns: 1fr; }
  .controles-pedido .boton-guardar-estado { grid-column: auto; width: 100%; }
  .encabezado-listado { align-items: flex-start; }
  .encabezado-listado .enlace-admin { font-size: 9px; }
  .resumen-pedido .controles-pedido { grid-template-columns: 1fr; }
  .resumen-pedido .boton-guardar-estado { grid-column: auto; }
}

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

/* =====================================================
   PEPONNE ADMIN · PANEL DE COMANDAS ENFOCADO
===================================================== */

/* Estado compacto del local en la cabecera */

.acciones-sesion { gap: 9px; }

.estado-tienda-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .45px;
  white-space: nowrap;
}

.estado-tienda-cabecera.abierta { background: #e8f7ec; color: #176c31; }
.estado-tienda-cabecera.cerrada { background: #ffebeb; color: #a31319; }
.estado-tienda-cabecera.verificando { background: #f2f2f2; color: #555; }

.boton-toggle-tienda {
  min-height: 35px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}

.boton-toggle-tienda.para-cerrar {
  border: 1px solid #efc7c7;
  background: #fff3f3;
  color: #a31319;
}

.boton-toggle-tienda.para-cerrar:hover { background: #ffe1e1; }

.boton-toggle-tienda.para-abrir {
  border: 1px solid #176c31;
  background: #218838;
  color: #fff;
}

.boton-toggle-tienda.para-abrir:hover { background: #176d2b; }

.boton-toggle-tienda.deshabilitado {
  border: 1px solid #ddd;
  background: #eee;
  color: #777;
}

/* Aviso rojo de ancho completo cuando el local está cerrado */

.banner-local-cerrado {
  width: 100%;
  background: #a9151b;
  color: #fff;
  box-shadow: 0 5px 18px rgba(120, 0, 0, .12);
}

.banner-local-cerrado[hidden] { display: none !important; }

.banner-local-contenido {
  width: min(1250px, 100%);
  min-height: 85px;
  margin: 0 auto;
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.banner-local-contenido strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .8px;
}

.banner-local-contenido p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.94);
  font-size: 11px;
  line-height: 1.55;
}

.boton-abrir-banner {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 11px 17px;
  border: 0;
  border-radius: 9px;
  background: #ffcc00;
  color: #171717;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .3px;
}

.boton-abrir-banner:hover { background: #ffdc46; }
.banner-error-estado { background: #555; }

/* Navegación permanece activa incluso si el local está cerrado */

.navegacion-admin {
  gap: 6px;
  margin-bottom: 24px;
  padding-top: 18px;
}

.nav-admin { transition: background .15s ease, color .15s ease; }

.nav-admin:hover:not(.activo) {
  background: #f0f0f0;
  color: #222;
}

/* Inicio minimalista */

.cabecera-inicio { margin-bottom: 17px; }
.cabecera-inicio h1 { font-size: clamp(25px, 3vw, 31px); }
.listado-activos { gap: 17px; }

.espera-pedidos-vacia {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 20px;
  border: 1px solid #ededed;
  border-radius: 15px;
  background: #fff;
  text-align: center;
}

.espera-pedidos-punto {
  margin-bottom: 11px;
  color: #bdbdbd;
  font-size: 15px;
}

.espera-pedidos-vacia h2 { font-size: 17px; }

.espera-pedidos-vacia p {
  max-width: 380px;
  margin: 8px 0 0;
  color: #858585;
  font-size: 11px;
  line-height: 1.65;
}

/* Cards resaltadas según el estado operativo */

.resumen-pedido {
  position: relative;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-left: 6px solid #218838;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(0,0,0,.045);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.resumen-pedido .pedido-cabecera { align-items: flex-start; }
.resumen-pedido .pedido-identificacion { min-width: 0; }
.resumen-pedido .pedido-titulo { font-size: 20px; }
.resumen-pedido .pedido-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.resumen-pedido .dato { padding: 2px 0; }
.resumen-pedido .estado-badge { flex: 0 0 auto; }

.resumen-pedido.pedido-nuevo {
  border-color: #e8a7aa;
  border-left-color: #b51e23;
  background: #fff7f7;
  box-shadow: 0 6px 22px rgba(181,30,35,.10);
  animation: llegada-comanda 1.8s ease-in-out 2;
}

.resumen-pedido.pedido-en-proceso {
  border-color: #bde2c5;
  border-left-color: #218838;
  background: #fbfffc;
}

.etiqueta-pedido-nuevo,
.etiqueta-pedido-activo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .45px;
}

.etiqueta-pedido-nuevo { background: #b51e23; color: #fff; }
.etiqueta-pedido-activo { background: #e5f6e9; color: #176c31; }

@keyframes llegada-comanda {
  0%, 100% { box-shadow: 0 6px 22px rgba(181,30,35,.10); }
  50% { box-shadow: 0 7px 24px rgba(181,30,35,.24); }
}

.resumen-productos-pedido {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border-radius: 9px;
  background: rgba(255,255,255,.78);
  color: #383838;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.resumen-pedido .pedido-total-linea { padding-top: 14px; }
.resumen-pedido .pedido-total { font-size: 25px; }

.avance-rapido-pedido {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.boton-avanzar-pedido {
  width: 100%;
  min-height: 51px;
  padding: 13px 16px;
  border: 0;
  border-radius: 9px;
  background: #b51e23;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3px;
  box-shadow: 0 4px 10px rgba(181,30,35,.12);
  transition: background .15s ease, transform .15s ease;
}

.boton-avanzar-pedido:hover { background: #85151a; }
.boton-avanzar-pedido:active { transform: scale(.995); }

.proximo-estado-pedido {
  color: #777;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.pedido-finalizado-nota {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f3f3f3;
  color: #555;
  font-size: 10px;
  line-height: 1.5;
}

/* Pago separado del avance de la comanda */

.control-pago-rapido {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
}

.pago-rapido-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px;
}

.pago-rapido-cabecera .dato-etiqueta { margin: 0; }

.pago-rapido-fila {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
}

.pago-rapido-fila select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  color: #333;
  font-size: 10px;
}

.boton-guardar-pago {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.boton-guardar-pago:hover {
  border-color: #bbb;
  background: #f6f6f6;
}

.enlace-gestionar-pedido {
  display: block;
  margin-top: 7px;
  padding: 12px 0 0;
  text-align: left;
}

/* Ajustes de cierre plegados para no ocupar Inicio */

.ajustes-cierre {
  margin-top: 25px;
  border-top: 1px solid #e9e9e9;
}

.ajustes-cierre summary {
  padding: 15px 1px;
  color: #777;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.ajustes-cierre[open] summary { color: #333; }

.ajustes-cierre .configuracion-aviso {
  max-width: 650px;
  padding: 12px 0 5px;
}

.configuracion-aviso textarea { width: 100%; }

/* Módulos futuros, accesibles sin simular funciones reales */

.tarjeta-proximamente {
  max-width: 800px;
  margin-top: 18px;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid #e9e9e9;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--sombra);
}

.icono-modulo {
  display: inline-flex;
  width: 47px;
  height: 47px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 12px;
  background: #fff0f0;
  color: var(--rojo);
  font-size: 24px;
  font-weight: 900;
}

.tarjeta-proximamente h2 {
  margin-bottom: 12px;
  font-size: 20px;
}

.tarjeta-proximamente p {
  max-width: 650px;
  color: #666;
  font-size: 12px;
  line-height: 1.8;
}

.tarjeta-proximamente .aviso-modulo {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  color: #8b272b;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 1000px) {
  .resumen-pedido .pedido-datos { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .barra-superior { align-items: flex-start; }
  .acciones-sesion { flex-wrap: wrap; justify-content: flex-end; }
  .banner-local-contenido { padding: 14px 20px; }
  .navegacion-admin { flex-wrap: wrap; }
  .nav-admin { flex: 1 1 auto; }
  .resumen-pedido .pedido-datos { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px) {
  .barra-superior { align-items: center; gap: 8px; }
  .marca-nombre { font-size: 25px; }
  .marca-subtitulo { font-size: 8px; letter-spacing: 1px; }
  .acciones-sesion {
    max-width: 67%;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .usuario-admin { display: none; }
  .estado-tienda-cabecera { padding: 7px 8px; font-size: 8px; }
  .boton-toggle-tienda { min-height: 33px; padding: 7px 8px; font-size: 9px; }
  .boton-salir { padding: 8px; font-size: 9px; }
  .banner-local-contenido {
    align-items: flex-start;
    flex-direction: column;
    padding: 15px 14px;
  }
  .boton-abrir-banner { width: 100%; }
  .navegacion-admin { gap: 5px; margin-bottom: 18px; }
  .nav-admin { min-width: calc(50% - 5px); padding: 10px 7px; font-size: 9px; }
  .nav-admin span { margin-right: 3px; }
  .cabecera-inicio { align-items: flex-start; }
  .resumen-pedido { padding: 14px; }
  .resumen-pedido .pedido-cabecera { gap: 8px; }
  .resumen-pedido .pedido-titulo { font-size: 17px; }
  .resumen-pedido .estado-badge { padding: 6px; font-size: 8px; }
  .resumen-pedido .pedido-datos { gap: 12px 9px; }
  .resumen-productos-pedido { padding: 10px; font-size: 10px; }
  .boton-avanzar-pedido { font-size: 10px; }
  .pago-rapido-fila { grid-template-columns: 1fr; }
  .boton-guardar-pago { width: 100%; }
  .espera-pedidos-vacia { min-height: 220px; padding: 24px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .resumen-pedido.pedido-nuevo { animation: none; }
}

/* =====================================================
   MÓDULO DE CUPONES
===================================================== */

.tarjeta-cupones {
  margin: 20px 0 30px;
  padding: 22px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sombra);
}

.tarjeta-cupones .encabezado-listado {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tarjeta-cupones .encabezado-listado h2,
.encabezado-cupones h2 {
  margin: 0 0 6px;
  color: var(--negro);
  font-size: 18px;
  font-weight: 900;
}

.formulario-cupon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.campo-cupon { min-width: 0; }
.campo-cupon-ancho { grid-column: 1 / -1; }

.campo-cupon > label {
  display: block;
  margin-bottom: 7px;
  color: #3a3a3a;
  font-size: 11px;
  font-weight: 800;
}

.campo-cupon input,
.campo-cupon select,
.campo-cupon textarea,
.filtros-cupones input,
.filtros-cupones select {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
}

.campo-cupon textarea { resize: vertical; min-height: 66px; }

.campo-cupon small {
  display: block;
  margin-top: 6px;
  color: var(--secundario);
  font-size: 10px;
  line-height: 1.5;
}

.opcion-cupon-activo {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 9px;
  min-height: 43px;
  color: var(--texto);
  font-size: 11px;
  font-weight: 800;
}

.opcion-cupon-activo input {
  width: 17px;
  height: 17px;
  accent-color: var(--rojo);
}

.acciones-formulario-cupon { display: flex; justify-content: flex-end; }

.acciones-formulario-cupon .boton-principal { min-height: 44px; min-width: 170px; }

.encabezado-cupones {
  align-items: flex-end;
  gap: 18px;
  margin: 30px 0 14px;
}

.filtros-cupones {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px;
  gap: 9px;
  width: min(620px, 100%);
}

.listado-cupones { min-width: 0; }

.tabla-cupones-envoltura {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
}

.tabla-cupones {
  width: 100%;
  min-width: 1020px;
  border-collapse: collapse;
  text-align: left;
}

.tabla-cupones th {
  padding: 13px 12px;
  border-bottom: 1px solid var(--borde);
  background: #fafafa;
  color: #686868;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabla-cupones td {
  padding: 14px 12px;
  border-bottom: 1px solid #ededed;
  color: #444;
  font-size: 11px;
  line-height: 1.5;
  vertical-align: middle;
}

.tabla-cupones tbody tr:last-child td { border-bottom: 0; }
.tabla-cupones tbody tr:hover { background: #fffdf7; }

.identidad-cupon { min-width: 160px; }
.codigo-cupon, .nombre-cupon { display: block; }
.codigo-cupon { color: var(--negro); font-size: 12px; font-weight: 900; letter-spacing: .4px; }
.nombre-cupon { margin-top: 3px; color: var(--secundario); font-size: 10px; }

.estado-cupon {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.estado-cupon-activo { background: #e6f5e9; color: #216b31; }
.estado-cupon-inactivo { background: #eee; color: #555; }
.estado-cupon-vencido { background: #fff0e1; color: #945014; }

.boton-cambiar-estado-cupon {
  min-height: 33px;
  padding: 7px 10px;
  border: 1px solid #e3e3e3;
  border-radius: 7px;
  background: #fff;
  color: var(--rojo);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.boton-cambiar-estado-cupon:hover { border-color: var(--rojo); background: #fff8f8; }

#mensaje-cupones { margin: 14px 0; }

@media (max-width: 760px) {
  .tarjeta-cupones { padding: 16px; }
  .formulario-cupon { grid-template-columns: 1fr; gap: 14px; }
  .campo-cupon-ancho { grid-column: auto; }
  .acciones-formulario-cupon .boton-principal { width: 100%; }
  .encabezado-cupones { align-items: stretch; flex-direction: column; }
  .filtros-cupones { width: 100%; grid-template-columns: 1fr; }
}

/* Estado de cupones programados para una fecha futura */
.estado-cupon-programado { background: #e1f4ff; color: #075e86; }

/* CATÁLOGO: PRODUCTOS, PRECIOS, IMÁGENES Y STOCK */

.barra-catalogo {
  display: grid;
  gap: 14px;
  margin: 20px 0 24px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: #fff;
}

.categorias-catalogo {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.boton-categoria-catalogo {
  flex: 0 0 auto;
  min-height: 39px;
  padding: 10px 15px;
  border: 1px solid #e3e3e3;
  border-radius: 9px;
  background: #fff;
  color: #555;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.boton-categoria-catalogo:hover { border-color: #d5a1a1; }

.boton-categoria-catalogo.activo {
  border-color: var(--negro);
  background: var(--negro);
  color: #fff;
}

.acciones-catalogo {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
}

.acciones-catalogo input {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  font-size: 11px;
}

.acciones-catalogo .boton-principal { min-height: 43px; }

.encabezado-catalogo { margin-top: 19px; }

.tarjeta-catalogo-editor {
  margin: 0 0 22px;
  padding: 22px;
  border: 1px solid #e5d4a0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sombra);
}

.cabecera-editor-producto {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.cabecera-editor-producto h2 { margin: 6px 0; }

.formulario-producto-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.campo-editor-producto { min-width: 0; }
.campo-editor-ancho { grid-column: 1 / -1; }

.campo-editor-producto > label:not(.opcion-editor-producto),
.campos-imagen-producto > label {
  display: block;
  margin-bottom: 7px;
  color: #3a3a3a;
  font-size: 10px;
  font-weight: 900;
}

.campo-editor-producto input:not([type="checkbox"]):not([type="file"]),
.campo-editor-producto select,
.campo-editor-producto textarea {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
}

.campo-editor-producto textarea { min-height: 76px; resize: vertical; }

.campo-editor-producto input:disabled {
  background: #f3f3f3;
  color: #777;
  cursor: not-allowed;
}

.campo-editor-producto small,
.campos-imagen-producto small {
  display: block;
  margin-top: 6px;
  color: var(--secundario);
  font-size: 9px;
  line-height: 1.55;
}

.imagen-editor-producto {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 17px;
  padding: 15px;
  border: 1px solid #ededed;
  border-radius: 11px;
  background: #fafafa;
}

.imagen-preview-envoltura {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 140px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px dashed #d5d5d5;
  border-radius: 9px;
  background: #f0f0f0;
}

#producto-imagen-preview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
}

.imagen-sin-preview {
  padding: 10px;
  color: #777;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.campos-imagen-producto { min-width: 0; }

.campos-imagen-producto input[type="file"] {
  width: 100%;
  min-width: 0;
  margin-bottom: 12px;
  color: #555;
  font-size: 10px;
}

.campos-imagen-producto input[type="url"] { margin-bottom: 2px; }

.bloque-stock-producto,
.bloque-disponibilidad-producto {
  align-self: stretch;
  padding: 14px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  background: #fcfcfc;
}

.opcion-editor-producto {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  color: #292929;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
  cursor: pointer;
}

.opcion-editor-producto input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: var(--rojo);
}

.acciones-editor-producto {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.acciones-editor-producto .boton-principal,
.acciones-editor-producto .boton-secundario { min-width: 140px; }

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

.producto-catalogo-card {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--borde);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .025);
}

.producto-catalogo-card:hover { border-color: #d7d7d7; }

.producto-catalogo-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 125px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 9px;
  background: #f0f0f0;
}

.producto-catalogo-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.producto-sin-imagen {
  padding: 8px;
  color: #777;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.producto-catalogo-cuerpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.producto-catalogo-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.producto-catalogo-encabezado h3 {
  margin: 2px 0 0;
  color: var(--negro);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.etiqueta-producto-catalogo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.35;
}

.producto-disponible { background: #e8f6eb; color: #176c31; }
.producto-desactivado { background: #eee; color: #555; }
.producto-stock-controlado { background: #f0f5ff; color: #274c87; }
.producto-stock-agotado { background: #ffebeb; color: #9e1b20; }
.producto-stock-libre { background: #f1f1f1; color: #555; }
.producto-tipo-oferta { background: #fff4d5; color: #775800; }

.producto-catalogo-codigo {
  margin: 5px 0 0;
  color: #777;
  font-size: 9px;
  overflow-wrap: anywhere;
}

.producto-catalogo-descripcion {
  margin: 7px 0 0;
  color: #666;
  font-size: 10px;
  line-height: 1.45;
}

.producto-catalogo-precio {
  display: block;
  margin: 10px 0 8px;
  color: var(--negro);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.4px;
}

.producto-catalogo-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.producto-catalogo-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 11px;
}

.producto-catalogo-actualizado {
  color: #999;
  font-size: 8px;
  line-height: 1.4;
}

.boton-editar-producto {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid #ead0d0;
  border-radius: 8px;
  background: #fff7f7;
  color: var(--rojo);
  font-size: 10px;
  font-weight: 900;
}

.boton-editar-producto:hover { background: #ffebeb; }

.catalogo-vacio {
  grid-column: 1 / -1;
  padding: 35px 18px;
  border: 1px dashed #d8d8d8;
  border-radius: 13px;
  background: #fff;
  text-align: center;
}

.catalogo-vacio h3 {
  margin: 0 0 8px;
  color: var(--negro);
  font-size: 15px;
  font-weight: 900;
}

.catalogo-vacio p { margin: 0 0 16px; }

@media (max-width: 1000px) {
  .listado-catalogo { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .barra-catalogo { padding: 11px; }
  .acciones-catalogo { grid-template-columns: 1fr; }
  .acciones-catalogo .boton-principal { width: 100%; }
  .formulario-producto-editor { grid-template-columns: 1fr; gap: 14px; }
  .campo-editor-ancho { grid-column: auto; }
  .imagen-editor-producto { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .imagen-preview-envoltura { min-height: 115px; }
  #producto-imagen-preview { min-height: 115px; }
  .acciones-editor-producto { flex-direction: column; }
  .acciones-editor-producto button { width: 100%; }
}

@media (max-width: 520px) {
  .producto-catalogo-card { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .producto-catalogo-imagen { min-height: 88px; }
  .producto-catalogo-encabezado { flex-direction: column; }
  .producto-catalogo-precio { font-size: 18px; }
  .producto-catalogo-pie { align-items: flex-end; }
  .producto-catalogo-actualizado { max-width: 100px; }
  .tarjeta-catalogo-editor { padding: 15px; }
  .imagen-editor-producto { grid-template-columns: 1fr; }
  .imagen-preview-envoltura { width: min(180px, 100%); }
}
/* ACCIONES DEL PRODUCTO: EDITAR Y ELIMINAR */

.acciones-producto-catalogo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.boton-eliminar-producto {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid #efc7c7;
  border-radius: 8px;
  background: #fff4f4;
  color: #a31319;
  font-size: 10px;
  font-weight: 900;
  transition: background .16s ease, border-color .16s ease;
}

.boton-eliminar-producto:hover {
  border-color: #b51e23;
  background: #ffebeb;
}

.boton-eliminar-producto:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .acciones-producto-catalogo {
    justify-content: flex-end;
    gap: 5px;
  }

  .boton-eliminar-producto,
  .boton-editar-producto {
    padding: 7px 9px;
    font-size: 9px;
  }
}
/* SONIDO DE NUEVOS PEDIDOS */

.acciones-inicio {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.boton-sonido-admin {
  min-height: 42px;
  padding: 11px 14px;
  border: 1px solid #dedede;
  border-radius: 9px;
  background: #fff;
  color: #292929;
  font-size: 10px;
  font-weight: 900;
}

.boton-sonido-admin.activo {
  border-color: #bde2c5;
  background: #e8f7ec;
  color: #176c31;
}

.acciones-inicio button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .acciones-inicio {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .acciones-inicio {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .acciones-inicio #boton-actualizar-inicio {
    grid-column: 1 / -1;
  }

  .acciones-inicio button {
    width: 100%;
  }
}

/* =====================================================
   GESTOR DE CLIENTES
===================================================== */

.barra-clientes {
  grid-template-columns: minmax(220px, 1.5fr) minmax(200px, 1fr);
}

.listado-clientes {
  display: grid;
  gap: 13px;
}

.cliente-admin-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 13px rgba(0, 0, 0, .025);
}

.cliente-admin-card.cliente-admin-bloqueado {
  border-color: #efc7c7;
  background: #fffafa;
}

.cliente-admin-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
}

.cliente-admin-identidad {
  min-width: 0;
}

.cliente-admin-identidad h3 {
  margin: 0;
  color: var(--negro);
  font-size: 16px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.cliente-admin-email {
  margin: 6px 0 0;
  color: #777;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.estado-cliente {
  flex: 0 0 auto;
  display: inline-block;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.estado-cliente-activo {
  background: #e5f6e9;
  color: #176c31;
}

.estado-cliente-bloqueado {
  background: #ffebeb;
  color: #a31319;
}

.cliente-admin-datos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 15px 0;
}

.cliente-admin-motivo {
  margin: 0 0 14px;
  padding: 11px 12px;
  border-radius: 8px;
  background: #ffebeb;
  color: #8f171c;
  font-size: 10px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.cliente-admin-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid #eee;
}

.boton-bloquear-cliente,
.boton-desbloquear-cliente {
  min-height: 42px;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 900;
}

.boton-bloquear-cliente {
  border: 1px solid #efc7c7;
  background: #fff4f4;
  color: #a31319;
}

.boton-bloquear-cliente:hover {
  background: #ffebeb;
}

.boton-desbloquear-cliente {
  border: 1px solid #bde2c5;
  background: #e8f7ec;
  color: #176c31;
}

.boton-desbloquear-cliente:hover {
  background: #d9f1df;
}

.detalle-cliente-panel {
  margin-top: 28px;
  padding-top: 25px;
  border-top: 2px solid #e5e5e5;
}

.detalle-cliente-panel .cabecera-panel {
  align-items: flex-start;
}

.historial-estados {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.pedido-historial-cliente .pedido-datos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pedido-historial-cliente > .dato {
  padding: 10px 0;
}

@media (max-width: 1000px) {
  .cliente-admin-datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .barra-clientes {
    grid-template-columns: 1fr 1fr;
  }

  .barra-clientes > div:first-child {
    grid-column: 1 / -1;
  }

  .cliente-admin-cabecera {
    flex-direction: column;
  }

  .cliente-admin-acciones {
    flex-direction: column;
  }

  .cliente-admin-acciones button {
    width: 100%;
  }

  .pedido-historial-cliente .pedido-datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .barra-clientes {
    grid-template-columns: 1fr;
  }

  .barra-clientes > div:first-child {
    grid-column: auto;
  }

  .cliente-admin-card {
    padding: 14px;
  }

  .cliente-admin-datos {
    gap: 13px 9px;
  }

  .estado-cliente {
    font-size: 8px;
  }

  .detalle-cliente-panel .cabecera-panel {
    flex-direction: column;
  }

  .historial-estados {
    justify-content: flex-start;
  }
}

/* =========================================================
   BALANCES — ESTADÍSTICAS DEL NEGOCIO
   ========================================================= */

#seccion-balances {
  color: #242424;
}

#seccion-balances .balance-filtros,
#seccion-balances .balance-panel {
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.035);
}

#seccion-balances .balance-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding: 22px;
  margin-bottom: 22px;
}

#seccion-balances .balance-filtros-texto {
  flex: 1 1 220px;
}

#seccion-balances .balance-filtros-texto h2,
#seccion-balances .balance-panel-cabecera h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}

#seccion-balances .balance-filtros-texto p {
  margin: 7px 0 0;
  line-height: 1.5;
}

#seccion-balances .balance-filtros-campos {
  display: flex;
  flex: 1 1 500px;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

#seccion-balances .balance-filtros-campos > div {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

#seccion-balances .balance-filtros-campos label {
  font-size: 12px;
  font-weight: 800;
  color: #555555;
}

#seccion-balances .balance-filtros-campos input {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 10px 11px;
  color: #252525;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

#seccion-balances .balance-filtros-campos input:focus {
  outline: 2px solid rgba(190, 30, 45, 0.2);
  border-color: #bd202e;
}

#seccion-balances #boton-actualizar-balances {
  min-height: 43px;
  flex: 0 0 auto;
}

#seccion-balances .balance-periodo-descripcion {
  margin: 0 0 16px;
  font-size: 13px;
}

/* INDICADORES PRINCIPALES */

#seccion-balances .balance-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

#seccion-balances .balance-indicador {
  min-width: 0;
  padding: 19px;
  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
}

#seccion-balances .balance-indicador-etiqueta {
  display: block;
  margin-bottom: 11px;
  color: #686868;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

#seccion-balances .balance-indicador-valor {
  display: block;
  overflow-wrap: anywhere;
  color: #202020;
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 900;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

#seccion-balances .balance-indicador-detalle {
  display: block;
  margin-top: 10px;
  color: #777777;
  font-size: 12px;
  line-height: 1.5;
}

#seccion-balances .balance-indicador.destacado {
  border-top: 3px solid #bd202e;
}

#seccion-balances .balance-indicador.alerta {
  border-top: 3px solid #d88a18;
}

/* DISTRIBUCIÓN DE LOS INFORMES */

#seccion-balances .balance-secciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

#seccion-balances .balance-panel {
  padding: 22px;
}

#seccion-balances .balance-panel-cabecera {
  margin-bottom: 20px;
}

#seccion-balances .balance-panel-cabecera .texto-secundario {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

#seccion-balances .balance-tablas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

#seccion-balances .balance-panel-productos {
  grid-column: 1 / -1;
}

/* VENTAS POR DÍA */

#seccion-balances .balance-ventas-diarias {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

#seccion-balances .balance-dia-fila {
  min-width: 0;
}

#seccion-balances .balance-dia-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 8px;
}

#seccion-balances .balance-dia-fecha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #333333;
  font-size: 13px;
}

#seccion-balances .balance-dia-cantidad {
  color: #777777;
  font-size: 12px;
}

#seccion-balances .balance-dia-importe {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#seccion-balances .balance-dia-barra-fondo {
  width: 100%;
  height: 9px;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 20px;
}

#seccion-balances .balance-dia-barra {
  height: 100%;
  min-width: 0;
  background: #bd202e;
  border-radius: 20px;
  transition: width 0.25s ease;
}

/* TABLAS RESUMIDAS */

#seccion-balances .balance-tabla-contenido {
  min-width: 0;
}

#seccion-balances .balance-fila-dato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #eeeeee;
}

#seccion-balances .balance-fila-dato:first-child {
  padding-top: 0;
}

#seccion-balances .balance-fila-dato:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#seccion-balances .balance-fila-identidad {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#seccion-balances .balance-fila-identidad strong {
  overflow-wrap: anywhere;
  color: #303030;
  font-size: 13px;
  font-weight: 800;
}

#seccion-balances .balance-fila-identidad small {
  color: #777777;
  font-size: 12px;
  line-height: 1.4;
}

#seccion-balances .balance-fila-importe {
  flex: 0 0 auto;
  max-width: 48%;
  color: #252525;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* PRODUCTOS MÁS VENDIDOS */

#seccion-balances .balance-productos-tabla-envoltura {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#seccion-balances .balance-productos-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

#seccion-balances .balance-productos-tabla th {
  padding: 12px 14px;
  color: #666666;
  background: #f7f7f7;
  border-bottom: 1px solid #e8e8e8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

#seccion-balances .balance-productos-tabla td {
  padding: 14px;
  border-bottom: 1px solid #eeeeee;
  color: #333333;
  vertical-align: middle;
}

#seccion-balances .balance-productos-tabla tbody tr:last-child td {
  border-bottom: 0;
}

#seccion-balances .balance-productos-tabla td:first-child {
  min-width: 160px;
  font-weight: 800;
}

#seccion-balances .balance-productos-tabla th:nth-child(n + 3),
#seccion-balances .balance-productos-tabla td:nth-child(n + 3) {
  text-align: right;
  white-space: nowrap;
}

#seccion-balances .balance-producto-tipo {
  display: inline-block;
  margin-top: 5px;
  color: #777777;
  font-size: 11px;
  font-weight: 500;
}

/* ACLARACIÓN SOBRE LOS CÁLCULOS */

#seccion-balances .balance-nota {
  margin-top: 22px;
  padding: 18px 20px;
  background: #fafafa;
  border: 1px solid #e9e9e9;
  border-left: 4px solid #d5d5d5;
  border-radius: 10px;
}

#seccion-balances .balance-nota strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

#seccion-balances .balance-nota p {
  margin: 0;
  color: #666666;
  font-size: 12px;
  line-height: 1.7;
}

/* MENSAJES Y ESTADOS VACÍOS */

#seccion-balances .estado-vacio {
  padding: 22px 14px;
  color: #777777;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  background: #fafafa;
  border: 1px dashed #dddddd;
  border-radius: 9px;
}

/* ADAPTACIÓN A CELULARES */

@media (max-width: 760px) {
  #seccion-balances .balance-filtros {
    align-items: stretch;
    padding: 17px;
    gap: 18px;
  }

  #seccion-balances .balance-filtros-campos {
    flex-basis: 100%;
  }

  #seccion-balances .balance-filtros-campos > div {
    flex-basis: calc(50% - 6px);
  }

  #seccion-balances #boton-actualizar-balances {
    width: 100%;
    flex-basis: 100%;
  }

  #seccion-balances .balance-indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #seccion-balances .balance-indicador {
    padding: 15px;
  }

  #seccion-balances .balance-indicador-valor {
    font-size: 22px;
  }

  #seccion-balances .balance-tablas-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #seccion-balances .balance-panel-productos {
    grid-column: auto;
  }

  #seccion-balances .balance-panel {
    padding: 17px;
  }

  #seccion-balances .balance-dia-cabeza {
    align-items: flex-start;
  }
}

@media (max-width: 380px) {
  #seccion-balances .balance-indicadores {
    grid-template-columns: minmax(0, 1fr);
  }

  #seccion-balances .balance-indicador-valor {
    font-size: 25px;
  }

  #seccion-balances .balance-filtros-campos > div {
    flex-basis: 100%;
  }
}
/* =========================================================
   BALANCES — TARJETAS DESPLEGABLES DE PEDIDOS
   ========================================================= */

#seccion-balances .balance-acordeon-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

#seccion-balances .balance-acordeon-item {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

#seccion-balances .balance-acordeon-item.abierta {
  border-color: #d9a1a5;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
}

#seccion-balances .balance-acordeon-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  color: #252525;
  font: inherit;
  text-align: left;
  background: #ffffff;
  border: 0;
  cursor: pointer;
}

#seccion-balances .balance-acordeon-trigger:hover {
  background: #faf7f7;
}

#seccion-balances .balance-acordeon-trigger:focus-visible {
  outline: 2px solid #bd202e;
  outline-offset: -3px;
}

#seccion-balances .balance-acordeon-identidad {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#seccion-balances .balance-acordeon-titulo {
  font-size: 14px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

#seccion-balances .balance-acordeon-resumen {
  color: #a55a13;
  font-size: 12px;
  line-height: 1.4;
}

#seccion-balances .balance-acordeon-importe {
  color: #272727;
  font-size: 14px;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#seccion-balances .balance-acordeon-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 600;
  background: #bd202e;
  border-radius: 50%;
}

#seccion-balances .balance-acordeon-item.abierta
.balance-acordeon-icono {
  background: #333333;
}

#seccion-balances .balance-acordeon-detalle {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 16px 12px;
  background: #fcfcfc;
  border-top: 1px solid #eeeeee;
}

#seccion-balances .balance-acordeon-detalle[hidden] {
  display: none !important;
}

#seccion-balances .balance-acordeon-detalle-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid #ededed;
  font-size: 12px;
}

#seccion-balances .balance-acordeon-detalle-fila:last-child {
  border-bottom: 0;
}

#seccion-balances .balance-acordeon-detalle-fila > span {
  color: #777777;
}

#seccion-balances .balance-acordeon-detalle-fila > strong {
  color: #292929;
  font-weight: 750;
  text-align: right;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  #seccion-balances .balance-acordeon-trigger {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 13px;
  }

  #seccion-balances .balance-acordeon-identidad {
    grid-column: 1;
    grid-row: 1;
  }

  #seccion-balances .balance-acordeon-importe {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }

  #seccion-balances .balance-acordeon-icono {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  #seccion-balances .balance-acordeon-detalle {
    padding-right: 13px;
    padding-left: 13px;
  }
}
/* =========================================================
   BALANCES — TARJETAS DE INFORMES PLEGABLES
   ========================================================= */

#seccion-balances .balance-panel {
  min-width: 0;
  overflow: hidden;
}

#seccion-balances .balance-panel-cabecera {
  position: relative;
  padding-right: 48px;
}

#seccion-balances .balance-panel-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: transparent;
  font-size: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

#seccion-balances .balance-panel-toggle::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #ffffff;
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
  background: #bd202e;
  border-radius: 50%;
  transform: translateY(-50%);
}

#seccion-balances
.balance-panel-abierto
.balance-panel-toggle::after {
  content: "−";
  background: #303030;
}

#seccion-balances .balance-panel-toggle:focus-visible {
  outline: 3px solid rgba(189, 32, 46, 0.35);
  outline-offset: -3px;
}

#seccion-balances .balance-panel-cuerpo[hidden] {
  display: none !important;
}

/* Tarjeta cerrada: mostrar el título, no los detalles. */

#seccion-balances
.balance-panel-plegado
> .balance-panel-cabecera {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 0;
  padding-right: 48px;
}

#seccion-balances
.balance-panel-plegado
.balance-panel-cabecera p,
#seccion-balances
.balance-panel-plegado
.balance-panel-cabecera .texto-secundario,
#seccion-balances
.balance-panel-plegado
.balance-panel-cabecera .etiqueta-seccion {
  display: none !important;
}

#seccion-balances
.balance-panel-plegado
.balance-panel-cabecera h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

/* Tarjeta abierta: recuperar la separación del contenido. */

#seccion-balances
.balance-panel-abierto
> .balance-panel-cabecera {
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  #seccion-balances .balance-panel {
    padding: 15px;
  }

  #seccion-balances
  .balance-panel-plegado
  > .balance-panel-cabecera {
    min-height: 42px;
  }

  #seccion-balances
  .balance-panel-plegado
  .balance-panel-cabecera h2 {
    font-size: 15px;
  }
}
/* =========================================================
   BALANCES — PANEL SUPERIOR DE INDICADORES
   ========================================================= */

#seccion-balances #balance-indicadores {
  display: block;
  margin-bottom: 24px;
}

#seccion-balances .balance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

#seccion-balances .balance-kpi-card {
  --kpi-color: #333333;
  --kpi-fondo: #f1f1f1;
  --kpi-borde: #e5e5e5;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--kpi-borde);
  border-top: 4px solid var(--kpi-color);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.035);
}

#seccion-balances .balance-kpi-ventas {
  --kpi-color: #245ca6;
  --kpi-fondo: #e5efff;
  --kpi-borde: #cfdef4;
}

#seccion-balances .balance-kpi-pagado {
  --kpi-color: #187345;
  --kpi-fondo: #dcf4e5;
  --kpi-borde: #c5e7d3;
}

#seccion-balances .balance-kpi-pendiente {
  --kpi-color: #97620b;
  --kpi-fondo: #fff0c9;
  --kpi-borde: #f0dfb1;
}

#seccion-balances .balance-kpi-rechazado {
  --kpi-color: #b42332;
  --kpi-fondo: #ffe1e4;
  --kpi-borde: #f0c9ce;
}

#seccion-balances .balance-kpi-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  color: var(--kpi-color);
  background: var(--kpi-fondo);
  border-radius: 12px;
  font-size: 23px;
  font-weight: 900;
}

#seccion-balances .balance-kpi-titulo {
  min-height: 34px;
  margin-bottom: 8px;
  color: #525252;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

#seccion-balances .balance-kpi-valor {
  color: var(--kpi-color);
  font-size: clamp(19px, 1.8vw, 27px);
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

#seccion-balances .balance-kpi-detalle {
  margin-top: 10px;
  color: #777777;
  font-size: 11px;
  line-height: 1.55;
}

/* GRUPOS SECUNDARIOS PLEGABLES */

#seccion-balances .balance-resumen-grupos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

#seccion-balances .balance-resumen-grupo {
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

#seccion-balances .balance-resumen-grupo.abierto {
  border-color: #d6d6d6;
}

#seccion-balances .balance-resumen-grupo-trigger {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 76px;
  padding: 14px 16px;
  color: #292929;
  text-align: left;
  background: #ffffff;
  border: 0;
  cursor: pointer;
}

#seccion-balances .balance-resumen-grupo-trigger:hover {
  background: #fafafa;
}

#seccion-balances .balance-resumen-grupo-trigger:focus-visible {
  outline: 2px solid #bd202e;
  outline-offset: -3px;
}

#seccion-balances .balance-resumen-grupo-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #333333;
  background: #eeeeee;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 900;
}

#seccion-balances .balance-grupo-ventas
.balance-resumen-grupo-icono {
  color: #245ca6;
  background: #e5efff;
}

#seccion-balances .balance-grupo-incidencias
.balance-resumen-grupo-icono {
  color: #97620b;
  background: #fff0c9;
}

#seccion-balances .balance-resumen-grupo-identidad {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#seccion-balances .balance-resumen-grupo-titulo {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.4;
}

#seccion-balances .balance-resumen-grupo-descripcion {
  color: #777777;
  font-size: 12px;
  line-height: 1.5;
}

#seccion-balances .balance-resumen-grupo-cantidad {
  color: #777777;
  font-size: 11px;
  white-space: nowrap;
}

#seccion-balances .balance-resumen-grupo-signo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #ffffff;
  background: #bd202e;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}

#seccion-balances .balance-resumen-grupo.abierto
.balance-resumen-grupo-signo {
  background: #333333;
}

#seccion-balances .balance-resumen-grupo-contenido {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  padding: 0 18px 8px;
  border-top: 1px solid #eeeeee;
}

#seccion-balances
.balance-resumen-grupo-contenido[hidden] {
  display: none !important;
}

#seccion-balances .balance-resumen-dato {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 15px 0;
  border-bottom: 1px solid #eeeeee;
}

#seccion-balances .balance-resumen-dato-identidad {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#seccion-balances .balance-resumen-dato-identidad > strong {
  color: #303030;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

#seccion-balances .balance-resumen-dato-identidad > small {
  color: #777777;
  font-size: 11px;
  line-height: 1.5;
}

#seccion-balances .balance-resumen-dato-valor {
  flex: 0 0 auto;
  max-width: 50%;
  color: #292929;
  font-size: 13px;
  font-weight: 850;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1000px) {
  #seccion-balances .balance-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #seccion-balances .balance-kpi-grid {
    gap: 10px;
  }

  #seccion-balances .balance-kpi-card {
    padding: 14px;
  }

  #seccion-balances .balance-kpi-icono {
    width: 36px;
    height: 36px;
    margin-bottom: 11px;
    font-size: 20px;
  }

  #seccion-balances .balance-kpi-titulo {
    min-height: 0;
    font-size: 11px;
  }

  #seccion-balances .balance-kpi-valor {
    font-size: 19px;
  }

  #seccion-balances .balance-kpi-detalle {
    font-size: 10px;
  }

  #seccion-balances .balance-resumen-grupo-trigger {
    grid-template-columns: 36px minmax(0, 1fr) 27px;
    gap: 10px;
    padding: 12px;
  }

  #seccion-balances .balance-resumen-grupo-icono {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }

  #seccion-balances .balance-resumen-grupo-cantidad {
    display: none;
  }

  #seccion-balances .balance-resumen-grupo-signo {
    width: 27px;
    height: 27px;
    font-size: 20px;
  }

  #seccion-balances .balance-resumen-grupo-contenido {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 12px 6px;
  }
}

/* =========================================
   SOPORTE AL CLIENTE - PANEL ADMINISTRATIVO
   ========================================= */

#seccion-soporte .barra-pedidos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-top: 22px;
}

#seccion-soporte .barra-pedidos > div {
  flex: 1 1 210px;
  min-width: 0;
}

#seccion-soporte .barra-pedidos label {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
  color: #222222;
}

#seccion-soporte .barra-pedidos input,
#seccion-soporte .barra-pedidos select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #d6d6d6;
  border-radius: 9px;
  background: #ffffff;
  color: #222222;
  font: inherit;
}

#seccion-soporte .barra-pedidos input:focus,
#seccion-soporte .barra-pedidos select:focus,
#seccion-soporte #listado-soporte textarea:focus,
#seccion-soporte #listado-soporte select:focus {
  outline: 2px solid #d71920;
  outline-offset: 2px;
  border-color: #d71920;
}

#seccion-soporte .encabezado-listado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  margin-bottom: 16px;
}

#seccion-soporte #listado-soporte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  margin-top: 16px;
}

#seccion-soporte #listado-soporte > * {
  box-sizing: border-box;
  min-width: 0;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

#seccion-soporte #listado-soporte > .estado-vacio {
  grid-column: 1 / -1;
}

#seccion-soporte #listado-soporte h3,
#seccion-soporte #listado-soporte h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #171717;
  overflow-wrap: anywhere;
}

#seccion-soporte #listado-soporte p {
  line-height: 1.55;
  overflow-wrap: anywhere;
}

#seccion-soporte #listado-soporte label {
  display: block;
  margin-top: 14px;
  margin-bottom: 7px;
  color: #222222;
  font-weight: 700;
}

#seccion-soporte #listado-soporte textarea,
#seccion-soporte #listado-soporte select {
  display: block;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #d6d6d6;
  border-radius: 9px;
  background: #ffffff;
  color: #222222;
  font: inherit;
}

#seccion-soporte #listado-soporte textarea {
  min-height: 115px;
  resize: vertical;
}

#seccion-soporte #listado-soporte button {
  min-height: 42px;
  margin-top: 14px;
  padding: 10px 16px;
  border: none;
  border-radius: 9px;
  background: #d71920;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

#seccion-soporte #listado-soporte button:hover {
  background: #b9141a;
}

#seccion-soporte #listado-soporte button:focus-visible {
  outline: 3px solid #f0c419;
  outline-offset: 3px;
}

#seccion-soporte #listado-soporte button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#seccion-soporte #mensaje-soporte {
  margin-top: 16px;
  margin-bottom: 16px;
}

@media (max-width: 850px) {
  #seccion-soporte #listado-soporte {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  #seccion-soporte #listado-soporte > * {
    padding: 15px;
  }

  #seccion-soporte .encabezado-listado {
    align-items: flex-start;
  }

  #seccion-soporte .barra-pedidos {
    gap: 12px;
  }
}

/* =========================================
   PEPONNE ADMIN — TARJETAS DE PEDIDOS COMPACTAS
   Conserva los datos y todas las acciones
   ========================================= */

.listado-pedidos {
  gap: 9px;
}

.pedido-card {
  padding: 12px;
  border-radius: 11px;
}

.resumen-pedido {
  padding: 12px;
}

.pedido-card .pedido-cabecera {
  gap: 8px;
  padding-bottom: 9px;
}

.pedido-card .pedido-titulo {
  font-size: 15px;
  line-height: 1.3;
}

.pedido-card .pedido-fecha {
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.35;
}

.pedido-card .estado-badge {
  padding: 5px 7px;
  font-size: 8px;
}

.pedido-card .pedido-datos {
  gap: 8px 10px;
  padding: 9px 0;
}

.pedido-card .dato-etiqueta {
  margin-bottom: 3px;
  font-size: 8px;
}

.pedido-card .dato-valor {
  font-size: 10px;
  line-height: 1.35;
}

.pedido-card .productos-pedido {
  padding: 9px 0;
}

.pedido-card .productos-pedido h3 {
  margin-bottom: 5px;
  font-size: 10px;
}

.pedido-card .productos-pedido ul {
  padding-left: 17px;
}

.pedido-card .productos-pedido li {
  padding: 2px 0;
  font-size: 10px;
  line-height: 1.35;
}

.pedido-card .pedido-total-linea {
  gap: 8px;
  padding: 9px 0;
}

.pedido-card .total-etiqueta {
  font-size: 9px;
}

.pedido-card .pedido-total {
  font-size: 19px;
}

.pedido-card .controles-pedido {
  gap: 8px;
  margin-top: 6px;
  padding-top: 9px;
}

.pedido-card .control-estado label {
  margin-bottom: 5px;
  font-size: 9px;
}

.pedido-card .control-estado select,
.pedido-card .boton-guardar-estado {
  min-height: 36px;
}

.pedido-card .boton-guardar-estado {
  padding: 8px 10px;
  font-size: 9px;
}

.resumen-pedido > .texto-secundario {
  margin-top: 8px;
  line-height: 1.45;
}

.resumen-pedido .pedido-cabecera {
  padding-bottom: 9px;
}

.resumen-pedido .pedido-total-linea {
  padding: 9px 0;
}

.resumen-pedido .controles-pedido {
  padding-top: 9px;
}

/* INDICADOR VISUAL DE CONSULTAS NUEVAS */
.nav-admin.soporte-con-nuevas {
  position: relative;
  padding-right: 30px;
}

.nav-admin.soporte-con-nuevas::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e21b2d;
  box-shadow: 0 0 0 3px rgba(226, 27, 45, 0.13);
  transform: translateY(-50%);
  animation: pulso-indicador-soporte 1.8s ease-in-out infinite;
}

@keyframes pulso-indicador-soporte {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(226, 27, 45, 0.13);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(226, 27, 45, 0.06);
  }
}

/* =========================================
   BOTÓN DE IMPRESIÓN DE COMANDAS
   ========================================= */

.pedido-card .boton-imprimir-comanda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  margin-top: 9px;
  padding: 8px 13px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #ffffff;
  color: #222222;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.pedido-card .boton-imprimir-comanda:hover {
  background: #fff6cc;
  border-color: #e0b800;
}

.pedido-card .boton-imprimir-comanda:focus-visible {
  outline: 3px solid #d71920;
  outline-offset: 2px;
}

.pedido-card .boton-imprimir-comanda:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media print {
  .pedido-card .boton-imprimir-comanda {
    display: none;
  }
}
/* =====================================================
   PEPONNE ADMIN — FOTOS DE INICIO
   Estilos exclusivos de esta sección
   ===================================================== */

#seccion-fotos-inicio {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#seccion-fotos-inicio *,
#seccion-fotos-inicio *::before,
#seccion-fotos-inicio *::after {
  box-sizing: border-box;
}

#seccion-fotos-inicio[hidden] {
  display: none !important;
}

#boton-fotos-inicio {
  white-space: nowrap;
}

/* Panel para agregar una fotografía */

#seccion-fotos-inicio .fotos-inicio-subida {
  margin: 24px 0;
  padding: 22px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
}

#seccion-fotos-inicio .fotos-inicio-subida h2,
#seccion-fotos-inicio .fotos-inicio-lista-cabecera h2 {
  margin: 0 0 8px;
  color: var(--negro, #171717);
  font-size: 1.2rem;
}

#seccion-fotos-inicio .fotos-inicio-subida p,
#seccion-fotos-inicio .fotos-inicio-lista-cabecera p {
  line-height: 1.5;
}

/* Selector de archivo */

#seccion-fotos-inicio .fotos-inicio-input-archivo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

#seccion-fotos-inicio .fotos-inicio-etiqueta-archivo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 10px 10px 10px 0;
  padding: 10px 16px;
  color: var(--negro, #171717);
  background: var(--amarillo, #ffcc00);
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

#seccion-fotos-inicio .fotos-inicio-etiqueta-archivo:hover {
  filter: brightness(0.96);
}

#seccion-fotos-inicio .fotos-inicio-input-archivo:focus-visible
  + .fotos-inicio-archivo-focus {
  outline: 3px solid var(--rojo, #b51e23);
}

/* Encabezado del listado */

#seccion-fotos-inicio .fotos-inicio-lista-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 16px;
}

#seccion-fotos-inicio .fotos-inicio-contador {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  color: var(--negro, #171717);
  background: #f2f2f2;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Listado de fotografías */

#seccion-fotos-inicio .fotos-inicio-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  min-width: 0;
}

#seccion-fotos-inicio .fotos-inicio-tarjeta {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  min-width: 0;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 4%);
}

#seccion-fotos-inicio .fotos-inicio-miniatura {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: center;
  background: #f0f0f0;
  border-radius: 10px;
}

#seccion-fotos-inicio .fotos-inicio-miniatura-error {
  object-fit: contain;
}

#seccion-fotos-inicio .fotos-inicio-tarjeta-cuerpo {
  min-width: 0;
}

#seccion-fotos-inicio .fotos-inicio-tarjeta-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

#seccion-fotos-inicio .fotos-inicio-tarjeta-encabezado h3 {
  margin: 0;
  color: var(--negro, #171717);
  font-size: 1.05rem;
}

#seccion-fotos-inicio .fotos-inicio-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  color: #555555;
  background: #eeeeee;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

#seccion-fotos-inicio .fotos-inicio-badge.activa {
  color: #155c2e;
  background: #e0f3e6;
}

/* Orden, duración y activación */

#seccion-fotos-inicio .fotos-inicio-controles {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 14px;
  align-items: end;
}

#seccion-fotos-inicio .fotos-inicio-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

#seccion-fotos-inicio .fotos-inicio-label {
  color: var(--negro, #171717);
  font-size: 0.88rem;
  font-weight: 700;
}

#seccion-fotos-inicio .fotos-inicio-input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 10px;
  color: var(--negro, #171717);
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  font: inherit;
}

#seccion-fotos-inicio .fotos-inicio-input:focus {
  border-color: var(--rojo, #b51e23);
  outline: 2px solid rgb(181 30 35 / 15%);
}

#seccion-fotos-inicio .fotos-inicio-campo-activa {
  flex-direction: row;
  align-items: center;
  grid-column: 1 / -1;
  padding: 10px 0;
  cursor: pointer;
}

#seccion-fotos-inicio .fotos-inicio-campo-activa input {
  width: 19px;
  height: 19px;
  accent-color: var(--rojo, #b51e23);
}

/* Acciones por foto */

#seccion-fotos-inicio .fotos-inicio-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

#seccion-fotos-inicio .fotos-inicio-acciones button {
  min-height: 40px;
}

#seccion-fotos-inicio .fotos-inicio-boton-eliminar {
  border-color: var(--rojo, #b51e23);
  color: var(--rojo, #b51e23);
}

/* Estados vacíos y mensajes */

#seccion-fotos-inicio .fotos-inicio-vacio {
  margin: 0;
  padding: 24px;
  color: #555555;
  background: #ffffff;
  border: 1px dashed #cccccc;
  border-radius: 12px;
  line-height: 1.6;
}

#seccion-fotos-inicio #mensaje-fotos-inicio[hidden] {
  display: none !important;
}

/* Adaptación a celulares */

@media (max-width: 650px) {
  #seccion-fotos-inicio .fotos-inicio-subida {
    padding: 16px;
  }

  #seccion-fotos-inicio .fotos-inicio-tarjeta {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  #seccion-fotos-inicio .fotos-inicio-miniatura {
    height: 190px;
  }

  #seccion-fotos-inicio .fotos-inicio-controles {
    grid-template-columns: minmax(0, 1fr);
  }

  #seccion-fotos-inicio .fotos-inicio-campo-activa {
    grid-column: auto;
  }

  #seccion-fotos-inicio .fotos-inicio-acciones {
    flex-direction: column;
  }

  #seccion-fotos-inicio .fotos-inicio-acciones button {
    width: 100%;
  }
}

/* FIN PEPONNE ADMIN — FOTOS DE INICIO */
/* =====================================================
   PEPONNE ADMIN · ZONAS DE ENVÍO
   Estilos exclusivos del mapa y su configuración
   ===================================================== */

#seccion-envios-admin {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#seccion-envios-admin[hidden] {
  display: none !important;
}

#seccion-envios-admin *,
#seccion-envios-admin *::before,
#seccion-envios-admin *::after {
  box-sizing: border-box;
}

#boton-envios-admin {
  white-space: nowrap;
}

/* Tarjetas de configuración */

#seccion-envios-admin .envios-admin-tarjeta {
  width: 100%;
  min-width: 0;
  margin: 20px 0;
  padding: 22px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 4%);
}

#seccion-envios-admin .envios-admin-tarjeta h2 {
  margin: 0 0 12px;
  color: var(--negro, #171717);
  font-size: 1.15rem;
}

#seccion-envios-admin .texto-secundario {
  line-height: 1.55;
}

/* Estado de la cobertura */

#seccion-envios-admin .envios-admin-estado {
  margin: 12px 0;
  padding: 12px 14px;
  color: #155c2e;
  background: #e7f5eb;
  border: 1px solid #b9e2c5;
  border-radius: 9px;
  font-weight: 800;
  line-height: 1.5;
}

#seccion-envios-admin .envios-admin-estado.alerta {
  color: #7a4b00;
  background: #fff4d7;
  border-color: #efd18a;
}

/* Botones y acciones */

#seccion-envios-admin .envios-admin-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

#seccion-envios-admin .envios-admin-acciones button {
  min-height: 42px;
}

#seccion-envios-admin .envios-admin-coordenadas {
  margin: 14px 0 0;
  padding: 10px 12px;
  color: #444444;
  background: #f5f5f5;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

/* Mapa interactivo */

#seccion-envios-admin .mapa-zonas-envio {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 460px;
  min-height: 320px;
  margin-top: 16px;
  overflow: hidden;
  background: #eeeeee;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  isolation: isolate;
}

#seccion-envios-admin .mapa-zonas-envio .leaflet-pane {
  z-index: 1;
}

#seccion-envios-admin .mapa-zonas-envio .leaflet-top,
#seccion-envios-admin .mapa-zonas-envio .leaflet-bottom {
  z-index: 10;
}

#seccion-envios-admin .envios-admin-aviso-mapa {
  margin: 10px 0 0;
  color: #666666;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Encabezado y contador de zonas */

#seccion-envios-admin .envios-admin-cabecera-zonas {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

#seccion-envios-admin .envios-admin-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  color: var(--negro, #171717);
  background: #f0f0f0;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}

#seccion-envios-admin .envios-admin-cambios {
  margin: 14px 0;
  color: #666666;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Lista de zonas */

#seccion-envios-admin .envios-admin-lista-zonas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  min-width: 0;
}

#seccion-envios-admin .envios-admin-zona {
  min-width: 0;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
}

#seccion-envios-admin .envios-admin-zona h3 {
  margin: 0 0 14px;
  color: var(--negro, #171717);
  font-size: 1rem;
}

#seccion-envios-admin .envios-admin-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
  color: #444444;
  font-size: 0.88rem;
  font-weight: 700;
}

#seccion-envios-admin .envios-admin-campo input[type="text"] {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--negro, #171717);
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  font: inherit;
}

#seccion-envios-admin .envios-admin-campo input[type="text"]:focus {
  border-color: var(--rojo, #b51e23);
  outline: 2px solid rgb(181 30 35 / 15%);
}

#seccion-envios-admin .envios-admin-campo-activa {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 12px;
  color: var(--negro, #171717);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

#seccion-envios-admin .envios-admin-campo-activa input {
  width: 18px;
  height: 18px;
  accent-color: var(--rojo, #b51e23);
}

#seccion-envios-admin .envios-admin-zona-nota {
  margin: 10px 0 0;
  color: #686868;
  font-size: 0.8rem;
  line-height: 1.5;
}

#seccion-envios-admin .envios-admin-lista-vacia {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px;
  color: #555555;
  background: #fafafa;
  border: 1px dashed #cccccc;
  border-radius: 10px;
  line-height: 1.55;
}

/* En celulares */

@media (max-width: 700px) {
  #seccion-envios-admin .envios-admin-tarjeta {
    padding: 16px;
  }

  #seccion-envios-admin .mapa-zonas-envio {
    height: 380px;
    min-height: 300px;
  }

  #seccion-envios-admin .envios-admin-lista-zonas {
    grid-template-columns: minmax(0, 1fr);
  }

  #seccion-envios-admin .envios-admin-acciones {
    flex-direction: column;
    align-items: stretch;
  }

  #seccion-envios-admin .envios-admin-acciones button {
    width: 100%;
  }
}

/* FIN PEPONNE ADMIN · ZONAS DE ENVÍO */
/* DATOS PARA PAGOS POR TRANSFERENCIA */
.ajustes-transferencia .configuracion-aviso input {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
}

.ajustes-transferencia .configuracion-aviso input:focus {
  border-color: var(--rojo);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(181, 30, 35, .08);
}
/* =====================================================
   COMPROBANTES DE TRANSFERENCIA
===================================================== */

.comprobante-admin {
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
}

.comprobante-admin-falta {
  border-color: #f0d28a;
  background: #fff8e1;
}

.comprobante-admin-recibido {
  border-color: #bde2c5;
  background: #f4fbf6;
}

.comprobante-admin-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.comprobante-admin-cabecera .dato-etiqueta { margin: 0; }

.comprobante-admin-badge {
  padding: 5px 8px;
  border-radius: 6px;
  background: #fff3bd;
  color: #725900;
  font-size: 9px;
  font-weight: 900;
}

.comprobante-admin-recibido .comprobante-admin-badge {
  background: #e5f6e9;
  color: #176c31;
}

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

.comprobante-admin-ver {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #bde2c5;
  border-radius: 8px;
  background: #fff;
  color: #176c31;
  font-size: 10px;
  font-weight: 900;
  text-align: left;
}

.comprobante-admin-ver:hover {
  background: #e8f7ec;
}

.comprobante-admin-nota {
  margin: 8px 0 0;
  color: #666;
  font-size: 10px;
  line-height: 1.5;
}
/* =====================================================
   RECOMENDACIONES
===================================================== */

/* Con tantas secciones, la navegación pasa a la línea siguiente
   en vez de desbordarse. */
.navegacion-admin { flex-wrap: wrap; }

.recomendacion-manual {
  margin: 18px 0 22px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sombra);
}

.recomendacion-manual > summary {
  padding: 15px 18px;
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.recomendacion-manual > summary::-webkit-details-marker { display: none; }

.recomendacion-manual[open] > summary { border-bottom: 1px solid #eee; }

.recomendacion-manual .formulario-cupon {
  margin: 0;
  padding: 18px;
}

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

.recomendacion-admin-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--borde);
  border-left: 5px solid #cfcfcf;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 13px rgba(0, 0, 0, .025);
}

.recomendacion-admin-visible {
  border-left-color: var(--verde);
  background: #fbfffc;
}

.recomendacion-admin-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.recomendacion-admin-identidad { min-width: 0; }

.recomendacion-admin-identidad h3 {
  margin: 0 0 5px;
  color: var(--negro);
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.recomendacion-admin-estrellas {
  font-size: 16px;
  letter-spacing: 1.5px;
  line-height: 1;
}

.recomendacion-admin-estrellas .estrella-llena { color: #e5a400; }
.recomendacion-admin-estrellas .estrella-vacia { color: #d6d6d6; }

.estado-recomendacion {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.estado-recomendacion-visible { background: #e5f6e9; color: #176c31; }
.estado-recomendacion-oculta { background: #eee; color: #555; }

.recomendacion-admin-comentario {
  margin: 12px 0;
  color: #333;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.recomendacion-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-bottom: 12px;
  color: #888;
  font-size: 10px;
}

.recomendacion-admin-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.recomendacion-admin-acciones button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
}

.boton-mostrar-recomendacion {
  border: 0;
  background: var(--verde);
  color: #fff;
}

.boton-mostrar-recomendacion:hover { background: #176d2b; }

.boton-ocultar-recomendacion {
  border: 1px solid #dedede;
  background: #fff;
  color: #333;
}

.boton-ocultar-recomendacion:hover { background: #f4f4f4; }

.boton-borrar-recomendacion {
  border: 1px solid #efc7c7;
  background: #fff4f4;
  color: #a31319;
}

.boton-borrar-recomendacion:hover { background: #ffebeb; }

@media (max-width: 900px) {
  .listado-recomendaciones { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .recomendacion-admin-acciones button { flex: 1 1 100%; }
}
/* =====================================================
   IMAGEN DEL CATÁLOGO PARA CADA CATEGORÍA
===================================================== */

.bloque-imagen-categoria {
  padding: 14px;
  border: 1px solid #e8e3d4;
  border-radius: 10px;
  background: #fff;
}

.imagen-categoria-preview-envoltura {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 1;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px dashed #d5d5d5;
  border-radius: 10px;
  background: #171717;
}

.imagen-categoria-preview-envoltura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.imagen-categoria-sin-preview {
  color: #bbb;
  font-size: 10px;
  font-weight: 800;
}

.imagen-categoria-preview-titulo {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 14px 12px 7px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  color: #fff;
  font-family: Anton, Impact, sans-serif;
  font-size: 15px;
  letter-spacing: .8px;
  text-transform: uppercase;
  pointer-events: none;
}

.imagen-categoria-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.imagen-categoria-acciones input[type="file"] {
  flex: 1 1 220px;
  min-width: 0;
}

.imagen-categoria-acciones .boton-secundario { flex: 0 0 auto; }

.bloque-imagen-categoria .imagen-categoria-etiqueta-titulo {
  margin-top: 16px;
}

.imagen-categoria-opcion-titulo { margin-top: 12px; }

.categoria-admin-miniatura {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 1;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #e2e2e2;
  border-radius: 7px;
  background: #171717;
}

.categoria-admin-miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.categoria-admin-miniatura-nota {
  margin: 5px 0 0;
  color: #777;
  font-size: 9px;
}