/* ============================================================
   XPRESS · Sistema de marca (Manual del Sitio Web · ago 2026)
   Fuente única de tokens y primitivas para todo el sitio.
   Regla: azul marino = estructura e identidad · naranja = acción.
   Colores planos (sin degradados) · esquinas rectas (sin radius).
   ============================================================ */

:root {
    /* --- Marca --- */
    --xp-navy: #000771;         /* base: títulos, hero, fondos de marca */
    --xp-navy-deep: #000033;    /* footer, fondos oscuros */
    --xp-orange: #ED4C01;       /* CTAs, kickers, acentos */
    --xp-orange-hover: #C63F01; /* hover de botones naranjas */
    --xp-orange-soft: #FEF0E8;  /* fondos de badges y tabs activos */

    /* --- Tinta y superficies --- */
    --xp-ink: #131235;          /* texto principal */
    --xp-ink-700: #3a3960;      /* texto secundario */
    --xp-ink-500: #6b6a8c;      /* texto terciario / descripciones */
    --xp-ink-400: #9997b6;      /* placeholder, íconos inactivos */
    --xp-line: #e7e7f1;         /* bordes y divisores internos */
    --xp-line-2: #dcdceb;       /* bordes de botón secundario / hover */
    --xp-surface: #ffffff;      /* tarjetas, fondo base */
    --xp-surface-2: #f6f6fb;    /* inputs, secciones alternas */

    /* --- Estados (reservados, siempre con ícono + etiqueta) --- */
    --xp-ok: #12934e;      --xp-ok-bg: #e7f6ee;      /* éxito / entregado */
    --xp-info: #2563eb;    --xp-info-bg: #e8f0fe;    /* info / en tránsito */
    --xp-warn: #c77700;    --xp-warn-bg: #fdf3e3;    /* alerta / restringido */
    --xp-crit: #d92d20;    --xp-crit-bg: #fdecea;    /* crítico / prohibido */

    /* --- Tipografía --- */
    --xp-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --xp-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* --- Forma y ritmo --- */
    --xp-radius: 0;             /* esquinas rectas en todo */
    --xp-divider: 2px;          /* divisor fuerte entre secciones mayores */
    --xp-container: 1280px;
    --xp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BASE
   ============================================================ */
.xp-brand,
.xp-brand * { box-sizing: border-box; }

/* Utilidades tipográficas -------------------------------------------------- */
.xp-mono { font-family: var(--xp-mono); font-feature-settings: "tnum" 1; }

/* Kicker de sección: mono 12px naranja, mayúsculas, tracking .08em */
.xp-kicker {
    font-family: var(--xp-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xp-orange);
    display: inline-block;
    margin-bottom: 14px;
}

/* Títulos de marca: Inter 900, tracking -0.02em, navy */
.xp-h1 {
    font-family: var(--xp-font);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.02;
    color: var(--xp-navy);
    font-size: clamp(38px, 6vw, 60px);
}
.xp-h2 {
    font-family: var(--xp-font);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--xp-navy);
    font-size: clamp(30px, 4vw, 40px);
}

/* ============================================================
   BOTONES
   Máx. 1 acción primaria naranja por pantalla.
   ============================================================ */
.xp-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 26px;
    font-family: var(--xp-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--xp-radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s var(--xp-ease), color .2s var(--xp-ease), border-color .2s var(--xp-ease);
}
.xp-btn svg,
.xp-btn i { width: 16px; height: 16px; flex-shrink: 0; }

.xp-btn--primary { background: var(--xp-orange); color: #fff; }
.xp-btn--primary:hover { background: var(--xp-orange-hover); color: #fff; }

/* Acción navy (estructura) — cuando el naranja ya está usado en la vista */
.xp-btn--navy { background: var(--xp-navy); color: #fff; border-color: var(--xp-navy); }
.xp-btn--navy:hover { background: var(--xp-navy-deep); color: #fff; border-color: var(--xp-navy-deep); }

.xp-btn--secondary {
    background: var(--xp-surface);
    color: var(--xp-navy);
    border-color: var(--xp-line-2);
}
.xp-btn--secondary:hover { border-color: var(--xp-navy); }

/* Secundario sobre fondo oscuro */
.xp-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.35);
}
.xp-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ============================================================
   TAGS TÉCNICOS · mono con borde (EC_NETWORK_v2.6, MAX 4 KG…)
   ============================================================ */
.xp-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--xp-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--xp-ink-500);
    border: 1px solid var(--xp-line);
    padding: 4px 8px;
}

/* ============================================================
   BADGES DE ESTADO · siempre punto/ícono + etiqueta
   ============================================================ */
.xp-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--xp-font);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border: 1px solid currentColor;
}
.xp-badge::before {
    content: "";
    width: 7px; height: 7px;
    background: currentColor;
    border-radius: 50%;
    flex-shrink: 0;
}
.xp-badge--ok   { color: var(--xp-ok);   background: var(--xp-ok-bg); }
.xp-badge--info { color: var(--xp-info); background: var(--xp-info-bg); }
.xp-badge--warn { color: var(--xp-warn); background: var(--xp-warn-bg); }
.xp-badge--crit { color: var(--xp-crit); background: var(--xp-crit-bg); }

/* ============================================================
   CHECKLISTS · check verde / X roja
   ============================================================ */
.xp-check, .xp-cross {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--xp-ink-700);
}
.xp-check svg { color: var(--xp-ok); flex-shrink: 0; margin-top: 1px; }
.xp-cross svg { color: var(--xp-crit); flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   FRANJA DE STATS · fondo navy o naranja, cifras mono grandes
   ============================================================ */
.xp-statband {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--xp-navy);
    color: #fff;
}
.xp-statband--orange { background: var(--xp-orange); }
.xp-statband__cell {
    padding: 34px 28px;
    border-left: 1px solid rgba(255,255,255,.14);
}
.xp-statband__cell:first-child { border-left: none; }
.xp-statband__num {
    font-family: var(--xp-mono);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}
.xp-statband__label {
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,.72);
}
@media (max-width: 640px) {
    .xp-statband { grid-template-columns: 1fr; }
    .xp-statband__cell { border-left: none; border-top: 1px solid rgba(255,255,255,.14); }
    .xp-statband__cell:first-child { border-top: none; }
}

/* ============================================================
   GRILLA CON BORDES · retícula compartida, divisores 1px, sin gap
   ============================================================ */
.xp-gridframe {
    display: grid;
    border: 1px solid var(--xp-line);
    background: var(--xp-line); /* actúa como color de los divisores */
    gap: 1px;
}
.xp-gridframe > * { background: var(--xp-surface); }

/* ============================================================
   ESTRUCTURA · contenedor, secciones, divisores
   ============================================================ */
.xp-container {
    max-width: var(--xp-container);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}
/* Divisor fuerte de 2px navy entre secciones mayores */
.xp-divider-top { border-top: var(--xp-divider) solid var(--xp-navy); }

/* Placeholder de imagen · rayado diagonal con nota mono */
.xp-imgph {
    background:
        repeating-linear-gradient(-45deg,
            var(--xp-surface-2) 0, var(--xp-surface-2) 10px,
            #eeeef6 10px, #eeeef6 20px);
    border: 1px solid var(--xp-line);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--xp-ink-400);
    font-family: var(--xp-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 20px;
}