*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}
html {font-size: 15px; -webkit-text-size-adjust: 100%;}
body {font-family: 'Inter', sans-serif;line-height: 1.4;font-weight:400;background-color: var(--base-background-color);color: var(--base-text-color);-webkit-font-smoothing: antialiased;}
html, body {
    height: 100%;
    overflow: auto;
    scrollbar-gutter: stable both-edges; /* evita que el contenido salte cuando aparece el scroll */
    -webkit-overflow-scrolling: touch;  /* scroll suave tipo iOS */
}
a {text-decoration: none;color: inherit;}
button, input, textarea, select {font: inherit;border: none;background: none;outline: none;}
button {cursor: pointer;-webkit-tap-highlight-color: transparent;}
img, picture, video, canvas, svg {display: block;max-width: 100%;}
ul, ol, li {list-style: none; margin: 0;padding: 0;}
html, body {height: 100%;overscroll-behavior: none;}
::-webkit-scrollbar {width: 8px;height: 8px;}
::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.2);border-radius: 4px;}
::-webkit-scrollbar-track {background: transparent;}
* {
    transition: background-color 0.25s ease, color 0.25s ease, fill 0.25s ease;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
::-webkit-scrollbar {width: 8px;height: 8px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background-color: var(--base-border-color);border-radius: 9999px;transition: background-color 0.3s ease;}
::-webkit-scrollbar-thumb:hover {background-color: var(--base-border-color);}

:root {

    --color-0: #FFFFFF;
    --color-10: #F5F5F5;
    --color-20: #DFDFDF;
    --color-30: #C9C9C9;
    --color-40: #B4B4B3;
    --color-50: #9E9E9D;
    --color-60: #888887;
    --color-70: #727271;
    --color-80: #5D5D5B;
    --color-90: #474745;
    --color-100: #31312F;

    --color-red: #BD201F;
    --color-red-light: #BD201F20;

    --key-color: #0051F8;
    --alt-color: #0051F8;

    --alert-background-color: var(--color-red);
    --alert-text-color: #FFFFFF;
    --alert-muted-background-color: var(--color-red-light);
    --alert-muted-text-color: var(--color-red);

    --base-background-color: var(--color-0);
    --base-text-color: var(--color-100);
    --base-border-color: var(--color-20);
    --base-icon-color: var(--color-100);

    --muted-background-color: var(--color-10);
    --muted-text-color: var(--color-50);
    --muted-border-color: var(--color-20);
    --muted-icon-color: var(--color-30);

    --alt-background-color: var(--color-20);
    --alt-text-color: var(--color-70);
    --alt-border-color: var(--color-30);
    --alt-icon-color: var(--color-50);

    --accent-background-color: var(--color-100);
    --accent-background-color-hover: var(--color-80);
    --accent-text-color: var(--color-0);
    --accent-border-color: var(--color-100);

    --br1: 4px;
    --br2: 8px;
    --br3: 16px;
    --br4: 24px;

    --shadow: rgba(0, 0, 0, 0.12) 1px 1px 3px;
    --shadow1: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    --shadow2: rgba(0, 0, 0, 0.08) 0px 3px 12px -2px, rgba(0, 0, 0, 0.3) 1px 1px 6px -2px; /* rgba(50, 50, 93, 0.16) 0px 5px 8px -2px */
    --overlay: rgba(0, 0, 0, 0.2);

}

@media (prefers-color-scheme: dark) {
    :root {

        --color-100: #FFFFFF;
        --color-90: #F5F5F5;
        --color-80: #DFDFDF;
        --color-70: #C9C9C9;
        --color-60: #B4B4B3;
        --color-50: #9E9E9D;
        --color-40: #888887;
        --color-30: #727271;
        --color-20: #5D5D5B;
        --color-10: #474745;
        --color-0: #31312F;

    }
}

h1 { font-size: 1.9rem; line-height: 2rem; color: var(--c100); margin-bottom: 24px; letter-spacing: -0.5px;}
h2 { font-size: 1.6rem; line-height: 2.2rem; color: var(--c100); margin-bottom: 24px; font-weight: 600; letter-spacing: -0.5px;}
h3 { font-size: 1.3rem; line-height: 1.8rem; color: var(--c100); margin-bottom: 24px; font-weight: 600; letter-spacing: -0.5px;}
h4 { font-size: 1.1rem; line-height: 1.6rem; color: var(--c100); margin-bottom: 24px; font-weight: 600; letter-spacing: -0.5px;}
h5 { font-size: 1rem; line-height: 1.4rem; color: var(--muted-text-color); margin: 0; padding: 0; font-weight: 600; letter-spacing: -0.5px;}
p {margin-bottom: 24px; line-height: 1.4rem}
p:last-child {margin-bottom: 0 !important; padding-bottom: 0;}
small{font-size: 0.8rem; line-height: normal; pointer-events: none; display: block;}
b, strong {font-weight: 600; color: var(--c100)}
ol li {list-style-type: decimal !important;list-style: decimal !important;list-style-position: outside !important;margin-left: 32px;}
.link { color: var(--c90); text-decoration: underline; }
.link:hover { color: var(--c100);}
.narrow { width: clamp(300px, 80%, 56%); margin: 0 auto; }
.narrow-left { width: 50vw; }
.ac { text-align: center; }
.al { text-align: left; }
.ar { text-align: right; }
.nm {margin: 0 !important; }
.np {padding: 0 !important; }
.spdh {margin-bottom: 12px !important; }
.spd {margin-bottom: 24px !important; }
.dspd {margin-bottom: 40px !important; }
.spuh {margin-top: 12px !important; }
.spu {margin-top: 24px !important; }
.dspu {margin-top: 40px !important; }
.spb{ display: flex; justify-content: space-between; }
.toff {margin-top: -12px; }
.boff {margin-bottom: -12px; }
.loff {margin-left: -12px; }
.roff {margin-right: -12px; }
.voff {margin-top: -8px; margin-bottom: -8px; }
.hoff {margin-left: -16px; margin-right: -16px; }
hr {border: 0; border-bottom: 1px var(--base-border-color) solid; opacity: 1; margin: 24px 0px; padding: 0;}
svg {fill: var(--base-icon-color); width: 24px; height: 24px; }

.box { display: grid; grid-gap: 24px; padding: 0 24px 24px 24px; }
.box-1 { display: grid; grid-gap: 24px;}
.box-2 { display: grid; grid-gap: 24px !important; grid-template-columns: 1fr 1fr !important; }
.box-3 { display: grid; grid-gap: 24px !important; grid-template-columns: 1fr 1fr 1fr !important; }
.box-1f { display: grid; grid-gap: 16px; grid-template-columns: 1fr; }
.box-2f { display: grid; grid-gap: 16px; grid-template-columns: 1fr 1fr; }
.box-2-1 { display: grid; grid-gap: 24px; grid-template-columns: 2fr 1fr; }

.box-title-options { display: grid; grid-gap: 24px; grid-template-columns: 1fr auto; }
.box-title-options h3, .box-title-options h4 {height: 36px; line-height: 36px; margin: 0; padding: 0;}

.box-options-title { display: grid; grid-gap: 12px; grid-template-columns: auto 1fr; }
.box-options-title h3, .box-options-title h4 {height: 36px; line-height: 36px; margin: 0; padding: 0;}

.box-full {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;}
.box-full .box-full-content {padding: 32px;}
.box-full .box-full-content.message {text-align: center; width: clamp(320px, 40%, 84%);}

.component-login { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display:grid; grid-template-columns: 1fr; background-color: var(--c0) }
.component-login .container { display: flex; align-items: center; justify-content: center; padding: 24px }
.component-login .container .login-box { width: clamp(320px, 70vw, 32vw); }
.component-login .helper { background-color: var(--c100); display: none }

.component-wizard { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; }
.component-wizard .wizard-header {position: absolute; top: 0; right: 0; left: 0; display: grid; grid-gap: 16px; padding: 16px 24px; grid-template-columns: 1fr auto;}
.component-wizard .wizard-container { position: relative; width: clamp(300px, 88%, 32%); }

/* COMPONENT - MAIN */

.component-main { position: fixed; inset: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr; }
.component-main .main-menu { width: 320px; position: relative; border-right: 1px solid var(--base-border-color); display: grid; grid-template-rows: 1fr auto; }

.component-main .main-menu ul.main-nav { padding: 24px; display: flex; flex-direction: column; gap:8px; }
.component-main .main-menu ul.main-nav li {}
.component-main .main-menu ul.main-nav li a { font-size: 1rem; font-weight: 500; }
.component-main .main-menu ul.main-nav li a:hover {}
.component-main .main-menu ul.main-nav li a.active { font-weight: bold; }

.component-main .main-menu ul.alt-nav { padding: 24px }
.component-main .main-menu ul.alt-nav li {}
.component-main .main-menu ul.alt-nav li a { }
.component-main .main-menu ul.alt-nav li a:hover {}

.component-main .main-container { position: relative; overflow-x: hidden; overflow-y: auto; }

.component-main .main-menu-in { opacity: 0; animation: fadeIn 200ms ease-in-out forwards; }
.component-main .main-nav-in { opacity: 0; animation: slideTop 400ms ease-in-out forwards; animation-delay: 300ms }
.component-main .main-menu-out { opacity: 1; animation: fadeOut 300ms ease-in-out forwards; animation-delay: 300ms }
.component-main .main-nav-out { opacity: 1; animation: slideTopOut 300ms ease-in-out forwards; }

/* COMPONENT - CONTENT */

.component-content {position: relative; }
.component-content .content-header { display: grid; grid-gap: 16px; align-items: center; padding: 0; grid-template-columns: 1fr auto; padding: 24px; background-color: var(--base-background-color) }
.component-content .content-header .content-title {margin: 0; padding: 0;}
.component-content .content-header .content-title {
    h2, h3 {margin: 0; padding: 0; line-height: normal}
}
.component-content .content-header  .content-options {min-width: 32px;}
.component-content .content-body {position: relative; margin: 0; padding: 0;}

/* COMPONENT - CALENDAR */

ul.calendar-week {display: grid; padding: 0 24px 24px 24px; grid-gap: 16px; grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr; overflow-x: auto;scroll-snap-type: x mandatory; scroll-padding: 24px; -webkit-overflow-scrolling: touch;scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;}
ul.calendar-week::-webkit-scrollbar {display: none;}
ul.calendar-week li { padding: 0; scroll-snap-align: start; /* scroll-snap-stop: always; */ }
ul.calendar-week li:last-child { border-right: none; }
ul.calendar-week .title {position: sticky; top: 0; text-align: left; }
ul.calendar-week .title h4 {margin: 0; padding: 0;}
ul.calendar-week .slots {min-width: 216px; display: flex; gap: 8px; padding: 0; flex-direction: column}
ul.calendar-week .slots .slot { padding: 12px; background-color: var(--muted-background-color); border-radius: var(--br2) }
ul.calendar-week .slots .slot .time-duration  { display: flex; justify-content: space-between; }
ul.calendar-week .slots .slot:hover { background-color: var(--alt-background-color); }
ul.calendar-week .slots .slot.special { background-color: var(--key-color); color: var(--base-text-color); }

.widget-calendar-slot-setup { display: grid; grid-gap: 8px; grid-template-columns: 1fr 1fr 36px; grid-template-rows: 1fr 1fr; border-top: 1px solid var(--base-border-color); margin-top: 16px; padding-top: 16px; }
.widget-calendar-slot-setup.first { border-top: 0; margin-top: 16px; padding-top: 0; }
.widget-calendar-slot-setup .item:nth-child(1){ grid-column: 1 / 3; grid-row: 1 / 2 ; }
.widget-calendar-slot-setup .item:nth-child(2){ grid-column: 1 / 2; grid-row: 2 / 3 ; }
.widget-calendar-slot-setup .item:nth-child(3){ grid-column: 2 / 3; grid-row: 2 / 3 ; }
.widget-calendar-slot-setup .item:nth-child(4){ grid-column: 3 / 4; grid-row: 1 / 3 ; }
.widget-calendar-slot-setup .item:nth-child(4) .icon {margin-top: 24px;}

.glass {
    background: rgba(255, 255, 255, 0.15); /* color semitransparente */
    backdrop-filter: blur(8px);           /* desenfoque del fondo */
    -webkit-backdrop-filter: blur(10px);   /* soporte Safari */
}

.glassXXX {
    background: rgba(255, 255, 255, 0.15); /* color semitransparente */
    backdrop-filter: blur(8px);           /* desenfoque del fondo */
    -webkit-backdrop-filter: blur(10px);   /* soporte Safari */
    border: 1px solid rgba(255, 255, 255, 0.3); /* borde sutil */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* MODAL */

.component-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 901 }
.component-modal .modal-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 32px 0; background-color: var(--overlay); opacity: 0; animation: fadeIn 200ms ease-in-out forwards; overflow-x: hidden; overflow-y: auto; }
.component-modal .modal-overlay .modal-container { position: relative; width: clamp(560px, 70vw, 25vw); background-color: var(--base-background-color); border-radius: var(--br3); margin: 0 auto; padding: 24px; overflow: hidden; box-shadow: var(--shadow2); opacity: 0; animation: slideTop 200ms ease-in-out forwards; animation-delay: 100ms; }
.component-modal .modal-overlay .modal-container hr {border: 0; border-bottom: 1px var(--base-border-color) solid; opacity: 1; margin: 0 -24px; padding: 0;}

