:root {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-alt: #1f232c;
  --border: #2a2f3a;
  --text: #e8e9ec;
  --text-dim: #9a9fab;
  --accent: #f97316;
  --accent-hover: #ea6a0c;
  --success: #22c55e;
  --danger: #ef4444;
  /* Azul del estado "entregado". Es una variable y no un valor suelto porque
     en claro necesita otro tono: el celeste que se lee sobre negro se pierde
     sobre blanco. */
  --info: #7aa8f5;
  /* Color del texto que va ENCIMA del naranja (botón principal, chips
     activos, badges). Blanco sobre este naranja da 2,8:1 y se lee mal;
     casi negro da 6,6:1. En claro el naranja es oscuro y se invierte. */
  --sobre-accent: #201004;
  --radius: 10px;
  /* Hace que las casillas, los <select> y el reloj de los campos de hora los
     dibuje el navegador en oscuro. Sin esto quedan blancos en medio del
     panel, que es el detalle que delata que el tema es pintado por encima. */
  color-scheme: dark;
}

/* El dueño mira el panel en el mostrador, muchas veces con el sol de frente:
   el tema oscuro ahí no se ve. Se sigue la preferencia del sistema en vez de
   poner un interruptor propio, que es un estado más para guardar y explicar.
   Todo el resto del archivo trabaja con estas variables, así que alcanza con
   redefinirlas. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-alt: #eef0f4;
    --border: #d8dce4;
    --text: #14171d;
    --text-dim: #5b6270;
    /* Naranja más oscuro que el de fondo oscuro. El #f97316 con texto blanco
       encima da 2,9:1 de contraste sobre blanco — ilegible para quien no ve
       bien. Este pasa el mínimo de 4,5:1. */
    --accent: #c2540c;
    --accent-hover: #a84709;
    --success: #15803d;
    --danger: #b91c1c;
    --info: #1d4ed8;
    --sobre-accent: #ffffff;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.hidden { display: none !important; }

.screen { min-height: 100vh; }

/* Login */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  width: 100%;
  max-width: 380px;
}

.login-logo { display: block; height: 52px; width: auto; margin-bottom: 18px; }
.login-box h1 { margin: 0 0 4px; font-size: 22px; }
.subtitle { color: var(--text-dim); margin: 0 0 24px; font-size: 14px; }

label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin: 14px 0 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}

input:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { font-family: inherit; resize: vertical; }
.campo-ayuda { color: var(--text-dim); font-size: 12px; margin: 6px 0 0; }

.primary-btn, .secondary-btn {
  cursor: pointer;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border: none;
}

.primary-btn {
  background: var(--accent);
  color: var(--sobre-accent);
  margin-top: 18px;
  width: 100%;
}
.primary-btn:hover { background: var(--accent-hover); }

.secondary-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.secondary-btn:hover { color: var(--text); border-color: var(--text-dim); }
.secondary-btn.small { padding: 6px 12px; font-size: 13px; }

.error-msg { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 16px; }
.success-msg { color: var(--success); font-size: 13px; margin-top: 12px; min-height: 16px; }

/* App shell */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
}
header h1 { font-size: 18px; margin: 0; }

/* El logo va chico y el nombre del local grande: el dueño tiene que ver su
   negocio, no el nuestro. El nombre puede ser largo, así que se corta con
   puntos suspensivos en vez de empujar el botón de salir fuera de pantalla. */
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.marca img { height: 28px; width: auto; flex-shrink: 0; }
.marca h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
header .secondary-btn { flex-shrink: 0; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 14px 16px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }

