@font-face {font-family:'Google Sans Flex';font-style:normal;font-weight:300 400 500;font-stretch:100%;font-display:fallback;src:url(/assets/fonts/GoogleSansFlex.woff2) format('woff2');}
@font-face {font-family:'Roboto';font-style:normal;font-weight:300 400 500;font-stretch:100%;font-display:fallback;src:url(/assets/fonts/Roboto.woff2) format('woff2');}

/* BASE ===================================================================================== */

/* VARIABLES */
:root {
    --font-family: "Roboto", "Google Sans Flex", "Segoe UI", Arial;

    --color-primary: #1a73e8;
    --color-on-primary: #ffffff;
    --color-text: #1a1b1f;

    --error-color: #dc3545;
    --success-color: #28a745;
    
    --color-link: #1a73e8;
}

html.dark-theme {
    --color-primary: #1a73e8;
    --color-on-primary: #ffffff;
    --color-text: #ffffff;
}

/* MAIN ELEMENTS ------------------------------------------------------------------------- */
* {font-family:var(--font-family);margin:0;padding:0;position:relative;-webkit-tap-highlight-color:transparent;}
*, *::before, *::after {box-sizing:border-box;}
*:disabled {cursor: default !important;}
html {height:100%;}
body {min-height:100%;height:auto;}
p {color:var(--color-text);}
a {color:var(--color-link);text-decoration:none;}
ol, ul {margin:20px 0px 20px 40px;}
::-moz-selection {color:var(--color-on-primary);background:var(--color-primary);} /* Code for Firefox */
::selection {color:var(--color-on-primary);background:var(--color-primary)}

