/* ================================================
   PROFEGO — MAIN.CSS
   Estilos globales compartidos
   Estándar: BEM + CSS Custom Properties
   Actualizado según Manual de Marca oficial
   ================================================ */

/* ------------------------------------------------
   1. CSS VARIABLES (Design Tokens)
   ------------------------------------------------ */
:root {
    /* ── Color principal (Pantone 144C) ──────────
       HEX oficial del manual: #F29224             */
    --color-primary:        #F29224;
    --color-primary-dark:   #D97D10;
    --color-primary-light:  #F7B665;
    --color-primary-xlight: #FFEFDA;   /* Complementario 4 — HEX: FFEFDA */

    /* ── Colores complementarios oficiales ───────
       Complementario 1 — Pantone 3292C            */
    --color-comp-1:         #165851;
    --color-comp-1-light:   #1E7A70;

    /* Complementario 2 — Pantone 7693C            */
    --color-comp-2:         #004D77;
    --color-comp-2-light:   #005F93;

    /* Complementario 3 — Pantone 3145C            */
    --color-comp-3:         #147582;
    --color-comp-3-light:   #1A90A0;

    /* ── Alias semánticos (usan colores oficiales) */
    --color-navy:           #004D77;   /* Complementario 2 como navy principal */
    --color-navy-dark:      #003558;
    --color-navy-light:     #005F93;

    /* ── Neutros ─────────────────────────────── */
    --color-white:          #FFFFFF;
    --color-bg:             #F8F9FA;
    --color-bg-alt:         #F0F2F5;
    --color-border:         #E2E6EA;
    --color-border-light:   #F1F3F5;

    /* ── Textos ──────────────────────────────── */
    --color-text:           #004D77;   /* Navy oficial como color de texto base */
    --color-text-secondary: #5A6A7A;
    --color-text-muted:     #9AA5B1;
    --color-text-light:     #FFFFFF;

    /* ── Semánticos ──────────────────────────── */
    --color-success:        #28A745;
    --color-success-light:  #D4EDDA;
    --color-error:          #DC3545;
    --color-error-light:    #F8D7DA;
    --color-warning:        #FFC107;
    --color-warning-light:  #FFF3CD;
    --color-info:           #147582;   /* Complementario 3 como info */
    --color-info-light:     #D1ECF1;

    /* ── Tipografía (Josefin Sans — fuente oficial del manual) ── */
    --font-primary: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:         0.75rem;   /* 12px */
    --font-size-sm:         0.875rem;  /* 14px */
    --font-size-base:       1rem;      /* 16px */
    --font-size-md:         1.125rem;  /* 18px */
    --font-size-lg:         1.25rem;   /* 20px */
    --font-size-xl:         1.5rem;    /* 24px */
    --font-size-2xl:        1.875rem;  /* 30px */
    --font-size-3xl:        2.25rem;   /* 36px */
    --font-size-4xl:        3rem;      /* 48px */
    --font-size-5xl:        3.75rem;   /* 60px */

    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:    1.25;
    --line-height-snug:     1.375;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.625;
    --line-height-loose:    2;

    /* ── Espaciado (escala 4px) ─────────────── */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-26: 7rem;

    /* ── Bordes ─────────────────────────────── */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* ── Sombras (ajustadas al navy oficial) ─── */
    --shadow-xs:  0 1px 2px rgba(0, 77, 119, 0.05);
    --shadow-sm:  0 1px 3px rgba(0, 77, 119, 0.08), 0 1px 2px rgba(0, 77, 119, 0.06);
    --shadow-md:  0 4px 6px rgba(0, 77, 119, 0.07), 0 2px 4px rgba(0, 77, 119, 0.06);
    --shadow-lg:  0 10px 15px rgba(0, 77, 119, 0.08), 0 4px 6px rgba(0, 77, 119, 0.05);
    --shadow-xl:  0 20px 25px rgba(0, 77, 119, 0.10), 0 10px 10px rgba(0, 77, 119, 0.04);
    --shadow-primary: 0 4px 14px rgba(242, 146, 36, 0.35);  /* color primario oficial */
    --shadow-navy:    0 4px 14px rgba(0, 77, 119, 0.25);

    /* ── Transiciones ────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* ── Z-index ─────────────────────────────── */
    /* CORRECCIÓN: se añade --z-navbar que faltaba.
       Escala: navbar < dropdown < sticky < fixed < modal < toast < loading */
    --z-base:     0;
    --z-navbar:   100;    /* ← AÑADIDO — navbar siempre sobre el contenido */
    --z-dropdown: 200;    /* ← SUBIDO — debe superar al navbar */
    --z-sticky:   300;
    --z-fixed:    400;
    --z-modal:    500;
    --z-toast:    600;
    --z-loading:  9999;

    /* ── Contenedor ──────────────────────────── */
    --container-max: 1280px;
    --container-padding: var(--space-6);
}


