/* =========================================================
   Tema negro y dorado — tokens y ajustes de componentes
   Se carga justo después de base.css en la tienda y en el admin
   (no en la hoja de impresión). Redefine los colores de base.css
   y adapta a fondo oscuro los componentes que traían colores claros.
   ========================================================= */

:root{
    --bg:#0b0a09;
    --bg-2:#100e0c;
    --surface:#141210;
    --surface-2:#1b1815;
    --surface-3:#24201c;
    --ink:#f4eee4;
    --ink-soft:#b3aa9c;
    --ink-faint:#80786c;
    --line:rgba(212,175,110,.14);
    --line-strong:rgba(212,175,110,.32);

    --gold:#d4af6e;
    --gold-hi:#ecd29c;
    --gold-lo:#a9803f;
    --gold-grad:linear-gradient(180deg,#ecd29c 0%,#d4af6e 45%,#b58b48 100%);
    --brand:var(--gold);
    --brand-text:var(--gold);
    --brand-soft:rgba(212,175,110,.16);
    --ivory:#f3eee5;

    --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
    --font-body:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-script:"Great Vibes", cursive;

    --radius-card:12px;
    --shadow-2:0 24px 50px -24px rgba(0,0,0,.8);
    --wrap:1240px;
    color-scheme:dark;
}

body{font-size:15px; background:var(--bg)}
::selection{background:var(--gold); color:#16120c}
.display{font-weight:400; letter-spacing:-.01em}
.display em{font-style:normal; color:var(--gold)}
.eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}

/* ---------- Botones ---------- */
.btn{min-height:46px; padding:0 24px; font-size:14px; font-weight:600; gap:10px}
.btn i{font-size:.9em}
.btn-gold{background:var(--gold-grad); color:#1a140b; box-shadow:0 10px 30px -14px rgba(212,175,110,.7), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-gold:hover{filter:brightness(1.08)}
.btn-line{border-color:rgba(244,238,228,.35); color:var(--ink)}
.btn-line:hover{border-color:var(--gold); color:var(--gold-hi)}
.btn-sm{min-height:38px; padding:0 18px; font-size:13px}
.btn-lg{min-height:52px; padding:0 28px; font-size:15px}
.btn-icon{width:38px; min-height:38px; padding:0}

/* ---------- Marca ---------- */
.brand{color:var(--ink)}
.brand img{width:44px; height:44px; box-shadow:0 0 0 1px var(--line-strong)}
.brand-name{font-family:var(--font-display); font-size:23px; font-weight:500; letter-spacing:.06em}
.brand-name small{font-size:9.5px; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); margin-top:5px}



/* ---------- Componentes de base.css sobre fondo oscuro ---------- */
:root{
    --cod:#5cc28f;
    --cod-soft:rgba(80,180,130,.14);
    --danger:#ef6a60;
    --danger-soft:rgba(239,106,96,.14);
    --warn:#e8b04a;
    --warn-soft:rgba(232,176,74,.14);
    --info:#7aa7ff;
    --info-soft:rgba(122,167,255,.14);
    --btn-bg:var(--gold-grad);
    --btn-fg:#1a140b;
    --btn-hover:linear-gradient(180deg,#f3dcac 0%,#dcb877 45%,#bf9552 100%);
    --shadow-1:0 1px 0 rgba(255,255,255,.03), 0 8px 24px -16px rgba(0,0,0,.8);
    --shadow-3:0 40px 90px -30px rgba(0,0,0,.95);
}

h1,h2,h3{font-weight:inherit}
html{scrollbar-color:#3a342c transparent}
*{scrollbar-color:#3a342c transparent}
.btn-primary{box-shadow:0 10px 30px -16px rgba(212,175,110,.7), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{background:transparent; border-color:rgba(244,238,228,.28)}
.btn-ghost:hover:not(:disabled){border-color:var(--gold); color:var(--gold-hi)}
.btn-quiet:hover:not(:disabled){background:var(--surface-2)}
.btn-cod{background:#1f7a52; color:#fff}
.btn-cod:hover:not(:disabled){background:#23905f}
.btn-danger{background:#b3372e; color:#fff}
.btn-danger:hover:not(:disabled){background:#c9443a}
.btn-danger-ghost{background:transparent; border-color:rgba(239,106,96,.45); color:var(--danger)}

.chip.active,.chip[aria-pressed="true"]{background:var(--gold-grad); border-color:transparent; color:#1a140b}

.input,.select,.textarea{background-color:var(--bg); border-color:var(--line-strong)}
.input::placeholder,.textarea::placeholder{color:#6a6358}
.input:focus,.select:focus,.textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,110,.18)}
.select{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 1.5 6 6.5l5-5' fill='none' stroke='%23d4af6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.select option{background:var(--surface); color:var(--ink)}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.4)}

/* Insignias de estado: texto claro sobre un fondo del mismo tono */
.badge,.estado{
    background:color-mix(in srgb, var(--hue) 20%, transparent);
    color:color-mix(in oklab, var(--hue) 55%, #fff);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hue) 30%, transparent);
}
.tag-dark{background:#0e0c0a; color:var(--gold-hi); border-color:var(--line-strong)}
.tag-gold{color:var(--gold-hi)}

.table th{background:var(--bg-2); color:var(--ink-faint); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase}
.table tbody tr:hover td{background:rgba(212,175,110,.04)}

.modal{background:rgba(0,0,0,.72)}
.modal-box{background:var(--surface); border:1px solid var(--line-strong)}
.toast{background:var(--surface-2); color:var(--ink); border:1px solid var(--line-strong)}
.toast i{color:var(--cod)}
.toast.error i{color:var(--danger)}

/* Fotos de producto (fondo blanco): sobre marfil y fundidas con él */
.inset{background:var(--ivory)}
.inset img{mix-blend-mode:multiply}