.component-modal .modal-header { display: grid; grid-gap: 16px; align-items: center; padding: 0; grid-template-columns: 1fr auto; padding: 0 0 24px 0; background-color: var(--base-background-color) }
.component-modal .modal-header .modal-title {margin: 0; padding: 0;}
.component-modal .modal-header .modal-title h3 {margin: 0; padding: 0; line-height: normal}
.component-modal .modal-header  .modal-options {min-width: 28px;}

.component-modal .modal-overlay .modal-container-out { opacity: 1; animation: slideTopOut 200ms ease-in-out forwards; }
.component-modal .modal-overlay-out{ opacity: 1; animation: fadeOut 200ms ease-in-out forwards; animation-delay: 200ms;}

/* ERROR */

.component-error { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 901 }
.component-error .error-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--overlay); display: flex; align-items: center; justify-content: center; opacity: 0; animation: fadeIn 200ms ease-in-out forwards; }
.component-error .error-overlay .error-container { position: relative; width: clamp(400px, 50vw, 25vw); background-color: var(--base-background-color); border-radius: var(--br3); padding: 24px; overflow: hidden; box-shadow: var(--shadow2); opacity: 0; animation: slideTop 200ms ease-in-out forwards; animation-delay: 100ms; }

.component-error .error-overlay .error-container-out { opacity: 1; animation: slideTopOut 200ms ease-in-out forwards; }
.component-error .error-overlay-out{ opacity: 1; animation: fadeOut 200ms ease-in-out forwards; animation-delay: 200ms;}

