/* Caja Kbrera — verde como la app actual, botones grandes para la calle */

:root {
  --verde: #14803c;
  --verde-oscuro: #0e5c2b;
  --verde-claro: #e3f2e8;
  --fondo: #f2f7f3;
  --texto: #1c2b21;
  --gris: #6b7a70;
  --rojo: #c0392b;
  --ambar: #b7791f;
  --ambar-fondo: #fdf3d7;
  --azul: #2568b0;
  --azul-oscuro: #1c4f88;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 17px;
}

.oculto { display: none !important; }

.vista { min-height: 100vh; min-height: 100dvh; }

/* ============ LOGIN ============ */
#vista-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, var(--verde-claro) 0%, var(--fondo) 60%);
}

.login-caja {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 4px 20px rgba(20, 128, 60, 0.15);
  text-align: center;
}

.login-logo { max-width: 220px; width: 80%; margin-bottom: 8px; }

.login-caja h1 { color: var(--verde-oscuro); font-size: 26px; margin-bottom: 24px; }

.login-caja form { text-align: left; }

/* ============ CAMPOS Y BOTONES (grandes, para una mano) ============ */
label { display: block; font-weight: 600; margin: 14px 0 6px; color: var(--verde-oscuro); }

.obligatorio { color: var(--rojo); font-weight: 700; font-size: 15px; }

/* Campo extra para clientes de mostrador: resalta que hay que llenarlo */
#e-mostrador-caja:not(.oculto),
#cp-mostrador-caja:not(.oculto) {
  background: var(--ambar-fondo);
  border: 2px dashed var(--ambar);
  border-radius: 12px;
  padding: 8px 12px 14px;
  margin-top: 10px;
}

input, select, textarea {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  font-size: 19px;
  border: 2px solid #cfe0d5;
  border-radius: 12px;
  background: #fff;
  color: var(--texto);
}

textarea { min-height: 72px; }

/* Campo que la app llena sola (no editable a mano) */
.campo-automatico {
  background: #eef4f0;
  border-style: dashed;
  color: var(--verde-oscuro);
  font-weight: 700;
  pointer-events: none;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--verde);
}

.btn-grande {
  width: 100%;
  min-height: 60px;
  font-size: 20px;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  margin-top: 22px;
  cursor: pointer;
}

.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:active { background: var(--verde-oscuro); }

.btn-texto {
  background: none;
  border: none;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px;
}

.mensaje-error {
  margin-top: 16px;
  color: var(--rojo);
  font-weight: 600;
}

/* ============ BARRA SUPERIOR ============ */
.barra-superior {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--verde);
  color: #fff;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  font-size: 18px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.barra-superior span { flex: 1; }