/* ------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-navy);
}

p {
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}


/* ------------------------------------------------
   3. TIPOGRAFÍA
   ------------------------------------------------ */
.text-xs      { font-size: var(--font-size-xs); }
.text-sm      { font-size: var(--font-size-sm); }
.text-base    { font-size: var(--font-size-base); }
.text-md      { font-size: var(--font-size-md); }
.text-lg      { font-size: var(--font-size-lg); }
.text-xl      { font-size: var(--font-size-xl); }
.text-2xl     { font-size: var(--font-size-2xl); }
.text-3xl     { font-size: var(--font-size-3xl); }
.text-4xl     { font-size: var(--font-size-4xl); }

.font-light    { font-weight: var(--font-weight-light); }
.font-regular  { font-weight: var(--font-weight-regular); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.text-primary   { color: var(--color-primary) !important; }
.text-navy      { color: var(--color-navy) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-white     { color: var(--color-white) !important; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

h1 { font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl)); }
h2 { font-size: clamp(var(--font-size-xl),  3vw, var(--font-size-3xl)); }
h3 { font-size: clamp(var(--font-size-lg),  2.5vw, var(--font-size-2xl)); }
h4 { font-size: clamp(var(--font-size-md),  2vw, var(--font-size-xl)); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

.section-title {
    font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
    margin-bottom: var(--space-4);
}

.section-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 600px;
}

.section-label {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
}


/* ------------------------------------------------
   4. LAYOUT & CONTENEDOR
   ------------------------------------------------ */
.container-profego {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}

.section--sm {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.section--lg {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}

.section--bg    { background-color: var(--color-bg); }
.section--navy  { background-color: var(--color-navy);    color: var(--color-white); }
.section--primary { background-color: var(--color-primary); color: var(--color-white); }

/* Degradado oficial del manual (color principal → complementario 4) */
.section--gradient {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-xlight) 100%);
}

.section-header            { margin-bottom: var(--space-12); }
.section-header--center    { text-align: center; }
.section-header--center .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}


/* ------------------------------------------------
   5. BOTONES
   ------------------------------------------------ */
.btn-profego {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.75rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--font-primary);
}

.btn-profego:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 3px;
}

/* Primario — naranja oficial */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(242, 146, 36, 0.45);
}

.btn-primary:active { transform: translateY(0); }

/* Secundario (outline naranja) */
.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Navy — azul petróleo oficial (complementario 2) */
.btn-navy {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
    box-shadow: var(--shadow-navy);
}