/* LATERAL */

.component-lateral { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 900 }
.component-lateral .lateral-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: var(--overlay); opacity: 0; animation: fadeIn 200ms ease-in-out forwards; animation-delay: 100ms; }
.component-lateral .lateral-container { position: absolute; top: 16px; bottom: 16px; right: 16px; z-index: 2; width: 480px; background-color: var(--base-background-color); border-radius: 16px; box-shadow: var(--shadow2); overflow-x: hidden; overflow-y: auto; opacity: 0; animation: slideLeft 300ms ease-in-out forwards; }

.component-lateral .lateral-header {position: sticky; top: 0; z-index: 1; background-color: var(--base-background-color); display: grid; grid-gap: 16px; padding: 24px 18px 16px 18px; grid-template-columns: auto 1fr auto; }
.component-lateral .lateral-header .lateral-menu { display: block; }
.component-lateral .lateral-header .lateral-title {height: 36px; line-height: 36px; margin: 0; padding: 0; font-size: 1.1rem; }
.component-lateral .lateral-header .lateral-options {min-width: 36px;}
.component-lateral .lateral-body {position: relative; margin: 0; padding: 0 24px 24px 24px;  }
.component-lateral .lateral-container-out { opacity: 1; animation: slideRightOut 200ms ease-in-out forwards; }
.component-lateral .lateral-overlay-out{ opacity: 1; animation: fadeOut 200ms ease-in-out forwards;}

