/* ══════════════════════════════════════════════════════════════════
   estilo.css  —  Estilos base compartidos + Clientes
   Credinstante — Consulta de Clientes
   ══════════════════════════════════════════════════════════════════ */

/* ── Reset & variables ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --sage-100:#e8f0eb; --sage-200:#ccddd2; --sage-300:#a8c4b0;
  --sage-500:#5c8a6a; --sage-700:#3a5c45; --sage-900:#1e3327;
  --red-400:#e05555;  --red-100:#fde8e8;
  --amber-500:#c87a2a;
  --white:#ffffff;
  --gray-50:#f8faf9; --gray-100:#f0f4f1; --gray-300:#c8d4cb;
  --gray-500:#7a9080; --gray-700:#3d5244;
  --shadow-sm:0 1px 3px rgba(30,51,39,.08),0 1px 2px rgba(30,51,39,.06);
  --shadow-md:0 4px 12px rgba(30,51,39,.10),0 2px 6px rgba(30,51,39,.06);
  --shadow-lg:0 10px 30px rgba(30,51,39,.12);
  --radius:10px; --radius-sm:6px;
}
body { font-family:'DM Sans',sans-serif; background:linear-gradient(135deg,#d4e6d9 0%,#e8f0eb 50%,#cfe0d5 100%); min-height:100vh; color:var(--gray-700); padding:24px 16px; }

/* ── Card ────────────────────────────────────────────────────── */
.card { max-width:900px; margin:0 auto; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); border:1px solid var(--sage-200); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; }
.card-header { background:linear-gradient(135deg,var(--sage-700) 0%,var(--sage-500) 100%); padding:20px 28px; display:flex; align-items:center; gap:12px; }
.card-header h1 { font-size:18px; font-weight:600; color:var(--white); letter-spacing:.3px; }

