/* ============================================================================
   PEDIDOS MERCA — identidad "Mercado de Las Palmas"
   Kraft + tinta, tipografia de rotulo de cajon, colores de fruta con funcion.
   Firma: tarjetas tipo TICKET en un tablon + franja de toldo. PC-first.
   ============================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

:root{
  /* --- Papel y tinta --- */
  --kraft:      #ece1c9;   /* fondo de la app (papel de estraza, calido) */
  --kraft-hondo:#e2d4b4;   /* bandas / zonas hundidas */
  --papel:      #fffdf6;   /* superficie de tarjetas */
  --tinta:      #2a2013;   /* texto principal (tinta marron) */
  --tinta-2:    #6e5f45;   /* texto secundario */
  --linea:      #dccdac;   /* hairline calido */
  --linea-2:    #cdb98f;   /* hairline mas marcado */

  /* --- Colores de fruta (funcionales) --- */
  --verde:      #2f7d3e;   /* lechuga: confirmar / listo / imprimir */
  --verde-hondo:#1f5629;
  --verde-suave:#e2efd9;
  --verde-linea:#bcdcae;
  --tomate:     #c1352a;   /* tomate: descartar / peligro */
  --tomate-hondo:#98261d;
  --tomate-suave:#f7ddd8;
  --platano:    #cf8f00;   /* platano canario: pendiente / atencion */
  --platano-txt:#8a5d00;
  --platano-suave:#f8e9bf;
  --platano-linea:#e6c766;
  --berenjena:  #5b3a72;   /* acento raro (firma) */
  --naranja:    #d9701a;   /* acento calido secundario */

  /* --- Tipografia --- */
  --rotulo: "Bahnschrift", "DIN Alternate", "Oswald", "Archivo Narrow", "Segoe UI", system-ui, sans-serif;
  --texto:  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* --- Formas --- */
  --r:    14px;
  --r-sm: 9px;
  --r-lg: 20px;
  --sombra:    0 6px 20px rgba(42, 32, 19, .10);
  --sombra-sm: 0 2px 8px rgba(42, 32, 19, .08);
  --sombra-tk: 0 3px 0 rgba(42,32,19,.06), 0 8px 22px rgba(42,32,19,.10);
}

html, body { height: 100%; }
body{
  font-family: var(--texto);
  color: var(--tinta);
  background-color: var(--kraft);
  /* textura sutil de papel: dos velos muy tenues, nada de ruido chillon */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 88% 0%, rgba(210,190,150,.20), transparent 45%);
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tipos de rotulo: condensados, marcados, en mayuscula para eyebrows/etiquetas */
h1, h2, h3, .brand-name, .pedido-cliente, .total-cantidad, .fac-nombre,
.ajustes-titulo, .login-caja h1 {
  font-family: var(--rotulo);
  font-weight: 700;
  letter-spacing: .2px;
}

/* ============================ CABECERA ============================ */
.top{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 13px clamp(16px, 4vw, 40px);
  background: linear-gradient(180deg, #2f7d3e 0%, #256330 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(31, 86, 41, .28);
}
/* Firma: franja de toldo bajo la cabecera (bloques de color de fruta) */
.top::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px;
  background: repeating-linear-gradient(90deg,
    var(--verde) 0 26px, var(--platano) 26px 52px,
    var(--tomate) 52px 78px, var(--berenjena) 78px 104px);
  opacity: .92;
}
.brand{ display: flex; align-items: center; gap: 11px; }
.brand-mark{
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28);
}
.brand-mark svg{ width: 26px; height: 26px; }
.brand-name{ font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: 1px; }

.top-acciones{ display: flex; align-items: center; gap: 9px; }