/* CENTRAL */

.component-central { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 900 }
.component-central .central-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: transparent; opacity: 0; animation: fadeIn 200ms ease-in-out forwards; animation-delay: 100ms; }
.component-central .central-container { position: absolute; top: 24px; bottom: 24px; right: 24px; z-index: 2; width: clamp(300px, 80vw, 480px); background-color: var(--base-background-color); border-radius: var(--br3); box-shadow: var(--shadow2); overflow-x: hidden; overflow-y: auto; opacity: 0; animation: slideLeft 300ms ease-in-out forwards; }

.component-central .central-header {position: sticky; top: 0; z-index: 1; background-color: var(--base-background-color); display: grid; grid-gap: 16px; padding: 16px 16px 8px 16px; grid-template-columns: auto 1fr auto; }
.component-central .central-header .central-menu { display: block; }
.component-central .central-header .central-title {height: 40px; line-height: 40px; margin: 0; padding: 0; font-size: 1.3rem; }
.component-central .central-header .central-options {min-width: 40px;}
.component-central .central-body {position: relative; margin: 0; padding: 16px 24px 24px 24px;  }
.component-central .central-container-out { opacity: 1; animation: slideLeftOut 200ms ease-in-out forwards; }
.component-central .central-overlay-out{ opacity: 1; animation: fadeOut 200ms ease-in-out forwards;}

.component-calendar-tools {display: flex; gap: 8px; justify-content: center; align-items: center; }

/* LIST UL */

ul.list { display: grid; grid-template-columns: 1fr; outline: 1px solid var(--base-border-color); border-radius: var(--br2); overflow: hidden; }

ul.list.divisor li { position: relative; margin-top: -1px; }
ul.list.divisor li::after {content: "";position: absolute;bottom: 0;left: 0;right: 0;height: 1px;background-color: var(--base-border-color);}
ul.list.divisor.inside li::after {content: "";position: absolute;bottom: 0;left: 12px;right: 12px;height: 1px;background-color: var(--base-border-color);}
ul.list.divisor li:last-child::after {height: 0}

ul.list li {border-bottom: 1px solid var(--base-border-color);}
ul.list li:last-child {border:0}
ul.list li h4 {margin: 0; padding: 0;}

ul.list.links li {}
ul.list.links li:hover { background-color: var(--muted-background-color) }

