/* Vitalook — identidad de marca */
:root {
  --vl-surface: #FBF6F0;
  --vl-raised: #FFFFFF;
  --vl-ink: #2A2320;
  --vl-muted: #6B5F58;
  --vl-vita: #2F5D50;
  --vl-vita-dark: #234A3F;
  --vl-look: #B4472F;
  --vl-oro: #8A6420;
  --vl-oro-brillo: #B8893A;
  --vl-sage: #DCE8E1;
  --vl-blush: #F3DCD2;
  --vl-gold-soft: #E9D7B0;
  --vl-line: #E6DCD2;
  --vl-radius: 14px;

  --bs-body-bg: var(--vl-surface);
  --bs-body-color: var(--vl-ink);
  --bs-body-font-family: "DM Sans", system-ui, sans-serif;
  --bs-link-color: var(--vl-vita);
  --bs-link-color-rgb: 47, 93, 80;
  --bs-link-hover-color: var(--vl-vita-dark);
  --bs-border-color: var(--vl-line);
  --bs-primary: #2F5D50;
  --bs-primary-rgb: 47, 93, 80;
}

body { background: var(--vl-surface); color: var(--vl-ink); font-family: "DM Sans", system-ui, sans-serif; }
h1, h2, h3, .vl-display { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.vl-muted, .text-muted { color: var(--vl-muted) !important; }
.vl-eyebrow { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--vl-vita); }
.vl-wordmark { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.5rem; color: var(--vl-ink); }

