/* =========================================================
   CEPD — hoja base compartida (tienda y admin)
   Tokens, reset, tipografía y componentes comunes.
   Cada página carga esta hoja primero y luego la suya.
   ========================================================= */

:root{
    /* Color */
    --bg:#eef0ec;
    --surface:#ffffff;
    --surface-2:#f6f7f4;
    --surface-3:#e7e9e4;
    --ink:#1b1e22;
    --ink-soft:#59606a;
    --ink-faint:#80868f;
    --line:#dcdfd8;
    --line-strong:#c4c8c0;

    --brand:#b8862b;          /* dorado del logo: detalles y fondos */
    --brand-text:#86621a;     /* dorado legible como texto sobre claro */
    --brand-soft:#f4ecd9;

    --cod:#1e6b4e;            /* pago contra entrega / WhatsApp / éxito */
    --cod-soft:#e3f0ea;
    --danger:#b3261e;
    --danger-soft:#fbe9e7;
    --warn:#9a6700;
    --warn-soft:#fdf3d7;
    --info:#2f6fe0;
    --info-soft:#e6eefc;

    --btn-bg:#1b1e22;
    --btn-fg:#ffffff;
    --btn-hover:#343941;

    /* Estados de pedido: un tono por estado; fondo y texto se derivan */
    --st-pendiente:#c98a0b;
    --st-validando:#7a5af8;
    --st-confirmado:#2f6fe0;
    --st-preparando:#0e8a8a;
    --st-enviado:#4c51bf;
    --st-en-ruta:#0284c7;
    --st-entregado:#1f8a4c;
    --st-devuelto:#d9601a;
    --st-no-entregado:#c2415b;
    --st-cancelado:#6b7280;

    /* Tipografía */
    --font-display:"Fraunces", Georgia, "Times New Roman", serif;
    --font-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Espacio, radios, sombras */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
    --space-6:32px; --space-7:48px; --space-8:72px; --space-9:112px;
    --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
    --shadow-1:0 1px 2px rgba(27,30,34,.06), 0 2px 8px rgba(27,30,34,.04);
    --shadow-2:0 16px 40px -16px rgba(27,30,34,.28);
    --shadow-3:0 30px 80px -20px rgba(27,30,34,.35);

    --wrap:1180px;
    --ease:cubic-bezier(.2,.7,.2,1);
    color-scheme:light;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
    margin:0; min-height:100vh;
    background:var(--bg); color:var(--ink);
    font-family:var(--font-body); font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,h5{margin:0; line-height:1.15}
p{margin:0}
ul,ol{margin:0}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px}
::selection{background:var(--brand-soft); color:var(--ink)}
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{transition:none!important; animation:none!important}
}

/* ---------- Tipografía ---------- */
.display,.h-display{
    font-family:var(--font-display); font-weight:500;
    letter-spacing:-.015em; line-height:1.05;
    font-optical-sizing:auto;
}
.muted{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--space-5)}
@media (max-width:480px){.wrap{padding:0 var(--space-4)}}