.btn-navy:hover {
    background-color: var(--color-navy-dark);
    border-color: var(--color-navy-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Teal — complementario 3 (Pantone 3145C) */
.btn-teal {
    background-color: var(--color-comp-3);
    color: var(--color-white);
    border-color: var(--color-comp-3);
}

.btn-teal:hover {
    background-color: var(--color-comp-3-light);
    border-color: var(--color-comp-3-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Ghost blanco (para fondos oscuros) */
.btn-ghost {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-ghost:hover {
    background-color: var(--color-white);
    color: var(--color-navy);
}

/* Tamaños */
.btn-sm    { padding: 0.5rem 1.25rem; font-size: var(--font-size-sm); }
.btn-lg    { padding: 1rem 2.25rem;   font-size: var(--font-size-md); }
.btn-block { width: 100%; }

.btn-profego:disabled,
.btn-profego[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}


/* ------------------------------------------------
   6. CARDS
   ------------------------------------------------ */
.card-profego {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.card-profego:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.card-profego__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card-profego__body  { padding: var(--space-6); }

.card-profego__tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-primary-xlight);
    color: var(--color-primary-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

.card-profego__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
    margin-bottom: var(--space-2);
    line-height: var(--line-height-snug);
}

.card-profego__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}

.card-profego__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Card estadística */
.card-stat {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--color-primary);
}

.card-stat__number {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.card-stat__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}


/* ------------------------------------------------
   7. FORMULARIOS
   ------------------------------------------------ */
.form-group { margin-bottom: var(--space-5); }

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-navy);
    margin-bottom: var(--space-2);
}

.form-label--required::after {
    content: ' *';
    color: var(--color-error);
}

.form-control-profego {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.form-control-profego::placeholder { color: var(--color-text-muted); }

.form-control-profego:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(242, 146, 36, 0.15);
}

.form-control-profego:hover:not(:focus) { border-color: var(--color-primary-light); }

.form-control-profego.is-error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.form-control-profego.is-success { border-color: var(--color-success); }

.form-error-msg {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
}

.form-hint {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.form-select-profego {
    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 fill='%23004D77' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

textarea.form-control-profego {
    resize: vertical;
    min-height: 120px;
}


/* ------------------------------------------------
   8. BADGES & TAGS
   ------------------------------------------------ */
.badge-profego {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    line-height: 1;
}

.badge-primary  { background-color: var(--color-primary-xlight); color: var(--color-primary-dark); }
.badge-navy     { background-color: var(--color-navy);           color: var(--color-white); }
.badge-teal     { background-color: var(--color-comp-3);         color: var(--color-white); }
.badge-success  { background-color: var(--color-success-light);  color: var(--color-success); }
.badge-error    { background-color: var(--color-error-light);    color: var(--color-error); }
.badge-warning  { background-color: var(--color-warning-light);  color: #856404; }
.badge-info     { background-color: var(--color-info-light);     color: var(--color-info); }


/* ------------------------------------------------
   9. AVATAR
   ------------------------------------------------ */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--color-primary-xlight);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar--xs  { width: 28px; height: 28px; font-size: var(--font-size-xs); }
.avatar--sm  { width: 36px; height: 36px; font-size: var(--font-size-sm); }
.avatar--md  { width: 48px; height: 48px; font-size: var(--font-size-base); }
.avatar--lg  { width: 64px; height: 64px; font-size: var(--font-size-lg); }
.avatar--xl  { width: 96px; height: 96px; font-size: var(--font-size-2xl); }

.avatar--border {
    border: 3px solid var(--color-white);
    box-shadow: var(--shadow-sm);
}


/* ------------------------------------------------
   10. RATING (ESTRELLAS)
   ------------------------------------------------ */
.rating { display: inline-flex; align-items: center; gap: var(--space-1); }

.rating__stars {
    display: flex;
    gap: 2px;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.rating__count { font-size: var(--font-size-xs); color: var(--color-text-muted); }


/* ------------------------------------------------
   11. DIVIDER
   ------------------------------------------------ */
.divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: var(--space-8) 0;
}

.divider--primary {
    border-top-color: var(--color-primary);
    border-top-width: 2px;
    width: 60px;
    margin: var(--space-4) 0;
}


/* ------------------------------------------------
   12. LOADING GLOBAL
   ------------------------------------------------ */
#globalLoading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    z-index: var(--z-loading);
    transition: opacity var(--transition-slow);
}

#globalLoading div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

#globalLoading span {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

@keyframes spin { to { transform: rotate(360deg); } }
.bx-spin { animation: spin 0.8s linear infinite; }


/* ------------------------------------------------
   13. TOAST / MENSAJES DEL SISTEMA
   ------------------------------------------------ */
.toast-profego {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 380px;
    width: 100%;
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border-left: 4px solid var(--color-primary);
    animation: toastIn var(--transition-normal) ease forwards;
}

.toast-item--success { border-left-color: var(--color-success); }
.toast-item--error   { border-left-color: var(--color-error); }
.toast-item--warning { border-left-color: var(--color-warning); }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}


/* ------------------------------------------------
   14. SKIP LINK (ACCESIBILIDAD)
   ------------------------------------------------ */
.visually-hidden-focusable {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.visually-hidden-focusable:focus {
    position: fixed;
    top: var(--space-4); left: var(--space-4);
    width: auto; height: auto;
    padding: var(--space-3) var(--space-6);
    margin: 0; overflow: visible; clip: auto;
    white-space: normal;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-loading);
}


/* ------------------------------------------------
   15. UTILIDADES
   ------------------------------------------------ */
.d-flex         { display: flex; }
.flex-column    { flex-direction: column; }
.align-center   { align-items: center; }
.align-start    { align-items: flex-start; }
.align-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.flex-wrap      { flex-wrap: wrap; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

.bg-white    { background-color: var(--color-white); }
.bg-light    { background-color: var(--color-bg); }
.bg-primary  { background-color: var(--color-primary) !important; }
.bg-navy     { background-color: var(--color-navy) !important; }
.bg-teal     { background-color: var(--color-comp-3) !important; }
.bg-cream    { background-color: var(--color-primary-xlight) !important; }

.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.mt-auto { margin-top: auto; }
.mb-0    { margin-bottom: 0 !important; }
.mb-4    { margin-bottom: var(--space-4); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-8    { margin-bottom: var(--space-8); }
.mb-12   { margin-bottom: var(--space-12); }

.overflow-hidden { overflow: hidden; }
.cursor-pointer  { cursor: pointer; }
.transition      { transition: all var(--transition-normal); }

/* Gradientes oficiales del manual */
.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.gradient-navy {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
}

/* Degradado oficial app: color principal → complementario 4 (crema) */
.gradient-app {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-xlight) 100%);
}

/* Degradado hero con colores oficiales */
.gradient-hero {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-comp-3) 60%, var(--color-primary) 100%);
}

