/* ABASSTO CUADRE — identidad visual según Manual de Marca Abassto (2017)
   Paleta: verde #0d7d40 / #3e9850 · naranja #da9500 / #dbae4f · vinotinto #7d2525
   Móvil primero: la usuaria principal trabaja desde el celular. */
:root {
  --verde: #0d7d40;
  --verde-claro: #3e9850;
  --verde-osc: #085c2e;
  --naranja: #da9500;
  --naranja-osc: #b87e00;
  --vino: #7d2525;
  --crema: #f7f5ef;
  --tinta: #26302a;
  --gris: #6f7a72;
  --borde: #dfe5dd;
  --tarjeta: #ffffff;
  --rojo: #b3372f;
  --rojo-suave: #fbeceb;
  --verde-suave: #e9f3eb;
  --naranja-suave: #fdf3dd;
}
* { box-sizing: border-box; }
/* todo lo que se digita queda EN MAYÚSCULAS — consistencia en toda la app */
input[type="text"] { text-transform: uppercase; }
body {
  margin: 0; background: var(--crema); color: var(--tinta);
  font-family: "Century Gothic", CenturyGothic, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
}
main { max-width: 1000px; margin: 0 auto; padding: 16px 14px 70px; }
footer { text-align: center; color: var(--gris); font-size: 12px; padding: 18px; }

