/* ==========================================================================
   DZ — TEMA COMPARTIDO
   --------------------------------------------------------------------------
   Lo usan login, mis-pedidos, entrenamiento, distribuidores, catálogo,
   admin y admin-productos. Va DESPUÉS del <style> de cada página, así que lo
   que se define aquí manda sobre lo de allá.

   Mismo lenguaje que la tienda (styles.css): fondo claro, rojo de acento,
   títulos en Bayon y texto en Instrument Sans. Para cambiar el color de
   todo el sitio basta con tocar --acento aquí y en styles.css.
   ========================================================================== */

:root {
    --acento:      #e60026;
    --acento-osc:  #b8001f;
    --acento-glow: rgba(230, 0, 38, .08);

    /* Estados: aprobado/entregado en verde, pendiente en ámbar, rechazado en
       rojo. No usan el rojo de la marca a propósito: un "aprobado" rojo se
       lee como un error. */
    --ok:      #16a34a;
    --warn:    #d97706;
    --error:   #e11d48;
    --info:    #2563eb;
    --whatsapp:#25d366;

    --bg:         #f5f5f5;
    --bg-card:    #ffffff;
    --card:       #ffffff;
    --bg-input:   #f6f6f6;
    --input:      #f6f6f6;
    --gris:       #f6f6f6;
    --border:     #e6e6e6;
    --border2:    #dcdcdc;
    --borde:      #e6e6e6;
    --text:       #111111;
    --texto:      #111111;
    --muted:      #6b6b6b;
    --text-muted: #6b6b6b;
    --negro:      #0a0a0a;

    --f-titulo: 'Bayon', 'Impact', 'Arial Narrow', sans-serif;
    --f-texto:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--f-texto) !important;
    background: var(--bg) !important;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }
::placeholder { color: #9a9a9a; }

/* ==========================================================================
   FRANJA ROJA DE ARRIBA (igual a la de la tienda)
   ========================================================================== */
.dz-anuncio {
    position: relative;
    z-index: 5;
    background: var(--acento);
    color: #fff;
    text-align: center;
    font-size: 12.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 10px 16px;
}

/* ==========================================================================
   BARRA SUPERIOR — la misma píldora blanca de la tienda
   ========================================================================== */
.dz-top {
    position: sticky;
    top: 12px;
    z-index: 200;
    width: calc(100% - 32px);
    max-width: 1200px;
    margin: 14px auto 0;
    min-height: 66px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, .97);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dz-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
}

.dz-marca img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }

.dz-marca b {
    display: block;
    font-family: var(--f-titulo);
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    letter-spacing: .5px;
    padding-top: 4px;
    white-space: nowrap;
}

.dz-marca small {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 1px;
    white-space: nowrap;
}

.dz-top-der { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Botones de la barra */
.dz-btn,
.dz-btn-sec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--f-texto);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}

.dz-btn {
    background: var(--acento);
    color: #fff;
    border: 1.5px solid var(--acento);
}
.dz-btn:hover { background: var(--acento-osc); border-color: var(--acento-osc); }

.dz-btn-sec {
    background: #fff;
    color: var(--text);
    border: 1.5px solid #e2e2e2;
}
.dz-btn-sec:hover { border-color: var(--text); }

.dz-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--acento-glow);
    color: var(--acento);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .dz-top { width: calc(100% - 20px); top: 8px; margin-top: 10px; padding: 8px 12px; min-height: 58px; border-radius: 16px; }
    .dz-marca img { width: 34px; height: 34px; }
    .dz-marca b { font-size: 21px; }
    .dz-marca small { display: none; }
    .dz-ocultar-movil { display: none !important; }
    .dz-btn, .dz-btn-sec { padding: 9px 13px; font-size: 11.5px; }
    .dz-btn .dz-txt, .dz-btn-sec .dz-txt { display: none; }
}

@media print {
    .dz-top, .dz-anuncio { display: none !important; }
    /* La portada del catálogo sale oscura en el PDF (con "Gráficos de fondo"):
       sus textos pequeños tienen que seguir leyéndose sobre el negro. */
    .pstat .num { color: #fff !important; }
    .pstat .lbl, .portada-fecha { color: rgba(255, 255, 255, .6) !important; border-color: rgba(255, 255, 255, .15) !important; }
    .hero::after, .portada::after { display: none; }
}

/* ==========================================================================
   BANNER OSCURO — la misma familia del banner de la tienda
   (distribuidores y entrenamiento usan .hero; el catálogo, .portada)
   ========================================================================== */
.hero,
.portada {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    background:
        radial-gradient(ellipse 55% 70% at 85% 65%, rgba(230, 0, 38, .32), transparent 70%),
        radial-gradient(ellipse 70% 80% at 15% 20%, rgba(255, 255, 255, .06), transparent 70%),
        linear-gradient(135deg, #1a1a1a 0%, #0b0b0b 55%, #050505 100%) !important;
    border: none !important;
    border-radius: 24px;
}

.hero {
    width: calc(100% - 32px);
    max-width: 1200px;
    margin: 18px auto 0;
    padding: 64px 28px 56px !important;
}

/* Rayas diagonales suaves */
.hero::before,
.portada::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 46px) !important;
    pointer-events: none;
}