/* Chip de WhatsApp */
.wa-chip{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
  padding: 7px 13px 7px 11px; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.wa-chip:hover{ background: rgba(255,255,255,.24); }
.wa-dot{ width: 9px; height: 9px; border-radius: 50%; background: #d7cbb0; flex: 0 0 auto; }
.wa-chip.on  .wa-dot{ background: #57e08a; box-shadow: 0 0 0 3px rgba(87,224,138,.28); animation: latido 2s ease-in-out infinite; }
.wa-chip.off .wa-dot{ background: var(--platano); }
@keyframes latido{ 0%,100%{opacity:1} 50%{opacity:.45} }

.btn-ajustes{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.24); border-radius: 10px;
  cursor: pointer; transition: background .15s, transform .12s;
}
.btn-ajustes:hover{ background: rgba(255,255,255,.24); }
.btn-ajustes:active{ transform: rotate(35deg); }

.btn-logout{
  background: rgba(0,0,0,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  padding: 8px 15px; font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.btn-logout:hover{ background: rgba(0,0,0,.24); }

/* ============================ CONTENEDOR / VISTAS ============================ */
.contenedor{
  max-width: 1360px; margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) clamp(14px, 4vw, 40px) 60px;
}

h2{ font-size: 26px; color: var(--tinta); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
h3{ font-size: 17px; color: var(--tinta); }

/* Enlace "volver" */
.volver{
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--tinta-2);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 4px 2px; margin-bottom: 12px; transition: color .12s, transform .12s;
}
.volver:hover{ color: var(--verde-hondo); transform: translateX(-2px); }

/* Estados vacios: una invitacion, no un vacio triste */
.vacio{
  text-align: center; color: var(--tinta-2); font-size: 15px;
  padding: 40px 20px; border: 2px dashed var(--linea-2); border-radius: var(--r);
  background: rgba(255,255,255,.35);
}

/* Aviso de pedidos por revisar (banda platano) */
.aviso{
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--platano-suave); color: var(--platano-txt);
  border: 1.5px solid var(--platano-linea); border-left: 6px solid var(--platano);
  border-radius: var(--r); padding: 15px 18px; margin-bottom: 20px;
  font-size: 16px; font-weight: 700; text-align: left; cursor: pointer;
  box-shadow: var(--sombra-sm); transition: transform .12s, box-shadow .15s;
}
.aviso::before{
  content: ""; flex: 0 0 auto; width: 24px; height: 24px;
  background: var(--platano-txt);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13h4l2 3h4l2-3h4'/><path d='M4 13 6 5h12l2 8v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13h4l2 3h4l2-3h4'/><path d='M4 13 6 5h12l2 8v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/></svg>") center/contain no-repeat;
}
.aviso::after{ content: "\203A"; margin-left: auto; font-size: 26px; line-height: 1; opacity: .7; }
.aviso:hover{ transform: translateY(-1px); box-shadow: var(--sombra); }

/* Aviso de pedidos sin confirmar en la pantalla de totales. Tono de alerta
   (ambar), no es un boton: solo informa de que las sumas estan incompletas. */
.aviso-pendientes{
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  background: #fdf0d5; color: #7a4a08;
  border: 1.5px solid #e9b866; border-left: 6px solid #d98a1f;
  border-radius: var(--r); padding: 13px 16px; margin-bottom: 16px;
  font-size: 15px; font-weight: 600; line-height: 1.35; text-align: left;
}
.aviso-pendientes::before{
  content: "\26A0"; flex: 0 0 auto; font-size: 18px; line-height: 1.2;
}
@media print{ .aviso-pendientes{ display: none !important; } }

/* Aviso de posible continuacion en la pantalla de revision. Mismo tono ambar
   que el aviso de pendientes: informa, no bloquea. */
.aviso-continuacion{
  display: flex; align-items: flex-start; gap: 9px;
  background: #fdf0d5; color: #7a4a08;
  border: 1.5px solid #e9b866; border-left: 6px solid #d98a1f;
  border-radius: var(--r); padding: 11px 14px; margin: 0 0 14px;
  font-size: 14px; font-weight: 600; line-height: 1.35;
}
.aviso-continuacion::before{ content: "\1F517"; flex: 0 0 auto; font-size: 15px; }

/* Navegacion de fecha */
.fecha-nav{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 18px;
}
.fecha-nav button{
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--papel); color: var(--tinta); border: 1.5px solid var(--linea-2);
  font-size: 19px; cursor: pointer; transition: background .12s, border-color .12s, transform .1s;
}
.fecha-nav button:hover{ background: #fff; border-color: var(--verde); color: var(--verde-hondo); }
.fecha-nav button:active{ transform: scale(.94); }
#fecha-seleccionada, #tot-fecha{
  font-family: var(--rotulo); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--tinta);
  min-width: 190px; text-align: center;
}

