/* =====================================================================
   LET'S TRAVEL — Sistema de marca (CSS base reutilizable)
   Extraído de las cotizaciones HTML + brand book (mayo 2026).
   Lo usan tanto el admin como el portal del cliente.
   ===================================================================== */

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

:root{
  /* Navy */
  --navy:#1A2847;
  --navy-dark:#0D141A;
  --navy-mid:#2A3957;
  /* Cream */
  --cream:#F5F2EC;
  --cream-card:#E7E4DF;
  --cream-soft:#FAF8F3;
  --page-bg:#EFEBE3;
  /* Gold */
  --gold:#D8B77C;
  --gold-dark:#B8945E;
  --gold-light:#EAD5B0;
  /* Texto */
  --text:#2A2D34;
  --muted:#6B6E76;
  --line:#DCD8CF;
  /* Estados (del brand book) */
  --ok:#7FA88F;        --ok-fill:#DCEBE0;
  --warn:#D9B860;      --warn-fill:#F5E9C7;
  --alert:#C77B6B;     --alert-fill:#F5D9D2;
  /* Sombra */
  --shadow:0 30px 80px rgba(26,40,71,.18);
  --shadow-sm:0 4px 16px rgba(26,40,71,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--page-bg);
  font-family:'Lato',sans-serif;
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ─── Tipografía de marca ─── */
.eyebrow{
  font-weight:700;font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:10px;
}
h1,h2,h3,h4{font-family:'Playfair Display',serif;color:var(--navy);font-weight:500;line-height:1.2}
h2 em,h1 em{color:var(--gold-dark);font-style:italic}
.serif{font-family:'Playfair Display',serif}

/* Wordmark Let's Travel */
.brand{
  font-family:'Lato',sans-serif;font-weight:300;letter-spacing:-.5px;
  color:var(--cream);line-height:1;display:inline-block;
}
.brand .dot{color:var(--gold);font-weight:400}
.brand-sub{
  font-weight:400;font-size:9px;letter-spacing:6px;text-transform:uppercase;
  color:var(--gold-light);
}

/* ─── Divisor dorado firma ─── */
.gold-divider{width:60px;height:1px;background:var(--gold);border:none;margin:24px 0}
.gold-divider.center{margin-left:auto;margin-right:auto}

/* ─── Botones ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Lato',sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  border:none;border-radius:2px;padding:13px 22px;transition:all .2s ease;
  text-decoration:none;line-height:1;
}
.btn-primary{background:var(--navy);color:var(--cream);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--gold-dark);transform:translateY(-1px)}
.btn-gold{background:var(--gold-dark);color:var(--cream)}
.btn-gold:hover{background:var(--navy)}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-dark)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#128C7E}
.btn-sm{padding:8px 14px;font-size:10px;letter-spacing:1.5px}

/* ─── Cards ─── */
.card{background:#fff;border:1px solid var(--line);border-radius:3px;padding:24px}
.card-accent{border-left:3px solid var(--gold)}
.card-top{border-top:3px solid var(--gold)}

/* ─── Inputs / formularios ─── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.field input,.field select,.field textarea{
  font-family:'Lato',sans-serif;font-size:14px;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:11px 13px;transition:border-color .15s ease;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);
}
.field .hint{font-size:11px;color:var(--muted)}

/* ─── Pills / badges ─── */
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:30px;
}
.pill-navy{background:var(--navy);color:var(--cream)}
.pill-gold{background:var(--gold-light);color:var(--navy)}
.pill-soft{background:var(--cream-card);color:var(--muted)}
/* Estados de pago */
.pill-pagado{background:var(--ok-fill);color:#3F7359}
.pill-pendiente{background:var(--cream-card);color:var(--muted)}
.pill-abono{background:var(--warn-fill);color:#8A6D24}
.pill-vencido{background:var(--alert-fill);color:#9E4636}

/* ─── Tablas (header navy) ─── */
.table-wrap{border:1px solid var(--line);background:#fff;overflow:hidden;border-radius:3px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  background:var(--navy);color:var(--cream);font-weight:700;text-align:left;
  padding:13px 16px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
}
tbody td{padding:14px 16px;border-bottom:1px solid #ECE8DF;vertical-align:middle;color:var(--text)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--cream-soft)}
td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;color:var(--navy)}

/* ─── Footer firma ─── */
.lt-footer{background:var(--navy);color:var(--cream);padding:40px;text-align:center}
.lt-footer .sig{font-family:'Playfair Display',serif;font-style:italic;font-size:22px;color:var(--cream)}
.lt-footer .sig.name{font-size:28px;margin-top:4px}
.lt-footer .role{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-light);margin-top:8px}

/* ─── Utilidades ─── */
.muted{color:var(--muted)}
.text-center{text-align:center}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-8{gap:8px}.gap-16{gap:16px}.wrap{flex-wrap:wrap}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}