main { padding: 28px 32px; max-width: 900px; margin: 0 auto; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

h2 { font-size: 18px; margin: 0 0 18px; }

/* Lists / cards */
.list { display: flex; flex-direction: column; gap: 10px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.card-title { font-weight: 600; font-size: 15px; }
.pedido-num { color: var(--accent); margin-right: 4px; }
.pedido-item { margin-top: 10px; font-size: 14px; font-weight: 500; }
.pedido-datos { margin-top: 4px; font-size: 13px; color: var(--text-dim); }
.pedido-datos b { color: var(--text); font-weight: 600; }
.pedido-chat { margin-top: 10px; }
.pedido-chat summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
.header-acciones { display: flex; gap: 8px; align-items: center; }
/* El buscador entró a este contenedor cuando se sumó "Exportar CSV". El
   max-width en % que traía se resolvía contra un contenedor que se mide por
   su contenido, y quedaba angosto: acá se le da un ancho propio. */
.header-acciones input.buscador { flex: 0 1 340px; width: auto; max-width: 100%; }
/* .primary-btn nacio para el formulario de login y tiene width:100%;
   dentro de un encabezado hay que devolverlo a su tamano natural. */
.section-header .primary-btn { width: auto; margin-top: 0; }
.aviso-nuevos {
  background: rgba(249,115,22,0.15);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.promo-campos { display: flex; gap: 8px; margin-top: 8px; }
.promo-campos.hidden { display: none; }
.entrega-editor, .editar-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.editor-label { margin: 0; }
.editar-editor .campo-ayuda { margin: 0; }
.entrega-editor select, .entrega-editor input[type="text"],
.editar-editor select, .editar-editor input[type="number"] {
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  width: 100%;
}
.entrega-acciones { display: flex; gap: 8px; }
.entrega-acciones button { font-size: 12px; padding: 7px 12px; }

.pedido-envio {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(34,197,94,0.10);
  border-left: 3px solid var(--success);
  font-size: 13px;
  line-height: 1.45;
}

.pedido-chat .card-detail { margin-top: 6px; color: var(--text-dim); }
input.buscador { width: 340px; max-width: 55%; }
.prod-info { display: flex; gap: 12px; align-items: center; }
.prod-foto {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-alt);
}
.prod-foto.sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-size: 11px;
}

.card-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.card-detail { color: var(--text); font-size: 13px; margin-top: 8px; line-height: 1.5; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge.nuevo { background: rgba(249,115,22,0.15); color: var(--accent); }
.badge.confirmado { background: rgba(34,197,94,0.15); color: var(--success); }
.badge.entregado { background: rgba(59,130,246,0.18); color: var(--info); }
.badge.cancelado { background: rgba(239,68,68,0.15); color: var(--danger); }
.badge.abierta { background: rgba(34,197,94,0.15); color: var(--success); }
.badge.cerrada { background: rgba(154,159,171,0.15); color: var(--text-dim); }
.badge.atencion { background: rgba(249,115,22,0.2); color: var(--accent); }
.badge.bloqueado { background: rgba(239,68,68,0.18); color: var(--danger); }

/* Conversación con mensajes del cliente sin leer. El borde de la izquierda
   se ve de reojo bajando la lista, sin tener que leer ninguna etiqueta. */
.card.no-leida { border-left: 3px solid var(--accent); }

.card-top-marcas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.no-leidos {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--sobre-accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.no-leidos.hidden { display: none; }

.tab-badge {
  display: inline-block;
  margin-left: 7px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--sobre-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}
.tab-badge.hidden { display: none; }

.metricas-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.metricas-select {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
}
.metricas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.metrica {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.metrica-valor { font-size: 22px; font-weight: 700; line-height: 1.2; }
.metrica-titulo { font-size: 13px; color: var(--text); margin-top: 4px; }
.metrica-pie { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtro-chip {
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
}
.filtro-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sobre-accent);
  font-weight: 600;
}

.card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.card-actions select, .card-actions button {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
}

.chat-hist {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  max-height: 340px;
  overflow-y: auto;
}
/* Cliente a la izquierda, bot a la derecha: se lee como un WhatsApp,
   que es exactamente lo que el dueño está tratando de reconstruir. */
.msg { max-width: 78%; margin-bottom: 10px; }
.msg.bot { margin-left: auto; text-align: right; }
.msg-burbuja {
  display: inline-block;
  padding: 8px 11px;
  border-radius: 12px;
  background: var(--surface-alt);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
}
.msg.bot .msg-burbuja { background: rgba(249,115,22,0.15); }
/* El dueño va del mismo lado que el bot —los dos son "el local"— pero en
   verde, para distinguir de un vistazo qué contestó una persona y qué la
   máquina. Es lo primero que se busca al revisar una conversación que salió
   mal. */
.msg.dueño { margin-left: auto; text-align: right; }
.msg.dueño .msg-burbuja { background: rgba(34,197,94,0.18); }
.msg.dueño .msg-hora::after { content: ' · vos'; color: var(--success); }
.msg-hora { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

/* Responder desde el panel */
.chat-responder { margin-top: 10px; }
.chat-texto {
  width: 100%;
  resize: vertical;
  min-height: 44px;
}
.chat-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.chat-pie .primary-btn { margin-top: 0; width: auto; }
.chat-botones { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Ventana de mandar foto */
#foto-preview { display: block; max-width: 100%; max-height: 320px; margin: 14px auto 6px; border-radius: 8px; }
.foto-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.foto-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
}
.foto-item:hover { border-color: var(--accent); }
.foto-item img { display: block; width: 100%; height: 74px; object-fit: cover; }
.foto-item span {
  display: block;
  padding: 5px 4px;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ancho fijo: una foto vertical de celular ocuparía la pantalla entera. */
.msg-foto { display: block; max-width: 220px; width: 100%; border-radius: 8px; }
.chat-ventana { font-size: 12px; color: var(--text-dim); }
.chat-responder .campo-ayuda { margin-top: 6px; }
/* La ventana cerrada no es un error del dueño: es una regla de WhatsApp.
   Se explica, no se muestra como falla. */
.chat-cerrada {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-alt);
  border-left: 3px solid var(--text-dim);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.empty-msg { color: var(--text-dim); font-size: 14px; padding: 20px 0; }

/* Ficha del cliente */
.contacto-subtitulo { font-size: 14px; margin: 20px 0 10px; color: var(--text-dim); }
#contacto-modal .modal-box { max-width: 560px; }
#contacto-modal .metricas-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
#contacto-modal .metrica-valor { font-size: 18px; }
.contacto-pedido {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.contacto-pedido:last-child { border-bottom: none; }
.contacto-pedido-fin { text-align: right; flex-shrink: 0; }
.contacto-pedido-total { font-weight: 600; margin-top: 4px; }

/* Avisos flotantes. Van arriba del modal (z-index 10) porque un error del
   formulario del producto se muestra con el modal abierto: si quedara abajo,
   el dueño no vería por qué no se guardó. */
.toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  animation: toast-entra 0.18s ease-out;
}
.toast.ok { border-left-color: var(--success); }
.toast.saliendo { opacity: 0; transition: opacity 0.18s ease-in; }

@keyframes toast-entra {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
/* Quien pidió menos animación en el sistema no la ve. */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.saliendo { transition: none; }
}

/* Config form */
.config-form { max-width: 480px; }
.bot-estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 480px;
  margin-bottom: 30px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bot-estado-titulo { font-weight: 600; font-size: 15px; }
.bot-estado .campo-ayuda { margin-top: 4px; }
.bot-estado input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 6px;
}
.toggle-row label { margin: 0; }
.toggle-row input[type="checkbox"] { width: 20px; height: 20px; }

/* Dias de atencion: 7 casillas que tienen que entrar en una fila hasta en
   375px, y tocarse con el pulgar. Por eso wrap + min-height, no una tabla. */
.dias-semana {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.dias-semana label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 8px 10px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}
.dias-semana input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}
/* El día marcado se distingue de un vistazo, sin tener que mirar la casilla.
   Si el navegador no soporta :has(), simplemente no se resalta: la casilla
   sigue mostrando el estado. */
.dias-semana label:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface-alt);
}

/* Bloque plegable. El resumen del encabezado muestra lo que hay adentro, asi
   que plegado no esconde informacion: solo esconde los controles para
   editarla. Sin eso, plegar seria obligar a abrir para saber que hay. */
.plegable {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.plegable summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;      /* Safari */
  min-height: 44px;      /* se toca con el pulgar */
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--text-dim);
  font-size: 13px;
  transition: transform 0.15s;
}
.plegable[open] summary::after { transform: rotate(180deg); }
.plegable summary:hover { background: var(--surface-alt); }
.plegable[open] summary { border-bottom: 1px solid var(--border); }
.plegable-titulo { font-weight: 600; font-size: 15px; }
.plegable-resumen { font-size: 13px; color: var(--text-dim); }
.plegable-cuerpo { padding: 14px; }
.plegable-cuerpo > .campo-ayuda:first-child { margin-top: 0; }