/* IMPORTANTE: comenta estas 2 líneas si no vas a utilizar iconos */
@font-face {font-family:'Material Symbols Outlined';font-style:normal;font-weight:100 700;src:url(/assets/fonts/MaterialSymbolsOutlined.woff2) format('woff2');}
.icon, .icon-filled {user-select:none;font-family:'Material Symbols Outlined';font-size:24px;line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
.icon-filled {font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* Colores */
.error-color {color:var(--error-color) !important;}
.success-color {color:var(--success-color) !important;}

/* Rows and columns */
.rows, .row {display:flex;}
.rows {flex-direction:column;}
.row {flex:1;}
.column {flex:1;width:100%;min-width:0;}

/* Otros */
.flex {display:flex;}
.horizontal {flex-direction:row;}
.vertical {flex-direction:column;}
.text-center{text-align:center;}
.center{justify-content:center;align-items:center;}

/* Buttons */
button {user-select:none;cursor:pointer;color:var(--color-on-primary);background-color:var(--color-primary);}

/* Responsive */
@media only screen and (max-width: 600px) {
    body {height:100%;}
    .row {flex-direction:column !important;}
}




/* CUSTOM ================================================================================= */

:root {
    --nav-width: 100px;
    --nav-height: 100%;
    --rows-gap: 20px;

    --color1-background: #ffffff;
    --color1-foreground: #444746;
    --color2-background: #f0f4f9;
    --color2-foreground: #444746;
    --color3-background: #f8fafd;
    --color3-foreground: #444746;

    --nav-icon-select-bg: #7fcfff;
    --nav-icon-select-color: #004a77;
    --nav-text-color: #444746;
    --nav-text-color-select: #004a77;


    --border-color: #1a1b1f;

    --hr: #44494e;

    --element-disabled-background: #dfdee2;
    --element-disabled-color: #949498;

    --shadow: 0 0.1rem 1rem rgba(12, 12, 12, 0.35);
}

html.dark-theme {
    --color1-background: #131314;
    --color1-foreground: #c4c7c5;
    --color2-background: #1e1f20;
    --color2-foreground: #c4c7c5;
    --color3-background: #1c1b1d;
    --color3-foreground: #c4c7c5;


    --nav-icon-select-bg: #7fcfff;
    --nav-icon-select-color: #004a77;
    --nav-text-color: #c4c7c5;
    --nav-text-color-select: #7fcfff;


    --hr: rgba(0, 0, 0, .1);

    --border-color: #e0e3e2;

    --element-disabled-background: #292d2d;
    --element-disabled-color: #6e7272;

    --shadow: 0 0.1rem 1rem rgba(12, 12, 12, 0.8);

    
}




h2 {
    margin-bottom: 10px;
}

main {margin-left:var(--nav-width);padding:40px;flex:1;background-color:var(--color1-background);}
.rows, .row {gap:var(--rows-gap);}
*:disabled {background-color:var(--element-disabled-background);color:var(--element-disabled-color);}

/*label:has(input:disabled) {
    opacity: 0.38;
}*/

/* Material Design - Button */
button {width:fit-content;height:40px;padding:0 24px;border-radius:24px;font-weight:500;font-size:14px;border:none;transition: background-color .2s;}
button:not(:disabled):hover {background-color:color-mix(in srgb, var(--color-primary) 80%, black 20%);}



/* Material Design - Input */
input,select {border-color:var(--border-color);color:var(--color-text);}



input:not([type="radio"]):not([type="checkbox"]), select {font-family:"Google Sans Flex";font-size:16px;outline:none;background-color:transparent;width:100%;border: 1px solid var(--border-color);padding:12px 16px;border-radius:4px;transition:0.2s;}
input:not([type="radio"]):not([type="checkbox"]):focus, select:focus {border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary);}



/* Material Design - Checkbox & Radio */
input[type=checkbox], input[type=radio]{border:2px solid var(--border-color);cursor:pointer;appearance:none;transition:0.2s;clip-path:circle(100%);}
input[type=radio]:not(:disabled):hover, input[type=checkbox]:not(:disabled):hover {box-shadow: 0px 0px 0px 10px rgb(150, 150, 150, 0.1);-webkit-box-shadow: 0px 0px 0px 10px rgb(150, 150, 150, 0.1);-moz-box-shadow: 0px 0px 0px 10px rgb(150, 150, 150, 0.1);}
input[type=checkbox] {width:18px;height:18px;padding:6px;border-radius:2px;}
input[type=radio] {width:20px;height:20px;padding:0.2rem;border-radius:50%;background-clip:content-box;}
input[type=checkbox]:checked, input[type=radio]:checked {background:var(--color-primary);border-color:var(--color-primary);}
input[type=checkbox]:checked {background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");}
input[type=radio]:checked {background-clip:content-box;}
input[type=radio]:disabled {background-color:transparent;}

/* Material Design - Scrollbar */
*::-webkit-scrollbar {width:6px;height:3px;}
*::-webkit-scrollbar-track {background:transparent;}
*::-webkit-scrollbar-thumb {background-color:#848484;border-radius:20px;}

hr {margin:40px 0px;border:0;border-top: 1px solid var(--hr);}




label:has(input[type=checkbox]) {
    display: flex;
    align-items: center;
    user-select: none;
    gap: 10px;
}



.outline {
    color: var(--color-primary);
    background: transparent;
    border: 2px solid var(--color-primary);
    transition: .2s;
}

.outline:hover {
    color: var(--color-on-primary);
    border-color: color-mix(in srgb, var(--color-primary) 80%, black 20%);
}


.card {
    background-color: var(--color3-background);
    border-radius: 24px;
    padding: 40px;
    overflow:hidden;
}

html.dark-theme select:not([multiple]) option {
  color-scheme: dark;
  background-color: var(--color1-background);
  color: #fff;
}




html.dark-theme .nav-logo {filter:invert(75%);}
html.dark-theme {color-scheme: dark;}


/* Sección activa al cargar */
.section .title.active + .content {height: auto;}
.accordion {border: 1px solid #ccc;border-radius: 0.375rem;overflow:hidden;}
.section + .section {border-top:1px solid #ccc;}
.title {-webkit-tap-highlight-color:transparent;user-select:none;font-weight:bold;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    transition: background 0.2s;
}
.title:hover {/*background: #f1f3f5;*/}
.title::after {content:"▾";font-size:1.2rem;transition:transform 0.3s;}
.title.active::after {transform:rotate(180deg);}
.title.active {/*background: #f1f3f5;*/}
.content {height:0;overflow:hidden;transition:height 1s ease;}
.content-inner {padding:20px;border-top:1px solid #ccc;}



/* TOAST */
.toast {position:fixed;z-index:10;bottom:0;right:-440px;padding:15px;max-width:350px;overflow:hidden;padding:15px 45px 15px 15px;background-color:rgba(255, 255, 255, .85);background-clip:padding-box;border:1px solid rgba(0, 0, 0, .1);border-radius:.25rem;box-shadow:0 .25rem .75rem rgba(0, 0, 0, .1);opacity:1;transition:all 0.8s ease;margin:0 20px 20px 20px;}
.toast.show {right:0px;opacity:1;}
.toast-success {color:#155724;background-color:#d4edda;border-color:#c3e6cb;}
.toast-error {color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;}
.toast-close {position:absolute;top:0px;right:7px;background:none;border:none;font-size:22px;font-weight:bold;cursor:pointer;color:currentColor;}
.toast i, .toast b {color:inherit;}





.cursor-pointer {cursor:pointer;}


/*html, body, nav, main, nav, .nav-item, .nav-item p, .icon, .icon-filled {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}*/


body {display:flex;flex-direction: row;}




nav {position:fixed;height:var(--nav-height);z-index:2;width:var(--nav-width);display:flex;flex-direction:column;background-color:var(--color2-background);box-shadow:0 1px 1rem rgb(12 12 12 / 11%);justify-content:space-between;}

.nav-logo {-webkit-filter:drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));filter:drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));background-image:url(/assets/logo/icon.ico);background-size:50px;margin-top:15px;background-position:center;background-repeat:no-repeat;height:75px;}
.nav-item {color:var(--color2-foreground);text-align:center;margin:10px 24px;cursor:pointer;-webkit-tap-highlight-color:transparent;text-decoration:none;}
.nav-item .icon, .nav-item .icon-filled {width:100%;padding:3px 0px;}
.nav-item p {color:var(--color2-foreground);font-size:13px;font-family:"Google Sans Flex";}
.nav-item.active p {font-weight: bold;color:var(--nav-text-color-select);}
.nav-item.active .icon {font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}
.nav-item.active .icon, .nav-item.active .icon-filled {background-color: var(--nav-icon-select-bg) !important;border-radius: 16px;color:var(--nav-icon-select-color);}
.nav-items {display:flex;flex-direction:column;}


/* Menú desplegable */
.nav-dropdown-menu {
    position:absolute;top:50%;left:100%;transform:translateX(-10px) translateY(-54%);min-width:160px;background-color:var(--color2-background);box-shadow:0px 0px 15px rgba(0,0,0,.2);border-radius:12px;display:flex;flex-direction:column;opacity:0;visibility:hidden;padding:10px;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu {opacity:1;visibility:visible;transform:translateX(0) translateY(-54%);}

/* Items del dropdown */
.nav-dropdown-item {
    padding: 10px 14px;
    color: var(--color2-foreground);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    font-weight: bold;
}

.nav-dropdown-item:hover {
    background-color: var(--nav-icon-select-bg);
    color: var(--nav-icon-select-color);
    border-radius: 8px;
}


.nav-dropdown > .nav-item {
    padding-right: 0;
    margin: 0;
}

.nav-dropdown {
    padding-right:24px;
    margin: 10px 0px 10px 24px;
    cursor: pointer;
}

.nav-item:not(.dropdown-toggle):hover .icon {background-color:var(--color1-background);border-radius:16px;}
.nav-item:not(.dropdown-toggle):hover .icon, .nav-dropdown:not(:has(.nav-item.active)):hover .icon { background-color: var(--color1-background); border-radius: 16px; }
button.nav-item {display:block;width:100%;text-align:center;background-color:transparent;padding:0;height:unset;}
button.nav-item:hover {background-color:transparent;}








.password-field {position:relative;}
input:focus ~ .placeholder, input:not(:focus):valid ~ .placeholder{top:-10px;left:12px;font-size:12px;color:var(--color-primary);}
input:not(:focus):valid ~ .placeholder{color:var(--border-color);}
input:focus ~ .icon-visibility {color:var(--color-primary) !important;}




.placeholder{user-select:none;position:absolute;pointer-events:none;left:20px;top:50%;transform:translateY(-50%);transition:0.2s ease all;}
.icon-visibility {position:absolute;right:10px;cursor:pointer;}
.icon-for-password {
    position: relative;
    width: 24px;
    height: 24px;
    top: 50%;
    transform: translateY(-50%);
}






/* Tab system */
.tab-buttons {overflow-x:auto;border-radius:7px 7px 0px 0px;display:flex;border:1px solid #ccc;}
.tab-btn:nth-child(1) {border-radius:7px 0px 0px 0px;}
.tab-btn:last-child {border-radius:0px 7px 0px 0px;}
.tab-btn {flex:1;padding:10px;cursor:pointer;background:var(--color1-background);border:none;border-right:1px solid #ccc;transition:background 0.3s;text-align:center;}
.tab-btn:last-child {border-right:none;}
.tab-btn:hover {background:var(--color2-background);}
.tab-btn.active {background:var(--color3-background);font-weight:bold;border-bottom:3px solid var(--color-primary);}
.tab-container {border:1px solid #ccc;overflow:hidden;position:relative;}
.tab-content {display:none;height:100%;padding:10px;}
.tab-content.active {display:block;}
.tab-content:has(table){padding:0;}








.wrapper {width:100%;height:400px;overflow:auto;}
table {width:100%;border-collapse: collapse;}
thead{z-index:1;position:sticky;top:0;background-color:var(--color2-background);}
th,td{line-height:1.1;border:1px solid #ccc;padding:2px 4px;vertical-align:middle;}
tbody tr{background-color:var(--color1-background);}
tr:nth-child(even){background:var(--color3-background);}

/* REVISAR --------------------------------------------------------------------------- */
.alert-container {background-color:rgb(0,0,0,0.7);}
.alert-close {position:absolute;top:4px;right:14px;font-size:30px;cursor:pointer;}
/* CENTERED CONTAINER -------------------------------------------------------------------- */
.centered-container {
    display:-webkit-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    z-index:3;
    display:flex;
    -webkit-flex-align:center;
    -ms-flex-align:center;
    -webkit-align-items:center;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
}
.center-box {
    position:relative;display:flex;flex-direction:column;background-color:var(--color1-background);
    padding:25px;border-radius:15px;box-shadow:var(--shadow);
}


/* Inputs de tablas */
td select {
    padding: 0;
}


@media only screen and (max-width: 600px) {
    :root {--nav-height:80px;}
    body {flex-direction:column;}
    .center-box {width: 80% !important;}

    
    .row {flex-direction: column !important;}

    main {
        margin-left: 0;
        padding: 20px;
        padding-bottom: calc(20px + var(--nav-height));
        
    }

    .card {
        padding: 30px;
        border-radius: 25px;
    }



    .nav-footer .nav-item {
        padding: 0;
        background-color: var(--color2-background);
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    }

    .nav-logo {
        display:none;
    }

    nav {width:100%;height:var(--nav-height);bottom:0px;}

    .nav-items {flex-direction: row;align-items: center;width: 100%;}
    .nav-item, .nav-dropdown {margin:0;padding:15px 12px;flex:1;}
    .nav-footer {position:absolute;right:20px;bottom:100px;z-index: 1;}
    .nav-dropdown > .nav-item {margin:0;padding:0;}


    .nav-dropdown {
        position: relative;
    }

    .nav-dropdown-menu {
        top: auto;
        bottom: 100%;          /* ahora sale hacia arriba */
        left: -50%;
        margin-left: 0;

        transform: translateX(0) translateY(0px) !important;
    }

    .nav-item.dropdown-toggle:hover + .nav-dropdown-menu,
    .nav-item.dropdown-toggle:focus + .nav-dropdown-menu {
        transform: translateX(0) translateY(0px) !important;
    }

    .nav-dropdown:focus-within .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
    }

    /* Opcional: redondeo tipo sheet */
    .nav-dropdown-menu {
        border-radius: 16px;
        padding: 6px;
    }

    /*
    table {
        max-width:100%;
        overflow-y:scroll;
        display:block;
        max-width: none;  
        box-sizing: initial !important;
        position: relative !important;
        left: 50%;
        width: 100vw !important;
        transform: translateX(-50%);
        display: block !important;
        overflow-x: auto !important;
    }
        */

table {
    display: block;
    width: calc(100% + 60px); /* 60px = 2 x padding de .card (30px cada lado) */
    max-width: calc(100% + 60px);
    margin: 0 -30px;         /* saca la tabla hasta el borde de la card */
    padding: 0 30px;         /* y le devuelve el aire visual por dentro */
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
}

    td {
        white-space: nowrap;
        padding: 12px 15px; /* Un poco más de espacio para dedos en móvil */
    }
}