ul.list li .icon-data { display: flex !important; gap: 16px; align-items: center; padding: 12px 16px }
ul.list li .icon-data > div:nth-child(1) {width: 32px;flex: 0 0 32px; display: flex; align-items: end}
ul.list li .icon-data > div:nth-child(2) {  }
ul.list li .icon-data svg {  }
ul.list li.block-title h5.icon-data {margin: 0 0 0 64px; padding: 16px 0 8px 0;}
ul.list li.block-title:hover {background-color: transparent}

ul.list li .data-icon { display: grid; grid-gap: 16px; grid-template-columns: 1fr auto; align-items: center; padding: 12px }
ul.list li .data-icon .icon {  }

ul.list li .icon-data-icon { display: flex !important; gap: 16px; align-items: center; padding: 8px 16px }
ul.list li .icon-data-icon > div:nth-child(1) {width: 40px;flex: 0 0 40px; display: flex; align-items: end}
ul.list li .icon-data-icon > div:nth-child(2) { flex: 1; cursor: default }
ul.list li .icon-data-icon > div:nth-child(3) {width: 40px;flex: 0 0 40px; display: flex; align-items: end}

ul.list li .avatar-data-icon { display: flex !important; gap: 16px; align-items: center; padding: 8px 16px }
ul.list li .avatar-data-icon > div:nth-child(1) {width: 40px;flex: 0 0 40px; display: flex; align-items: center}
ul.list li .avatar-data-icon > div:nth-child(1) .avatar { width: 48px; border-radius: 48px; aspect-ratio: 1/1; background-color: var(--accent-background-color); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
ul.list li .avatar-data-icon > div:nth-child(2) { flex: 1; cursor: default }
ul.list li .avatar-data-icon > div:nth-child(3) {width: 40px;flex: 0 0 40px; display: flex; align-items: end}

ul.grid {display: grid; grid-gap: 16px; grid-template-columns: repeat(4, 1fr);}
ul.grid li {border-radius: var(--br2); background-color: var(--c10); border: 1px solid var(--c20); cursor: pointer; aspect-ratio: 2/1 }
ul.grid li:hover { background-color: var(--c10); }

/* BOX FLEX */

.box-flex {display: flex;gap: 8px;}
.box-flex .item.fixed {width: 40px;flex: 0 0 40px; display: flex; align-items: end}
.box-flex .item.flex {flex: 1;}

/* FORMS */

form {margin: 0; padding: 0; }

.ff-bx { display: flex; gap: 6px; flex-direction: column; margin-bottom: 16px; position: relative; }
.ff-bx:last-child { margin-bottom: 0; }
.ff-label { color: var(--base-text-color); font-weight: 500; }
.ff-input-holder {position: relative;}
.ff-input { width: 100%; border: 0; outline: 1px solid var(--base-border-color); background-color: var(--base-background-color); color: var(--alt-text-color); font-size: 1rem; height: 36px; border-radius: var(--br1); margin: 0; padding: 0 12px 0 0; text-indent: 12px; -webkit-appearance: none; -moz-appearance: none;appearance: none;  }
textarea.ff-input { height: auto; text-indent: 0; padding: 12px;}
.ff-nota { color: var(--alt-text-color); font-size: .9rem }
.ff-icon { position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; pointer-events: none }
.ff-icon svg { fill: var(--alt-icon-color); width: 20px; }
.ff-error {display: none}

input[type="number"]{padding-right: 32px}
input[type="date"]{padding-right: 32px}
input[type="date"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;position: relative;}
input[type="date"]::-webkit-calendar-picker-indicator {display: none;-webkit-appearance: none;}
input[type="date"]::-ms-clear, input[type="date"]::-ms-expand {display: none;}
input[type="time"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input[type="time"]::-webkit-calendar-picker-indicator {display: none;-webkit-appearance: none;}
input[type="time"]::-moz-focus-inner {border: 0;}

input:focus{outline: 1px solid var(--alt-border-color); box-shadow: 0 0 0 5px var(--muted-background-color); }
textarea:focus{outline: 1px solid var(--alt-border-color); box-shadow: 0 0 0 5px var(--muted-background-color); }
select:focus{outline: 1px solid var(--alt-border-color); box-shadow: 0 0 0 5px var(--muted-background-color); }

/* CHECKBOX */

.checkbox {display: block;position: relative;padding: 0;margin-bottom: 16px;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; display: flex; gap: 16px; align-items: center; flex-direction: row}
.checkbox:last-child{margin-bottom: 0}
.checkbox input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0; transition: all 0.2s ease-in-out;}
.checkbox .checkmark {width: 24px; height: 24px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; background-color: var(--alt-background-color); border-radius: 50%; transition: all 0.2s ease-in-out; }

.checkbox input:checked ~ .checkmark {}
.checkbox .checkmark:after {content: "";position: absolute;display: none;}
.checkbox input:checked ~ .checkmark:after {display: block;}
.checkbox .checkmark:after {width: 16px;height: 16px;border-radius: 50%;background: var(--accent-background-color);}

/* CHECKBOX TAG */

.checkbox-tag-bx{display: flex; flex-flow: row wrap; gap:4px; background-color: var(--muted-background-color); height: 36px; border-radius: 36px; padding: 4px; overflow: hidden; }
.checkbox-tag{flex: 1}
.checkbox-tag span{display: block;position: relative;padding: 0; height: 28px; line-height: 28px; border-radius: 28px; cursor: pointer; font-weight: 400; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; text-align: center;}
.checkbox-tag input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkbox-tag input:checked + span {background-color: var(--base-background-color); font-weight: 600; box-shadow: var(--shadow)}

/* RADIO */

.radio {display: block;position: relative;padding: 0;margin-bottom: 16px;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; display: flex; gap: 16px; align-items: center; flex-direction: row}
.radio:last-child{margin-bottom: 0}
.radio input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0; transition: all 0.2s ease-in-out;}
.radio .radiomark {width: 24px; height: 24px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; background-color: var(--alt-background-color); border-radius: 50%; transition: all 0.2s ease-in-out; }

