/**
 * PizzaPizza · Web UI Kit — tokens
 *
 * ─────────────────────────────────────────────────────────────────────────
 * DE DÓNDE SALEN ESTOS VALORES
 * ─────────────────────────────────────────────────────────────────────────
 * Del archivo de Figma "PizzaPizza Web UI Kit" (Agencia Forsend, v1.0), leído
 * directamente desde el documento — no copiados a ojo de una captura. Los
 * nombres son los que el propio kit declara, así que esta hoja y el Figma
 * hablan el mismo idioma: si allá cambia un token, acá se cambia una línea.
 *
 * La portada del kit lo dice explícitamente:
 *
 *     "Colores oficiales #000084 y #DA3832. Avenir Next en implementación
 *      web; Inter sólo para previsualización en Figma."
 *
 * ─────────────────────────────────────────────────────────────────────────
 * OJO: ESTO CAMBIA EL AZUL Y EL ROJO DE TODO EL SITIO
 * ─────────────────────────────────────────────────────────────────────────
 * Veníamos usando #06038d y #eb1c25. El kit define #000084 y #da3832. Son
 * parecidos pero no iguales, y el kit es la fuente de verdad.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * POR QUÉ SE CARGA LA ÚLTIMA
 * ─────────────────────────────────────────────────────────────────────────
 * Las hojas del tema declaran las mismas variables en :root con valores
 * distintos —--pp-bg, --pp-border y --pp-radius están definidas DOS veces cada
 * una— y hoy gana la que cargue al final, sin criterio. Cargando esta al
 * final, gana el kit y esa ambigüedad se termina.
 *
 * Los alias del final son el puente: el CSS existente usa --pp-navy, --pp-red
 * y compañía, así que apuntarlos a los tokens del kit alinea todo el sitio sin
 * tener que reescribir regla por regla.
 */

:root {
    /* ── Marca ─────────────────────────────────────────────────────── */
    --pp-brand-blue: #000084;
    --pp-brand-red: #da3832;

    /* ── Texto ─────────────────────────────────────────────────────── */
    --pp-text-primary: #000084;
    --pp-text-secondary: #6b7194;
    --pp-text-inverse: #ffffff;

    /* ── Acciones ──────────────────────────────────────────────────── */
    --pp-action-primary: #000084;
    --pp-action-primary-hover: #1a1f6e;
    --pp-action-destructive: #da3832;
    --pp-action-disabled-text: #6b7194;
    --pp-action-disabled-bg: #e1e4f0;

    /* ── Superficies ───────────────────────────────────────────────── */
    --pp-surface-default: #ffffff;
    --pp-surface-hover: #f5f6ff;
    --pp-surface-icon: #eef0f9;
    --pp-surface-selected: #eef0ff;
    --pp-background-page: #f7f8fb;
    --pp-background-subtle: #f4f5fb;

    /* ── Bordes ────────────────────────────────────────────────────── */
    --pp-border-default: #e1e4f0;
    --pp-border-strong: #d9dcf2;
    --pp-border-focus: #000084;

    /* ── Estados ───────────────────────────────────────────────────── */
    --pp-status-info-text: #000084;
    --pp-status-info-bg: #f2f3ff;
    --pp-status-success-text: #187242;
    --pp-status-success-bg: #eaf8ef;
    --pp-status-warning-text: #6b5500;
    --pp-status-warning-bg: #fff8e6;
    --pp-status-error-text: #be2832;
    --pp-status-error-bg: #fff0f1;

    /* ── Radios ────────────────────────────────────────────────────── */
    --pp-radius-xs: 4px;
    --pp-radius-sm: 8px;
    --pp-radius-md: 12px;
    --pp-radius-pill: 999px;

    /* ── Espaciado ─────────────────────────────────────────────────── */
    --pp-spacing-1: 4px;
    --pp-spacing-2: 8px;

    /* ── Controles ─────────────────────────────────────────────────── */
    --pp-control-touch: 44px;
    --pp-control-switch-width: 42px;
    --pp-control-switch-height: 22px;
    --pp-control-switch-thumb: 16px;

    /* ── Elevación ─────────────────────────────────────────────────── */
    --pp-elevation-card: 0 5px 20px rgba(6, 3, 141, 0.10);
    --pp-elevation-floating: 0 12px 34px rgba(6, 3, 141, 0.18);

    /*
     * ── Puente con el CSS que ya existe ────────────────────────────
     * Los nombres viejos apuntan a los tokens del kit. Así el sitio se alinea
     * de una vez y no hay que reescribir cada regla; y a medida que se toque
     * cada hoja, se pueden ir cambiando por el nombre del kit.
     */
    --pp-navy: var(--pp-brand-blue);
    --pp-navy-soft: var(--pp-action-primary-hover);
    --pp-navy-light: #1a18a8;
    --pp-red: var(--pp-brand-red);
    --pp-red-dark: var(--pp-status-error-text);
    --pp-text: var(--pp-text-primary);
    --pp-texto: var(--pp-text-primary);
    --pp-text-soft: var(--pp-text-secondary);
    --pp-muted: var(--pp-text-secondary);
    --pp-suave: var(--pp-text-secondary);
    --pp-white: var(--pp-surface-default);
    --pp-card: var(--pp-surface-default);
    --pp-bg: var(--pp-background-page);
    --pp-fondo: var(--pp-background-page);
    --pp-border: var(--pp-border-default);
    --pp-borde: var(--pp-border-default);
    --pp-icon-bg: var(--pp-surface-icon);
    --pp-radius: var(--pp-radius-md);
    --pp-shadow: var(--pp-elevation-card);
    --pp-shadow-hover: var(--pp-elevation-floating);
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTES DEL KIT
   ═══════════════════════════════════════════════════════════════════════
   Las medidas salen del propio archivo de Figma, no de mirar una captura:
   relleno 16/12, radio 8, cuerpo 12 px semibold con 0.4 de interletrado, y
   etiqueta en mayúsculas. La documentación del componente en el kit dice:

       "Botón web compacto. Altura objetivo 40 px; mínimo táctil 44 px en
        móvil."

   Por eso el min-height sube a 44 px en pantallas de tocar: no es un capricho
   de tamaño, es el mínimo con el que un dedo acierta.
   ═══════════════════════════════════════════════════════════════════════ */

.pp-ui-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    justify-content: center;
    letter-spacing: 0.4px;
    line-height: normal;
    min-height: 40px;
    padding: 12px 16px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    white-space: nowrap;
}

