/* ================================================
   base.css — Variables globales, reset y tipografía
   CARIBBEAN GOLD LUXURY v9 — Warm Ivory Light Mode
   ================================================ */

/* ══════════════════════════════
   TEMA CLARO — Caribbean Gold Luxury (default)
══════════════════════════════ */
:root {
  /* ── Paleta Oro Caribeño ── */
  --brand-cyan:   #2F62D4;   /* gold — mantiene compatibilidad JS */
  --brand-cyan2:  #1E47A0;   /* gold dark */
  --brand-blue:   #1A3560;   /* navy */
  --brand-navy:   #0B1526;
  --brand-navy2:  #060E18;

  /* ── Oro principal ── */
  --gold:         #2F62D4;
  --gold-light:   #5B8DEF;
  --gold-dark:    #1E47A0;
  --gold-xlight:  #7BA5F5;
  --gold-glow:    rgba(47,98,212,0.22);

  /* ── Navy / dark ── */
  --navy:         #0B1526;
  --navy-deep:    #060E18;
  --navy-mid:     #1A3560;

  /* ── Fondos IVORY ── */
  --bg:           #FFFFFF;
  --bg-white:     #F8FAFC;
  --bg-subtle:    #F1F5F9;
  --bg-card:      #FFFFFF;
  --bg-section:   #F1F5F9;
  --bg-dark:      #0B1220;

  /* ── Texto warm ── */
  --text:         #0F172A;
  --text-mid:     #475569;
  --text-soft:    #64748B;
  --text-xsoft:   #94A3B8;
  --text-inverse: #FFFFFF;

  /* ── Bordes cálidos ── */
  --border:       rgba(47,98,212,0.14);
  --border-soft:  rgba(47,98,212,0.07);
  --border-mid:   rgba(47,98,212,0.24);
  --border-dark:  rgba(47,98,212,0.35);

  /* ── Radios ── */
  --radius-xs:  8px;
  --radius-sm:  14px;
  --radius-md:  20px;
  --radius-lg:  28px;
  --radius-xl:  40px;

  /* ── Sombras warm ── */
  --shadow-xs:   0 2px 8px  rgba(15,23,42,0.06);
  --shadow:      0 6px 24px rgba(15,23,42,0.08);
  --shadow-md:   0 14px 40px rgba(15,23,42,0.10);
  --shadow-lg:   0 28px 64px rgba(15,23,42,0.13);
  --shadow-gold: 0 6px 28px rgba(47,98,212,0.28);
  --shadow-teal: 0 6px 24px rgba(47,98,212,0.22);
  --shadow-blue: 0 6px 24px rgba(26,53,96,0.18);

  /* ── Acentos secundarios ── */
  --coral:       #C0533A;
  --coral-light: #D97458;
  --violet:      #5C3E8A;
  --green-neon:  #25D366;
  --blue:        #1A3560;
  --blue-dark:   #0B1526;
  --blue-light:  #3D6EA8;
  --blue-glow:   rgba(26,53,96,0.18);

  /* ── Transiciones ── */
  --ease-out:    cubic-bezier(0.22,1,0.36,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --duration:    0.22s;
  --duration-md: 0.35s;

  /* ── Nav ── */
  --nav-bg:        rgba(255,255,255,0.88);
  --nav-border:    rgba(47,98,212,0.18);
  --nav-text:      #0F172A;
  --nav-text-soft: #64748B;
  --nav-logo-bg:   transparent;

  /* ── Cards ── */
  --card-bg:           #FFFFFF;
  --card-border:       rgba(47,98,212,0.12);
  --card-hover-border: rgba(47,98,212,0.45);

  /* ── Inputs ── */
  --input-bg:           #F1F5F9;
  --input-bg-focus:     #FFFFFF;
  --input-text:         #0F172A;
  --input-placeholder:  #94A3B8;
  --input-border-focus: #2F62D4;
}

/* ══════════════════════════════
   MODO DARK ADMIN (solo admin / acceso-interno)
══════════════════════════════ */
[data-theme="dark"] {
  --bg:           #080E19;
  --bg-white:     #0F1825;
  --bg-subtle:    #141E2E;
  --bg-card:      #111B2B;
  --bg-section:   #0A1120;

  --text:         #E8EFF7;
  --text-mid:     #A8BAC8;
  --text-soft:    #6B8094;
  --text-xsoft:   #3A5060;
  --text-inverse: #0D1B2A;

  --border:       rgba(255,255,255,0.08);
  --border-soft:  rgba(255,255,255,0.04);
  --border-mid:   rgba(255,255,255,0.13);

  --shadow-xs:   0 1px 4px  rgba(0,0,0,0.30);
  --shadow:      0 4px 20px rgba(0,0,0,0.45);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.55);
  --shadow-lg:   0 20px 56px rgba(0,0,0,0.65);
  --shadow-blue: 0 8px 28px rgba(11,111,232,0.40);
  --shadow-teal: 0 8px 28px rgba(47,98,212,0.30);
  --shadow-gold: 0 8px 28px rgba(47,98,212,0.35);

  --nav-bg:        rgba(8,14,25,0.95);
  --nav-border:    rgba(255,255,255,0.07);
  --nav-text:      #E8EFF7;
  --nav-text-soft: #6B8094;

  --card-bg:           #111B2B;
  --card-border:       rgba(255,255,255,0.07);
  --card-hover-border: rgba(47,98,212,0.35);

  --input-bg:           #141E2E;
  --input-bg-focus:     #1A2640;
  --input-text:         #E8EFF7;
  --input-placeholder:  #3A5060;
  --input-border-focus: #2F62D4;

  --brand-cyan:   #2F62D4;
  --brand-cyan2:  #1E47A0;
}

