/* .nav-tabs .custom-tab-nav-border { These actually come from the theme file
    border-color: #dadada !important;
} */


/* ==== Dynamic font size management ====*/
html {
    font-size: var(--app-font-size-desktop, 16px);
}

/* 
    We match both width+portrait and height+landscape in order to take into account the same
    device but sideways when managing font size
    Note: the (any-hover:none) part is really important to differentiate between landscape
    table and desktop, since the dimensions can match. (any-hover:none) only matches devices without a mouse cursor
*/
@media (min-width: 501px) and (width <=768px) and (orientation: portrait),
(min-height: 501px) and (height <=768px) and (orientation: landscape) and (any-hover:none) {
    html {
        font-size: var(--app-font-size-tablet, 16px);
    }
}

@media (width <=500px) and (orientation: portrait),
(height <=500px) and (orientation: landscape) and (any-hover:none) {
    html {
        font-size: var(--app-font-size-phone, 16px);
    }
}

/* ==== End Dynamic font size management ====*/

body {
    background-color: #f5f5f5;
    color: #373737;
}

[data-red] {
    color: red;
}

[v-cloak] {
    display: none;
}

.outline-none {
    outline: none !important;
}

@media (min-width: 1200px) {
    .container-wide {
        max-width: 1320px !important;
    }
}

/* Transicion al cargar la pagina */
.container {
    opacity: 0;
    transition: opacity .5s;
}

/* Animacion cambio de pestañas */

.animate-tab-change {
    opacity: 0;
    transition: opacity .2s;
}

.custom-d-grid {
    display: grid;
}

.custom-grid-gap-2 {
    grid-gap: 2em;
}

.custom-grid-gap-5px {
    grid-gap: 5px;
}

.custom-tab-menu-template {
    /* Botones a la izquierda selects a la derecha */
    grid-template-columns: 3fr 1fr;
}

.custom-tab-htas {
    justify-content: flex-end !important;
}

.custom-mw-50 {
    min-width: 50%;
}

.big-radio {
    transform: scale(1.2);
}

/* target active element tab-navigation (like cartola) */
/* TODO. check if affects other nav */
/* .nav-link.active {
    filter: brightness(0.9); 
} */

/* ===== Darkmode ===== */
.darkmode-body {
    background-color: #141414;
    color: #9EA09A;
    color-scheme: dark;
}

body.darkmode-body canvas {
    background-color: #333;
    color: #b1b5aa;
}

/* Modifica el color del nav al color definido en el theme.css */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primaryColor);
}

/* ==== Bootstrap overrides DARKMODE ==== */
body.darkmode-body .form-control,
body.darkmode-body .custom-select {
    background-color: #262626;
    color: #cbccc9;
    border: 1px solid #373737;
}

body.darkmode-body .form-control:focus,
body.darkmode-body .custom-select:focus {
    border-color: rgba(255, 255, 255, 0.424);
}

body.darkmode-body .form-control:disabled,
body.darkmode-body .custom-select:disabled {
    background-color: #1d1d1d;
    color: #b1b5aa;
    border: 1px solid #373737;
}

body.darkmode-body .list-group-item {
    background-color: #333;
    color: #b1b5aa;
    border: 1px solid #222;
}

body.darkmode-body .list-group-item-action:hover,
body.darkmode-body .list-group-item-action:focus {
    background-color: #444;
}

body.darkmode-body .thead-light th {
    background-color: #000;
    color: #b1b5aa;
}

body.darkmode-body .table {
    color: #b1b5aa;
}

body.darkmode-body .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--softPrimaryColorDarkmode);
}

body.darkmode-body .card {
    background-color: #222;
}

/* Override bootstrap nav */
body.darkmode-body .dropdown-menu {
    background-color: #333;
}

body.darkmode-body .dropdown-menu .dropdown-item {
    color: #b1b5aa;
}

body.darkmode-body .dropdown-menu .dropdown-item:hover {
    background-color: #444;
}

/* ==== Selectize Overrides for DARKMODE ==== */
body.darkmode-body .selectize-input.full,
body.darkmode-body .selectize-input,
body.darkmode-body .selectize-control.single .selectize-input.input-active,
body.darkmode-body .selectize-dropdown,
body.darkmode-body .selectize-input input {
    background-color: #333;
    background: #333;
    color: #b1b5aa;
    border: none;
}

@media (max-width: 1023px) {
    .custom-tab-menu-template {
        /* Botones a la izquierda selects a la derecha */
        /* En pantalla pequeñas se hacen caer o utilizan lineas hacia abajo */
        grid-template-columns: 1fr;
    }

    .custom-tab-htas {
        justify-content: unset !important;
        display: block !important;
    }
}



/* ========= More darkmode overrides - Daniel ========= */
:root:has(body.darkmode-body) {
    --primaryColor: #000000;
    /* TODO DANIEL: Cambiar este color de abajo */
    --primaryColorHover: #242424;
    --softPrimaryColor: #DDEBF9;
    --secondaryColor: #191919;
    --softSecondaryColor: #EEE;
    --accentColor: #e6eafa;
    --primaryColorContrast: #9EA09A;
    --primaryColorContrastHover: white;
    --secondaryColorContrast: #a8a8a8;
    --secondaryColorContrastHover: white;
    --secondaryColorHover: #646464;
}

body.darkmode-body .btn-outline-secondary {
    border: 1px solid #373737;
}