/* ── Formulario ──────────────────────────────────────────────── */
.form-body { padding:24px 28px 20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
@media(max-width:580px){ .form-grid{ grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:11.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--sage-700); }
.field input, .field select {
  height:38px; padding:0 12px; border:1.5px solid var(--gray-300);
  border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif;
  font-size:14px; color:var(--gray-700); background:var(--white); outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus, .field select:focus { border-color:var(--sage-500); box-shadow:0 0 0 3px rgba(92,138,106,.15); }
.field input::placeholder { color:var(--gray-300); }
.field select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a9080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }

/* ── Chips ───────────────────────────────────────────────────── */
.filter-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--gray-100); }
.chip-group { display:flex; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer; border:1.5px solid var(--gray-300); background:var(--gray-100); color:var(--gray-500); transition:all .18s; user-select:none; }
.chip .dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; }
.chip.on .dot { opacity:1; }
.chip-activo.on  { background:#e6f4eb; border-color:var(--sage-500);  color:var(--sage-700); }
.chip-incobra.on { background:var(--red-100); border-color:var(--red-400); color:var(--red-400); }
.chip-nuevo.on   { background:#fffbea; border-color:var(--amber-500); color:var(--amber-500); }
.chip-vertodos.on { background:#e6f4eb; border-color:var(--sage-500); color:var(--sage-700); }
.spacer { flex:1; }

/* ── Botones ─────────────────────────────────────────────────── */
.btn { height:38px; padding:0 20px; border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:600; cursor:pointer; border:none; transition:all .18s; display:inline-flex; align-items:center; gap:6px; }
.btn-primary  { background:linear-gradient(135deg,var(--sage-700),var(--sage-500)); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover  { filter:brightness(1.08); box-shadow:var(--shadow-md); }
.btn-secondary { background:var(--gray-100); color:var(--gray-500); border:1.5px solid var(--gray-300); }
.btn-secondary:hover { background:var(--gray-300); color:var(--gray-700); }

/* ── Resultados ──────────────────────────────────────────────── */
.results-area { padding:0 28px 28px; }
.results-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.results-count { font-size:12px; font-weight:600; color:var(--gray-500); letter-spacing:.4px; text-transform:uppercase; }
.results-count span { color:var(--sage-700); font-size:14px; }
.table-wrap { border:1px solid var(--gray-300); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead tr { background:linear-gradient(135deg,var(--sage-700),var(--sage-500)); }
thead th { padding:11px 14px; text-align:left; font-size:11px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:rgba(255,255,255,.9); white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--gray-100); cursor:pointer; transition:background .12s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover  { background:var(--sage-100); }
tbody tr:active { background:var(--sage-200) !important; }
tbody tr.incobra { background:#fff5f5; }
tbody tr.incobra:hover { background:#ffe8e8; }
tbody td { padding:10px 14px; color:var(--gray-700); font-family:'DM Mono',monospace; font-size:12.5px; white-space:nowrap; }
tbody td.txt { font-family:'DM Sans',sans-serif; font-size:13px; }

/* ── Estado vacío / cargando / error ─────────────────────────── */
.state-box { padding:40px 20px; text-align:center; color:var(--gray-500); }
.state-box svg { margin-bottom:12px; opacity:.4; }
.state-box p   { font-size:14px; }
.state-box .sub { font-size:12px; margin-top:4px; opacity:.7; }
.spinner { width:28px; height:28px; border:3px solid var(--gray-300); border-top-color:var(--sage-500); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 12px; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-box { color:var(--red-400); } .error-box p { font-weight:600; }

/* ── Modales: overlay base ───────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,30,20,.55); backdrop-filter:blur(4px); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; animation:fadeIn .18s ease; }
#modalCuotasOverlay { z-index:1100; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal { background:var(--white); border-radius:16px; width:100%; max-width:580px; max-height:90vh; overflow-y:auto; overflow-x:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); animation:slideUp .2s ease; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-header { background:linear-gradient(135deg,var(--sage-700),var(--sage-500)); padding:18px 22px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; border-radius:16px 16px 0 0; }
.modal-header h2 { font-size:16px; font-weight:600; color:white; }
.modal-header .cod { font-size:12px; color:rgba(255,255,255,.7); margin-top:2px; }
.modal-close { width:32px; height:32px; background:rgba(255,255,255,.15); border:none; border-radius:8px; color:white; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.modal-close:hover { background:rgba(255,255,255,.28); }
.modal-body   { padding:22px; }
.modal-footer { padding:14px 22px; border-top:1px solid var(--gray-100); display:flex; justify-content:flex-end; }

/* ── Secciones del modal detalle ─────────────────────────────── */
.detail-section { margin-bottom:18px; border:1px solid var(--gray-100); border-radius:10px; overflow:hidden; }
.detail-section-title { background:var(--gray-100); padding:7px 14px; font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--sage-700); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; }
.detail-item { padding:11px 14px; border-bottom:1px solid var(--gray-100); border-right:1px solid var(--gray-100); }
.detail-item:nth-child(even) { border-right:none; }
.detail-item.full { grid-column:1/-1; border-right:none; }
.detail-label { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--gray-500); margin-bottom:3px; }
.detail-value { font-size:13.5px; color:var(--gray-700); }
.detail-value.mono { font-family:'DM Mono',monospace; font-size:13px; }
.detail-value.big  { font-size:18px; font-weight:600; color:var(--sage-900); }
.detail-value.empty { color:var(--gray-300); font-style:italic; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; }
.badge-activo   { background:#e6f4eb; color:var(--sage-700); }
.badge-inactivo { background:var(--gray-100); color:var(--gray-500); }
.badge-incobra  { background:var(--red-100); color:var(--red-400); }
.badge-pendiente{ background:#fffbea; color:var(--amber-500); }

/* ── Pestaña Pedidos: color de fila según el campo Autorizado ────── */
tbody tr.ped-autorizado { background:#f0faf2; }
tbody tr.ped-autorizado:hover { background:#e3f5e9; }
tbody tr.ped-pendiente { background:#fffdf0; }
tbody tr.ped-pendiente:hover { background:#fff8de; }

/* ── Tabla de facturas (dentro del modal de cliente) ─────────── */
.facturas-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px; }
.facturas-table { width:100%; min-width:480px; border-collapse:collapse; font-size:12.5px; }
.facturas-table thead tr { background:var(--gray-100); }
.facturas-table thead th { padding:8px 14px; text-align:left; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--sage-700); white-space:nowrap; }
.facturas-table thead th.num, .facturas-table tbody td.num { text-align:right; }
.facturas-table tbody td { padding:9px 14px; color:var(--gray-700); font-family:'DM Mono',monospace; font-size:12.5px; border-bottom:1px solid var(--gray-100); white-space:nowrap; }
.facturas-table tbody td.txt  { font-family:'DM Sans',sans-serif; white-space:normal; }
.facturas-table tbody td.saldo { color:var(--red-400); font-weight:600; }
.facturas-table tbody tr:last-child td { border-bottom:none; }
.facturas-table tbody tr.clickable { cursor:pointer; transition:background .12s; }
.facturas-table tbody tr.clickable:hover { background:var(--sage-100); }
.facturas-table tbody tr.clickable td:first-child::after { content:' ↗'; font-size:10px; color:var(--sage-500); opacity:.7; }
.facturas-empty { padding:16px 14px; text-align:center; color:var(--gray-500); font-size:13px; font-style:italic; }

/* En pantallas angostas la tabla de facturas se apila como tarjetas, en vez de scrollear al costado */
@media (max-width:600px) {
  .facturas-scroll { overflow-x:visible; }
  .facturas-table, .facturas-table thead, .facturas-table tbody, .facturas-table tr, .facturas-table td { display:block; width:100%; min-width:0; }
  .facturas-table thead { display:none; }
  .facturas-table tbody tr { padding:10px 14px; border-bottom:1px solid var(--gray-100); }
  .facturas-table tbody tr:last-child { border-bottom:none; }
  .facturas-table tbody td { border-bottom:none; padding:3px 0; white-space:normal; text-align:left !important; }
  .facturas-table tbody tr.clickable td:first-child::after { content:''; }
  .facturas-table tbody tr.clickable { position:relative; }
  .facturas-table tbody tr.clickable::after {
    content:'Ver detalle ↗'; display:block; margin-top:6px; font-size:11px;
    color:var(--sage-500); font-family:'DM Sans',sans-serif; font-style:italic;
  }
  .facturas-table td[data-label]::before {
    content: attr(data-label);
    display:block; font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700;
    letter-spacing:.5px; text-transform:uppercase; color:var(--sage-700); margin-bottom:1px;
  }
}

/* ── Modal de cuotas / detalle de factura ─────────────────────── */
.modal-cuotas { width:min(720px,95vw); max-height:80vh; overflow-y:auto; }
.cuotas-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cuotas-table { width:100%; min-width:520px; border-collapse:collapse; font-size:12.5px; }
.cuotas-table thead tr { background:var(--gray-100); }
.cuotas-table thead th { padding:8px 10px; text-align:left; font-weight:600; color:var(--gray-500); border-bottom:1px solid var(--gray-300); font-size:11.5px; white-space:nowrap; }
.cuotas-table thead th.num, .cuotas-table tbody td.num { text-align:right; }
.cuotas-table tbody td { padding:7px 10px; border-bottom:1px solid var(--gray-100); color:var(--gray-700); white-space:nowrap; }
.cuotas-table tbody td.txt { white-space:normal; max-width:220px; }
.cuotas-table tbody tr:last-child td { border-bottom:none; }
/* Estado por fila */
.cuotas-table tbody tr.cuota-ok       { background:#f0faf2; }
.cuotas-table tbody tr.cuota-parcial  { background:#fffdf0; }
.cuotas-table tbody tr.cuota-pendiente{ background:#fff8f8; }
/* Estado celda saldo */
.cuotas-table td.saldo-ok       { color:#0b6a22; font-weight:700; }
.cuotas-table td.saldo-parcial  { color:#8a6a00; font-weight:700; }
.cuotas-table td.saldo-pendiente{ color:#9d1d1d; font-weight:700; }
/* Fila de totales */
.cuotas-table tr.cuotas-total td { border-top:2px solid var(--gray-200); background:var(--gray-100); padding:9px 10px; font-size:12.5px; }
.cuotas-spinner { padding:28px; text-align:center; color:var(--gray-400); }

/* ── Error en formularios ────────────────────────────────────── */
.error-msg { background:var(--red-100); border:1px solid #f5c0c0; border-radius:8px; padding:10px 14px; font-size:13px; color:var(--red-400); display:flex; align-items:center; gap:8px; }

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs-bar { max-width:900px; margin:0 auto 12px; display:flex; gap:8px; }
.tab-btn { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 18px; border-radius:10px 10px 0 0; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:600; background:rgba(255,255,255,.55); color:var(--sage-700); transition:all .18s; }
.tab-btn:hover { background:rgba(255,255,255,.8); }
.tab-btn.active { background:rgba(255,255,255,.97); color:var(--sage-900); box-shadow:0 -2px 8px rgba(30,51,39,.08); }