:root {
    /* Colores principales */
    --color-naranja: #ff7300;
    --color-naranja-hover: #e66700;
    --color-naranja-claro: #f9eae1;
    --color-naranja-suave: #fff4eb;
    --color-amarillo: #f1b634;
    --color-amarillo-ambar: #f59e0b;
    --color-amarillo-ambar-claro: #fffbeb;
    --color-amarillo-dorado: #eab308;
    --color-amarillo-dorado-claro: #fef9c3;
    --color-amarillo-oscuro: #92400e;
    --color-blanco: #ffffff;
    --color-amarillo-claro: #f8f1e7;

    /* Colores grises */
    --relleno-general: #f9fafb;
    --contorno: #e5e7eb;
    --iconos-claros: #999999;
    --iconos-oscuros: #374151;
    --gris-mas-claro-desactivado-labels: #adaebc;
    --color-gris-texto: #6b7280;
    --color-gris-claro: #f3f4f6;
    --color-gris-borde: #e5e7eb;

    /* Colores verdes */
    --color-verde: #22c55e;
    --color-verde-claro: #dcf3e7;
    --color-verde-fondo: #dcf3e7;
    --color-verde-icono: #22c55e;
    --color-verde-oscuro: #166534;

    /* Colores rojos */
    --color-rojo: #ef4444;
    --color-rojo-claro: #fef2f2;
    --color-rojo-fondo: #fef2f2;
    --color-rojo-icono: #ef4444;
    --color-rojo-borde: #f8c8c9;
    --color-rojo-oscuro: #b91c1c;

    /* Colores azules */
    --color-azul: #3b82f6;
    --color-azul-claro: #dbeafe;
    --color-azul-fondo: #dbeafe;
    --color-azul-icono: #2563eb;
    --color-azul-oscuro: #1e40af;

    /* Colores morados */
    --color-morado: #8b5cf6;
    --color-morado-claro: #ede9fe;
    --color-morado-fondo: #f3e8ff;
    --color-morado-icono: #6b21a8;

    /* Colores rosas */
    --color-rosa: #ec4899;
    --color-rosa-claro: #fce7f3;
    --color-rosa-fondo: #fce7f3;
    --color-rosa-icono: #b91c1c;

    /* Colores cyan */
    --color-cyan: #06b6d4;
    --color-cyan-claro: #cffafe;

    /* Colores marrones */
    --color-marron-fondo: #ffedd5;
    --color-marron-icono: #9a3412;

    /* Fondos */
    --color-fondo: #fafafa;

    /* Tamaños de fuente */
    --font-size-h2: 24px;
    --font-size-h1: 28px;
    --font-size-h3: 20px;
    --font-size-large: 18px;
    --font-size-base: 14px;
    --font-size-small: 13px;
    --font-size-xsmall: 12px;
    --font-size-btn: 16px;

    /* Border radius */
    --border-radius-small: 0.5rem;
    --border-radius-medium: 10px;
    --border-radius-large: 20px;
    --border-radius-xl: 30px;
    --radio-borde: 12px;

    /* Espaciado */
    --spacing-xs: 5px;
    --spacing-sm: 7px;
    --spacing-10: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;
    --spacing-3xl: 50px;
    --spacing-4xl: 60px;

    /* Tamaños de elementos */
    --icon-size-small: 35px;
    --icon-size-medium: 40px;
    --icon-size-large: 50px;
    --icon-size-xlarge: 100px;
    --icon-size-xxlarge: 150px;
    --logo-size: 70px;

    /* Sombras */
    --box-shadow-default: rgba(0, 0, 0, 0.1) 0px 4px 16px;
    --sombra-card: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Bordes */
    --border-width-default: 1px;
    --border-width-medium: 2px;

    /* Otros */
    --line-height-base: 20px;
}

/* ══════════════════════════════════════════════════════════════
   ESCALADO PARA PANTALLAS DE ESCRITORIO GRANDES
   Solo afecta a fuentes, espaciados e iconos — no toca móvil.
   ══════════════════════════════════════════════════════════════ */

/* Pantallas anchas (1600px – 1919px): escalado ×1.15 aprox */
@media (min-width: 1600px) {
    :root {
        --font-size-h1: 32px;
        --font-size-h2: 28px;
        --font-size-h3: 22px;
        --font-size-large: 20px;
        --font-size-base: 16px;
        --font-size-small: 15px;
        --font-size-xsmall: 13px;
        --font-size-btn: 18px;

        --spacing-md: 18px;
        --spacing-lg: 24px;
        --spacing-xl: 36px;
        --spacing-xxl: 48px;
        --spacing-3xl: 60px;
        --spacing-4xl: 72px;

        --line-height-base: 24px;

        --icon-size-small: 40px;
        --icon-size-medium: 46px;
        --icon-size-large: 56px;
    }
}

/* Pantallas muy anchas (1920px+): escalado ×1.25 aprox */
@media (min-width: 1920px) {
    :root {
        --font-size-h1: 36px;
        --font-size-h2: 30px;
        --font-size-h3: 24px;
        --font-size-large: 22px;
        --font-size-base: 17px;
        --font-size-small: 16px;
        --font-size-xsmall: 14px;
        --font-size-btn: 20px;

        --spacing-md: 20px;
        --spacing-lg: 28px;
        --spacing-xl: 40px;
        --spacing-xxl: 52px;
        --spacing-3xl: 68px;
        --spacing-4xl: 80px;

        --line-height-base: 26px;

        --icon-size-small: 44px;
        --icon-size-medium: 50px;
        --icon-size-large: 62px;
    }
}

/******************************************************************************************************************************************************************************************************/
/* ESTILOS BASE */
/******************************************************************************************************************************************************************************************************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    /* Sin esto, iOS agranda el texto por su cuenta al girar el móvil. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Lo que se pulsa no se selecciona ni abre el menú de «copiar» al dejar
   el dedo encima, como en una app. El TEXTO sí se puede seleccionar: un
   teléfono, un número de recibo o un mensaje del centro hay que poder
   copiarlos (antes estaba bloqueado en toda la app). */
a,
button,
label,
summary,
[role="button"],
[role="tab"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* Sin espera por si llega un segundo toque para hacer zoom. */
    touch-action: manipulation;
}

::selection {
    color: var(--iconos-oscuros);
    background: var(--color-naranja-claro);
}

input,
textarea {
    caret-color: var(--color-naranja);
}

/* Foco visible para quien usa teclado, en el color de la app. Los campos
   de formulario tienen el suyo propio (components.css). */
:focus-visible {
    outline: var(--border-width-medium) solid var(--color-naranja);
    outline-offset: 2px;
}

/* Los controles de formulario NO heredan la tipografía del documento:
   el navegador les pone la suya (en Windows, Arial 13,3 px). Se veía en
   las tarjetas de Documentación y en los chips de filtro, que salían en
   Arial mientras el resto de la app usaba system-ui. Se corrige aquí una
   vez para no tener que acordarse en cada componente nuevo. */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* El atributo `hidden` vale `display:none`, pero cualquier regla de
   componente con `display:flex|grid|inline-flex` lo pisa por tener más
   peso. Como la app oculta cosas con `hidden` desde JS, se refuerza
   aquí para que no haya que acordarse en cada componente. */
[hidden] {
    display: none !important;
}

/* ============================================
   LOADING OVERLAY (compartido por todas las páginas)
   ============================================ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--color-naranja-claro);
    border-top-color: var(--color-naranja);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner--small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}