/* ================================================================
   ALTAIR SHAPE OVERRIDE
   v2.0

   Organización:
   01. Variables
   02. Base
   03. Layout
   04. Cards
   05. Forms
   06. Selectize
   07. Tables
   08. Buttons
   09. Navigation / Dropdowns
   10. Feedback
   11. Modals
   12. SweetAlert
   13. Miscellaneous

   Objetivo:
   - Modernizar formas
   - Mantener colores existentes
   - Mantener lógica existente
   - Facilitar mantenimiento
   ================================================================ */


/* ================================================================
   01. VARIABLES
   ================================================================ */

:root {
    /* ------------------------------------------------------------
       Colors
       ------------------------------------------------------------ */

    --body-color: #f7f8fa;

    --input-color: #212529;
    --input-background: #fff;
    --input-border: #ced4da;
    --input-focus-border: #86b7fe;
    --input-focus-shadow: rgba(13, 110, 253, 0.25);

    --table-border: #eef2f7;
    --table-hover: #eef3ff;

    --bs-primary: #1c5dbe;

    /* ------------------------------------------------------------
       Border radius
       ------------------------------------------------------------ */

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-card: 15px;
    --radius-modal: 16px;
    --radius-pill: 9999px;

    /* ------------------------------------------------------------
       Shadows
       ------------------------------------------------------------ */

    --shadow-card: rgba(0, 0, 0, 0.08) 0 4px 12px;
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, .12);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, .18);

    /* ------------------------------------------------------------
       Transitions
       ------------------------------------------------------------ */

    --transition-fast: .12s ease;
    --transition-default: .15s ease-in-out;
    --transition-button: .18s cubic-bezier(.4, 0, .2, 1);
}


/* ================================================================
   02. BASE / GLOBAL
   ================================================================ */

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}

body {
    background: var(--body-color);
}

#header_main {
    background: var(--bs-primary);
}

.md-btn-secondary,
a[onclick*="upd"] {
    background: transparent;
    color: #374151;
    border: 1.5px solid #d1d5db;
    box-shadow: none;
}

hr {
    box-sizing: content-box;
    height: 0;
    margin: 15px 0;
    border: 0;
    border-top: 1px solid var(--table-border);
}

.top_bar_active {
    padding-top: 48px;
}

.uk-notify-message {
    border-radius: 30px;
}

.md-btn.disabled {
    border: none;
}

/* ================================================================
   03. KendoWindow
   ================================================================ */
div.k-window-content {
    padding: 2em;
    background: var(--body-color);
}

.k-block,
.k-button,
.k-draghandle,
.k-grid-header,
.k-grouping-header,
.k-header,
.k-pager-wrap,
.k-toolbar,
.k-treemap-tile,
html .km-pane-wrapper .k-header {
    background-color: var(--bs-primary);
    border-color: transparent;
}

div.k-window {
    border-radius: var(--radius-modal);
    overflow: hidden;
}

div.k-modal div.k-window-content {
    padding: 0px;
    background-color: #ffffff;
}

div.k-modal div.k-window-content div.k-footer {
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    width: 100%;
    z-index: 1;
    padding: 15px 0px;
    border-top: 1px solid lightgray;
}

div.k-modal div.k-window-content .md-card {
    box-shadow: none;
}

.uk-modal {
    background-color: rgba(19, 25, 37, 0.58);
}

div.k-overlay {
    background-color: rgba(19, 25, 37, 0.58);
    opacity: 1 !important;
}

/* ================================================================
   03. LAYOUT
   ================================================================ */

/* Page */

#page_content_inner {
    padding: 24px 44px 100px;
}

#page_content.top-bar-with-description {
    margin-top: 30px !important;
}

/* Top bar */

#top_bar {
    box-shadow: none;
    min-height: 40px;
    height: auto;
}

/* Sidebar */
.sidebar_slim #header_main,
.sidebar_slim #top_bar {
    padding-left: 85px;
    margin-left: 0px;
}

#sidebar_main {
    border: none;
    border-radius: 0px 15px 15px 0px;
}

.sidebar_slim_active #sidebar_main {
    box-shadow: var(--shadow-dropdown);
}

#sidebar_main .sidebar_main_header {
    border: none;
}

#sidebar_main .menu_section>ul>li>a>.menu_icon,
#tt>i {
    color: #7b8193;
}

#tt>span {
    margin-bottom: 7px;
}

.sidebar_logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar_slim_active .sidebar_logo img {
    width: 50%;
    max-width: 50% !important;
}


/* ================================================================
   04. CARDS
   ================================================================ */