/* ---------- barra superior ---------- */
.barra {
  background: var(--verde); color: #fff; display: flex; align-items: center;
  justify-content: space-between; padding: 8px 14px; gap: 8px; flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(8,92,46,.25);
}
.barra .logo { display: flex; align-items: center; gap: 10px; }
.barra .logo img { height: 38px; display: block; }
.barra .app-nombre {
  font-weight: 700; letter-spacing: 2px; font-size: 12px; text-transform: uppercase;
  color: #eaf5ec; border-left: 1px solid rgba(255,255,255,.4); padding-left: 10px;
}
.usuario { display: flex; align-items: center; gap: 8px; }
.chip-demo {
  background: var(--naranja); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .5px;
}
.usuario select {
  border: none; border-radius: 999px; padding: 6px 10px; font-family: inherit;
  font-weight: 700; font-size: 13px; color: var(--verde-osc); background: #fff;
}
.usuario input[type="date"] {
  border: none; border-radius: 999px; padding: 6px 10px; font-family: inherit;
  font-weight: 700; font-size: 13px; color: var(--verde-osc); background: #fff;
}
.chip-usuario { font-weight: 700; font-size: 13.5px; color: #eaf5ec; }
.btn-icono {
  border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 16px;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
}
.btn-icono:hover { background: rgba(255,255,255,.3); }
.menu-usuario {
  position: absolute; right: 12px; top: 54px; z-index: 40; background: #fff;
  border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.15);
  display: flex; flex-direction: column; min-width: 190px; overflow: hidden;
}
.menu-usuario button {
  border: none; background: none; font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--tinta); padding: 12px 16px; text-align: left; cursor: pointer;
}
.menu-usuario button:hover { background: var(--crema); }
.aviso-fecha {
  background: var(--naranja-suave); border-bottom: 1.5px solid var(--naranja);
  color: var(--naranja-osc); font-size: 13.5px; font-weight: 600;
  padding: 8px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.veredicto.pendiente-v { background: var(--naranja-suave); border: 2px solid var(--naranja); }
.veredicto.pendiente-v .titulo { color: var(--naranja-osc); }
.fila-conteo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fila-conteo label { font-size: 11.5px; font-weight: 700; color: var(--gris); display: block; margin-bottom: 3px; }
.fila-conteo input {
  width: 100%; padding: 8px 10px; border: 1.5px solid var(--borde); border-radius: 8px;
  font-family: inherit; font-size: 14px; box-sizing: border-box;
}

/* ---------- asistente paso a paso ---------- */
.barra-avance {
  position: relative; background: #e6e9e4; border-radius: 999px; height: 30px;
  margin: 12px 0 18px; overflow: hidden;
}
.barra-avance-relleno {
  height: 100%; background: linear-gradient(90deg, var(--verde-claro), var(--verde));
  border-radius: 999px; transition: width .4s ease;
}
.barra-avance-texto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: var(--tinta);
}
.nota-guardado {
  color: var(--gris); font-size: 12.5px; margin: -8px 0 14px; text-align: center;
}
.paso {
  display: flex; gap: 14px; background: #fff; border: 1px solid var(--borde);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
}
.paso-num {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; background: var(--crema); color: var(--gris);
  border: 2px solid var(--borde);
}
.paso.hecho { border-left: 4px solid var(--verde); }
.paso.hecho .paso-num { background: var(--verde); border-color: var(--verde); color: #fff; }
.paso.pendiente { border-left: 4px solid var(--naranja); background: #fffdf7; }
.paso.pendiente .paso-num { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.paso.opcional { opacity: .8; }
.paso.bloqueado { opacity: .55; }
.paso-cuerpo { flex: 1; min-width: 0; }
.paso-titulo { font-weight: 700; font-size: 15px; }
.paso-detalle { color: var(--gris); font-size: 13px; margin-top: 3px; }
.btn.naranja-b { background: var(--naranja); }
.btn.naranja-b:hover { background: var(--naranja-osc); }

/* ---------- borrar registros / zona de peligro ---------- */
.btn-borrar {
  border: none; background: none; cursor: pointer; font-size: 15px; opacity: .45;
  padding: 4px 6px; border-radius: 8px; flex-shrink: 0;
}
.btn-verificar {
  border: none; background: none; cursor: pointer; font-size: 18px; opacity: .5;
  padding: 4px 6px; border-radius: 8px; flex-shrink: 0; color: var(--gris);
}
.btn-verificar:hover { opacity: 1; background: var(--verde-suave); }
.btn-verificar.si { opacity: 1; color: var(--verde); }
.btn-borrar:hover { opacity: 1; background: var(--rojo-suave); }
.btn.rojo { background: var(--rojo); }
.btn.rojo:hover { background: #8f2a24; }
.zona-peligro {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border: 1.5px dashed var(--rojo); border-radius: 12px; padding: 10px 14px; margin-top: 18px;
  color: var(--rojo); font-size: 13px; font-weight: 600; background: var(--rojo-suave);
}
.fecha-destino { color: var(--vino); text-transform: capitalize; }

/* ---------- pestaña clientes ---------- */
.busca-simple {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--borde); border-radius: 12px;
  font-family: inherit; font-size: 15px; box-sizing: border-box; margin-bottom: 10px; background: #fff;
}
.busca-simple:focus { outline: none; border-color: var(--verde-claro); }
.dup-par { border-top: 1px dashed var(--borde); padding: 10px 0; font-size: 14px; }

/* ---------- buscador de clientes ---------- */
.resultados-cliente { margin-top: 4px; }
.res-cliente {
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; margin-top: 4px;
  cursor: pointer; background: #fff; font-weight: 700; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.res-cliente:hover { border-color: var(--verde-claro); background: var(--verde-suave); }
.res-saldo { color: var(--gris); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.res-crear { border-style: dashed; border-color: var(--verde-claro); color: var(--verde-osc); }
.res-nota { font-size: 12px; color: var(--naranja-osc); font-weight: 700; margin-top: 8px; }
.res-elegido {
  margin-top: 6px; background: var(--verde-suave); border: 1.5px solid var(--verde);
  border-radius: 10px; padding: 10px 12px; font-weight: 700; color: var(--verde-osc); font-size: 14px;
}

/* ---------- impresión / PDF ---------- */
.solo-impresion { display: none; }
@media print {
  header.barra, .pestanas, main, footer, .aviso, .aviso-fecha, .menu-usuario, .modal { display: none !important; }
  .solo-impresion { display: block !important; }
  body { background: #fff; }
}
.imp-encabezado { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--verde); padding-bottom: 10px; margin-bottom: 14px; }
.imp-encabezado img { height: 48px; }
.imp-titulo { font-size: 22px; font-weight: 700; color: var(--verde-osc); }
.imp-fecha { color: var(--gris); font-size: 13px; text-transform: capitalize; }
.imp-veredicto { font-size: 16px; font-weight: 700; margin: 10px 0 14px; }
.imp-cols { display: flex; gap: 20px; }
.imp-cols .imp-tabla { flex: 1; }
.imp-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 14px; }
.imp-tabla th { text-align: left; background: #eee; padding: 6px 8px; border: 1px solid #ccc; }
.imp-tabla td { padding: 5px 8px; border: 1px solid #ddd; }
.imp-tabla td:last-child { text-align: right; white-space: nowrap; }
.imp-tabla tr.imp-total td { font-weight: 700; border-top: 2px solid #333; }
.imp-pie { color: #999; font-size: 11px; margin-top: 16px; text-align: center; }

/* ---------- pestañas ---------- */
.pestanas {
  display: flex; gap: 4px; background: #fff; border-bottom: 1px solid var(--borde);
  padding: 6px 10px 0; position: sticky; top: 0; z-index: 20; overflow-x: auto;
}
.pestanas button {
  border: none; background: none; font-family: inherit; font-weight: 700; font-size: 14px;
  color: var(--gris); padding: 10px 14px; cursor: pointer; border-bottom: 3px solid transparent;
  white-space: nowrap; position: relative;
}
.pestanas button.activa { color: var(--verde-osc); border-bottom-color: var(--naranja); }
.badge {
  position: absolute; top: 2px; right: 0; background: var(--rojo); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 6px; min-width: 16px;
}
.badge:empty { display: none; }

/* ---------- vistas ---------- */
.vista.oculta, .oculta { display: none; }
h1 { font-size: 22px; margin: 12px 0 4px; color: var(--verde-osc); }
h2 { font-size: 17px; margin: 20px 0 8px; color: var(--verde-osc); }
h3 { font-size: 15px; margin: 0 0 6px; color: var(--verde-osc); }
.sub { color: var(--gris); margin: 0 0 14px; font-size: 13.5px; }

/* ---------- tarjetas ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; }
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 1px 4px rgba(13,125,64,.08);
  border-top: 4px solid var(--verde);
}
.tarjeta.importar { border-top-color: var(--naranja); }
.tarjeta .cifra { font-size: 22px; font-weight: 700; color: var(--tinta); margin: 2px 0; }
.tarjeta .meta { color: var(--gris); font-size: 12.5px; margin: 2px 0 8px; }
.estado-ok { color: var(--verde-osc); font-size: 13px; font-weight: 700; margin: 6px 0; }
.estado-alerta { color: var(--naranja-osc); font-size: 13px; font-weight: 700; margin: 6px 0; }

/* ---------- botones ---------- */
.btn {
  display: inline-block; background: var(--naranja); color: #fff; border: none;
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.btn:hover { background: var(--naranja-osc); }
.btn.sec { background: #fff; color: var(--verde-osc); border: 1.5px solid var(--borde); }
.btn.sec:hover { background: var(--crema); border-color: var(--verde-claro); }
.btn.verde { background: var(--verde); }
.btn.verde:hover { background: var(--verde-osc); }
.btn.chico { padding: 5px 12px; font-size: 13px; }

#accionesRapidas h2 { margin: 24px 0 10px; }
#accionesRapidas h2:first-child { margin-top: 14px; }
.fila-acciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.titulo-resumen { margin: 30px 0 10px; }
.titulo-resumen:empty { display: none; }
.btn-grande {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--verde); color: #fff; border: none; border-radius: 16px;
  padding: 26px 14px; cursor: pointer; font-family: inherit;
  box-shadow: 0 3px 10px rgba(8, 92, 46, .22);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-grande:hover { background: var(--verde-osc); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(8, 92, 46, .3); }
.btn-grande:active { transform: translateY(0); }
.btn-grande.naranja { background: var(--naranja); box-shadow: 0 3px 10px rgba(184, 126, 0, .25); }
.btn-grande.naranja:hover { background: var(--naranja-osc); box-shadow: 0 6px 16px rgba(184, 126, 0, .33); }
.btn-grande.vino { background: var(--vino); box-shadow: 0 3px 10px rgba(125, 37, 37, .28); }
.btn-grande.vino:hover { background: var(--vino-osc, #64221e); box-shadow: 0 6px 16px rgba(125, 37, 37, .36); }
.btn-grande .bg-icono { font-size: 34px; line-height: 1; }
.btn-grande .bg-texto { font-weight: 700; font-size: 15px; line-height: 1.25; text-align: center; }
.btn-grande .bg-nota { font-size: 11.5px; font-weight: 600; opacity: .85; }
@media (max-width: 560px) {
  .fila-acciones { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .btn-grande { padding: 20px 10px; }
  .btn-grande .bg-icono { font-size: 30px; }
  .btn-grande .bg-texto { font-size: 13.5px; }
}

/* ---------- filtros ---------- */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.filtro {
  border: 1.5px solid var(--borde); background: #fff; color: var(--gris); font-family: inherit;
  font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.filtro.activa { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ---------- lista de transferencias ---------- */
.mov {
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px;
}
.mov .icono { font-size: 20px; width: 30px; text-align: center; flex-shrink: 0; }
.mov .cuerpo { flex: 1; min-width: 0; }
.mov .remitente { font-weight: 700; font-size: 14px; }
.mov .detalle { color: var(--gris); font-size: 12.5px; margin-top: 2px; }
.mov .detalle.sugerencia { color: var(--naranja-osc); font-weight: 700; }
.mov .valor { font-weight: 700; font-size: 15px; text-align: right; white-space: nowrap; }
.mov .valor.negativo { color: var(--rojo); }
.mov .valor.positivo { color: var(--verde-osc); }
.mov.pendiente { border-left: 4px solid var(--naranja); background: var(--naranja-suave); }
/* transferencia verificada contra el banco: verde pastel de la marca */
.mov.fila-verificada { background: var(--verde-suave); border-left: 4px solid var(--verde-claro); }
.mov .chip {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; margin-top: 4px;
}
.chip.recaudo { background: var(--verde-suave); color: var(--verde-osc); }
.chip.domicilio { background: #e8f0fb; color: #2a5395; }
.chip.mostrador { background: #f3e9fb; color: #6b3f95; }
.chip.gasto { background: var(--rojo-suave); color: var(--rojo); }
.chip.banco { background: #eee; color: var(--gris); }
.chip.pend { background: var(--naranja); color: #fff; }

/* ---------- cartera ---------- */
.cliente-fila {
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px;
}
.cliente-fila .nombre { font-weight: 700; flex: 1; }
.cliente-fila .dias { font-size: 12px; color: var(--gris); }
.cliente-fila .dias.vencido { color: var(--rojo); font-weight: 700; }
.cliente-fila .saldo { font-weight: 700; white-space: nowrap; }
.cliente-fila .saldo.debe { color: var(--rojo); }
.cliente-fila .saldo.cero { color: var(--verde); }
.texto-debe { color: var(--rojo); }
.texto-aldia { color: var(--verde); }

/* bitácora del cliente */
.bitacora-lista { max-height: 55vh; overflow-y: auto; margin-top: 8px; }
.bitacora-mov {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px dashed var(--borde); font-size: 13.5px;
}
.bitacora-fecha { color: var(--gris); font-size: 12px; white-space: nowrap; width: 78px; flex-shrink: 0; }
.bitacora-detalle { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bitacora-detalle span { color: var(--gris); font-size: 12px; }
.bitacora-valor { font-weight: 700; white-space: nowrap; }
.bitacora-mov.credito { background: #fff8f8; }
.cliente-fila .ultimo { font-size: 12px; color: var(--gris); width: 100%; }
.cliente-fila { flex-wrap: wrap; }

/* ---------- gastos ---------- */
.grupo-caja { margin-bottom: 18px; }
.grupo-caja .total-caja { font-weight: 700; color: var(--vino); }

/* ---------- cuadre ---------- */
.veredicto {
  border-radius: 14px; padding: 18px 20px; margin: 10px 0 16px; text-align: center;
}
.veredicto.ok { background: var(--verde-suave); border: 2px solid var(--verde); }
.veredicto.mal { background: var(--rojo-suave); border: 2px solid var(--rojo); }
.veredicto .titulo { font-size: 20px; font-weight: 700; color: var(--verde-osc); }
.veredicto.mal .titulo { color: var(--rojo); }
.veredicto .dif { font-size: 14px; color: var(--gris); margin-top: 4px; }
.cuadre-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.tabla-cuadre { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-cuadre td { padding: 6px 4px; border-bottom: 1px dashed var(--borde); }
.tabla-cuadre td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.tabla-cuadre tr.resta td { color: var(--rojo); }
.tabla-cuadre tr.total td { border-top: 2px solid var(--tinta); border-bottom: none; font-size: 16px; padding-top: 9px; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(38,48,42,.55); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-caja { background: #fff; border-radius: 16px; padding: 20px; max-width: 420px; width: 100%; }
.modal-opciones { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.modal.oculta { display: none; }

/* formularios de registro */
.form-campos { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.form-campos label { font-size: 12.5px; font-weight: 700; color: var(--gris); display: block; margin-bottom: 3px; }
.form-campos input, .form-campos select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: 10px;
  font-family: inherit; font-size: 15px; background: #fff; color: var(--tinta);
}
.form-campos input:focus, .form-campos select:focus { outline: none; border-color: var(--verde-claro); }
.mov.nuevo { border-left: 4px solid var(--verde); background: var(--verde-suave); }

/* ---------- aviso flotante ---------- */
.aviso {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 13.5px; max-width: 90%; z-index: 60; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.aviso.oculta { display: none; }

@media (max-width: 560px) {
  .barra .app-nombre { display: none; }
  .tarjeta .cifra { font-size: 19px; }
}