.radio input:checked ~ .radiomark {}
.radio .radiomark:after {content: "";position: absolute;display: none;}
.radio input:checked ~ .radiomark:after {display: block;}
.radio .radiomark:after {width: 16px;height: 16px;border-radius: 50%;background: var(--accent-background-color);}

input:read-only { outline: 1px solid var(--c20); color: var(--c70); }

::-webkit-input-placeholder {color: var(--c50);}
/*::-webkit-scrollbar{display:none}*/
::-webkit-scrollbar{}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {outline: 1px solid var(--base-border-color);text-indent: 12px;font-size: 1rem;-webkit-text-fill-color: var(--alt-text-color);-webkit-box-shadow: 0 0 0px 1000px var(--base-background-color) inset;transition: background-color 5000s ease-in-out 0s;}

/* MESSAGES */

.msg-error {color: var(--error);}

.no-records {border: 1px dashed var(--base-border-color); border-radius: var(--br2); padding: 48px; display: grid; place-items: center;}
.no-records .message {max-width: 480px; text-align: center;}

#toast-container {position: fixed;bottom: 24px;left: 50%;transform: translateX(-50%);z-index: 9999;max-width: 400px;display: flex; flex-direction: column; gap: 8px;}

.toast {
    opacity: 0;
    color: var(--accent-text-color);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--br3);
    padding: 16px 24px;
}

.toast.show {opacity: 0; animation: popupIn 200ms ease-in-out forwards;}
.toast.hide {opacity: 1; animation: popupOut 200ms ease-in-out forwards;}


/* TAGS */

.box-tags { display: flex; flex-flow: row wrap; }
.tag { display: inline-block; background-color: var(--c20); color: var(--c70); font-size: .8rem; height: 24px; line-height: 24px; padding: 0 8px; border-radius: 20px; }

/* BUTTONS */

.btn{ position: relative; background-color: var(--accent-background-color); color: var(--accent-text-color); font-size: 1rem; font-weight: 600; height: 36px; line-height: 36px; padding: 0 20px; display: inline-flex; gap:4px; align-items: center; justify-content: center; text-decoration: none; border-radius: 36px; }
.btn:hover{ background-color: var(--accent-background-color-hover); }
.btn.xs{ height: 26px; line-height: 26px; padding: 0 10px; font-size: 0.8rem }
.btn.sm{ height: 26px; line-height: 26px; padding: 0 10px; font-size: 0.8rem }
.btn.md{ height: 30px; line-height: 30px; padding: 0 12px; font-size: 0.8rem }
.btn.disabled{ pointer-events: none; background-color: var(--color-10) !important; color: var(--color-50) !important; }
.btn .icon svg { fill: var(--color-70) }
.btn.alt{ background-color: var(--muted-background-color); color: var(--base-text-color); }
.btn.alt:hover{ background-color: var(--alt-background-color); }
.btn-disabled { opacity: .5; pointer-events: none; cursor: default; }
.btn.alert{ background-color: var(--alert-background-color); color: var(--alert-text-color); }

.bx-btns{display: flex; flex-flow: row wrap; gap: 16px; margin: 0;}
.bx-btns-stack{display: flex; flex-flow: column wrap; gap: 8px; margin: 0;}
.bx-btns a, .bx-btns button{flex:1; white-space: nowrap; }
.bx-btns a.btn, .bx-btns button.btn{ display: flex !important; }
.bx-btns a.btn.alt, .bx-btns button.btn.alt{ display: flex !important; }