/* ══════════════════════════════
   RESET
══════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  transition: background var(--duration-md), color var(--duration-md);
  padding-top: 64px;
  animation: pageFadeIn 0.42s var(--ease-out) both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Tipografía Luxury ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text);
}
p   { color: var(--text-mid); }
a   { color: var(--gold); }
button, input, select, textarea { font-family: 'DM Sans', sans-serif; }

/* ── Scrollbar oro ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-subtle); }
::-webkit-scrollbar-thumb {
  background: rgba(47,98,212,0.35);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(47,98,212,0.55); }

/* ── Selección ── */
::selection { background: rgba(47,98,212,0.18); color: #1E3A8A; }

/* ══════════════════════════════
   BOTONES — Gradiente dorado + glow
══════════════════════════════ */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 980px;
  padding: 11px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s var(--ease-out);
  -webkit-font-smoothing: antialiased;
}
.btn-primary:active, .btn-secondary:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, #5B8DEF 0%, #2F62D4 50%, #1E47A0 100%);
  color: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0 4px 20px rgba(47,98,212,0.32);
}
.btn-primary:hover {
  box-shadow: 0 8px 36px rgba(47,98,212,0.50);
  transform: translateY(-2px);
}

[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #5B8DEF 0%, #2F62D4 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(47,98,212,0.38);
}
[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, #7BA5F5 0%, #5B8DEF 100%);
  box-shadow: 0 8px 32px rgba(47,98,212,0.55);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1.5px solid rgba(15,23,42,0.18);
  font-weight: 600;
}
.btn-secondary:hover {
  background: rgba(47,98,212,0.06);
  border-color: rgba(47,98,212,0.40);
  box-shadow: 0 4px 16px rgba(47,98,212,0.12);
}

[data-theme="dark"] .btn-secondary {
  color: #5B8DEF;
  border-color: rgba(47,98,212,0.45);
}
[data-theme="dark"] .btn-secondary:hover {
  background: rgba(47,98,212,0.10);
  border-color: rgba(47,98,212,0.70);
}

.btn-full {
  width: 100%;
  padding: 14px 22px;
  font-size: 15px;
  border-radius: 980px;
}

