/* ============================================================
   MyM · Theme — tokens y componentes de marca compartidos
   Cargar antes de style.css / stylelr.css / <style> de cada página,
   para que puedan sobrescribir puntualmente durante la migración.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
    /* Marca — madera + bosque */
    --green:#2F6B3F; --green-dark:#245230; --green-light:#3d8a54;
    --brick:#A0352F; --brick-dark:#7D2A25;
    --terra:#e17055; --gold:#f6c862;
    /* Neutros cálidos */
    --cream:#faf6f1; --surface:#ffffff;
    --ink:#2d3748; --muted:#5a6473; --line:#ece3d8;
    /* Sistema */
    --radius-sm:10px; --radius:14px; --radius-lg:22px; --pill:999px;
    --shadow-sm:0 2px 8px rgba(45,32,20,.06);
    --shadow-md:0 10px 28px rgba(45,32,20,.10);
    --shadow-lg:0 18px 44px rgba(45,32,20,.16);
    --ring:0 0 0 3px rgba(47,107,63,.18);
}

body{
    font-family:'Poppins', system-ui, 'Segoe UI', sans-serif;
    background:var(--cream);
    color:var(--ink);
}

/* ----- Header / nav de marca (ladrillo, sticky) ----- */
.menu{
    background-color:var(--brick);
    background-image:linear-gradient(135deg,var(--brick) 0%,var(--brick-dark) 100%), url('assets/Vector.svg');
    background-blend-mode:multiply;
    position:sticky; top:0; z-index:100;
    box-shadow:0 6px 20px rgba(125,42,37,.28);
}
.menu__link{ transition:background-color .2s ease; }
.menu__link:hover{ background-color:rgba(255,255,255,.14); }
.menu__nesting{
    background-color:var(--brick-dark);
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    box-shadow:var(--shadow-md);
    overflow:hidden;
}
.menu__link--inside:hover{ background-color:rgba(255,255,255,.14); }

/* ----- Footer de marca (mismo ladrillo que el header) ----- */
.footer{
    background-color:var(--brick);
    background-image:linear-gradient(135deg,var(--brick) 0%,var(--brick-dark) 100%), url('assets/Vector_footer.png');
    background-blend-mode:multiply;
}

/* ----- Botones ----- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 28px; border:none; border-radius:var(--pill);
    font-family:inherit; font-weight:600; font-size:.95rem;
    cursor:pointer; text-decoration:none; white-space:nowrap;
    transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.btn--block{ width:100%; }
.btn--primary{ background:var(--brick); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--brick-dark); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn--secondary{ background:var(--green); color:#fff; box-shadow:var(--shadow-sm); }
.btn--secondary:hover{ background:var(--green-dark); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--brick); border:1.5px solid var(--line); }
.btn--ghost:hover{ background:var(--cream); border-color:var(--brick); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

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

/* ----- Campos de formulario -----
   Se listan los tipos "de texto" explícitamente para no afectar
   radio/checkbox/file/submit que ya tienen su propio look nativo. */
.field{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.field label{ font-size:.85rem; font-weight:600; color:var(--muted); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="search"], input[type="number"], input[type="date"], textarea, select{
    font-family:inherit; font-size:1rem; color:var(--ink);
    background:var(--surface); border:1.5px solid var(--line);
    border-radius:var(--radius-sm); padding:13px 16px;
    transition:border-color .18s ease, box-shadow .18s ease;
}
input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder,
input[type="tel"]::placeholder, input[type="search"]::placeholder, textarea::placeholder{
    color:var(--muted); opacity:.8;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus,
input[type="search"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus{
    outline:none; border-color:var(--green); box-shadow:var(--ring);
}
input:disabled, textarea:disabled{ background:var(--cream); color:var(--muted); }

.field-error{ color:var(--brick); font-size:.82rem; }
.field-hint{ color:var(--muted); font-size:.82rem; }
.field-ok{ color:var(--green-dark); font-size:.82rem; }

/* ----- Badges de estado de pedido -----
   Mismo vocabulario que ALLOWED_ESTADOS en index.js. */
.badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 14px; border-radius:var(--pill);
    font-size:.78rem; font-weight:600; letter-spacing:.02em;
    white-space:nowrap;
}
.badge--generado{ background:#fef3c7; color:#92400e; }
.badge--aceptado_espera_pago{ background:#fef3c7; color:#92400e; }
.badge--pagado_espera_envio{ background:#dbeafe; color:#1e40af; }
.badge--enviado, .badge--retirado{ background:#e0f2fe; color:#075985; }
.badge--finalizado{ background:#dcfce7; color:#166534; }
.badge--rechazado{ background:#fee2e2; color:#991b1b; }