/* ================================
   VARIABLES CSS - TEMA CORPORATIVO
   ================================ */
:root {
    /* Colores corporativos principales */
    --color-primario-azul: #022035;
    --color-secundario-rojo: #EB002A;
    --color-fondo: #f6f6f9;
    --color-fondo-secundario: #ebebebee;
    --color-blanco: #FFFFFF;
    --color-negro: #000000;

    /* Colores de texto */
    --color-texto-primario: #222222;
    --color-texto-secundario: #555555;
    --color-texto-muted: #6B7280;

    /* Bordes y divisores */
    --color-border: #e5e7eb;

    /* Espaciado y forma */
    --radio-sm: 8px;
    --radio-md: 12px;
    --radio-lg: 16px;
    --radio-xl: 24px;
    --sombra-card: 0 2px 8px rgba(0, 0, 0, 0.07);
    --sombra-header: 0 1px 0 rgba(255, 255, 255, 0.06);

    /* Tipografía */
    --fuente-principal: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Alturas fijas */
    --altura-header: 60px;
    --altura-bottom-nav: 64px;
}

/* ================================
   RESET GLOBAL
   ================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

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

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto-primario);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* ================================
   CONTENEDOR PRINCIPAL DE LA APP
   ================================ */
.app {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    background-color: var(--color-fondo);
    position: relative;
    padding-bottom: var(--altura-bottom-nav);
    overflow-x: hidden;
}

/* ================================
   LAYOUT TABLET / DESKTOP
   ================================ */

/* Zona intermedia: viewport más ancho que el móvil (430px) pero antes del sidebar (600px).
   Sin esta regla el app queda centrada a 430px con espacios blancos a los lados. */
@media (min-width: 431px) and (max-width: 599px) {
    body {
        display: block;
    }

    .app {
        max-width: none;
        width: 100%;
    }
}

@media (min-width: 600px) {
    body {
        display: block;
    }

    .app {
        max-width: none;
        width: calc(100% - 250px);
        margin-left: 250px;
        padding-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .app {
        width: calc(100% - 300px);
        margin-left: 300px;
    }
}

/* ================================================================
   TRANSICIONES GLOBALES — INTERACTIVIDAD BASE
   ================================================================ */

/* Todos los botones tienen transición suave por defecto */
button {
    transition:
        background-color 0.18s ease,
        color            0.18s ease,
        border-color     0.18s ease,
        box-shadow       0.18s ease,
        transform        0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity          0.18s ease;
}

button:active {
    transform: scale(0.96);
}

/* Inputs y selects: focus ring corporativo */
input, select, textarea {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* Links: transición de color */
a {
    transition: color 0.18s ease, opacity 0.18s ease;
}

/* Imágenes: fade suave al cargar */
img {
    transition: opacity 0.22s ease;
}

/* Scrollbar global en desktop */
@media (min-width: 600px) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(2, 32, 53, 0.15) transparent;
    }

    *::-webkit-scrollbar { width: 5px; height: 5px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: rgba(2, 32, 53, 0.15); border-radius: 4px; }
    *::-webkit-scrollbar-thumb:hover { background: rgba(2, 32, 53, 0.28); }
}

/* Reducir movimiento para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}