body.darkmode-body table tr {
    border-color: #373737;
}

/* This is a bootstrap override*/
body.darkmode-body .table th,
body.darkmode-body .table td {
    border-top: 1px solid #222323 !important;
}

/* This is a bootstrap override*/
body.darkmode-body .table thead th {
    border-bottom: 2px solid #222323 !important;
}

/* This is a bootstrap override*/
body.darkmode-body .table tbody+tbody {
    border-top: 2px solid #222323 !important;
}

/* This is a bootstrap override*/
body.darkmode-body .table-bordered {
    border: 1px solid #222323 !important;
}

/* This is a bootstrap override*/
body.darkmode-body .table-bordered th,
body.darkmode-body .table-bordered td {
    border: 1px solid #222323 !important;
}

body.darkmode-body .nav-tabs a {
    color: var(--secondaryColorContrast)
}

/* needed due to specifity issues with the overrides in the rest of the file i think */
body.darkmode-body .alert-danger {
    color: #f8d7da;
    background-color: #551a20;
    border-color: #721c24;
}

/* Navbar general bottom line */
.nav-tabs {
    /* light */
    border-bottom: 1px solid var(--primaryColorHover);
}

body.darkmode-body .nav-tabs {
    /* dark */
    border-bottom: 1px solid #343333;
}

/* styles botones solo para normalizar darkmode */
body.darkmode-body .btn {
    /* necesario para que los botones de ir en las herramientas sea igual a los otros */
    background-color: #000000;
    /* necesario para normar bordes entre todos los botones */
    border: 1px solid #2C2B2B;
}

/* Color del borde de las tabs, solo override para darkmode */
body.darkmode-body .nav-tabs .custom-tab-nav-border.custom-tab-nav-border {
    border-color: #343333 !important;
}

/* These apply only in light mode due to overrides */
.nav-tabs .nav-link {
    background-color: color-mix(in srgb, var(--primaryColor) 80%, white 20%) !important;
    color: unset !important;
}

body.darkmode-body .nav-tabs .nav-link {
    background-color: #000000 !important;

}

body.darkmode-body .custom-d-grid button {
    background-color: #000000 !important;
}


/* TAB ACTIVA - FRANJA AMARILLA */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    /* light */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 4px, var(--primaryColor) 5px);
    background-repeat: no-repeat;
}

body.darkmode-body .nav-tabs .nav-link.active,
body.darkmode-body .nav-tabs .nav-item.show .nav-link {
    /* dark */
    background-image: linear-gradient(to bottom, rgb(253 192 16 / 70%) 5px, #000 5px);
    background-repeat: no-repeat;
}

/* TÍTULOS DE LAS TABS */
body.darkmode-body .nav-tabs a {
    color: rgb(140 140 140);
}

/* Borde de la tabla de detalles */
.table-responsive {
    /* light */
    border: 1px solid #ced4da;
}

body.darkmode-body .table-responsive {
    /* dark */
    border: 1px solid #373737;
}

.table-responsive .table th {
    background-color: #d4d4d4;
    border-bottom: none;
}


/* == Other stuff == */
body {
    line-height: 1;
}

/* font weight para las cabeceras de tablas de detalles */
.table-responsive th {
    font-weight: normal;
}

/* Para que este centrado el radio button */
.table-responsive tr input[type="radio"] {
    margin: 1.5ch 0 0 5px;
}

/* Esto es para el padding solo en los botones de ayuda */
.input-group .btn {
    padding-left: 5px;
    padding-right: 4px;
    min-width: 1.5rem;
}

.table-responsive {
    border-radius: 5px;
}

.table-responsive .table {
    margin-bottom: 0;
}

.table-responsive .table th {
    border-top: none !important;
    font-size: 0.9rem;
}

.custom-doc-detail-footer {
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: end;
    justify-content: left;
    flex-wrap: nowrap;
}

.custom-doc-detail-footer>* {
    flex: unset;
    max-width: unset;
}

/*
    Styles para los items en la naav tab
        - border radius en las esquinas para que sigan el estilo del sigue
        - override padding horizontal mas pequeño para que no se hagan tan grandes los botones
        - white-space nowrap para que no tomen mas de una linea
*/
.nav-tabs .nav-link {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
}

/* 
    Styles para las nav tabs
        - gap entre botones
        - que se haga scroll horizontal si no caben
        - que no se hagan wrap a la siguiente linea (con el scroll horizontal, no es necesario que hagan wrap)
*/
.nav-tabs {
    gap: 2px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

/* Hace que las labels superiores al input no tomen mas de una linea */
.has-float-label label {
    white-space: nowrap;
}

/* Clase para mostrar inputs en mayúsculas cuando no esta en focus */
.show-uppercase-input:not(:focus) {
    text-transform: uppercase;
}

/* Bootstrap override para que sea mas grande el texto small */
small,
.small {
    font-size: 90%;
}

/* Style para que el textarea no sea tan pequeño en el modal del historico */
#historico-modificacion-modal textarea {
    min-height: 40ch;
}

/* Styles para que los items en la nav bar superior se vean bien y sean faciles de seleccionar en todas las pantallas */
.dropdown-menu .dropdown-item {
    min-height: 32px;
    display: flex;
    align-items: center;
}

@media (width < 992px) {
    .navbar-nav .nav-link {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    .dropdown-menu .dropdown-item {
        min-height: 2rem;
    }
}