/* =========================================================
   DOCMOST - OAF / UCR
   Personalización institucional
   Versión 2.0
   ========================================================= */

:root {
    --oaf-blue: #005DAA;
    --oaf-blue-dark: #003B70;
    --oaf-blue-deep: #002F5A;
    --oaf-blue-soft: #EAF3F9;

    --oaf-light-bg: #E5EAF0;
    --oaf-light-sidebar: #F6F8FA;
    --oaf-light-surface: #FFFFFF;

    --oaf-dark-bg: #181C21;
    --oaf-dark-sidebar: #101820;
    --oaf-dark-surface: #20252A;

    --oaf-radius: 8px;
}


/* =========================================================
   TEMA CLARO
   ========================================================= */

[data-mantine-color-scheme="light"] {
    --mantine-color-body: var(--oaf-light-bg) !important;
}


/* Fondo general */
[data-mantine-color-scheme="light"] body,
[data-mantine-color-scheme="light"] #root,
[data-mantine-color-scheme="light"] .mantine-AppShell-main {
    background-color: var(--oaf-light-bg) !important;
}


/* Barra superior */
[data-mantine-color-scheme="light"] .mantine-AppShell-header {
    background-color: #FFFFFF !important;
    border-bottom: 3px solid var(--oaf-blue) !important;

    box-shadow:
        0 1px 5px rgba(0, 0, 0, .06) !important;
}


/* Barra lateral */
[data-mantine-color-scheme="light"] .mantine-AppShell-navbar {
    background-color: var(--oaf-light-sidebar) !important;

    border-right:
        2px solid var(--oaf-blue) !important;
}


/* Superficies / tarjetas */
[data-mantine-color-scheme="light"] .mantine-Paper-root,
[data-mantine-color-scheme="light"] .mantine-Card-root {
    background-color: var(--oaf-light-surface);
}


/* =========================================================
   TEMA OSCURO
   ========================================================= */

[data-mantine-color-scheme="dark"] {
    --mantine-color-body: var(--oaf-dark-bg) !important;
}


/* Fondo general */
[data-mantine-color-scheme="dark"] body,
[data-mantine-color-scheme="dark"] #root,
[data-mantine-color-scheme="dark"] .mantine-AppShell-main {
    background-color: var(--oaf-dark-bg) !important;
}


/* Barra superior */
[data-mantine-color-scheme="dark"] .mantine-AppShell-header {
    background-color: #151A1F !important;

    border-bottom:
        3px solid var(--oaf-blue) !important;

    box-shadow:
        0 1px 8px rgba(0, 0, 0, .30) !important;
}


/* Barra lateral */
[data-mantine-color-scheme="dark"] .mantine-AppShell-navbar {
    background-color: var(--oaf-dark-sidebar) !important;

    border-right:
        2px solid var(--oaf-blue) !important;
}


/* Superficies */
[data-mantine-color-scheme="dark"] .mantine-Paper-root,
[data-mantine-color-scheme="dark"] .mantine-Card-root {
    background-color: var(--oaf-dark-surface);
}


/* =========================================================
   SIDEBAR - IDENTIDAD OAF
   ========================================================= */

/* Enlaces del menú */
.mantine-AppShell-navbar a {
    border-radius: 6px !important;

    transition:
        background-color .15s ease,
        color .15s ease !important;
}


/* Hover claro */
[data-mantine-color-scheme="light"]
.mantine-AppShell-navbar a:hover {
    background-color: #E3EDF5 !important;
    color: var(--oaf-blue-dark) !important;
}


/* Hover oscuro */
[data-mantine-color-scheme="dark"]
.mantine-AppShell-navbar a:hover {
    background-color: #173753 !important;
    color: #FFFFFF !important;
}


/* =========================================================
   BOTONES
   ========================================================= */

.mantine-Button-root {
    border-radius: 7px !important;
    font-weight: 500 !important;
}


/* Botones principales */
.mantine-Button-root[data-variant="filled"] {
    background-color: var(--oaf-blue) !important;
    border-color: var(--oaf-blue) !important;
}


/* Hover */
.mantine-Button-root[data-variant="filled"]:hover {
    background-color: var(--oaf-blue-dark) !important;
}


/* =========================================================
   SWITCHES / CONTROLES
   ========================================================= */

.mantine-Switch-input:checked + .mantine-Switch-track {
    background-color: var(--oaf-blue) !important;
    border-color: var(--oaf-blue) !important;
}


/* Focus en campos */
.mantine-Input-input:focus,
.mantine-Select-input:focus,
.mantine-Textarea-input:focus {
    border-color: var(--oaf-blue) !important;

    box-shadow:
        0 0 0 2px rgba(0, 93, 170, .12) !important;
}


/* =========================================================
   TARJETAS / PANELES
   ========================================================= */