/* ---------- Botones ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:48px; padding:0 22px; border-radius:var(--radius-pill);
    border:1px solid transparent; background:transparent;
    font-weight:600; font-size:15px; line-height:1.2; text-decoration:none; white-space:nowrap;
    transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; transform:none}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg)}
.btn-primary:hover:not(:disabled){background:var(--btn-hover)}
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background:var(--surface)}
.btn-ghost:hover:not(:disabled){border-color:var(--ink)}
.btn-quiet{color:var(--ink-soft)}
.btn-quiet:hover:not(:disabled){color:var(--ink); background:var(--surface-2)}
.btn-cod{background:var(--cod); color:#fff}
.btn-cod:hover:not(:disabled){background:#185a41}
.btn-danger{background:var(--danger); color:#fff}
.btn-danger:hover:not(:disabled){background:#95201a}
.btn-danger-ghost{border-color:#e9b9b4; color:var(--danger); background:var(--surface)}
.btn-danger-ghost:hover:not(:disabled){background:var(--danger-soft)}
.btn-sm{min-height:36px; padding:0 14px; font-size:14px; gap:8px}
.btn-lg{min-height:56px; padding:0 28px; font-size:16px}
.btn-block{width:100%}
.btn-icon{width:38px; min-height:38px; padding:0; border-radius:var(--radius-sm)}

/* ---------- Chips ---------- */
.chip{
    display:inline-flex; align-items:center; gap:8px; flex:none;
    min-height:38px; padding:0 16px; border-radius:var(--radius-pill);
    border:1px solid var(--line); background:var(--surface);
    font-size:14px; font-weight:500; color:var(--ink-soft);
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover{border-color:var(--line-strong); color:var(--ink)}
.chip.active,.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.chip .count{font-size:12px; opacity:.7}

/* ---------- Tarjetas ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-1)}

/* ---------- Formularios ---------- */
.field{display:grid; gap:6px; min-width:0}
.field > label,.label{font-size:14px; font-weight:600; color:var(--ink)}
.field .hint,.hint{font-size:13px; color:var(--ink-faint); font-weight:400}
.input,.select,.textarea{
    width:100%; min-height:46px; padding:0 14px;
    border-radius:var(--radius-md); border:1px solid var(--line-strong);
    background:var(--surface); color:var(--ink);
    transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.textarea{padding:12px 14px; min-height:96px; resize:vertical; line-height:1.5}
.select{
    appearance:none; padding-right:40px; cursor:pointer;
    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='%2359606a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
}
.input::placeholder,.textarea::placeholder{color:#a1a6ad}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.input:user-invalid,.textarea:user-invalid{border-color:var(--danger)}
.input-icon{position:relative}
.input-icon > i{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-faint); pointer-events:none; font-size:15px}
.input-icon > .input{padding-left:42px}
.search-pill .input{border-radius:var(--radius-pill)}

/* ---------- Insignias de estado de pedido ---------- */
.badge,.estado{
    --hue:var(--st-cancelado);
    display:inline-flex; align-items:center; gap:6px;
    height:26px; padding:0 10px; border-radius:var(--radius-pill);
    font-size:12.5px; font-weight:600; white-space:nowrap; line-height:1;
    background:color-mix(in srgb, var(--hue) 13%, transparent);
    color:color-mix(in oklab, var(--hue) 70%, #111);
    text-transform:none; letter-spacing:0;
}
.badge::before,.estado::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--hue); flex:none}
.estado.pendiente,.estado-pendiente,[data-st="PENDIENTE"]{--hue:var(--st-pendiente)}
.estado.validando,.estado-validando,[data-st="VALIDANDO"]{--hue:var(--st-validando)}
.estado.confirmado,.estado-confirmado,[data-st="CONFIRMADO"]{--hue:var(--st-confirmado)}
.estado.preparando,.estado-preparando,[data-st="PREPARANDO"]{--hue:var(--st-preparando)}
.estado.enviado,.estado-enviado,[data-st="ENVIADO"]{--hue:var(--st-enviado)}
.estado.en_ruta,.estado-ruta,.estado-en-ruta,[data-st="EN_RUTA"]{--hue:var(--st-en-ruta)}
.estado.entregado,.estado-entregado,[data-st="ENTREGADO"]{--hue:var(--st-entregado)}
.estado.devuelto,.estado-devuelto,[data-st="DEVUELTO"]{--hue:var(--st-devuelto)}
.estado.no_entregado,.estado-no-entregado,[data-st="NO_ENTREGADO"]{--hue:var(--st-no-entregado)}
.estado.cancelado,.estado-cancelado,[data-st="CANCELADO"]{--hue:var(--st-cancelado)}

/* Etiqueta neutra (no es estado) */
.tag{
    display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
    border-radius:var(--radius-pill); font-size:12px; font-weight:600;
    background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);
}
.tag-dark{background:var(--ink); color:#fff; border-color:var(--ink)}
.tag-gold{background:var(--brand-soft); color:var(--brand-text); border-color:transparent}
.tag-green{background:var(--cod-soft); color:var(--cod); border-color:transparent}
.tag-red{background:var(--danger-soft); color:var(--danger); border-color:transparent}

/* ---------- Tablas ---------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th{
    text-align:left; font-weight:600; font-size:12.5px; color:var(--ink-faint);
    padding:11px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap;
}
.table td{padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--surface-2)}
.table .r{text-align:right}

/* ---------- Modal ---------- */
.modal{
    position:fixed; inset:0; z-index:1000; display:none;
    align-items:center; justify-content:center; padding:var(--space-4);
    background:rgba(20,22,25,.48); backdrop-filter:blur(3px);
}
.modal.open{display:flex}
.modal-box{
    width:min(560px,100%); max-height:calc(100vh - 32px); overflow:auto;
    background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-3);
    padding:var(--space-6); animation:modal-in .22s var(--ease);
}
@keyframes modal-in{from{opacity:0; transform:translateY(10px) scale(.98)}to{opacity:1; transform:none}}

/* ---------- Toast ---------- */
.toast{
    position:fixed; left:50%; bottom:24px; z-index:1100;
    transform:translate(-50%,16px); opacity:0; pointer-events:none;
    display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px);
    padding:12px 18px; border-radius:var(--radius-md);
    background:var(--ink); color:#fff; font-size:14px; font-weight:500; box-shadow:var(--shadow-2);
    transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast i{color:#7fd3ad}
.toast.error i{color:#ff9b93}

/* ---------- Carga y vacío ---------- */
.skeleton{
    background:linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
    background-size:200% 100%; animation:shimmer 1.3s linear infinite; border-radius:var(--radius-sm);
}
@keyframes shimmer{to{background-position:-200% 0}}
.spinner{width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.empty{display:grid; justify-items:center; gap:var(--space-3); text-align:center; padding:var(--space-8) var(--space-5); color:var(--ink-soft)}
.empty > i{font-size:26px; color:var(--ink-faint)}
.empty strong{color:var(--ink); font-size:16px}
.empty p{max-width:38ch; font-size:14.5px}

/* ---------- Foto de producto sobre blanco ---------- */
.inset{background:#fff; overflow:hidden}
.inset img{width:100%; height:100%; object-fit:contain}

/* ---------- Marca ---------- */
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand img{width:40px; height:40px; border-radius:50%; flex:none}
.brand-name{font-family:var(--font-display); font-size:20px; font-weight:500; letter-spacing:.02em; line-height:1}
.brand-name small{display:block; font-family:var(--font-body); font-size:12px; font-weight:500; color:var(--ink-faint); letter-spacing:.03em; margin-top:4px}