section.content,
.md-card {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.md-card .md-card-content {
    padding: 25px;
}

/* Nested cards */

.md-card .md-card {
    box-shadow: none;
}

/* Grid cards */

#grid_contenido>.md-card {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

#grid_contenido>.md-card .md-card {
    box-shadow: none;
}


/* ================================================================
   05. FORMS
   ================================================================ */

/* ---------------------------------------------------------------
   05.1 Inputs
   --------------------------------------------------------------- */

input[type="text"].md-input,
input[type="color"].md-input,
input[type="date"].md-input,
input[type="number"].md-input,
input[type="email"].md-input,
input[type="password"].md-input,
input[type="search"].md-input,
.md-input,
.selectize-input,
textarea {
    text-indent: 10px;
    color: var(--input-color) !important;
    background-color: var(--input-background) !important;
    background-clip: padding-box !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-md) !important;

    transition:
        border-color var(--transition-default),
        box-shadow var(--transition-default) !important;
}


/* ---------------------------------------------------------------
   05.2 Input focus
   --------------------------------------------------------------- */

input[type="text"].md-input:focus,
input[type="color"].md-input:focus,
input[type="date"].md-input:focus,
input[type="number"].md-input:focus,
input[type="email"].md-input:focus,
input[type="password"].md-input:focus,
input[type="search"].md-input:focus,
.md-input:focus,
.selectize-input.focus,
textarea:focus {
    color: var(--input-color) !important;
    background-color: var(--input-background) !important;

    border-color: var(--input-focus-border) !important;

    outline: 0 !important;

    box-shadow:
        0 0 0 0.25rem var(--input-focus-shadow) !important;
}


/* ---------------------------------------------------------------
   05.3 Material input labels
   --------------------------------------------------------------- */

.md-input-wrapper {
    padding-top: 0px;
}

.md-input-wrapper>label {
    padding-left: 10px;
}

.md-input-wrapper.md-input-focus>label {
    background-color: #ffffff;
    width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    color: rgba(13, 110, 253);
}

.md-input-wrapper.md-input-filled>label {
    background-color: #ffffff;
    width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
}

/* Remove Material underline */

.md-input-wrapper .md-input-bar::after,
.md-input-wrapper .md-input-bar::before {
    display: none;
}


/* ---------------------------------------------------------------
   05.4 Select
   --------------------------------------------------------------- */

select:not(.selectized):not([style*="display: none"]) {
    border-radius: var(--radius-md) !important;
}


/* ================================================================
   06. SELECTIZE
   ================================================================ */

/* Control */
.selectize-control.single .selectize-input:after {
    right: 42px;
}

.selectize-control.single {
    height: 44px;
    margin-top: 4px;
}

.selectize-control .selectize-input {
    border-radius: var(--radius-md) !important;
}

.selectize-control.single .selectize-input {
    min-height: max-content;
}

/* Input / options */

.selectize-input.has-items {
    text-indent: 0px;
}

.selectize-input,
.selectize-dropdown [data-selectable] {
    color: var(--modern-text) !important;
    font-size: 13px !important;
    font-weight: normal !important;
    text-transform: capitalize !important;
    text-wrap: auto !important;
}

/* Dropdown */

.selectize-dropdown {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-dropdown) !important;
}