/* Botones de accion de la lista */
.btn-totales, .btn-imprimir-dia{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px; margin-bottom: 12px;
  font: inherit; font-family: var(--rotulo); font-weight: 700; font-size: 17px;
  text-transform: uppercase; letter-spacing: .5px;
  border-radius: var(--r); cursor: pointer; transition: transform .1s, box-shadow .15s, background .15s;
}
/* "Ver totales" = pizarra de puesto (adelanta su identidad) */
.btn-totales{
  background: linear-gradient(180deg, #34302a, #26221d); color: #f4ead2;
  border: 1px solid #46403a; box-shadow: var(--sombra-sm);
}
.btn-totales::before{
  content: ""; width: 22px; height: 22px; background: #f4ead2;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 9h8M8 13h6M8 17h4'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 9h8M8 13h6M8 17h4'/></svg>") center/contain no-repeat;
}
.btn-totales:hover{ transform: translateY(-1px); box-shadow: var(--sombra); }
.btn-imprimir-dia{
  background: var(--papel); color: var(--tinta); border: 1.5px solid var(--linea-2);
  margin-bottom: 22px;
}
.btn-imprimir-dia svg{ color: var(--verde-hondo); }
.btn-imprimir-dia:hover{ background: #fff; border-color: var(--verde); transform: translateY(-1px); }
.btn-totales:active, .btn-imprimir-dia:active{ transform: scale(.995); }

/* ============================ LISTA = TABLON DE TICKETS ============================ */
#lista-pedidos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.pedido-card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--sombra-tk);
  overflow: hidden;
  transition: transform .12s, box-shadow .15s;
}
/* franja verde a la izquierda, como una pegatina de cajon */
.pedido-card::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--verde);
}
.pedido-card:hover{ transform: translateY(-3px); box-shadow: 0 3px 0 rgba(42,32,19,.06), 0 14px 30px rgba(42,32,19,.16); }
.pedido-info{ flex: 1; padding: 16px 18px 8px 22px; cursor: pointer; min-width: 0; }
.pedido-cliente{
  font-size: 21px; line-height: 1.12; color: var(--tinta);
  text-transform: uppercase; letter-spacing: .3px;
  overflow-wrap: break-word; word-break: normal; hyphens: none;
}
.pedido-detalle{
  margin-top: 4px; font-family: var(--texto); font-size: 13px; font-weight: 600;
  color: var(--tinta-2); text-transform: none; letter-spacing: 0;
}
/* Etiqueta de estado (tag colgante) */
.estado-toggle{
  align-self: flex-start; margin: 2px 0 15px 22px; flex: 0 0 auto;
  font-family: var(--rotulo); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .6px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--platano-suave); color: var(--platano-txt);
  border: 1.5px solid var(--platano-linea);
  transition: transform .1s, filter .12s;
}
.estado-toggle.listo{
  background: var(--verde); color: #fff; border-color: var(--verde-hondo);
}
.estado-toggle:hover{ filter: brightness(.97); }
.estado-toggle:active{ transform: scale(.93); }