.logo-mini { height: 34px; background: #fff; border-radius: 8px; padding: 3px 6px; }

/* ============ AVISOS OFFLINE / PENDIENTES ============ */
.barra-offline {
  background: #34495e;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 15px;
}

.barra-pendientes {
  background: var(--ambar-fondo);
  color: var(--ambar);
  text-align: center;
  padding: 10px;
  font-weight: 700;
  font-size: 15px;
}

/* ============ PESTAÑAS ============ */
.pestanas { display: flex; background: #fff; border-bottom: 2px solid #dfe9e2; }

.pestana {
  flex: 1;
  min-height: 56px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  background: none;
  color: var(--gris);
  cursor: pointer;
  border-bottom: 4px solid transparent;
}

.pestana.activa { color: var(--verde-oscuro); border-bottom-color: var(--verde); }

.badge {
  display: inline-block;
  background: var(--rojo);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  padding: 0 5px;
  margin-left: 4px;
}

/* ============ LISTAS ============ */
main { padding: 12px; padding-bottom: 110px; max-width: 720px; margin: 0 auto; }

.lista { list-style: none; }

.tarjeta {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border-left: 6px solid var(--verde);
}

.tarjeta .fila1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
}

.tarjeta .monto { color: var(--verde-oscuro); white-space: nowrap; font-size: 20px; }

.tarjeta .detalle { color: var(--gris); font-size: 15px; margin-top: 4px; }

.tarjeta.pendiente { border-left-color: var(--ambar); background: var(--ambar-fondo); }
.tarjeta.pendiente .estado-pendiente { color: var(--ambar); font-weight: 700; font-size: 14px; }

/* Monto que no cuadra con Dolibarr (pago parcial o de más): acento ámbar, solo señal */
.tarjeta.monto-alerta { border-left-color: var(--ambar); background: var(--ambar-fondo); }

/* Marca "Devuelta" en la tarjeta de una entrada devuelta */
.devuelta-marca {
  margin-top: 8px; color: var(--azul-oscuro); font-weight: 700; font-size: 14px;
  background: #eaf1fa; border-radius: 8px; padding: 6px 10px;
}

/* Ventanita de la pregunta Cancelar / Devolución */
.overlay-accion {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-accion {
  background: #fff; border-radius: 14px; padding: 20px; max-width: 440px; width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.modal-accion h3 { margin: 0 0 4px; }
.modal-accion .sub-accion { color: var(--gris); margin-bottom: 16px; font-size: 15px; }
.modal-accion .nota-accion { color: var(--gris); font-size: 13px; margin: 6px 2px 14px; }

.tarjeta.cancelada { border-left-color: var(--rojo); opacity: 0.75; }
.tarjeta.cancelada .fila1 { text-decoration: line-through; }
.tarjeta.cancelada .motivo { color: var(--rojo); font-size: 14px; margin-top: 4px; }

/* Color del pedido según su estado (borde izquierdo), para distinguir de un vistazo */
.tarjeta.ped-pendiente { border-left-color: var(--ambar); }
.tarjeta.ped-cobrado { border-left-color: var(--verde); }
.tarjeta.ped-credito { border-left-color: var(--azul); }
.tarjeta.ped-no_entregado { border-left-color: var(--rojo); opacity: 0.85; }

/* Menú "Repartidor" (solo admin) */
#filtro-repartidor-caja { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#filtro-repartidor-caja label { font-weight: 700; color: var(--texto); font-size: 15px; }
#filtro-repartidor { flex: 1; }

/* Botón y letrero del modo "Ver todos" (solo admin) */
#btn-ver-todos-pedidos { margin-bottom: 10px; }
.letrero-admin {
  background: var(--ambar-fondo);
  color: var(--ambar);
  border: 1px solid var(--ambar);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 14px;
}

.btn-cancelar-reg {
  margin-top: 10px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rojo);
  background: none;
  border: 2px solid var(--rojo);
  border-radius: 10px;
  cursor: pointer;
}

.lista-vacia { text-align: center; color: var(--gris); margin-top: 48px; line-height: 1.6; }

.subtitulo-cortes { color: var(--verde-oscuro); margin: 20px 0 10px; font-size: 18px; }

.btn-chico {
  margin: 10px 8px 0 0;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--verde-oscuro);
  background: var(--verde-claro);
  border: 2px solid var(--verde);
  border-radius: 10px;
  cursor: pointer;
}

/* ============ BOTÓN FLOTANTE + ============ */
.fab {
  position: fixed;
  right: 20px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 40px;
  line-height: 1;
  border: none;
  box-shadow: 0 4px 14px rgba(14, 92, 43, 0.45);
  cursor: pointer;
  z-index: 20;
}
.fab:active { background: var(--verde-oscuro); }

/* ============ FORMULARIOS ============ */
.formulario { padding: 16px; max-width: 560px; margin: 0 auto; padding-bottom: 48px; }

.campo-folio { display: flex; align-items: center; gap: 8px; }
.campo-folio .prefijo {
  font-size: 22px;
  font-weight: 800;
  color: var(--verde-oscuro);
  background: var(--verde-claro);
  border-radius: 12px;
  padding: 13px 16px;
}
.campo-folio input { flex: 1; }

.nota-dolibarr {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
}
.nota-dolibarr.ok { background: var(--verde-claro); color: var(--verde-oscuro); }
.nota-dolibarr.aviso { background: var(--ambar-fondo); color: var(--ambar); }

.buscar-fila { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.buscar-fila input { flex: 1; min-height: 48px; }
.buscar-fila .btn-chico { margin: 0; white-space: nowrap; }

.modal-prefill {
  background: var(--verde-claro);
  color: var(--verde-oscuro);
  font-weight: 700;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.resultado-dolibarr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid #dfe9e2;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

/* ============ PEDIDOS: nota, contacto y productos ============ */
.nota-pedido {
  background: var(--ambar-fondo);
  color: var(--ambar);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-top: 8px;
}

.contacto-pedido { margin-top: 8px; }

.btn-llamar { display: inline-block; text-decoration: none; }

.productos-lista {
  margin-top: 8px;
  border-top: 2px solid var(--verde-claro);
  padding-top: 4px;
}

.producto-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eef4f0;
  font-size: 15px;
}

.producto-desc { flex: 1; line-height: 1.35; }

.producto-importe {
  white-space: nowrap;
  font-weight: 700;
  color: var(--verde-oscuro);
}

/* ============ REPORTE GLOBAL ============ */
.caja-reporte { margin-bottom: 16px; }

.fila-reporte {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid #eef4f0;
  font-size: 17px;
}

.fila-reporte small { color: var(--gris); font-weight: 400; }

.fila-reporte.total { font-weight: 800; color: var(--verde-oscuro); border-top: 2px solid #dfe9e2; }

.fila-reporte.apagada { color: var(--gris); }

.fila-reporte.egresos { color: var(--rojo); font-weight: 600; }

.fila-reporte.disponible {
  background: var(--verde-claro);
  border-radius: 10px;
  padding: 12px 10px;
  margin-top: 8px;
  font-weight: 800;
  font-size: 18px;
  color: var(--verde-oscuro);
  border-bottom: none;
}

/* ============ MODAL DE CORTE ============ */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-caja {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.modal-caja h2 { color: var(--verde-oscuro); margin-bottom: 12px; font-size: 22px; }

.modal-caja p { font-size: 17px; line-height: 1.5; }

.modal-alerta {
  margin-top: 12px;
  background: var(--ambar-fondo);
  color: var(--ambar);
  font-weight: 700;
  padding: 12px;
  border-radius: 10px;
}

.btn-rojo { background: var(--rojo); color: #fff; }
.btn-rojo:active { background: #922b21; }

.btn-neutro { background: #e8ede9; color: var(--texto); }

.btn-azul { background: var(--azul); color: #fff; margin-top: 10px; }
.btn-azul:active { background: var(--azul-oscuro); }

/* ============ AVISO FLOTANTE ============ */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(110px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 50;
  max-width: 90%;
  text-align: center;
}

/* ============ ESCRITORIO ============ */
@media (min-width: 768px) {
  .fab { right: calc(50% - 360px + 20px); }
}

/* ---- Entrar con Google (pantalla de entrada) ---- */
.login-texto {
  color: var(--gris);
  font-size: 15px;
  margin: 4px 0 18px;
  line-height: 1.4;
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  text-decoration: none;
  font-weight: 600;
}
.btn-google:active { background: #f1f3f4; }
.google-logo { width: 22px; height: 22px; }

/* ---- Pantalla de Usuarios (admin) ---- */
.ayuda {
  color: var(--gris);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 12px;
}