/* =============================================================
   BASE DE LA PANTALLA DE INICIO DEL HOST DEL API

   El host del API no carga el design system completo del portal web (ese
   arrastra bootstrap, jQuery UI, los bundles y ~50 hojas de estilo). Aqui
   vive UNICAMENTE el subconjunto que necesita Content\AdmApiLanding.css,
   copiado tal cual de AdmWeb:

     - Content\DesignSystemBase.css : las 3 @font-face de AvenirNext, los
       tokens de color (--neutral-*, --resolution-blue-500, --summer-sky-500)
       y las clases de tipografia que usa la pantalla (text-heading-h2,
       text-400, text-300, text-200, text-bold, text-medium).
     - Content\DarkMode.css : el bloque de "flip" que reapunta los
       --neutral-* a la escala --dark-* bajo :root[data-theme="dark"].
     - Content\bootstrap.min.css : el html { font-size: 10px } del que
       dependen todos los tamanos en rem del design system.
     - Content\AdmLogin.css : la barra superior con el logo.

   Si cambian esos tokens en el portal, actualizar tambien este archivo.
   ============================================================= */

@font-face {
    font-family: "AvenirNext";
    src: url('../Content/fonts/AvenirNextLTPro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "AvenirNext";
    src: url('../Content/fonts/AvenirNextLTPro-Demi.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "AvenirNext";
    src: url('../Content/fonts/AvenirNextLTPro-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

:root {
    /* 1. COLORS - NEUTRAL */
    --neutral-100: #FFFFFF;
    --neutral-200: #F7F9FC;
    --neutral-300: #E9EAF3;
    --neutral-400: #CACBD7;
    --neutral-500: #989AAD;
    --neutral-600: #6F7182;
    --neutral-700: #303350;
    --neutral-800: #0B0E2C;
    /* RESOLUTION BLUE */
    --resolution-blue-500: #28368D;
    /* SUMMER SKY */
    --summer-sky-500: #25AAE1;

    /* 2. TYPOGRAPHY - Heading h2 */
    --heading-h2-color: var(--neutral-800,#0B0E2C);
    --heading-h2-font-feature-settings: 'liga' off, 'clig' off;
    --heading-h2-font-family: 'AvenirNext', 'Helvetica Neue', Arial, sans-serif;
    --heading-h2-font-size: 3.2rem;
    --heading-h2-font-style: normal;
    --heading-h2-font-weight: 700;
    --heading-h2-line-height: 4.8rem;
    /* Text 400 */
    --text-400-font-family: 'AvenirNext', 'Helvetica Neue', Arial, sans-serif;
    --text-400-font-size: 1.6rem;
    --text-400-font-style: normal;
    --text-400-line-height: 1.8rem;
    /* Text 300 */
    --text-300-font-family: 'AvenirNext', 'Helvetica Neue', Arial, sans-serif;
    --text-300-font-size: 1.4rem;
    --text-300-font-style: normal;
    --text-300-line-height: 1.6rem;
    /* Text 200 */
    --text-200-font-family: 'AvenirNext', 'Helvetica Neue', Arial, sans-serif;
    --text-200-font-size: 1.2rem;
    --text-200-font-style: normal;
    --text-200-line-height: 1.4em;
    /* Weights */
    --text-bold-font-weight: 700;
    --text-medium-font-weight: 500;
    --text-regular-font-weight: 400;
}

/* --- MODO OSCURO ---
   Flip neutral -> dark, identico al de Content\DarkMode.css del portal, mas el
   re-tintado de las dos marcas que usa esta pantalla. */
:root[data-theme="dark"] {
    --neutral-100: var(--dark-600);
    --neutral-200: var(--dark-700);
    --neutral-300: var(--dark-500);
    --neutral-400: var(--dark-400);
    --neutral-500: var(--dark-300);
    --neutral-600: var(--dark-200);
    --neutral-700: var(--dark-100);
    --neutral-800: var(--dark-100);

    --resolution-blue-500: #657AFB;
    --summer-sky-500: #45D8EE;

    --dark-100: #F1F1F1; /* mas claro - texto enfasis        */
    --dark-200: #C5C5C5; /* texto secundario                 */
    --dark-300: #9A9A9A; /* texto muted / placeholders       */
    --dark-400: #3A3A3A; /* bordes fuertes, disabled bg      */
    --dark-500: #2C2C2C; /* hover, elevacion 1, bordes base  */
    --dark-600: #242424; /* superficies, cards, sidebar, nav */
    --dark-700: #1C1C1C; /* fondo de pagina (mas oscuro)     */
}

/* --- BASE DEL DOCUMENTO ---
   1rem = 10px. En el portal lo fija bootstrap (html { font-size: 10px }) y de
   ahi salen todos los tamanos en rem del design system. */
html {
    font-size: 10px;
}

html, body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100svh;
}

body {
    display: flex;
    flex-direction: column;
    height: 100svh;
    font-family: 'AvenirNext', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--neutral-200);
}

/* --- TIPOGRAFIA --- */
.text-heading-h2 {
    color: var(--heading-h2-color);
    font-feature-settings: var(--heading-h2-font-feature-settings);
    font-family: var(--heading-h2-font-family);
    font-size: var(--heading-h2-font-size);
    font-style: var(--heading-h2-font-style);
    font-weight: var(--heading-h2-font-weight);
    line-height: var(--heading-h2-line-height);
}

.text-400 {
    font-family: var(--text-400-font-family);
    font-size: var(--text-400-font-size);
    font-style: var(--text-400-font-style);
    line-height: var(--text-400-line-height);
}

.text-300 {
    font-family: var(--text-300-font-family);
    font-size: var(--text-300-font-size);
    font-style: var(--text-300-font-style);
    line-height: var(--text-300-line-height);
}

.text-200 {
    font-family: var(--text-200-font-family);
    font-size: var(--text-200-font-size);
    font-style: var(--text-200-font-style);
    line-height: var(--text-200-line-height);
}

.text-bold {
    font-weight: var(--text-bold-font-weight);
}

.text-medium {
    font-weight: var(--text-medium-font-weight);
}

/* --- BARRA SUPERIOR CON EL LOGO ---
   Equivalente reducido de .adm-login__navbar / .adm-navbar__brand de AdmWeb:
   mismas medidas (6rem de alto, logo de 4.5rem) y mismo intercambio de logo
   claro/oscuro segun [data-theme]. */
.adm-api-host__header {
    flex-shrink: 0;
    height: 6rem;
    display: flex;
    align-items: center;
    padding: 0.8rem 6.8rem;
    background-color: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-300);
}

.adm-api-host__brand {
    display: flex;
    align-items: center;
}

.adm-api-host__brand-logo {
    max-width: 176px;
    max-height: 4.5rem;
    width: auto;
    height: auto;
}

.adm-api-host__brand-logo--dark {
    display: none;
}

:root[data-theme="dark"] .adm-api-host__brand-logo--light {
    display: none;
}

:root[data-theme="dark"] .adm-api-host__brand-logo--dark {
    display: block;
}

/* Contenedor del contenido: replica el flex de .adm-login__content para que
   .adm-api-landing (flex: 1) centre la tarjeta en el espacio restante. */
.adm-api-host__content {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 759px) {
    .adm-api-host__header {
        padding: 0.8rem 1.6rem;
    }
}