/* ======================================================
   TODO BOX — Variables CSS del sistema de diseño
   ====================================================== */
:root {
  /* PALETA PRINCIPAL */
  --primary:        #1D4ED8;
  --primary-dark:   #1E3A8A;
  --primary-light:  #DBEAFE;
  --secondary:      #7C3AED;
  --secondary-dark: #5B21B6;
  --accent:         #E11D48;
  --accent-light:   #FFE4E6;

  /* SISTEMA */
  --success:        #059669;
  --success-light:  #D1FAE5;
  --warning:        #D97706;
  --warning-light:  #FEF3C7;
  --danger-color:   #c5000f;

  /* GRADIENTES */
  --grad:           linear-gradient(135deg, #1D4ED8 0%, #7C3AED 100%);
  --grad-rev:       linear-gradient(135deg, #7C3AED 0%, #1D4ED8 100%);
  --grad-accent:    linear-gradient(135deg, #E11D48 0%, #F97316 100%);

  /* FONDOS Y SUPERFICIES */
  --bg:             #F8FAFC;
  --bg-card:        #FFFFFF;
  --light-color:    #f8f8f8;
  --light-color-tint: #f5f5f5;
  --light-color-shade: #dddada;

  /* TEXTO */
  --text:           #0F172A;
  --text-muted:     #64748B;
  --text-light:     #94A3B8;
  --dark-color:     #161616;
  --medium-color:   #5f5f5f;

  /* BORDES */
  --border:         #E2E8F0;
  --border-dark:    #CBD5E1;

  /* SOMBRAS */
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:      0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.12);
  --shadow-xl:      0 20px 60px rgba(0,0,0,.16);

  /* RADIOS */
  --radius-xs:      2px;
  --radius-s:       4px;
  --radius-sm:      6px;
  --radius-base:    8px;
  --radius:         10px;
  --radius-m:       12px;
  --radius-lg:      16px;
  --radius-l:       16px;
  --radius-xl:      24px;
  --radius-full:    999px;

  /* TIPOGRAFÍA */
  --font-head:      'Poppins', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-family:    'Inter', sans-serif;

  /* ESCALA DE TEXTO */
  --text-xxs: 0.6rem;
  --text-xs:  0.7rem;
  --text-s:   0.8rem;
  --text-base: 0.9rem;
  --text-md:  1rem;
  --text-lg:  1.2rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;

  /* ESPACIADO */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;

  /* TRANSICIONES */
  --transition: .2s ease;

  /* CONTAINER */
  --container: 1280px;

  /* HEADER */
  --header-height: 60px;
  --header-total-height: 108px;

  /* FOOTER */
  --footer-color-menu-title: #fff;
  --footer-color-menu-item: rgba(255,255,255,.65);

  /* COLORES FULLGLASS (alias para compatibilidad) */
  --main-color:              #1D4ED8;
  --main-color-contrast:     #ffffff;
  --secondary-color:         #7C3AED;
  --secondary-color-contrast: #ffffff;
  --accent-color:            #E11D48;
  --accent-color-contrast:   #ffffff;
  --box-color:               var(--accent-color);

  /* ── Carro lateral ── */
  --cart-width:                        480px;
  --cart-base-color:                   var(--light-color, #ffffff);
  --cart-text-color:                   var(--light-color-contrast, #1e293b);
  --cart-header-height:                var(--space-8, 4rem);
  --cart-line-height:                  5rem;
  --cart-content-scrollbar-bgcolor:    rgba(0,0,0,0);
  --cart-content-scrollbar-color:      var(--accent-color);
  --cart-content-scrollbar-width:      var(--space-1, .5rem);
  --cart-content-scrollbar-radius:     var(--radius-s, .25rem);
  --cart-line-title-size:              var(--text-s, .875rem);
  --cart-line-title-weight:            400;
  --cart-line-price-size:              var(--text-s, .875rem);
  --cart-line-price-weight:            600;
  --cart-line-delete-size:             var(--space-1, .5rem);
  --cart-bot-line-bgcolor:             var(--light-color-lighter, #f8fafc);
  --cart-bot-line-shadow:              10px -3px 11px 7px var(--light-color-shade, #f1f5f9);
  --cart-bot-line-iva-display:         flex;
  --cart-bot-line-iva-font-size:       var(--text-base, 1rem);
  --cart-bot-line-subtotal-display:    flex;
  --cart-bot-line-subtotal-font-size:  var(--text-base, 1rem);
  --cart-bot-line-descount-display:    flex;
  --cart-bot-line-descount-font-size:  var(--text-base, 1rem);
  --cart-bot-line-total-display:       flex;
  --cart-bot-line-total-font-size:     var(--text-base, 1rem);

  /* ── Favoritos drawer ── */
  --fav-drawer-width:                  480px;
  --fav-drawer-height:                 400px;
  --fav-cart-select-list-display:      flex;
}