.overlay { position: relative; }
.overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 77, 119, 0.5);
    border-radius: inherit;
}
.overlay > * { position: relative; z-index: 1; }


/* ------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
    :root { --container-padding: var(--space-5); }
    .section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}

@media (max-width: 768px) {
    :root { --container-padding: var(--space-4); }
    .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
    .section--lg { padding-top: var(--space-16); padding-bottom: var(--space-16); }
    .toast-profego {
        bottom: var(--space-4); right: var(--space-4);
        left: var(--space-4); max-width: 100%;
    }
}

@media (max-width: 480px) {
    .btn-profego { padding: 0.7rem 1.4rem; }
    .btn-lg { padding: 0.875rem 1.75rem; font-size: var(--font-size-base); }
    .card-profego__body { padding: var(--space-4); }
}


/* ------------------------------------------------
   17. SCROLLBAR PERSONALIZADA
   ------------------------------------------------ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
    background: var(--color-primary-light);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }


/* ------------------------------------------------
   18. SELECCIÓN DE TEXTO
   ------------------------------------------------ */
::selection {
    background-color: var(--color-primary-xlight);
    color: var(--color-navy);
}


/* ------------------------------------------------
   19. FOCUS VISIBLE GLOBAL
   ------------------------------------------------ */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}


/* ------------------------------------------------
   20. PRINT
   ------------------------------------------------ */
@media print {
    #globalLoading, .btn-profego, nav, footer { display: none !important; }
    body { font-size: 12pt; color: #000; }
}