/* Horarios de atencion — una fila por dia, con uno o mas tramos.
   El dia destildado se apaga en vez de desaparecer: el dueño tiene que poder
   ver de un vistazo los siete dias, incluidos los que cierra. */
.horarios { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dia-horario {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.dia-horario:has(.dia-abre:checked) {
  border-color: var(--accent);
  background: var(--surface-alt);
}
.dia-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dia-encabezado label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 32px;
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}
.dia-encabezado input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.dia-cerrado { font-size: 13px; color: var(--text-dim); }

.tramos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tramo { display: flex; align-items: center; gap: 6px; }
.tramo input[type="time"] { margin: 0; flex: 1 1 0; min-width: 0; }
.tramo span { color: var(--text-dim); font-size: 13px; flex-shrink: 0; }
/* 44px de lado: es un boton que se toca con el pulgar en un celular. */
.tramo-quitar, .tramo-agregar {
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.tramo-quitar:hover { color: var(--danger); border-color: var(--danger); }
.tramo-agregar:hover { color: var(--text); border-color: var(--text-dim); }
.tramo-agregar { margin-top: 6px; }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-box h2 { margin-top: 0; }
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.modal-actions .primary-btn { margin-top: 0; }

.variante-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
/* Estado del stock en la lista del catálogo. Agotado en rojo porque es lo
   único que el dueño tiene que ver sí o sí: el bot dejó de venderlo. */
.stock-agotado {
  color: var(--danger);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.stock-poco { color: var(--accent); font-weight: 600; font-size: 12px; }
.stock-ok   { color: var(--text-dim); font-size: 12px; }

/* Nombre más ancho que precio y stock: "Talle / opción" necesita lugar,
   un precio y un stock no. Sin esto los tres campos quedan iguales y el
   nombre se corta en el celular. */
.variante-row input { flex: 1; min-width: 0; }
.variante-row .variante-nombre { flex: 2; }
.variante-row .variante-stock { flex: 0.8; }
.variante-row button {
  background: transparent;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 18px;
  padding: 0 6px;
}

@media (max-width: 600px) {
  header, main { padding-left: 16px; padding-right: 16px; }

  /* Las 4 pestanas no entraban en 375px y quedaban cortadas ("Confi..."),
     obligando a scrollear de costado. Achicandolas entran todas. */
  .tabs { padding: 0 8px; gap: 2px; }
  .tab-btn { padding: 12px 7px; font-size: 12px; }
  .tab-badge { margin-left: 4px; min-width: 16px; padding: 1px 4px; font-size: 10px; }

  /* Titulo arriba, acciones abajo a todo el ancho: en el celular no hay
     lugar para ponerlos en la misma fila. */
  .section-header { flex-wrap: wrap; gap: 12px; }
  .section-header h2 { width: 100%; }

  /* El buscador tenia max-width 55%, pensado para escritorio: en el celular
     mostraba media palabra. */
  input.buscador { width: 100%; max-width: 100%; }

  /* Tres tarjetas de la ficha en una fila de 375 px dejan los números
     partidos; de a dos entran. */
  #contacto-modal .metricas-grid { grid-template-columns: repeat(2, 1fr); }

  .header-acciones { width: 100%; flex-wrap: wrap; }
  .header-acciones .secondary-btn { flex: 1 1 45%; }
  .section-header .primary-btn { width: 100%; }

  /* Botones mas altos: se tocan con el pulgar, no con el mouse. */
  .card-actions button, .card-actions select { min-height: 42px; }

  /* En 375px una burbuja al 78% deja las frases partidas en dos palabras. */
  .msg { max-width: 88%; }
  /* Los chips se tocan con el pulgar. */
  .filtro-chip { padding: 9px 14px; }
  /* Dos por fila en el celular: cinco tarjetas en una columna serían
     media pantalla de scroll antes de llegar a los pedidos. */
  .metricas-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .metrica { padding: 11px; }
  .metrica-valor { font-size: 18px; }
  .chat-hist { max-height: 300px; }
}