/* ══════════════════════════════
   FORMULARIOS
══════════════════════════════ */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 15px;
  color: var(--input-text);
  transition: all var(--duration) var(--ease-out);
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--input-placeholder); }
.form-group input:hover,
.form-group select:hover { border-color: var(--border-mid); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--input-border-focus);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px rgba(47,98,212,0.14);
  color: var(--text);
}
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
  box-shadow: 0 0 0 4px rgba(47,98,212,0.14);
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.submit-btn {
  width: 100%;
  padding: 14px 22px;
  background: linear-gradient(135deg, #5B8DEF 0%, #2F62D4 50%, #1E47A0 100%);
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 980px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 4px 20px rgba(47,98,212,0.30);
}
.submit-btn:hover {
  box-shadow: 0 8px 36px rgba(47,98,212,0.50);
  transform: translateY(-2px);
}
.submit-btn:active { transform: scale(0.97); }
.submit-btn:disabled { opacity: 0.40; cursor: not-allowed; transform: none; box-shadow: none; }
[data-theme="dark"] .submit-btn {
  background: linear-gradient(135deg, #5B8DEF 0%, #2F62D4 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(47,98,212,0.35);
}
[data-theme="dark"] .submit-btn:hover {
  background: linear-gradient(135deg, #7BA5F5 0%, #5B8DEF 100%);
  box-shadow: 0 8px 32px rgba(47,98,212,0.55);
}

/* ══════════════════════════════
   PÁGINAS
══════════════════════════════ */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }

/* ══════════════════════════════
   ANIMACIONES — todas mantenidas para compatibilidad JS
══════════════════════════════ */
@keyframes fadeUp     { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn     { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn    { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
@keyframes shimmer    { 0%{background-position:-800px 0} 100%{background-position:800px 0} }
@keyframes spin       { to { transform:rotate(360deg); } }
@keyframes bounceIn   { 0%{transform:scale(0.6);opacity:0} 60%{transform:scale(1.14);opacity:1} 100%{transform:scale(1);} }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:0.8} 100%{transform:scale(1.65);opacity:0} }
@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes glowPulse  { 0%,100%{opacity:0.5} 50%{opacity:1} }
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes wa-pulse   {
  0%   { box-shadow: 0 0 0 0    rgba(37,211,102,0.60); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0.00); }
  100% { box-shadow: 0 0 0 0    rgba(37,211,102,0.00); }
}

/* ══════════════════════════════
   BADGES — Gold luxury tones
══════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 99px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 700;
}
.badge-blue      { background: rgba(26,53,96,0.10);    color: #3D6EA8;  border: 1px solid rgba(26,53,96,0.20); }
.badge-teal      { background: rgba(47,98,212,0.12);  color: #2F62D4;  border: 1px solid rgba(47,98,212,0.28); }
.badge-gold      { background: rgba(47,98,212,0.13);  color: #1E47A0;  border: 1px solid rgba(47,98,212,0.28); }
.badge-red       { background: rgba(192,83,58,0.10);   color: #C0533A;  border: 1px solid rgba(192,83,58,0.22); }
.badge-green     { background: rgba(37,163,66,0.10);   color: #1E8A38;  border: 1px solid rgba(37,163,66,0.22); }
.badge-new       { background: rgba(47,98,212,0.13);  color: #1E47A0;  border: 1px solid rgba(47,98,212,0.28); }
.badge-quoted    { background: rgba(26,53,96,0.10);    color: #3D6EA8;  border: 1px solid rgba(26,53,96,0.20); }
.badge-approved  { background: rgba(37,163,66,0.10);   color: #1E8A38;  border: 1px solid rgba(37,163,66,0.22); }
.badge-dispatched{ background: rgba(138,122,96,0.10);  color: #64748B;  border: 1px solid rgba(138,122,96,0.20); }
.badge-delivered { background: rgba(47,98,212,0.12);  color: #2F62D4;  border: 1px solid rgba(47,98,212,0.28); }
.badge-pending   { background: rgba(47,98,212,0.13);  color: #1E47A0;  border: 1px solid rgba(47,98,212,0.28); }

[data-theme="dark"] .badge-new       { background:rgba(91,141,239,0.15); color:#5B8DEF; border-color:rgba(91,141,239,0.25); }
[data-theme="dark"] .badge-quoted    { background:rgba(61,110,168,0.15);  color:#6A9FD4; border-color:rgba(61,110,168,0.25); }
[data-theme="dark"] .badge-approved  { background:rgba(30,138,56,0.15);   color:#3CC46A; border-color:rgba(30,138,56,0.25); }
[data-theme="dark"] .badge-dispatched{ background:rgba(148,163,184,0.12); color:#94A3B8; }
[data-theme="dark"] .badge-delivered { background:rgba(47,98,212,0.15);  color:#5B8DEF; }
[data-theme="dark"] .badge-pending   { background:rgba(47,98,212,0.15);  color:#5B8DEF; }

/* ══════════════════════════════
   SKELETON
══════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, rgba(47,98,212,0.06) 50%, var(--bg-subtle) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.8s infinite;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════
   SECCIÓN HERO GENÉRICA
══════════════════════════════ */
.section-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(47,98,212,0.20) 0%, transparent 62%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(30,71,160,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #F8FAFC 0%, #EEF2F7 100%);
  color: var(--text);
  padding: 80px 40px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section-hero::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, #5B8DEF 30%, #2F62D4 70%, transparent);
}
.section-hero h1 { color: var(--text); font-size:clamp(32px,4vw,56px); margin-bottom:14px; font-family:'Plus Jakarta Sans',Georgia,serif; }
.section-hero p  { color: var(--text-soft); font-size:18px; max-width:560px; margin:0 auto; }
.section-body { max-width:1200px; margin:0 auto; padding:60px 32px; }

/* ══════════════════════════════
   DIVIDER
══════════════════════════════ */
.divider { border:none; border-top:1px solid var(--border); margin:40px 0; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
  .section-body { padding: 40px 20px; }
  .section-hero { padding: 60px 24px 48px; }
}
@media print {
  nav, .cart-btn-wrap, .modal-overlay, .cart-overlay, .cart-panel { display:none !important; }
}