/* ── Primario ──────────────────────────────────────────────────────── */
.pp-ui-btn--primary {
    background: var(--pp-action-primary);
    border-color: var(--pp-action-primary);
    color: var(--pp-text-inverse);
}

.pp-ui-btn--primary:hover,
.pp-ui-btn--primary:focus-visible {
    background: var(--pp-action-primary-hover);
    border-color: var(--pp-action-primary-hover);
    color: var(--pp-text-inverse);
}

/* ── Secundario ────────────────────────────────────────────────────── */
.pp-ui-btn--secondary {
    background: var(--pp-surface-default);
    border-color: var(--pp-border-focus);
    color: var(--pp-text-primary);
}

.pp-ui-btn--secondary:hover,
.pp-ui-btn--secondary:focus-visible {
    background: var(--pp-surface-hover);
    border-color: var(--pp-border-focus);
    color: var(--pp-text-primary);
}

/* ── Destructivo ───────────────────────────────────────────────────── */
.pp-ui-btn--destructive {
    background: var(--pp-action-destructive);
    border-color: var(--pp-action-destructive);
    color: var(--pp-text-inverse);
}

/* ── Fantasma ──────────────────────────────────────────────────────── */
.pp-ui-btn--ghost {
    background: var(--pp-surface-default);
    border-color: transparent;
    color: var(--pp-text-primary);
}

.pp-ui-btn--ghost:hover,
.pp-ui-btn--ghost:focus-visible {
    background: var(--pp-surface-hover);
    color: var(--pp-text-primary);
}

/* ── Inhabilitado ──────────────────────────────────────────────────── */
.pp-ui-btn:disabled,
.pp-ui-btn[aria-disabled="true"],
.pp-ui-btn.esta-inerte {
    background: var(--pp-action-disabled-bg);
    border-color: var(--pp-action-disabled-bg);
    color: var(--pp-action-disabled-text);
    cursor: default;
    pointer-events: none;
}

.pp-ui-btn--ghost:disabled,
.pp-ui-btn--ghost[aria-disabled="true"] {
    border-color: transparent;
}

/* El mínimo táctil que pide el kit. No es tamaño por gusto: es la medida con
   la que un dedo acierta sin ampliar. */
@media (pointer: coarse) {
    .pp-ui-btn { min-height: var(--pp-control-touch); }
}

/* ── Insignias de estado ───────────────────────────────────────────── */

.pp-ui-badge {
    align-items: center;
    border-radius: var(--pp-radius-pill);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    min-height: 23px;
    padding: 0 10px;
    text-transform: uppercase;
    white-space: nowrap;
}

.pp-ui-badge--success { background: var(--pp-status-success-bg); color: var(--pp-status-success-text); }
.pp-ui-badge--error   { background: var(--pp-status-error-bg);   color: var(--pp-status-error-text); }
.pp-ui-badge--warning { background: var(--pp-status-warning-bg); color: var(--pp-status-warning-text); }
.pp-ui-badge--info    { background: var(--pp-status-info-bg);    color: var(--pp-status-info-text); }

/* ── Paginación ────────────────────────────────────────────────────── */

.pp-ui-pag {
    align-items: center;
    background: var(--pp-surface-default);
    border: 1px solid var(--pp-border-default);
    border-radius: var(--pp-radius-sm);
    color: var(--pp-text-primary);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    height: 36px;
    justify-content: center;
    min-width: 36px;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.pp-ui-pag:hover,
.pp-ui-pag:focus-visible {
    background: var(--pp-surface-hover);
    border-color: var(--pp-border-focus);
    text-decoration: none;
}

.pp-ui-pag.esta-activa {
    background: var(--pp-action-primary);
    border-color: var(--pp-action-primary);
    color: var(--pp-text-inverse);
    cursor: default;
}

.pp-ui-pag.esta-inerte {
    background: var(--pp-action-disabled-bg);
    border-color: var(--pp-action-disabled-bg);
    color: var(--pp-action-disabled-text);
    cursor: default;
    pointer-events: none;
}