.icon { width: 36px; height: 36px; border-radius: 8px; background-color: var(--base-background-color); outline: 1px solid var(--base-border-color); display: flex !important; align-items: center; justify-content: center; box-shadow: var(--shadow);  }
.icon svg {}
a.icon {display: block}
a.icon:hover {background-color: var(--muted-background-color)}
a.icon.no-hover:hover { background-color: transparent; outline: none; }
.icon.success svg {fill: var(--success); }
.icon.error svg {fill: var(--error); }
.icon.pending svg {fill: var(--pending); }
.icon.disabled svg {fill: var(--muted-icon-color); }
.icon.medium {width: 28px; height: 28px; }
.icon.medium svg { width: 20px; height: 20px; }

.box-icons {display: flex; align-items: center; gap: 8px }
.box-icons a {width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 100%; }
.box-icons a svg {}
.box-icons a:hover {background-color: var(--muted-icon-color);}

.link-icon {display: inline-flex; align-items: center; gap: 12px; }
.link-icon span {width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 100% }
.link-icon span svg {}

.text-icon {display: flex; align-items: center; gap: 8px; pointer-events: none }
.text-icon span:first-child { width: 20px; display: flex; align-items: center; justify-content: center; border-radius: 100% }
.text-icon span:last-child { flex:1 }
.text-icon span svg {}
.text-icon.small span:first-child { width: 24px;}
.text-icon.small span:first-child svg { width: 20px; height: 20px; }
.text-icon.small span:last-child { font-size: 0.8rem; line-height: normal; }

.tabs {display: flex; gap:16px; border-bottom: 1px solid var(--muted-border-color);}
.tabs .tab {display: flex;align-items: center;gap: 16px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 500; padding: 0;height: 36px;line-height: 36px;cursor: pointer;outline: none;font-size: 1rem;background: transparent;transition: all 0.2s ease;}
.tabs .tab:hover {color: var(--alt-text-color); }
.tabs .tab.active {border-bottom: 3px solid var(--accent-border-color); }

/* CONTROLES */

.control-box { display: flex; gap: 16px; }

.control-tabs {display: inline-flex; gap:0; height: 36px; padding: 4px; border-radius: 36px; background-color: var(--muted-background-color); }
.control-tabs .tab {display: flex;align-items: center;gap: 6px;padding: 0 12px;height: 28px;line-height: 28px;cursor: pointer;border: none;outline: none; transition: all 0.2s ease; flex: 1;white-space: nowrap; border-radius: 28px; color: var(--alt-text-color); font-weight: 500}
.control-tabs .tab:hover {}
.control-tabs .tab.active {background: var(--accent-background-color); font-weight: 600; color: var(--accent-text-color); box-shadow: var(--shadow); }

.control-calendar {display: inline-flex;gap: 0px; padding: 4px; background-color: var(--muted-background-color); height: 36px; border-radius: 36px;overflow: hidden;}
.control-calendar a { width: 28px; height: 28px;}
.control-calendar a.icon {display: flex; align-items: center; justify-content: center; outline: none; }
.control-calendar a.icon svg {width: 20px; height: 20px;}
.control-calendar a.icon:hover {background-color: var(--base-background-color); }
.control-calendar .date {height: 32px; line-height: 32px; padding: 0 16px; font-weight: 500; flex: 1;min-width: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; pointer-events: none; display: none; }

.control-places {display: inline-flex;gap: 1px;outline: 1px solid var(--c20);border-radius: var(--br2);background-color: var(--c20);overflow: hidden;}
.control-places a { background-color: var(--c0); width: 40px; height: 40px;}
.control-places a.icon {display: flex; align-items: center; justify-content: center; outline: none; border-radius: 0 }
.control-places .place {background-color: var(--c0); height: 40px; line-height: 40px; padding: 0 16px; font-weight: 600; flex: 1;min-width: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; pointer-events: none }

/* WIDGET MEDIA */