.mantine-Paper-root,
.mantine-Card-root {
    border-radius: var(--oaf-radius) !important;

    transition:
        box-shadow .15s ease,
        border-color .15s ease !important;
}


/* Claro */
[data-mantine-color-scheme="light"] .mantine-Card-root {
    border-color: #D5DDE5 !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .04) !important;
}


/* Oscuro */
[data-mantine-color-scheme="dark"] .mantine-Card-root {
    border-color: #303941 !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .20) !important;
}


/* =========================================================
   ENLACES
   ========================================================= */

[data-mantine-color-scheme="light"] a {
    --ai-color: var(--oaf-blue);
}

[data-mantine-color-scheme="light"] a:hover {
    --ai-color: var(--oaf-blue-dark);
}


/* =========================================================
   EDITOR DOCMOST
   ========================================================= */

/*
   El contenido debe mantenerse limpio.
   No pintamos el editor completo de azul/gris.
*/

[data-mantine-color-scheme="light"] .ProseMirror {
    background-color: #FFFFFF !important;
}


/* Oscuro */
[data-mantine-color-scheme="dark"] .ProseMirror {
    background-color: #20252A !important;
}


/* Título principal */
.ProseMirror h1 {
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}


/* Encabezados con identidad OAF */
[data-mantine-color-scheme="light"] .ProseMirror h1 {
    color: var(--oaf-blue-dark) !important;
}

[data-mantine-color-scheme="light"] .ProseMirror h2 {
    color: #004E8F !important;
}

[data-mantine-color-scheme="light"] .ProseMirror h3 {
    color: #225F8E !important;
}


/* Dark */
[data-mantine-color-scheme="dark"] .ProseMirror h1 {
    color: #7DB9E8 !important;
}

[data-mantine-color-scheme="dark"] .ProseMirror h2 {
    color: #68A9DB !important;
}

[data-mantine-color-scheme="dark"] .ProseMirror h3 {
    color: #82B6DB !important;
}


/* =========================================================
   TABLAS DEL EDITOR
   ========================================================= */

[data-mantine-color-scheme="light"]
.ProseMirror table th {
    background-color: #EDF3F7 !important;
    color: var(--oaf-blue-dark) !important;

    border-bottom:
        2px solid var(--oaf-blue) !important;
}


[data-mantine-color-scheme="dark"]
.ProseMirror table th {
    background-color: #26333D !important;
    color: #D6E9F7 !important;

    border-bottom:
        2px solid var(--oaf-blue) !important;
}


/* =========================================================
   CÓDIGO
   ========================================================= */

[data-mantine-color-scheme="light"]
.ProseMirror pre {
    background-color: #F2F5F7 !important;

    border-left:
        4px solid var(--oaf-blue) !important;
}


[data-mantine-color-scheme="dark"]
.ProseMirror pre {
    background-color: #11161B !important;

    border-left:
        4px solid var(--oaf-blue) !important;
}


/* Código inline */
[data-mantine-color-scheme="light"]
.ProseMirror :not(pre) > code {
    background-color: #EAF1F6 !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

* {
    scrollbar-width: thin;
}

[data-mantine-color-scheme="light"] * {
    scrollbar-color: #AEBCC8 transparent;
}

[data-mantine-color-scheme="dark"] * {
    scrollbar-color: #465460 transparent;
}


/* =========================================================
   DETALLES VISUALES
   ========================================================= */

/* Selección */
::selection {
    background-color: rgba(0, 93, 170, .22);
}


/* Separadores */
[data-mantine-color-scheme="light"] hr {
    border-color: #D2DAE1 !important;
}

[data-mantine-color-scheme="dark"] hr {
    border-color: #333D45 !important;
}

/* =========================================================
   OAF - DOCMOST | Ajustes V2.1
   ========================================================= */

/* Hoja documental en claro */
[data-mantine-color-scheme="light"] .ProseMirror {
    border-radius: 8px !important;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, .06) !important;
}


/* Hoja documental en oscuro */
[data-mantine-color-scheme="dark"] .ProseMirror {
    border-radius: 8px !important;

    box-shadow:
        0 2px 12px rgba(0, 0, 0, .25) !important;
}


/* Títulos más sobrios en oscuro */
[data-mantine-color-scheme="dark"] .ProseMirror h1 {
    color: #79AED4 !important;
}

[data-mantine-color-scheme="dark"] .ProseMirror h2 {
    color: #6EA1C7 !important;
}

[data-mantine-color-scheme="dark"] .ProseMirror h3 {
    color: #83AFCF !important;
}


/* Sidebar claro - hover */
[data-mantine-color-scheme="light"]
.mantine-AppShell-navbar a:hover {
    background-color: #DDEAF3 !important;
    color: #003B70 !important;
}


/* Sidebar oscuro - hover */
[data-mantine-color-scheme="dark"]
.mantine-AppShell-navbar a:hover {
    background-color: #173B59 !important;
}