/* Dropdown */
.selectize-dropdown {
    position: absolute !important;
    z-index: 9999 !important;

    width: 100% !important;
    max-height: 300px;
    overflow-y: auto;

    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0 0 6px 6px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Cuando el Selectize está abierto */
.selectize-control.plugin-dropdown_input.dropdown-active {
    z-index: 999999;
}

/* Evita que algún contenedor corte el dropdown */
.selectize-control,
.selectize-input {
    overflow: visible !important;
}

.selectize-dropdown {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 2px;
}

.selectize-control.plugin-remove_button [data-value] .remove {
    color: transparent;
}

.selectize-control.single .selectize-input input {
    font-size: 14px;
}

/* ================================================================
   07. TABLES
   ================================================================ */

.uk-table thead th {
    border-bottom: 2px solid var(--table-border);
    padding-bottom: 20px;
    min-width: 80px;
}

.uk-table thead th>a {
    color: #2563eb;
    font-weight: 600;
}

.uk-table thead th>button[onclick*="filtra"] {
    min-width: 200px;
}

.uk-table td {
    border-bottom-color: var(--table-border);
}

/* Body */

.uk-table tbody tr {
    transition: background var(--transition-fast);
}

.uk-table tbody tr:hover {
    background: var(--table-hover);
}

.uk-table tbody td {
    padding: 10px 12px;
    color: var(--modern-text);
    font-size: 13px;
}


/* ================================================================
   08. BUTTONS
   ================================================================ */

.md-btn {
    border-radius: 7px;
    box-shadow: none;
}

.md-btn:focus,
.md-btn:hover {
    box-shadow: none;
}

.md-btn-primary,
.md-btn-primary.uk-active,
.md-btn-primary:active,
.md-btn-primary:focus,
.md-btn-primary:hover {
    background: var(--bs-primary);
}

.md-btn-mini {
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;

    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* ================================================================
   09. NAVIGATION / DROPDOWNS
   ================================================================ */

/* ---------------------------------------------------------------
   Dropdowns
   --------------------------------------------------------------- */

.uk-dropdown,
.md-dropdown,
.dropdown-menu {
    border-radius: var(--radius-xl) !important;
    /* overflow: hidden !important; */
    box-shadow: var(--shadow-dropdown) !important;
}

.uk-dropdown li>a,
.dropdown-menu li>a {
    border-radius: var(--radius-md) !important;
}


/* ---------------------------------------------------------------
   Pagination
   --------------------------------------------------------------- */

.uk-pagination li>a,
.uk-pagination li>span,
.pagination li>a {
    border-radius: var(--radius-md) !important;
}


/* ---------------------------------------------------------------
   Tabs
   --------------------------------------------------------------- */

.uk-tab>li>a {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}


/* ---------------------------------------------------------------
   Accordion
   --------------------------------------------------------------- */

.uk-accordion>li>a {
    border-radius: var(--radius-md) !important;
}


/* ---------------------------------------------------------------
   Offcanvas
   --------------------------------------------------------------- */

.uk-offcanvas-bar {
    border-radius: 0 var(--radius-modal) var(--radius-modal) 0 !important;
}


/* ================================================================
   10. FEEDBACK COMPONENTS
   ================================================================ */

/* ---------------------------------------------------------------
   Badges
   --------------------------------------------------------------- */

.uk-badge,
.uk-badge-notification {
    border-radius: var(--radius-pill) !important;
}


/* ---------------------------------------------------------------
   Alerts
   --------------------------------------------------------------- */

.uk-alert,
.md-alert {
    border-radius: var(--radius-lg) !important;
}


/* ---------------------------------------------------------------
   Progress
   --------------------------------------------------------------- */

.uk-progress {
    border-radius: var(--radius-pill) !important;
    overflow: hidden !important;
}

.uk-progress-bar {
    border-radius: var(--radius-pill) !important;
}


/* ---------------------------------------------------------------
   Tooltip
   --------------------------------------------------------------- */

.uk-tooltip {
    border-radius: var(--radius-sm) !important;
}


/* ================================================================
   11. MODALS
   ================================================================ */

.uk-modal-dialog {
    border-radius: var(--radius-modal) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-modal) !important;
}

.uk-modal-footer {
    border-radius: 0 0 var(--radius-modal) var(--radius-modal) !important;
}

/* ================================================================
   12. SWEETALERT
   ================================================================ */

/* ---------------------------------------------------------------
   Popup
   --------------------------------------------------------------- */

.swal2-popup {
    border-radius: var(--radius-modal);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.06);
    padding: 1rem;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}


/* ---------------------------------------------------------------
   Actions - base
   --------------------------------------------------------------- */

.swal2-styled {
    border-radius: var(--radius-lg) !important;
    cursor: pointer !important;
    transition:
        all var(--transition-button) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.swal2-styled:focus {
    outline: none !important;
}

.swal2-styled:hover {
    transform: translateY(-1px) !important;
}

.swal2-styled:active {
    transform: translateY(0) !important;
}


/* ---------------------------------------------------------------
   Confirm
   --------------------------------------------------------------- */

.md-btn-flat-primary,
.swal2-confirm {
    background: var(--bs-primary) !important;
    color: #ffffff !important;
    border: none !important;

    box-shadow:
        0 2px 10px rgba(28, 93, 190, .35) !important;
}

.md-btn-flat-primary:hover,
.swal2-confirm:hover {
    background: var(--bs-primary) !important;

    box-shadow:
        0 4px 16px rgba(28, 93, 190, .45) !important;

    color: #fff !important;
}

.md-btn-flat-primary:focus,
.swal2-confirm:focus {
    box-shadow:
        0 0 0 3px rgba(28, 93, 190, .3) !important;
}


/* ---------------------------------------------------------------
   Cancel
   --------------------------------------------------------------- */

.swal2-cancel {
    background: transparent !important;
    color: #374151 !important;

    border: 1.5px solid #d1d5db !important;

    box-shadow: none !important;
}

.swal2-cancel:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}


