/* ============================================================
   LUPITA — Estilos globales
   Design System v2 — Paleta paja + naranja
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  /* Brand — del logo */
  --lupita-naranja:        #F08535;
  --lupita-naranja-dark:   #D97020;
  --lupita-naranja-light:  #FDE9D5;
  --lupita-azul:           #5BB3E8;
  --lupita-azul-dark:      #3D9BD4;
  --lupita-azul-light:     #DCEEFA;

  /* Acento — de las frases motivacionales */
  --lupita-coral:          #D4694A;
  --lupita-coral-light:    #FAE3DC;

  /* Fondos paja / straw */
  --lupita-paja:           #EDE8D8;
  --lupita-paja-dark:      #E0D9C5;
  --lupita-paja-light:     #F8F4EA;
  --lupita-white:          #FFFFFF;

  /* Semáforo / estado funcional — sin cambios */
  --lupita-verde:          #2ECC71;
  --lupita-verde-oscuro:   #27AE60;
  --lupita-verde-light:    #D5F5E3;
  --lupita-rojo:           #E74C3C;
  --lupita-rojo-light:     #FDECEA;
  --lupita-amarillo:       #F39C12;
  --lupita-amarillo-light: #FEF3CD;

  /* Texto */
  --lupita-texto:          #2C3E50;
  --lupita-texto-suave:    #7F8C8D;
  --lupita-texto-claro:    #B2BABB;

  /* Neutros */
  --lupita-gris:           #ECF0F1;
  --lupita-gris-borde:     #D5D8DC;

  /* ─── SEMÁNTICOS ─────────────────────────────────────────── */
  --color-bg:              var(--lupita-paja);
  --color-bg-card:         var(--lupita-paja-light);
  --color-bg-surface:      var(--lupita-white);
  --color-border:          var(--lupita-paja-dark);

  --color-primary:         var(--lupita-naranja);
  --color-primary-hover:   var(--lupita-naranja-dark);
  --color-primary-tint:    var(--lupita-naranja-light);

  --color-secondary:       var(--lupita-azul);
  --color-secondary-hover: var(--lupita-azul-dark);
  --color-secondary-tint:  var(--lupita-azul-light);

  --color-accent:          var(--lupita-coral);
  --color-accent-tint:     var(--lupita-coral-light);

  --color-success:         var(--lupita-verde);
  --color-success-tint:    var(--lupita-verde-light);
  --color-danger:          var(--lupita-rojo);
  --color-danger-tint:     var(--lupita-rojo-light);
  --color-warning:         var(--lupita-amarillo);
  --color-warning-tint:    var(--lupita-amarillo-light);

  --color-fg1:             var(--lupita-texto);
  --color-fg2:             var(--lupita-texto-suave);
  --color-fg3:             var(--lupita-texto-claro);

  /* ─── TIPOGRAFÍA ─────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito', system-ui, sans-serif;

  --font-size-xs:   0.72rem;
  --font-size-sm:   0.85rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   1.375rem;
  --font-size-xl:   1.75rem;
  --font-size-2xl:  2.25rem;

  /* ─── RADIOS ─────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ─── SOMBRAS ────────────────────────────────────────────── */
  --shadow-xs:      0 1px 3px  rgba(0,0,0,0.06);
  --shadow-sm:      0 2px 8px  rgba(0,0,0,0.07);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.10);
  --shadow-primary: 0 4px 16px rgba(240,133,53,0.35);
  --shadow-verde:   0 4px 16px rgba(46,204,113,0.35);

  /* ─── TRANSICIONES ───────────────────────────────────────── */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.25s ease;
  --transition-slow: all 0.4s ease;

  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --max-width-app:     480px;
  --navbar-height:     60px;
  --bottom-nav-height: 64px;
}

/* ─── BASE ───────────────────────────────────────────────── */
* { font-family: var(--font-body); }

body {
  background-color: var(--lupita-paja);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 27px,
    var(--lupita-paja-dark) 27px,
    var(--lupita-paja-dark) 28px
  );
  color: var(--lupita-texto);
  min-height: 100vh;
}

/* ─── FONDO PAJA CON LÍNEAS (utility reutilizable) ───────── */
.bg-paja-lines {
  background-color: var(--lupita-paja);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 27px,
    var(--lupita-paja-dark) 27px,
    var(--lupita-paja-dark) 28px
  );
}