/* Botones */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--vl-vita); --bs-btn-border-color: var(--vl-vita); --bs-btn-hover-bg: var(--vl-vita-dark); --bs-btn-hover-border-color: var(--vl-vita-dark); --bs-btn-active-bg: var(--vl-vita-dark); --bs-btn-disabled-bg: var(--vl-vita); --bs-btn-disabled-border-color: var(--vl-vita); }
.btn-outline-primary { --bs-btn-color: var(--vl-vita); --bs-btn-border-color: var(--vl-vita); --bs-btn-hover-bg: var(--vl-vita); --bs-btn-hover-border-color: var(--vl-vita); --bs-btn-active-bg: var(--vl-vita); }
.btn-accent { background: var(--vl-look); border-color: var(--vl-look); color: #fff; }
.btn-accent:hover { background: #8E3522; border-color: #8E3522; color: #fff; }
.form-control, .form-select { border-radius: 10px; border-color: var(--vl-line); }
.form-control:focus, .form-select:focus { border-color: var(--vl-vita); box-shadow: 0 0 0 .2rem rgba(47, 93, 80, .2); }

/* Encabezado y pie */
.vl-header { background: var(--vl-raised); border-bottom: 1px solid var(--vl-line); }
.vl-header .nav-link { color: var(--vl-ink); font-weight: 500; }
.vl-header .nav-link:hover { color: var(--vl-vita); }
.vl-admin-link { color: var(--vl-look) !important; font-weight: 600 !important; }
.vl-count { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--vl-look); color: #fff; font-size: .75rem; text-align: center; }
.vl-adminnav { background: var(--vl-vita); }
.vl-adminnav a { color: #FBF6F0; text-decoration: none; padding: .55rem .8rem; font-size: .9rem; font-weight: 500; border-radius: 8px; }
.vl-adminnav a:hover { background: rgba(255, 255, 255, .12); }
.vl-footer { background: var(--vl-vita); color: var(--vl-sage); padding: 2rem 0; margin-top: 3rem; }
.vl-footer a { color: #FBF6F0; }

/* Tarjetas */
.vl-card { background: var(--vl-raised); border: 1px solid var(--vl-line); border-radius: var(--vl-radius); }
.vl-card-pad { padding: 1.25rem 1.5rem; }
.vl-stat { background: var(--vl-raised); border: 1px solid var(--vl-line); border-radius: var(--vl-radius); padding: 1rem 1.25rem; height: 100%; }
.vl-stat .label { font-size: .8rem; color: var(--vl-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.vl-stat .value { font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; font-weight: 600; }
.vl-stat.vita { background: var(--vl-sage); border-color: var(--vl-sage); }
.vl-stat.look { background: var(--vl-blush); border-color: var(--vl-blush); }
.vl-stat.oro { background: var(--vl-gold-soft); border-color: var(--vl-gold-soft); }

/* Hero */
.vl-hero { background: var(--vl-raised); border-radius: 28px; overflow: hidden; border: 1px solid var(--vl-line); }
.vl-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: .98; }
.vl-hero h1 em { color: var(--vl-look); }
.vl-hero-art { background: var(--vl-vita); min-height: 280px; position: relative; display: flex; align-items: center; justify-content: center; }
.vl-hero-art .pill { position: absolute; height: 22px; border-radius: 999px; background: var(--vl-sage); left: 24px; }
.vl-pillars span { display: inline-block; padding: .35rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; margin: 0 .35rem .35rem 0; }
.vl-pillars .salud { background: var(--vl-sage); color: var(--vl-vita); }
.vl-pillars .belleza { background: var(--vl-blush); color: #8E3522; }
.vl-pillars .estilo { background: var(--vl-gold-soft); color: #6E4F18; }

/* Productos */
.vl-product { display: flex; flex-direction: column; overflow: hidden; }
.vl-product-img { display: block; aspect-ratio: 1 / 1; background: var(--vl-surface); }
.vl-product-img img { width: 100%; height: 100%; object-fit: cover; }
.vl-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.vl-product-name { color: var(--vl-ink); font-weight: 600; text-decoration: none; line-height: 1.25; }
.vl-product-name:hover { color: var(--vl-vita); }
.vl-price { font-weight: 700; font-size: 1.1rem; }
.vl-gallery img { border-radius: var(--vl-radius); width: 100%; object-fit: cover; }
.vl-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; }
.vl-thumbs img.active { border-color: var(--vl-vita); }

/* Estados */
.vl-badge { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.vl-badge-requested { background: var(--vl-gold-soft); color: #6E4F18; }
.vl-badge-confirmed { background: var(--vl-sage); color: var(--vl-vita); }
.vl-badge-shipped { background: var(--vl-blush); color: #8E3522; }
.vl-badge-delivered { background: var(--vl-vita); color: #fff; }
.vl-badge-cancelled { background: #E8E3DF; color: #5A504A; }
.vl-badge-overdue { background: var(--vl-look); color: #fff; }
.vl-badge-paid { background: var(--vl-sage); color: var(--vl-vita); }

/* Línea de tiempo del pedido */
.vl-steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.vl-step { flex: 1 1 120px; padding: .75rem; border-radius: 12px; background: #EFE8E1; color: var(--vl-muted); font-size: .85rem; font-weight: 600; text-align: center; }
.vl-step.done { background: var(--vl-sage); color: var(--vl-vita); }
.vl-step.current { background: var(--vl-vita); color: #fff; }
.vl-timeline { list-style: none; padding: 0; margin: 0; }
.vl-timeline li { padding: .5rem 0 .5rem 1.25rem; border-left: 2px solid var(--vl-line); position: relative; }
.vl-timeline li::before { content: ""; position: absolute; left: -6px; top: .85rem; width: 10px; height: 10px; border-radius: 50%; background: var(--vl-oro-brillo); }

/* Tablas */
.table { --bs-table-bg: transparent; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vl-muted); font-weight: 600; border-bottom-color: var(--vl-line); }
.table-responsive { border-radius: var(--vl-radius); }
.vl-money-paid { color: var(--vl-vita); font-weight: 700; }
.vl-money-due { color: var(--vl-look); font-weight: 700; }
.vl-progress { height: 10px; border-radius: 999px; background: #EFE8E1; overflow: hidden; }
.vl-progress > div { height: 100%; background: var(--vl-vita); }

.vl-auth { max-width: 480px; margin: 1rem auto; }
.vl-code-input { font-size: 1.8rem; letter-spacing: .5em; text-align: center; font-weight: 700; }