/* Marca de agua "DZ" */
.hero::after,
.portada::after {
    content: 'DZ';
    position: absolute;
    right: 3%;
    bottom: -8%;
    font-family: var(--f-titulo);
    font-size: clamp(180px, 26vw, 380px);
    line-height: .8;
    color: rgba(255, 255, 255, .035);
    pointer-events: none;
}

.hero > *, .portada > * { position: relative; z-index: 1; }

.hero h2,
.portada h1 {
    font-family: var(--f-titulo) !important;
    font-weight: 400 !important;
    font-size: clamp(44px, 7vw, 88px) !important;
    line-height: .92 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff !important;
    text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}

.hero h2 span,
.portada h1 span { color: var(--acento) !important; }

.hero p,
.hero > p,
.portada .sub { color: rgba(255, 255, 255, .72) !important; }

.hero-badge,
.portada-badge {
    background: rgba(230, 0, 38, .16) !important;
    border: 1px solid rgba(230, 0, 38, .4) !important;
    color: #ff5a73 !important;
}

.hero-benefit {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 700;
}
.hero-benefit i { color: var(--acento) !important; }

@media (max-width: 640px) {
    .hero { width: calc(100% - 20px); padding: 44px 18px 40px !important; border-radius: 20px; }
}

/* ==========================================================================
   TÍTULOS EN BAYON
   Bayon viene en un solo grosor: el 900 que traían las páginas lo volvería
   una negrita falsa y borrosa, por eso va font-weight: 400.
   ========================================================================== */
.card h2,
#screenSuccess h3, #screenForgotOk h3,
.page-title h2, .no-session h3,
.incluye h3, .form-card h3, #successScreen h3, .success-screen h3,
.categoria-info h2, .catalogo-footer h3,
.modal-title, .confirm-title,
.access-card h2, .modal-box h3 {
    font-family: var(--f-titulo) !important;
    font-weight: 400 !important;
    letter-spacing: .5px;
    line-height: 1.05;
}

.card h2, .access-card h2   { font-size: 38px !important; }
.page-title h2              { font-size: 44px !important; }
.form-card h3, .incluye h3  { font-size: 34px !important; }
#screenSuccess h3, #screenForgotOk h3,
#successScreen h3, .success-screen h3 { font-size: 34px !important; }
.categoria-info h2          { font-size: 28px !important; }
.catalogo-footer h3         { font-size: 30px !important; }
.modal-title, .confirm-title, .modal-box h3 { font-size: 28px !important; }

/* Números grandes de las tarjetas de estadísticas */
.stat-card .num, .sp-card .num, .stat-box .num, .stat-value,
.pstat .num, .destacado-descuento .num {
    font-family: var(--f-titulo) !important;
    font-weight: 400 !important;
    letter-spacing: .5px;
}
.stat-card .num, .stat-value { font-size: 40px !important; line-height: 1.1; }
.sp-card .num, .stat-box .num { font-size: 34px !important; line-height: 1.1; }
.destacado-descuento .num   { font-size: 64px !important; }

/* ==========================================================================
   BOTONES: píldora, como en la tienda
   ========================================================================== */
.btn-main, .submit-btn, .btn-primary, .btn-pdf, .btn-login, .btn-g,
.btn-aprobar, .btn-rechazar, .btn-wa, .btn-wa-send, .back-home, .btn-outline,
.btn-secondary, .btn-cerrar-modal, .btn-danger, .btn-edit, .btn-back,
.filter-btn, .filtro-btn, .btn-save-estado, .btn-logout {
    border-radius: 999px !important;
}

.btn-main, .submit-btn, .btn-primary, .btn-pdf, .btn-login, .btn-g, .btn-wa-send {
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 800 !important;
}

/* El botón principal va en rojo con letra blanca */
.btn-main, .submit-btn, .btn-primary, .btn-pdf, .btn-login {
    background: var(--acento) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(230, 0, 38, .22) !important;
}
.btn-main:hover:not(:disabled), .submit-btn:hover:not(:disabled),
.btn-primary:hover, .btn-pdf:hover, .btn-login:hover { background: var(--acento-osc) !important; }

/* Filtros activos: negro sólido, como los botones de categoría */
.filter-btn.active, .filtro-btn.active {
    background: var(--negro) !important;
    border-color: var(--negro) !important;
    color: #fff !important;
}

/* Tarjetas: un poco de sombra en vez del borde oscuro de antes */
.card, .form-card, .access-card, .modal, .modal-box, .confirm-modal {
    box-shadow: 0 20px 60px rgba(0, 0, 0, .08) !important;
    border-color: var(--border) !important;
}

.modal-overlay { background: rgba(0, 0, 0, .45) !important; }

/* Pestañas del panel de admin: en el celular no caben las tres y la
   última se salía de la pantalla. Se achican y, si aun así no caben, se
   deslizan de lado en vez de empujar la página. */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
    .tab-btn { padding: 10px 12px !important; font-size: 13px !important; }
}

/* Campos: al enfocar, borde negro como el buscador de la tienda */
input:focus, select:focus, textarea:focus { border-color: var(--text) !important; box-shadow: 0 0 0 3px rgba(0, 0, 0, .06) !important; }