/* ─── TIPOGRAFÍA DISPLAY ─────────────────────────────────── */
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-fg1);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-fg1);
}
.t-h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-fg1);
}
.t-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg2);
}
.t-body    { font-size: var(--font-size-base); line-height: 1.6; color: var(--color-fg1); }
.t-body-sm { font-size: var(--font-size-sm);   line-height: 1.6; color: var(--color-fg2); }
.t-monto {
  font-family: var(--font-body);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--color-fg1);
}
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--font-size-xl);
  line-height: 1.8;
  color: var(--color-accent);
}

/* ─── UTILIDADES ─────────────────────────────────────────── */
.fw-600          { font-weight: 600; }
.fw-800          { font-weight: 800; }
.letter-spacing-1 { letter-spacing: 0.08em; }

/* ─── BOTÓN PRIMARIO (naranja) ───────────────────────────── */
.btn-lupita {
  background-color: var(--lupita-naranja);
  border-color: var(--lupita-naranja);
  color: white;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}
.btn-lupita:hover,
.btn-lupita:focus {
  background-color: var(--lupita-naranja-dark);
  border-color: var(--lupita-naranja-dark);
  color: white;
  box-shadow: var(--shadow-primary);
}

/* ─── CARDS ──────────────────────────────────────────────── */
.card-lupita {
  background-color: var(--lupita-paja-light);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ─── FORMULARIOS ────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--lupita-naranja);
  box-shadow: 0 0 0 0.2rem rgba(240,133,53,0.20);
}

/* ─── SEMÁFORO — colores funcionales (sin cambios) ───────── */
.semaforo-rojo     { color: var(--lupita-rojo); }
.semaforo-amarillo { color: var(--lupita-amarillo); }
.semaforo-verde    { color: var(--lupita-verde); }

/* ─── SALDO ──────────────────────────────────────────────── */
.saldo-positivo { color: var(--lupita-rojo); }        /* debe dinero */
.saldo-cero     { color: var(--lupita-texto-suave); }
.saldo-negativo { color: var(--lupita-verde); }       /* a favor */

.monto-grande {
  font-size: 2rem;
  font-weight: 800;
}

/* ─── MONTOS EN HISTORIAL ────────────────────────────────── */
.monto-cargo { color: var(--lupita-azul);  font-weight: 700; }  /* deuda */
.monto-abono { color: var(--lupita-verde); font-weight: 700; }  /* pago */

/* ─── SAFE AREA (iOS notch) ──────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  .app-bottom { padding-bottom: env(safe-area-inset-bottom); }
}

/* =========================================
   VISTAS DE CLIENTES
   ========================================= */

.cliente-card {
  cursor: pointer;
  background-color: var(--lupita-paja-light);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}
.cliente-card:hover {
  box-shadow: 0 8px 32px rgba(240,133,53,0.15);
  transform: translateY(-4px);
}

.cliente-nombre {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lupita-texto);
}

/* ─── HISTORIAL ──────────────────────────────────────────── */
.historial-table th {
  font-size: 0.75rem;
  color: var(--lupita-texto-suave);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  padding: 1rem 0.5rem;
}
.historial-table td {
  font-size: 0.9rem;
  padding: 0.75rem 0.5rem;
  border: none;
  vertical-align: middle;
}

/* ─── BADGES ─────────────────────────────────────────────── */
.badge-activo   { background-color: var(--lupita-verde); color: white; }
.badge-inactivo { background-color: var(--lupita-gris);  color: var(--lupita-texto-suave); }

/* ─── NAV INFERIOR — tab activo ──────────────────────────── */
.nav-activo { color: var(--lupita-naranja) !important; }

/* ─── AVATAR — círculo con iniciales ────────────────────── */
.avatar-lupita {
  background-color: var(--lupita-naranja);
  color: white;
}

/* ─── FAB ────────────────────────────────────────────────── */
.fab-agregar {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--lupita-naranja);
  color: white;
  border: none;
  font-size: 1.5rem;
  box-shadow: var(--shadow-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1000;
  transition: var(--transition-base);
}
.fab-agregar:hover {
  background-color: var(--lupita-naranja-dark);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(240,133,53,0.50);
}

/* ─── BÚSQUEDA ───────────────────────────────────────────── */
.busqueda-bar { position: relative; }
.busqueda-bar .form-control {
  padding-left: 2.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--lupita-paja-dark);
  background-color: var(--lupita-paja-light);
  font-size: 0.95rem;
}
.busqueda-bar .form-control:focus {
  border-color: var(--lupita-naranja);
  box-shadow: 0 0 0 0.2rem rgba(240,133,53,0.20);
  background-color: var(--lupita-white);
}
.busqueda-bar .busqueda-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lupita-texto-suave);
  pointer-events: none;
}