ul.widget-media-container { list-style: none;margin: 0;padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
ul.widget-media-container li {position: relative;transition: transform 150ms ease;}
ul.widget-media-container li .img {width: 96px;aspect-ratio: 1/1;border-radius: var(--br2);background-size: cover;background-position: center;background-color: var(--muted-background-color);flex-shrink: 0;}
ul.widget-media-container .drag-handle { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: grab; }
ul.widget-media-container .delete { position: absolute; bottom: 8px; right: 8px; box-shadow: none !important; outline: none !important; }
ul.widget-media-container .cuadro-subida {
    width: 96px;
    aspect-ratio: 1/1;
    background: var(--muted-background-color);
    border-radius: var(--br2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
ul.widget-media-container .dragging {opacity: 0.9;transform: scale(1.03);transition: transform 0.15s, box-shadow 0.15s;box-shadow: 0 12px 24px rgba(0,0,0,0.2);}
ul.widget-media-container .dragging .delete {display: none !important;}
ul.widget-media-container .placeholder {opacity: 0.4;border-radius: var(--br2);background: var(--alt-background-color);pointer-events: none;}

.edit-button-ios {
    position: fixed;
    padding: 6px 12px;
    background: rgba(255,255,255,0.95);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    z-index: 999999;
    cursor: pointer;
    animation: fadeInEdit .18s ease-out;
}

@keyframes fadeInEdit {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}


/* AVATAR */

.avatar-uploader {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
}

.avatar-uploader img {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ddd;
    transition: 0.2s;
}

.avatar-uploader:hover img {
    filter: brightness(0.9);
}

.avatar-uploader input[type=file] {
    display: none;
}

.avatar-msg {
    margin-top: 8px;
    font-size: 14px;
}

/* POPUP */

.menu-popup {position: absolute;display: none;flex-direction: column;background: var(--base-background-color);border: 1px solid var(--base-border-color);border-radius: 8px;padding: 8px;z-index: 9999; opacity: 0; animation: popupIn 200ms ease-in-out forwards;}
.menu-popup a {padding: 4px 8px; box-sizing: border-box; text-decoration: none;font-weight: 500; border-radius: var(--br1); text-wrap: nowrap}
.menu-popup a:hover { color: var(--key-color) }
.menu-popup a svg {width: 20px; height: 20px;}
.menu-popup a.alert:hover {color: var(--alert-muted-text-color); background-color: var(--alert-muted-background-color);}
.menu-popup a.alert:hover svg {fill: var(--alert-muted-text-color);}
.menu-popup hr {border: 0; border-bottom: 1px var(--base-border-color) solid; opacity: 1; margin: 4px -8px; padding: 0;}
.menu-popup .link-icon {gap: 6px; }

.menu-popup::before {content: '';position: absolute;left: 22px;width: 12px;height: 12px;background: inherit;border: inherit;border-bottom: none;border-right: none;transform: rotate(45deg);z-index: -1;box-shadow: inherit;}
.menu-popup.arrow-top::before {top: -6px;}
.menu-popup.arrow-bottom::before {bottom: -6px;transform: rotate(225deg);}

.menu-popup-out {opacity: 1; animation: popupOut 200ms ease-in-out forwards;}

/* LOADER */

.box-loader { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9990; background-color: var(--base-background-color); display: flex; align-items: center; justify-content: center; }
.loader {width: 24px;aspect-ratio: 1;border-radius: 50%;background: radial-gradient(farthest-side,var(--alt-border-color) 94%,#0000) top/3px 3px no-repeat, conic-gradient(#0000 30%,var(--alt-border-color));-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);animation: l13 1s infinite linear;}
@keyframes l13{ 100%{transform: rotate(1turn)} }

.box-holder {padding: 12px 16px; background-color: var(--muted-background-color); border: 1px solid var(--c0);border-radius: var(--br2);}
.box-holder.shadow {box-shadow: 0 4px 12px rgba(0,0,0,0.15);}

.otp {display:flex;gap:8px;justify-content: space-between;}
.otp input{appearance: none;-webkit-appearance: none;width:40px;height:48px;border-radius: var(--br2);outline: 1px solid var(--c30);background: var(--c0);text-align:center;font-size: 1.6rem;font-weight:500;color: var(--c100);border: 0;transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;caret-color: transparent;}
.otp input::selection{ background: var(--c0); }
.otp input:focus{transform: translateY(0px);outline-color: var(--c100); }
.otp.error input{outline-color: rgba(239,68,68,0.9);}
.otp.success input{outline-color: rgba(22,163,74,0.9);}






/* REVEAL */

/* Base de animaciones */
.animate {
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

/* Animaciones personalizadas */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(0); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes zoomOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideLeftOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(16px); }
}

@keyframes slideRight {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0px); }
}
@keyframes slideRightOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-8px); }
}

@keyframes slideTop {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideTopOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(16px); }
}

@keyframes popupIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes popupOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(8px); }
}

@media screen and (max-width: 993px){

    .narrow { width: 100% }

    .box { grid-gap: 32px;}
    .box-1 { display: grid; grid-gap: 24px;}
    .box-2 { display: grid; grid-gap: 24px; grid-template-columns: 1fr; }
    .box-2f { display: grid; grid-gap: 0; grid-template-columns: 1fr; }
    .box-2-1 { display: grid; grid-gap: 24px; grid-template-columns: 1fr; }

    .component-login { grid-template-columns: 1fr; }
    .component-login .helper { display: none }


    ul.grid-links {display: grid; grid-gap: 0; grid-template-columns: 1fr;}

}