/* ============================ REVISION ============================ */
.revision-bloque{
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm); padding: 22px 24px; margin: 0 auto 18px; max-width: 880px;
}
.revision-cabecera{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.badge-fecha{
  font-family: var(--rotulo); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .5px;
  background: var(--kraft-hondo); color: var(--tinta-2);
  border: 1px solid var(--linea-2); border-radius: 999px; padding: 3px 11px;
}
/* Mensaje de WhatsApp = burbuja de chat */
.mensaje-original{
  position: relative; background: var(--verde-suave); color: #26331f;
  border: 1px solid var(--verde-linea); border-radius: 14px 14px 14px 4px;
  padding: 12px 15px; margin: 4px 0 16px; font-size: 15px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.input-cliente{
  width: 100%; font: inherit; font-size: 16px; font-weight: 700; color: var(--tinta);
  background: #fffdf6; border: 1.5px solid var(--linea-2); border-radius: var(--r-sm);
  padding: 11px 13px; margin-bottom: 14px;
}
.input-cliente:focus{ outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }

/* Campos con etiqueta (Cliente / Productos detectados) */
.campo{ margin-bottom: 12px; }
.campo > label{
  display: block; font-family: var(--rotulo); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-2); margin-bottom: 6px;
}

.items-editables{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.item-bloque{ display: flex; flex-direction: column; gap: 6px; }
/* Fila editable de un producto: nombre ANCHO + cantidad + unidad + quitar */
.item-editable{
  display: grid; grid-template-columns: minmax(0, 1fr) 108px 128px 40px;
  gap: 10px; align-items: center;
  background: #fbf7ec; border: 1px solid var(--linea); border-radius: var(--r-sm);
  padding: 10px 12px;
}
.item-editable.sin-identificar{ background: var(--tomate-suave); border-color: #e7bdb7; }
/* Aviso para el producto que el cliente pidio sin decir cuanto. */
.falta-cantidad{
  margin: 4px 0 0 2px; font-size: 13px; font-weight: 600; color: var(--tomate);
}
.item-nombre, .item-cantidad, .item-unidad{
  font: inherit; font-size: 15px; color: var(--tinta); width: 100%; min-width: 0;
  background: #fff; border: 1.5px solid var(--linea-2); border-radius: 7px; padding: 9px 10px;
}
.item-nombre{ font-weight: 600; }
.item-cantidad{ text-align: center; font-variant-numeric: tabular-nums; }
.item-nombre:focus, .item-cantidad:focus, .item-unidad:focus{
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave);
}
.btn-quitar-item{
  width: 38px; height: 38px; border-radius: 8px; cursor: pointer; justify-self: center;
  background: #fff; color: var(--tomate); border: 1.5px solid #e7bdb7;
  font-size: 19px; line-height: 1; transition: background .12s, color .12s;
}
.btn-quitar-item:hover{ background: var(--tomate); color: #fff; border-color: var(--tomate); }
.guardar-producto{
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--platano-txt); font-weight: 600; line-height: 1.4;
  padding: 2px 2px 2px 4px;
}
.item-guardar{ margin-top: 2px; flex: 0 0 auto; }
.btn-anadir-item, .btn-añadir-item{
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--verde-hondo);
  border: 1.5px dashed var(--verde-linea); border-radius: var(--r-sm);
  padding: 9px 14px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  margin: 6px 0 16px; transition: background .12s, border-color .12s;
}
.btn-anadir-item:hover, .btn-añadir-item:hover{ background: var(--verde-suave); border-color: var(--verde); }


.btn-confirmar, .btn-descartar{
  font: inherit; font-family: var(--rotulo); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: .5px;
  border-radius: var(--r); padding: 13px 20px; cursor: pointer; margin-right: 10px;
  transition: transform .1s, background .15s, box-shadow .15s;
}
.btn-confirmar{ background: var(--verde); color: #fff; border: 1px solid var(--verde-hondo); box-shadow: var(--sombra-sm); }
.btn-confirmar:hover{ background: var(--verde-hondo); transform: translateY(-1px); }
.btn-descartar{ background: none; color: var(--tomate); border: 1.5px solid #e0b0aa; }
.btn-descartar:hover{ background: var(--tomate-suave); }
.btn-confirmar:active, .btn-descartar:active{ transform: scale(.98); }

/* ============================ TOTALES (pantalla) = PIZARRA ============================ */
.totales-ayuda{ color: var(--tinta-2); font-size: 14.5px; margin: 4px 0 14px; }
.totales-acciones{ display: flex; justify-content: flex-end; margin-bottom: 14px; }
#totales-contenido{
  max-width: 680px; margin: 0 auto;
  background: linear-gradient(180deg, #322e28, #24211c);
  border: 1px solid #46403a; border-radius: var(--r-lg);
  padding: 10px 8px; box-shadow: inset 0 0 40px rgba(0,0,0,.25), var(--sombra-sm);
}
.total-fila{
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 16px; border-bottom: 1px dashed rgba(244,234,210,.18);
}
.total-fila:last-child{ border-bottom: none; }
/* Un producto puede venir en varias unidades (kg y unidades): se apilan bajo
   el mismo nombre en vez de salir como dos lineas sueltas del tablon. */
.total-cantidades{
  flex: 0 0 auto; min-width: 96px; display: flex; flex-direction: column;
  align-items: flex-end; gap: 2px;
}
.total-cantidad{
  text-align: right;
  font-size: 22px; color: var(--platano); font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
/* Con dos o mas unidades se marca la fila para que se vea de un vistazo que
   ese producto lleva mas de una medida. */
.total-multi{ background: rgba(244,234,210,.04); }
.total-multi .total-cantidad + .total-cantidad{ font-size: 18px; opacity: .85; }
.total-nombre{
  font-family: var(--texto); font-size: 16px; font-weight: 600; color: #f4ead2;
  text-transform: uppercase; letter-spacing: .3px;
}

/* ============================ CONEXION WHATSAPP ============================ */
#vista-conexion h2{ margin-bottom: 14px; }
.conexion-banner{
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px;
  font-size: 15.5px; font-weight: 700; text-align: center;
}
.conexion-banner.conectado{ background: var(--verde-suave); color: var(--verde-hondo); border: 1px solid var(--verde-linea); }
.conexion-banner.esperando{ background: var(--platano-suave); color: var(--platano-txt); border: 1px solid var(--platano-linea); }
#conexion-qr{ display: flex; justify-content: center; }
.qr-img{
  width: min(300px, 78vw); height: auto; background: #fff;
  padding: 14px; border-radius: var(--r); border: 1px solid var(--linea-2); box-shadow: var(--sombra-sm);
}
.conexion-ayuda{ margin-top: 16px; color: var(--tinta-2); font-size: 14px; text-align: center; line-height: 1.6; }

/* ============================ FACTURA (pantalla + IMPRESION) ============================ */
.factura-barra{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.btn-imprimir{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--verde); color: #fff; border: 1px solid var(--verde-hondo);
  border-radius: var(--r); padding: 11px 20px;
  font: inherit; font-family: var(--rotulo); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: .5px;
  cursor: pointer; box-shadow: var(--sombra-sm); transition: background .15s, transform .1s;
}
.btn-imprimir:hover{ background: var(--verde-hondo); transform: translateY(-1px); }
.btn-imprimir:active{ transform: scale(.99); }

/* La hoja se imprime: se mantiene limpia (blanco/negro), sobre "mesa" kraft en pantalla */
.factura-hoja{
  background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
  box-shadow: var(--sombra); padding: 26px 28px 30px; max-width: 720px; margin: 0 auto;
}
.fac-cab{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--tinta); }
.fac-cliente{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fac-nombre{ font-size: 27px; color: var(--tinta); line-height: 1.05; text-transform: uppercase; letter-spacing: .5px; }
.fac-meta{ display: flex; flex-direction: column; gap: 5px; text-align: right; white-space: nowrap; }
.fac-meta > div{ display: flex; gap: 8px; justify-content: flex-end; align-items: baseline; }
.fac-meta b{ font-size: 16px; font-family: var(--rotulo); }
.fac-etq{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.fac-tabla{ width: 100%; border-collapse: collapse; margin-top: 16px; }
.fac-tabla th{
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2);
  padding: 8px 10px; text-align: center; border: 1px solid var(--linea); border-bottom: 1.5px solid var(--tinta); background: #faf7f0;
}
.fac-tabla th.fac-prod{ text-align: left; }
.fac-tabla td{ border: 1px solid var(--linea); vertical-align: middle; }
.fac-tabla td.fac-prod{ color: var(--tinta); font-weight: 600; font-size: 15px; line-height: 1.3; padding: 11px 10px; }
.fac-cel{ width: 118px; height: 40px; }
.fac-cant{ text-align: center; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; width: 118px; font-family: var(--rotulo); }
.fac-tabla .col-check{ width: 52px; text-align: center; }

/* ============================ AJUSTES ============================ */
.ajustes-titulo{ font-size: 26px; color: var(--tinta); margin: 4px 0 16px; text-transform: uppercase; letter-spacing: .4px; }
.ajuste-bloque{ background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 20px; margin-bottom: 14px; box-shadow: var(--sombra-sm); }
.ajuste-bloque h3{ margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; }
.ajuste-ayuda{ font-size: 13.5px; line-height: 1.55; color: var(--tinta-2); margin-bottom: 14px; }
.ajuste-ayuda b{ color: var(--verde-hondo); }
.ajuste-fila{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ajuste-campos{ display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; }
.ajuste-select, .ajuste-input{
  font: inherit; font-size: 15px; color: var(--tinta);
  background: #fffdf6; border: 1.5px solid var(--linea-2); border-radius: var(--r-sm); padding: 11px 13px;
}
.ajuste-select{ min-width: 120px; font-family: var(--rotulo); font-weight: 700; }
.ajuste-input{ width: 100%; }
.ajuste-select:focus, .ajuste-input:focus{ outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); background: #fff; }
.ajuste-wa{ font-size: 14.5px; font-weight: 700; color: var(--tinta-2); flex: 1; min-width: 150px; }
.ajuste-wa.ok{ color: var(--verde-hondo); }
.ajuste-wa.warn{ color: var(--platano-txt); }

/* ============================ BOTONES GENERICOS ============================ */
.btn-primario{
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde); color: #fff; border: 1px solid var(--verde-hondo); border-radius: var(--r);
  padding: 11px 20px; font: inherit; font-family: var(--rotulo); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: .5px; cursor: pointer; box-shadow: var(--sombra-sm);
  transition: background .15s, transform .1s;
}
.btn-primario:hover{ background: var(--verde-hondo); transform: translateY(-1px); }
.btn-primario:active{ transform: scale(.99); }
.btn-secundario{
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde-suave); color: var(--verde-hondo); border: 1.5px solid var(--verde-linea);
  border-radius: var(--r); padding: 10px 17px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-secundario:hover{ background: #d5e9c9; }
.btn-secundario:active{ transform: scale(.99); }

/* ============================ TOASTS ============================ */
.toasts{ position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast{
  display: flex; align-items: center; gap: 9px;
  background: #2a2013; color: #fff8ea; border-radius: 999px; padding: 12px 20px 12px 16px;
  font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 26px rgba(42,32,19,.32);
  animation: toast-in .22s ease; max-width: 90vw;
}
.toast::before{
  content: ""; width: 20px; height: 20px; flex: 0 0 auto;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.toast.ok::before{ background: #57e08a; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") center/contain no-repeat; }
.toast.error::before{ background: var(--tomate); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 8v5M12 16.5v.5'/><circle cx='12' cy='12' r='9'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 8v5M12 16.5v.5'/><circle cx='12' cy='12' r='9'/></svg>") center/contain no-repeat; }
.toast.saliendo{ animation: toast-out .22s ease forwards; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(12px) } to{ opacity:1; transform: translateY(0) } }
@keyframes toast-out{ to{ opacity:0; transform: translateY(12px) } }

/* ============================ MODAL ============================ */
.modal{ position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(42,32,19,.5); backdrop-filter: blur(2px); }
.modal-card{ background: var(--papel); border-radius: var(--r-lg); border: 1px solid var(--linea); box-shadow: 0 24px 60px rgba(42,32,19,.4); padding: 24px; max-width: 400px; width: 100%; }
.modal-texto{ font-size: 16.5px; color: var(--tinta); line-height: 1.5; margin-bottom: 20px; }
.modal-acciones{ display: flex; gap: 10px; justify-content: flex-end; }
.btn-ghost{ background: none; color: var(--tinta-2); border: 1.5px solid var(--linea-2); border-radius: var(--r); padding: 10px 18px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .12s; }
.btn-ghost:hover{ background: var(--kraft-hondo); }
.btn-peligro{ background: var(--tomate); color: #fff; border: 1px solid var(--tomate-hondo); border-radius: var(--r); padding: 10px 18px; font: inherit; font-family: var(--rotulo); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; transition: background .15s; }
.btn-peligro:hover{ background: var(--tomate-hondo); }

/* ============================ LOGIN ============================ */
.login-pantalla{
  min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.4), transparent 42%),
    radial-gradient(circle at 85% 90%, rgba(47,125,62,.12), transparent 46%);
}
.login-caja{
  position: relative; width: 100%; max-width: 380px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg);
  box-shadow: var(--sombra); padding: 40px 32px 34px; text-align: center; overflow: hidden;
}
/* franja de toldo arriba de la tarjeta = firma tambien en el acceso */
.login-caja::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: repeating-linear-gradient(90deg, var(--verde) 0 22px, var(--platano) 22px 44px, var(--tomate) 44px 66px, var(--berenjena) 66px 88px);
}
.login-marca{ width: 60px; height: 60px; margin: 6px auto 14px; border-radius: 16px; background: linear-gradient(180deg, #2f7d3e, #256330); display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-sm); }
.login-marca svg{ width: 38px; height: 38px; }
.login-caja h1{ font-size: 32px; color: var(--tinta); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.login-sub{ font-size: 14.5px; color: var(--tinta-2); margin-bottom: 20px; line-height: 1.5; }
.login-caja input{
  width: 100%; font: inherit; font-size: 16px; color: var(--tinta);
  background: #fffdf6; border: 1.5px solid var(--linea-2); border-radius: var(--r-sm);
  padding: 13px 14px; margin-bottom: 11px;
}
.login-caja input:focus{ outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.login-caja button{
  width: 100%; margin-top: 6px; padding: 14px;
  background: var(--verde); color: #fff; border: 1px solid var(--verde-hondo); border-radius: var(--r);
  font: inherit; font-family: var(--rotulo); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .6px;
  cursor: pointer; box-shadow: var(--sombra-sm); transition: background .15s, transform .1s;
}
.login-caja button:hover{ background: var(--verde-hondo); transform: translateY(-1px); }
.login-caja button:active{ transform: scale(.99); }
.login-error{ margin-top: 12px; color: var(--tomate); font-size: 14px; font-weight: 600; background: var(--tomate-suave); border: 1px solid #e7bdb7; border-radius: var(--r-sm); padding: 9px 12px; }

/* ============================ DETALLE (legacy, no visible) ============================ */
.items-cabecera{ display: grid; grid-template-columns: 1fr 94px 94px; gap: 12px; padding: 0 6px 8px; font-family: var(--rotulo); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-2); }
.item-main{ display: flex; align-items: center; gap: 13px; flex: 1; padding: 8px 6px; cursor: pointer; }
.item-check{ width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linea-2); flex: 0 0 auto; }
.progreso-barra{ height: 10px; background: var(--kraft-hondo); border-radius: 999px; overflow: hidden; margin: 10px 0; }
.progreso-relleno{ height: 100%; background: linear-gradient(90deg, var(--verde), #4aa35d); border-radius: 999px; transition: width .3s; }
.progreso-texto{ font-size: 13px; color: var(--tinta-2); font-weight: 600; }

/* ============================ RESPONSIVE (movil) ============================ */
@media (max-width: 640px){
  .brand-name{ font-size: 22px; }
  .wa-text{ display: none; }               /* el chip se queda con el punto */
  .wa-chip{ padding: 8px 11px; }
  .contenedor{ padding: 18px 14px 50px; }
  h2, .ajustes-titulo{ font-size: 22px; }
  #lista-pedidos{ grid-template-columns: 1fr; }
  .item-editable{
    grid-template-columns: 1fr 1fr 40px;
    grid-template-areas: "nom nom nom" "cant uni quitar";
    gap: 8px;
  }
  .item-nombre{ grid-area: nom; }
  .item-cantidad{ grid-area: cant; }
  .item-unidad{ grid-area: uni; }
  /* Separado del campo de unidad: pegado, se pulsa sin querer al escribir. */
  .btn-quitar-item{ grid-area: quitar; justify-self: end; margin-left: 6px; }
  .factura-hoja{ padding: 18px 15px 22px; }
  .fac-cel, .fac-cant{ width: 84px; }
  .fac-tabla .col-check{ width: 42px; }
  .ajuste-fila{ flex-direction: column; align-items: stretch; }
  .ajuste-select, .btn-primario, .btn-secundario{ width: 100%; }
  .btn-confirmar, .btn-descartar{ width: 100%; margin: 0 0 10px; }
}

/* ============================ IMPRESION ============================ */
#print-area{ display: none; }
/* ===== Hoja del dia: varios negocios por hoja, estilo limpio ===== */
.dia-hoja{ background: var(--papel); border-radius: 6px; box-shadow: var(--sombra, 0 1px 3px rgba(0,0,0,.08)); padding: 22px 26px 26px; }
.dia-tabla{ width: 100%; border-collapse: collapse; }
.dia-bloque{ margin-bottom: 4px; }

/* Barra del negocio: banda con fondo propio, muy separada del bloque anterior,
   para que se lea sin dudas "aqui empieza otro negocio". El problema al quitar
   la rejilla era que el nombre quedaba pegado a la ultima fila del pedido de
   arriba y todo parecia un bloque continuo. */
.dia-jefe td{ border: none; padding: 30px 0 0; }
.dia-bloque:first-child .dia-jefe td{ padding-top: 0; }
.dia-barra{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--kraft); border-radius: 5px 5px 0 0; border-bottom: 2.5px solid var(--tinta); }
.dia-negocio{ font-family: var(--rotulo); font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--tinta); line-height: 1.05; }
.dia-num{ font-family: var(--rotulo); font-size: 13px; font-weight: 700; color: #fff; background: var(--tinta); border-radius: 999px; padding: 3px 12px; white-space: nowrap; letter-spacing: .02em; }

/* Cabecera de columnas: fina, discreta, sin caja */
.dia-cabfila th{ font-family: var(--rotulo); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); text-align: center; padding: 7px 10px 5px; border-bottom: 1px solid var(--linea-2); }
.dia-cabfila th.dia-prod{ text-align: left; }

/* Filas de producto: sin rejilla completa, solo separadores horizontales
   finos + rayado cebra para seguir el renglon al apuntar a mano al lado. */
.dia-prod{ font-weight: 600; font-size: 14px; color: var(--tinta); padding: 7px 10px; line-height: 1.3; border-bottom: 1px solid var(--linea); }
.dia-fila:nth-child(even) td{ background: rgba(120,90,50,.035); }
.dia-cel{ width: 84px; border-bottom: 1px solid var(--linea); border-left: 1px solid var(--linea); }
/* Las dos casillas para rellenar a mano, con un fondo apenas distinto que
   dice "escribe aqui" sin gritar. */
.dia-fila .dia-cel{ background: rgba(214,199,102,.06); }
.dia-fila:nth-child(even) .dia-cel{ background: rgba(214,199,102,.10); }

@media print{
  /* Al imprimir se oculta toda la interfaz y solo se ve #print-area, que lleva
     la hoja (factura individual o pedidos del dia). Sin esto, el navegador
     imprime tambien la pantalla: la lista de pedidos con sus botones salia como
     primera pagina. */
  .top, .contenedor, #toasts, #modal { display: none !important; }
  #print-area .dia-hoja{ border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; max-width: none; }
  .dia-barra{ border-bottom: 2.5px solid #000 !important; background: #e9dfc8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dia-negocio, .dia-prod{ color: #000 !important; }
  .dia-num{ color: #fff !important; background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dia-cabfila th{ color: #222 !important; border-bottom: 1px solid #000 !important; }
  .dia-prod, .dia-cel{ border-bottom: 1px solid #999 !important; }
  .dia-cel{ border-left: 1px solid #999 !important; }
  /* La cebra y el sombreado de casillas se fuerzan a imprimir: dan mucha
     legibilidad al seguir el renglon, pero el navegador los quita por defecto
     para ahorrar tinta. */
  .dia-fila:nth-child(even) td{ background: #f4f1ea !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dia-fila .dia-cel{ background: #faf6e8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dia-fila:nth-child(even) .dia-cel{ background: #f0ead6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Un negocio no se parte entre dos paginas; si no cabe, salta entero. */
  .dia-bloque{ break-inside: avoid; page-break-inside: avoid; }
  .dia-tabla tr{ break-inside: avoid; page-break-inside: avoid; }
}

@media print{
  #print-area{ display: block !important; }
  body{ background: #fff !important; }
  #print-area .factura-hoja{ border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 11mm 0; max-width: none; break-inside: avoid; page-break-inside: avoid; }
  #print-area .factura-hoja:last-child{ margin-bottom: 0; }
  .fac-cab{ border-bottom: 2px solid #000 !important; padding-bottom: 10px; }
  .fac-nombre, .fac-meta b, .fac-tabla td.fac-prod, .fac-cant{ color: #000 !important; }
  .fac-etq{ color: #444 !important; }
  .fac-tabla thead{ display: table-header-group; }
  .fac-tabla th{ background: #fff !important; color: #222 !important; border: 1px solid #000 !important; padding: 6px 8px; }
  .fac-tabla td{ border: 1px solid #000 !important; }
  .fac-tabla tr{ break-inside: avoid; page-break-inside: avoid; }
  @page{ margin: 12mm; }
}

/* ============================ ACCESIBILIDAD ============================ */
:focus-visible{ outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Selector de fecha: saltar a cualquier dia (nav) y cambiar de
   dia un pedido (tarjeta / revision)
   ============================================================ */
.calendario-wrap{ position: relative; display: inline-flex; }
/* El input de fecha queda oculto pero presente (para poder abrir el calendario
   nativo con showPicker); NO intercepta clics: el que manda es el boton. */
.calendario-input{
  position: absolute; left: 8px; bottom: 2px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}

.btn-calendario{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--papel); color: var(--tinta-2); border: 1.5px solid var(--linea-2);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.btn-calendario:hover{ background: #fff; border-color: var(--verde); color: var(--verde-hondo); }

/* Fila inferior de la tarjeta: boton "Dia" + etiqueta de estado */
.pedido-acciones{ display: flex; align-items: center; gap: 10px; padding: 0 18px 15px 22px; }
.pedido-acciones .estado-toggle{ margin: 0; align-self: center; }

.btn-dia{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--rotulo); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--tinta-2); border: 1.5px solid var(--linea-2);
  transition: background .12s, border-color .12s, color .12s;
}
.btn-dia svg{ flex: 0 0 auto; }
.btn-dia:hover{ background: var(--verde-suave); border-color: var(--verde); color: var(--verde-hondo); }

/* Selector "para que dia" en la revision */
.campo-dia{ max-width: 260px; }
.input-dia-revision{
  font: inherit; font-size: 15px; color: var(--tinta);
  background: #fffdf6; border: 1.5px solid var(--linea-2); border-radius: var(--r-sm);
  padding: 10px 12px; width: 100%;
}
.input-dia-revision:focus{ outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }

/* ============================================================
   Agenda "Proximos dias"
   ============================================================ */
.btn-proximos{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px; margin-bottom: 22px;
  font: inherit; font-family: var(--rotulo); font-weight: 700; font-size: 17px;
  text-transform: uppercase; letter-spacing: .5px;
  background: var(--papel); color: var(--tinta); border: 1.5px solid var(--linea-2);
  border-radius: var(--r); cursor: pointer;
  transition: transform .1s, border-color .12s, background .15s;
}
.btn-proximos svg{ color: var(--berenjena); }
.btn-proximos:hover{ background: #fff; border-color: var(--berenjena); transform: translateY(-1px); }

.dia-grupo{ margin-bottom: 26px; }
.dia-grupo-titulo{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; padding: 4px 2px 10px;
  border-bottom: 2px solid var(--linea); margin-bottom: 14px;
}
.dia-grupo-nombre{
  font-family: var(--rotulo); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--tinta);
}
.dia-grupo-titulo:hover .dia-grupo-nombre{ color: var(--verde-hondo); }
.dia-grupo-count{ font-size: 14px; font-weight: 700; color: var(--tinta-2); white-space: nowrap; }
.dia-grupo-lista{ display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }

/* Boton de eliminar pedido (en la tarjeta) */
.pedido-acciones .btn-eliminar{
  margin-left: auto; width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--tinta-2); border: 1.5px solid var(--linea-2);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.pedido-acciones .btn-eliminar:hover{ background: var(--tomate-suave); color: var(--tomate); border-color: #e0b0aa; }
.pedido-acciones .btn-eliminar:active{ transform: scale(.92); }