/* ---------------------------------------------------------------
   Deny
   --------------------------------------------------------------- */

.swal2-deny {
    background: #fef2f2 !important;
    color: #dc2626 !important;

    border: 1.5px solid #fecaca !important;

    box-shadow: none !important;
}

.swal2-deny:hover {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
}


/* ---------------------------------------------------------------
   Loader
   --------------------------------------------------------------- */

.swal2-loader {
    border-color:
        #4f6ef7 transparent #4f6ef7 transparent !important;
}

/* ---------------------------------------------------------------
   Validation
   --------------------------------------------------------------- */

.swal2-validation-message {
    border-radius: 10px;
}

/* ================================================================
   13. AVATARS / IMAGES
   ================================================================ */

img.uk-border-circle,
.md-avatar,
.user-avatar {
    border-radius: 50% !important;
}


/* ================================================================
   14. SCROLLBAR
   ================================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
}

/* ================================================================
   14. LOGIN
   ================================================================ */

.login_page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    padding: 0;
}


/* ================================================================
   CONTENEDOR PRINCIPAL
   ================================================================ */

.login_page .uk-grid.uk-grid-collapse {
    position: relative;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ================================================================
   IMAGEN
   ================================================================ */

/*
 * La columna de la imagen debe permanecer visible
 * incluso cuando UIkit normalmente la oculta.
 */
.login_page .uk-grid.uk-grid-collapse>.uk-width-large-2-3 {
    display: block !important;

    width: 100% !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/*
 * La altura se adapta automáticamente al tamaño
 * de la pantalla.
 *
 * 65vh  = 65% del viewport
 * 420px = mínimo
 * 700px = máximo
 */
.login_page .login_page_info {
    width: 100% !important;

    height: clamp(420px, 50vh, 700px);

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ================================================================
   FORMULARIO
   ================================================================ */

/*
 * Sacamos la columna del flujo normal y la colocamos
 * sobre la imagen.
 */
.login_page .uk-grid.uk-grid-collapse>.uk-width-large-1-3 {
    position: absolute !important;

    top: 100%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(420px, calc(100vw - 30px)) !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 100;
}


/* ================================================================
   CARD
   ================================================================ */

.login_page #login_card {
    position: relative;
    z-index: 100;

    width: 100% !important;
    max-width: 420px;

    margin: 0 !important;

    box-sizing: border-box;

    border-radius: 12px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.20);
}


/* ================================================================
   SEGURIDAD PARA PANTALLAS MUY PEQUEÑAS
   ================================================================ */

.login_page #login_card .md-card-content {
    box-sizing: border-box;
}

/* ================================================================
   gellery grid
   ================================================================ */

.gallery_grid_item a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery_grid_item a>img {
    width: 100px !important;
    height: 100px !important;
}

/* =========================================
   MÓVILES PEQUEÑOS
   Hasta 374px
   ========================================= */
@media (max-width: 374px) {
    .login_page .uk-grid.uk-grid-collapse>.uk-width-large-1-3 {
        top: 80%;
    }
}


/* =========================================
   MÓVILES
   375px - 575px
   ========================================= */
@media (min-width: 375px) and (max-width: 575px) {
    .login_page .uk-grid.uk-grid-collapse>.uk-width-large-1-3 {
        top: 80%;
    }
}


/* =========================================
   MÓVILES GRANDES / TABLETS PEQUEÑAS
   576px - 767px
   ========================================= */
@media (min-width: 576px) and (max-width: 767px) {
    .login_page .uk-grid.uk-grid-collapse>.uk-width-large-1-3 {
        top: 80%;
    }
}


/* =========================================
   TABLETS
   768px - 991px
   ========================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .login_page .uk-grid.uk-grid-collapse>.uk-width-large-1-3 {
        top: 90%;
    }
}


/* =========================================
   LAPTOP / ESCRITORIO PEQUEÑO
   992px - 1199px
   ========================================= */
@media (min-width: 992px) and (max-width: 1199px) {
    .login_page .uk-grid.uk-grid-collapse>.uk-width-large-1-3 {
        top: 80%;
    }
}


/* =========================================
   ESCRITORIO
   1200px - 1399px
   ========================================= */
@media (min-width: 1200px) and (max-width: 1399px) {
    .login_page .uk-grid.uk-grid-collapse>.uk-width-large-1-3 {
        top: 80%;
    }
}


/* =========================================
   ESCRITORIO GRANDE
   1400px o más
   ========================================= */
@media (min-width: 1400px) {
    .login_page .uk-grid.uk-grid-collapse>.uk-width-large-1-3 {
        top: 85%;
    }
}