/* =========================================================
   LOGIN OAF / UCR
   ========================================================= */


/* El login se mantiene claro independientemente del tema */
body:has(img[alt="OAF - Oficina de Administración Financiera"]) {
    background:
        linear-gradient(
            135deg,
            #DDE4EA 0%,
            #EEF2F5 55%,
            #D3DEE7 100%
        ) !important;

    color: #1F2933 !important;
}


/* Contenedor superior del branding */
.oaf-login-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    margin-top: 55px !important;
    margin-bottom: 24px !important;
}


/* Logo institucional */
.oaf-login-logo {
    width: 245px !important;
    height: auto !important;

    max-width: 80vw !important;

    margin-bottom: 12px !important;
}


/* Base de Conocimiento UTI */
.oaf-login-title {
    color: #003B70 !important;

    font-size: 22px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;
    text-align: center !important;
}


/* Oficina de Administración Financiera */
.oaf-login-subtitle {
    color: #5B6874 !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    text-align: center !important;
}


/* Tarjeta del formulario de login */
body:has(.oaf-login-brand) main {
    color: #1F2933 !important;
}


/*
   El contenedor que sigue al branding contiene
   el formulario de autenticación.
*/
body:has(.oaf-login-brand) main > div {
    color: #1F2933;
}


/* Campos siempre claros */
body:has(.oaf-login-brand) input {
    background-color: #FFFFFF !important;
    color: #1F2933 !important;
}


/* Botón institucional */
body:has(.oaf-login-brand) .mantine-Button-root[data-variant="filled"] {
    background-color: #005DAA !important;
    border-color: #005DAA !important;
}


body:has(.oaf-login-brand) .mantine-Button-root[data-variant="filled"]:hover {
    background-color: #003B70 !important;
    border-color: #003B70 !important;
}

/* =========================================================
   LOGIN OAF / UCR - AJUSTES FINALES
   ========================================================= */

.oaf-login-brand {
    margin-top: 40px !important;
    margin-bottom: 14px !important;
    gap: 2px !important;
}

.oaf-login-logo {
    width: 235px !important;
    margin-bottom: 7px !important;
}

.oaf-login-title {
    font-size: 21px !important;
    margin-top: 0 !important;
}

.oaf-login-subtitle {
    font-size: 12px !important;
    margin-top: 1px !important;
}

/* Tarjeta de autenticación */
body:has(.oaf-login-brand) main > div:last-child {
    border-top: 4px solid #005DAA !important;
    border-radius: 10px !important;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, .10) !important;
}

/* =========================================================
   HEADER OAF / UTI
   ========================================================= */

.mantine-AppShell-header img[alt="Base UTI"] {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    border-radius: 5px !important;
}


/* =========================================================
   HOME - BASE DE CONOCIMIENTO UTI
   ========================================================= */

.oaf-home-hero {
    max-width: 720px;

    margin:
        28px auto
        24px auto;

    padding:
        22px 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 24px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(234,243,249,.95)
        );

    border:
        1px solid rgba(0,93,170,.18);

    border-top:
        4px solid #005DAA;

    box-shadow:
        0 5px 18px rgba(0,0,0,.07);
}


.oaf-home-icon {
    width: 105px;
    height: 105px;

    flex: 0 0 auto;

    object-fit: contain;

    border-radius: 20px;
}


.oaf-home-text {
    text-align: left;
}


.oaf-home-text h1 {
    margin: 0 0 7px 0;

    color: #003B70;

    font-size: 26px;
    font-weight: 700;

    line-height: 1.15;
}


.oaf-home-text p {
    margin: 0 0 5px 0;

    color: #34495A;

    font-size: 14px;
    font-weight: 500;
}


.oaf-home-text span {
    color: #667785;

    font-size: 12px;
}


/* =========================================================
   HOME - DARK MODE
   ========================================================= */

[data-mantine-color-scheme="dark"]
.oaf-home-hero {

    background:
        linear-gradient(
            135deg,
            #202830,
            #18222B
        );

    border-color:
        rgba(74,155,215,.25);

    border-top-color:
        #2D8CCC;

    box-shadow:
        0 5px 20px rgba(0,0,0,.28);
}


[data-mantine-color-scheme="dark"]
.oaf-home-text h1 {
    color: #79AED4;
}


[data-mantine-color-scheme="dark"]
.oaf-home-text p {
    color: #D2DCE4;
}


[data-mantine-color-scheme="dark"]
.oaf-home-text span {
    color: #8E9CA8;
}


/* Responsive */
@media (max-width: 700px) {

    .oaf-home-hero {
        margin: 18px 14px;
        padding: 18px;

        flex-direction: column;

        text-align: center;
    }

    .oaf-home-text {
        text-align: center;
    }

    .oaf-home-icon {
        width: 85px;
        height: 85px;
    }
}