/******************************************************************  */
.tmp-app-number-engine {
    --c-accent: #7c9cff;
    --c-accent-2: #9d7cff;
    --c-ok: #22c55e;
    --c-err: #ef4444;
    --c-warn: #f59e0b;
    --c-glow: 0 0 0 1px rgba(124, 156, 255, .16), 0 10px 30px rgba(124, 156, 255, .12);
    --radius: 4px;
    --radius-sm: 4px;
    --pad: .8rem;
    --fs-ui: clamp(.9rem, .82rem + .2vw, 1rem);
    --fs-out: clamp(1rem, .8rem + .8vw, 1.5rem);
    --fs-dec: clamp(1rem, .85rem + .55vw, 1.35rem);
    --dur-fast: 140ms;
    --dur-mid: 220ms;
    --dur-slow: 380ms;
    --ease-soft: cubic-bezier(.22, .8, .2, 1);
    --ease-pop: cubic-bezier(.2, .9, .22, 1.2);
    --c-panel: rgba(255, 255, 255, .88);
    --c-panel-2: rgba(242, 246, 255, .94);
    --c-border: rgba(99, 102, 241, .18);
    --c-border-2: rgba(10, 15, 30, .06);
    --c-text: #18233f;
    --c-dim: #5f6f94;
    --c-btn: rgba(99, 102, 241, .05);
    --c-btn-h: rgba(99, 102, 241, .11);
    --c-btn-a: rgba(99, 102, 241, .18);
    --c-shadow: 0 16px 34px rgba(40, 52, 94, .12);

    position: relative;
    isolation: isolate;
    contain: layout;
    color: var(--c-text);
}

.tmp-app-number-engine,
.tmp-app-number-engine * {
    box-sizing: border-box;
}

.tmp-app-number-engine::before,
.tmp-app-number-engine::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: calc(var(--radius) + .2rem);
    pointer-events: none;
    transition:
        opacity var(--dur-mid) var(--ease-soft),
        transform var(--dur-slow) var(--ease-soft),
        filter var(--dur-mid) var(--ease-soft);
}

.tmp-app-number-engine::before {
    background:
        radial-gradient(circle at 12% 12%, rgba(124, 156, 255, .22), transparent 28%),
        radial-gradient(circle at 88% 24%, rgba(157, 124, 255, .18), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
    opacity: .9;
    transform: scale(.985);
    filter: blur(0);
}

.tmp-app-number-engine::after {
    inset: -.25rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(124, 156, 255, .18), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(157, 124, 255, .14), transparent 40%);
    opacity: 0;
    filter: blur(18px);
    transform: scale(.96);
}

.tmp-app-number-engine .ane {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tmp-app-number-engine .ane-in {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 2rem 2rem;
    align-items: center;
    min-height: 3.2rem;
    padding: 4px;
    gap: .32rem;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    background: white;
    overflow: hidden;
}

.tmp-app-number-engine.is-focus .ane-in::before,
.tmp-app-number-engine .ane-in:hover::before {
    animation: ane-sheen 1.25s var(--ease-soft);
}

.tmp-app-number-engine input {
    min-width: 0;
    width: 100%;
    height: 2.2rem;
    padding: 0 .85rem;
    border: none;
    outline: none;
    background: transparent;
    color: var(--c-text);
    font: inherit;
    letter-spacing: .01em;
    transition:
        color var(--dur-fast) var(--ease-soft),
        opacity var(--dur-fast) var(--ease-soft),
        transform var(--dur-fast) var(--ease-soft);
}

.tmp-app-number-engine input::placeholder {
    color: color-mix(in srgb, var(--c-dim) 86%, white 14%);
    transition: color var(--dur-mid) var(--ease-soft), opacity var(--dur-mid) var(--ease-soft);
}

.tmp-app-number-engine input:focus::placeholder {
    opacity: .45;
}

.tmp-app-number-engine button {
    appearance: none;
    border: 1px solid transparent;
    outline: none;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e2e2f9;
    color: var(--c-text);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition:
        transform var(--dur-fast) var(--ease-pop),
        background var(--dur-mid) var(--ease-soft),
        box-shadow var(--dur-mid) var(--ease-soft),
        border-color var(--dur-mid) var(--ease-soft),
        opacity var(--dur-mid) var(--ease-soft),
        color var(--dur-mid) var(--ease-soft),
        filter var(--dur-mid) var(--ease-soft);
    position: relative;
    overflow: hidden;
}
.tmp-app-number-engine button >div{
    background:var(--c1);
}

.tmp-app-number-engine button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .22), transparent 45%);
    opacity: .8;
    pointer-events: none;
    transition: opacity var(--dur-mid) var(--ease-soft);
}

.tmp-app-number-engine button::after {
    content: "";
    position: absolute;
    inset: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    opacity: 0;
    transform: scale(.2);
    pointer-events: none;
}

.tmp-app-number-engine button:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)),
        var(--c-btn-h);
    border-color: rgba(124, 156, 255, .26);
    transform: translateY(-1px) scale(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 10px 20px rgba(0, 0, 0, .18),
        0 0 0 1px rgba(124, 156, 255, .08);
}

.tmp-app-number-engine button:active {
    transform: translateY(0) scale(.96);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
        var(--c-btn-a);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, .22),
        0 4px 10px rgba(0, 0, 0, .14);
}

.tmp-app-number-engine button:active::after {
    opacity: 1;
    animation: ane-ripple .45s var(--ease-soft);
}

.tmp-app-number-engine button:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
    filter: saturate(.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.tmp-app-number-engine button[data-a="dec"] {
    color: #bfdbfe;
}

.tmp-app-number-engine button[data-a="inc"] {
    color: #bbf7d0;
}

.tmp-app-number-engine button[data-a="clear"] {
    color: #fecaca;
}

.tmp-app-number-engine .ane-out {
    position: absolute;
    top: calc(100% + .55rem);
    left: 0;
    right: 0;
    min-width: 100%;
    padding: .2rem .5rem;
    border-radius: calc(var(--radius) - .1rem);
    border: 1px solid var(--c-border);
    background: white;
    box-shadow:
        0 24px 40px rgba(0, 0, 0, .26),
        0 0 0 1px rgba(255, 255, 255, .03);
    backdrop-filter: blur(16px) saturate(1.16);
    transform-origin: top center;
    transform: translateY(-.35rem) scale(.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 30;
    transition:
        opacity var(--dur-mid) var(--ease-soft),
        transform var(--dur-mid) var(--ease-soft),
        visibility var(--dur-mid) step-end,
        border-color var(--dur-mid) var(--ease-soft),
        box-shadow var(--dur-mid) var(--ease-soft);
}

.tmp-app-number-engine.is-focus .ane-out {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    animation: ane-drop var(--dur-mid) var(--ease-soft);
}

.tmp-app-number-engine .ane-out pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.25;
    letter-spacing: .01em;
}

.tmp-app-number-engine .num,
.tmp-app-number-engine .dec {
    display: inline-flex;
    align-items: baseline;
    min-height: 1em;
    transition:
        transform var(--dur-mid) var(--ease-soft),
        color var(--dur-mid) var(--ease-soft),
        opacity var(--dur-mid) var(--ease-soft),
        text-shadow var(--dur-mid) var(--ease-soft),
        filter var(--dur-mid) var(--ease-soft);
    will-change: transform, opacity;
}

.tmp-app-number-engine .num {
    font-size: var(--fs-out);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #18233f;
    text-shadow: 0 0 10px rgba(99, 102, 241, .06);
}

.tmp-app-number-engine .dec {
    color: var(--c9);
    font-size: var(--fs-dec);
    font-weight: 600;
    opacity: .92;
    margin-left: .1rem;
}

.tmp-app-number-engine.is-focus .num,
.tmp-app-number-engine.is-focus .dec {
    animation: ane-rise var(--dur-mid) var(--ease-soft);
}

.tmp-app-number-engine.is-empty .ane-out pre {
    opacity: .4;
    filter: saturate(.7);
}

.tmp-app-number-engine.is-empty .num,
.tmp-app-number-engine.is-empty .dec {
    opacity: .45;
    text-shadow: none;
}

.tmp-app-number-engine.is-valid .ane-in {
    border-color: rgba(34, 197, 94, .36);
}

.tmp-app-number-engine.is-valid .ane-in:hover {
    border-width: 3px;
}

.tmp-app-number-engine.is-valid .ane-out {
    border-color: rgba(34, 197, 94, .28);
}

.tmp-app-number-engine.is-valid .num {
    color: var(--c1);
    text-shadow:
        0 0 14px rgba(34, 197, 94, .12),
        0 0 30px rgba(34, 197, 94, .08);
}

.tmp-app-number-engine.is-valid::after {
    opacity: .85;
    transform: scale(1);
    animation: ane-glow-ok 1.4s ease-in-out infinite;
}

.tmp-app-number-engine.is-error .ane-in {
    border-color: rgba(239, 68, 68, .42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 18px 40px rgba(0, 0, 0, .2),
        0 0 0 1px rgba(239, 68, 68, .14),
        0 0 0 6px rgba(239, 68, 68, .06);
    animation: ane-shake-x .34s ease;
}

.tmp-app-number-engine.is-error .ane-out {
    border-color: rgba(239, 68, 68, .34);
}

.tmp-app-number-engine.is-error .ane-out pre {
    color: #fecaca;
}

.tmp-app-number-engine.is-error .num,
.tmp-app-number-engine.is-error .dec {
    color: #ffe4e6;
    text-shadow: 0 0 12px rgba(239, 68, 68, .1);
}

.tmp-app-number-engine.is-pending .ane-in {
    border-color: rgba(245, 158, 11, .32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 18px 40px rgba(0, 0, 0, .2),
        0 0 0 1px rgba(245, 158, 11, .12);
}

.tmp-app-number-engine.is-pending .ane-out pre {
    color: #a16207;
}

.tmp-app-number-engine.is-pending .num,
.tmp-app-number-engine.is-pending .dec {
    animation: ane-breathe 1.35s ease-in-out infinite;
}

.tmp-app-number-engine.is-focus .ane-in,
.tmp-app-number-engine .ane-in:hover {
    transform: translateY(-1px);
    border-color: rgba(124, 156, 255, .34);
}

.tmp-app-number-engine.is-focus::after {
    opacity: 1;
    transform: scale(1);
}

.tmp-app-number-engine:focus-within .ane-in {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 22px 46px rgba(0, 0, 0, .24),
        0 0 0 1px rgba(124, 156, 255, .16),
        0 0 0 8px rgba(124, 156, 255, .07);
}

.tmp-app-number-engine input:focus-visible,
.tmp-app-number-engine button:focus-visible {
    outline: none;
}

.tmp-app-number-engine button:focus-visible {
    border-color: rgba(191, 219, 254, .42);
    box-shadow:
        0 0 0 3px rgba(124, 156, 255, .16),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 8px 18px rgba(0, 0, 0, .18);
}

.tmp-app-number-engine .ane-out::-webkit-scrollbar {
    width: 8px;
}

.tmp-app-number-engine .ane-out::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
    border-radius: 999px;
}

.tmp-app-number-engine .ane-out::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(124, 156, 255, .5), rgba(157, 124, 255, .45));
    border-radius: 999px;
}

.tmp-app-number-engine .ane-out::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(124, 156, 255, .7), rgba(157, 124, 255, .62));
}

@keyframes ane-drop {
    0% {
        opacity: 0;
        transform: translateY(-.45rem) scale(.97);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ane-rise {
    0% {
        opacity: 0;
        transform: translateY(.35rem) scale(.98);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ane-sheen {
    0% {
        transform: translateX(-130%);
    }

    100% {
        transform: translateX(130%);
    }
}

@keyframes ane-ripple {
    0% {
        opacity: .35;
        transform: scale(.2);
    }

    100% {
        opacity: 0;
        transform: scale(3.6);
    }
}

@keyframes ane-breathe {

    0%,
    100% {
        opacity: .74;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-1px);
    }
}

@keyframes ane-glow-ok {

    0%,
    100% {
        opacity: .38;
        filter: blur(18px);
    }

    50% {
        opacity: .8;
        filter: blur(24px);
    }
}

@keyframes ane-shake-x {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-2px);
    }

    40% {
        transform: translateX(2px);
    }

    60% {
        transform: translateX(-1px);
    }

    80% {
        transform: translateX(1px);
    }
}

@media (max-width: 520px) {
    .tmp-app-number-engine .ane-in {
        grid-template-columns: 2.45rem minmax(0, 1fr) 2.45rem 2.45rem;
        min-height: 3rem;
        padding: .28rem;
    }

    .tmp-app-number-engine button {
        width: 2.45rem;
        height: 2.45rem;
        font-size: 1.08rem;
    }

    .tmp-app-number-engine input {
        height: 2.45rem;
        padding: 0 .72rem;
    }

    .tmp-app-number-engine .ane-out {
        padding: .8rem .9rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tmp-app-number-engine,
    .tmp-app-number-engine *,
    .tmp-app-number-engine::before,
    .tmp-app-number-engine::after {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* **************************************************************** ACORDEON */
.tmp-app-form-accordion {
    --c-bg: #ffffff;
    --c-surface: #f6f8fb;
    --c-border: #e4e9f2;
    --c-text: #1f2933;
    --c-sub: #6b7280;
    --c-accent: #2563eb;
    --c-accent-soft: #e8f0ff;
    --c-danger: #dc2626;
    --c-focus: #2563eb;

    --radius-sm: .4rem;
    --radius-md: .7rem;
    --radius-lg: .5rem;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .06);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, .08);

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: clamp(.9rem, 1vw, .95rem);
    --fs-lg: clamp(1rem, 1.2vw, 1.15rem);

    --sp-1: .4rem;
    --sp-2: .6rem;
    --sp-3: .9rem;
    --sp-4: 1.2rem;

    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .15s;
    --dur-mid: .25s;
    --dur-slow: .4s;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    contain: layout;
    transition: box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}

.tmp-app-form-accordion .fa-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--sp-3);
}

@media(min-width:640px) {
    .tmp-app-form-accordion .fa-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.tmp-app-form-accordion .fa-title {
    margin: 0;
    letter-spacing: .3px;
    transition: color var(--dur-mid) var(--ease);
}

.tmp-app-form-accordion .fa-controls {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.tmp-app-form-accordion .fa-group {
    display: flex;
}

.tmp-app-form-accordion .fa-search {
    flex: 1 1 auto;
    min-width: 180px;
    padding: .55rem .75rem;
    font-size: var(--fs-sm);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color var(--dur-mid) var(--ease),
        box-shadow var(--dur-mid) var(--ease),
        background var(--dur-mid) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.tmp-app-form-accordion .fa-search:focus-visible {
    outline: none;
    border-color: var(--c-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
    background: #fff;
    transform: translateY(-1px);
}

.tmp-app-form-accordion .fa-btn {
    appearance: none;
    border: 1px solid var(--c-border);
    background: #fff;
    color: var(--c-text);
    padding: .5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.2rem;
    position: relative;
    overflow: hidden;
    transition:
        background var(--dur-mid) var(--ease),
        border-color var(--dur-mid) var(--ease),
        box-shadow var(--dur-mid) var(--ease),
        color var(--dur-mid) var(--ease),
        transform var(--dur-fast) var(--ease);
    position: relative;
    z-index: 0;
    transform: scale(.85);
}

.tmp-app-form-accordion .fa-btn:hover::after {
    opacity: 1;
}

.tmp-app-form-accordion .fa-btn:active {
    transform: translateY(1px) scale(.99);
}

.tmp-app-form-accordion .fa-btn:focus-visible {
    outline: none;
    border-color: var(--c-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}

.tmp-app-form-accordion .fa-btn.fa-add {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .25);
    transition:
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur-mid) var(--ease),
        filter var(--dur-mid) var(--ease);
    display: none;
}

.tmp-app-form-accordion .fa-btn.fa-add:hover {
    filter: brightness(.97);
    box-shadow: 0 8px 22px rgba(37, 99, 235, .3);
}

.tmp-app-form-accordion .fa-btn.fa-close {
    color: var(--c-danger);
    border-color: #fecaca;
    display: none;
}

.tmp-app-form-accordion .fa-btn:hover {
    transform: scale(1);
}

.tmp-app-form-accordion .fa-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.tmp-app-form-accordion .fa-item {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transform: translateY(0);
    transition:
        border-color var(--dur-mid) var(--ease),
        box-shadow var(--dur-mid) var(--ease),
        transform var(--dur-mid) var(--ease);
}

.tmp-app-form-accordion .fa-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.tmp-app-form-accordion .fa-item[data-state="open"] {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .25), var(--shadow-sm);
}

.tmp-app-form-accordion .fa-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background: var(--c-surface);
    cursor: pointer;
    transition: background var(--dur-mid) var(--ease);
}

.tmp-app-form-accordion .fa-head .fa-actions {
    display: flex;
    min-width: 5rem;
}

.tmp-app-form-accordion .fa-item[data-state="open"] .fa-head {
    background: var(--c-accent-soft);
}

@media(min-width:640px) {
    .tmp-app-form-accordion .fa-head {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.tmp-app-form-accordion .fa-item-title {
    margin: 0;
    transition: color var(--dur-mid) var(--ease);
    font-size: 1rem;
    font-family: 'f2';
}

.tmp-app-form-accordion .fa-item[data-state="open"] .fa-item-title {
    color: var(--c-accent);
    font-size: 1.2rem;
    font-family: 'f3';
}

.tmp-app-form-accordion .fa-item[data-state="open"] .fa-item-subtitle {
    opacity: .9;
}

.tmp-app-form-accordion .fa-item-subtitle {
    color: var(--c-sub);
    transition: opacity var(--dur-mid) var(--ease);
    font-size: .9rem;
}

.tmp-app-form-accordion .fa-item-title:hover {
    color: var(--c5);
}

.tmp-app-form-accordion .fa-content {
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
    background: #fff;
    border-top: 1px solid var(--c-border);
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr;
    transition:
        padding var(--dur-mid) var(--ease),
        opacity var(--dur-mid) var(--ease),
        transform var(--dur-mid) var(--ease);
    animation: faSlideDown var(--dur-mid) var(--ease);
}

.tmp-app-form-accordion .fa-item[data-state="open"] .fa-content {
    padding: var(--sp-3);
    padding-bottom: 3rem;
}

.tmp-app-form-accordion .fa-content[hidden] {
    display: block;
    padding: 0 var(--sp-3);
    opacity: 0;
    transform: translateY(-6px);
    height: 0;
    animation: faSlideUp var(--dur-mid) var(--ease);
}

@keyframes faSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes faSlideUp {
    from {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-6px)
    }
}

.tmp-app-form-accordion * {
    box-sizing: border-box;
}

.tmp-app-form-accordion button,
.tmp-app-form-accordion input {
    font-family: inherit;
}

@supports(selector(:focus-visible)) {
    .tmp-app-form-accordion :focus {
        outline: none;
    }
}



.tmp-app-form-accordion .fa-img-default {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.tmp-app-form-accordion .fa-img-default .cont-img {
    width: 100%;
    max-width: 20rem;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tmp-app-form-accordion .fa-img-default img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.tmp-app-form-accordion .fa-img-default .cont-details {
    padding: var(--sp-3);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.tmp-app-form-accordion.is-all-hidden .fa-img-default {
    display: flex;
}

.tmp-app-form-accordion .fa-head .fah-info {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    align-items: center;
    transform: scale(0.98);
    transition: all .5s;
}

.tmp-app-form-accordion .fa-head .fah-info:hover {
    transform: scale(1);

}

.tmp-app-form-accordion .btn-label {
    position: absolute;
    bottom: 110%;
    left: 50%;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    padding: 4px 8px;
    transform: translateX(-50%);
    z-index: 10;
}

.tmp-app-form-accordion .btn-icon>div {
    background: var(--c32);
}

.tmp-app-form-accordion .btn-icon:hover>div {
    background: var(--c1);
}

.tmp-app-form-accordion .fa-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-app-form-accordion .fa-icon>div {
    background: var(--c5);
}

/* **************************************************************** FANCYBOX */
/* FancyboxGalleryManager – LIGHT only */
.tmp-gallery {
    --bg: #f8f9fb;
    --fg: #131417;
    --mut: #6b7280;
    --ac: #2458e6;
    --bd: #d5dae1;
    --r: 14px;
    --fs: clamp(14px, 1.8vw, 16px);
    --th: 120px;
    --gap: 8px;
    --cols-min: 2;
    --cols-max: 6;
    --dur: .28s;
    --dur-lg: .5s;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg);
    color: var(--fg);
    border-radius: var(--r);
    padding: clamp(12px, 2vw, 16px);
    contain: layout inline-size;
    font-size: var(--fs);
}

@media (prefers-reduced-motion: reduce) {
    .tmp-gallery * {
        transition: none !important;
        animation: none !important
    }
}

.tmp-gallery .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    animation: tg-fade-in var(--dur-lg) var(--ease-out) both;
}

.tmp-gallery .ttl {
    font-weight: 700;
    line-height: 1.2
}

.tmp-gallery .meta {
    color: var(--mut)
}

.tmp-gallery .act {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tmp-gallery .btn {
    appearance: none;
    border: 1px solid var(--bd);
    background: transparent;
    color: var(--fg);
    padding: .55rem .8rem;
    border-radius: .55rem;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        transform .12s var(--ease),
        box-shadow var(--dur) var(--ease),
        color var(--dur) var(--ease);
    will-change: transform;
}

.tmp-gallery .btn[disabled] {
    opacity: .5;
    cursor: not-allowed
}

.tmp-gallery .btn.p {
    background: var(--ac);
    border-color: var(--ac);
    color: #fff
}

.tmp-gallery .btn:hover:not([disabled]) {
    background: color-mix(in srgb, var(--ac) 10%, transparent);
    border-color: color-mix(in srgb, var(--ac) 35%, var(--bd));
    transform: translateY(-1px);
}

.tmp-gallery .btn:active {
    transform: translateY(0) scale(.98)
}

.tmp-gallery .btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ac) 75%, #fff);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ac) 18%, transparent);
    transition: box-shadow var(--dur) var(--ease);
}

.tmp-gallery .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,
            minmax(min(calc((100% - (var(--gap)*(var(--cols-min) - 1))) / var(--cols-min)),
                    var(--th)),
                1fr));
    gap: var(--gap);
    animation: tg-fade-in var(--dur-lg) var(--ease-out) both;
}

@supports (grid-template-columns:subgrid) {
    .tmp-gallery .grid {
        grid-auto-rows: 1fr
    }
}

.tmp-gallery .it {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid var(--bd);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition:
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
    will-change: transform;
    animation: tg-pop-in .36s var(--ease-out) both;
}

.tmp-gallery .it:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    border-color: color-mix(in srgb, var(--ac) 35%, var(--bd));
}

.tmp-gallery .it:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ac) 80%, #fff);
    outline-offset: 2px;
}

.tmp-gallery .ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mut);
    font-size: .85em;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, .05) 50%,
            rgba(0, 0, 0, 0) 100%);
    background-size: 200% 100%;
    animation: tg-shimmer 1.2s linear infinite;
}

.tmp-gallery img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0) scale(1.001);
    opacity: 0;
    transition:
        opacity .35s var(--ease),
        transform .5s var(--ease);
    will-change: transform, opacity;
}

.tmp-gallery .it:hover img {
    transform: translateZ(0) scale(1.04)
}

.tmp-gallery img:is([src^="data:image"], :not([src])) {
    opacity: 0
}

.tmp-gallery img:not([src^="data:image"]) {
    opacity: 1
}

.tmp-gallery .bad {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    padding: .2rem .35rem;
    border-radius: .35rem;
    font-size: .75em;
    transform: translateY(4px);
    opacity: 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.tmp-gallery .it:hover .bad,
.tmp-gallery .it:focus-visible .bad {
    transform: translateY(0);
    opacity: 1;
}

.tmp-gallery .ft {
    min-height: 1.2em;
    color: var(--mut);
    animation: tg-fade-in var(--dur-lg) var(--ease-out) both;
}

/* keyframes */
@keyframes tg-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes tg-pop-in {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(.98)
    }

    60% {
        opacity: 1;
        transform: translateY(0) scale(1.01)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes tg-shimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

@media (min-width:960px) {
    .tmp-gallery .grid {
        grid-template-columns: repeat(var(--cols-max), 1fr)
    }
}

/* ********************************************************************************* CONSULTAS CON INPUT */
.tmp-txt-input-request-query {
    --c-bg: #ffffff;
    --c-fg: #111827;
    --c-sub: #6b7280;
    --c-line: #e5e7eb;
    --c-ac: #2563eb;
    --c-ac-2: #0ea5e9;
    --c-err: #ef4444;
    --c-ok: #10b981;
    --c-warn: #f59e0b;

    /* Elevation + focus */
    --c-shadow: 16, 18, 28;
    --c-ring: 37, 99, 235;
    --c-drop: 0, 0, 0;

    /* Typography / Sizing */
    --fs: clamp(14px, 1.52vw, 16px);
    --fs-sm: clamp(12px, 1.28vw, 14px);
    --fs-lg: clamp(16px, 1.86vw, 18px);
    --lh: 1.35;

    /* Radii / Spacing */
    --rd: 12px;
    --rd-sm: 10px;
    --pad: 10px;
    --gap: 8px;
    --gap-lg: 12px;
    --h: 44px;

    /* Motion / Effects */
    --speed: 180ms;
    --speed-slow: 360ms;
    --bezier: cubic-bezier(.2, .8, .2, 1);
    --blur: 10px;

    /* Elevations */
    --elev-1: 0 6px 16px rgba(var(--c-drop), .08), 0 2px 6px rgba(var(--c-drop), .04);
    --elev-2: 0 10px 28px rgba(var(--c-drop), .12), 0 4px 10px rgba(var(--c-drop), .06);
    --ring: 0 0 0 3px rgba(var(--c-ring), .18);
    --ring-soft: 0 0 0 6px rgba(var(--c-ring), .10);

    /* Components */
    --list-maxh: min(52vh, 25rem);
    --shadow-focus: drop-shadow(0 8px 24px rgba(var(--c-ring), .20));
    --skl: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    --mask-fade: linear-gradient(to bottom, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 70%);
    --mask-fade-top: linear-gradient(to top, rgba(0, 0, 0, .10), rgba(0, 0, 0, 0) 60%);

    /* Density & size modifiers (opt-in via data-*) */
    --density-pad: 6px;
    --density-gap: 8px;
    --size-input-h: var(--h);

    position: relative;
    width: 100%;
    display: flex;
}

.tmp-txt-input-request-query .wrap {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--density-gap);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: .5rem;
    min-height: 2.5rem;
    transition: border-color var(--speed) var(--bezier), box-shadow var(--speed) var(--bezier), transform var(--speed) var(--bezier), backdrop-filter var(--speed) var(--bezier);
    position: relative;
    backdrop-filter: saturate(120%) blur(0px);
    isolation: isolate;
}

.tmp-txt-input-request-query:focus-within .wrap {
    border-color: color-mix(in oklab, var(--c-ac) 60%, var(--c-line));
    /* transform: translateY(-1px); */
    /* backdrop-filter: saturate(140%) blur(6px); */
}

.tmp-txt-input-request-query .wrap:has(input:disabled) {
    /* filter: grayscale(.1) opacity(.85); */
    /* background: color-mix(in oklab, var(--c-bg) 96%, transparent);    */
}

.tmp-txt-input-request-query[data-density="compact"] {
    --density-gap: 6px;
    --size-input-h: calc(var(--h) - 4px);
}

.tmp-txt-input-request-query[data-density="cozy"] {
    --density-gap: 10px;
    --size-input-h: calc(var(--h) + 2px);
}

.tmp-txt-input-request-query input[type="text"] {
    width: 100%;
    appearance: none;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--c-fg);
    height: calc(var(--size-input-h) - 12px);
    line-height: 1.25;
    padding-left: 2.5rem;
    padding-right: 2rem;
    caret-color: color-mix(in oklab, var(--c-ac) 70%, var(--c-fg));
}

.tmp-txt-input-request-query input::placeholder {
    color: var(--c-sub);
    opacity: .8;
    transition: opacity var(--speed) var(--bezier);
}

.tmp-txt-input-request-query:focus-within input::placeholder {
    opacity: .45;
}

.tmp-txt-input-request-query input[aria-busy="true"] {
    background-image: linear-gradient(90deg, transparent, color-mix(in oklab, var(--c-ac) 6%, transparent), transparent);
    background-size: 200% 100%;
    animation: ttiq-input-bar 1600ms linear infinite;
}

.tmp-txt-input-request-query .icon {
    position: absolute;
    left: .5rem;
    top: .5rem;
    pointer-events: none;
}

.tmp-txt-input-request-query .icon>div {
    background: var(--c19);
}

.tmp-txt-input-request-query.list-view .icon>div {
    background: var(--c5);
}

.tmp-txt-input-request-query:focus-within .icon {
    opacity: 1;
    transform: scale(1.02);
}

.tmp-txt-input-request-query .clear-btn {
    opacity: .5;
    appearance: none;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    transform: scale(.8);
    transition: all .5s;
    top: .5rem;
    right: .5rem;
    border: 0;
    color: var(--c-fg);
    border-radius: var(--rd-sm);
    line-height: 1;
    cursor: pointer;
    justify-self: end;
    background: var(--c31);
}

.tmp-txt-input-request-query .clear-btn u {
    padding: 2px;
}

.tmp-txt-input-request-query .clear-btn u>div {
    background: gray;
}

.tmp-txt-input-request-query .clear-btn:hover {
    transform: scale(1);
    background: gray;
}

.tmp-txt-input-request-query .clear-btn:hover u>div {
    background: white;
}

.tmp-txt-input-request-query .clear-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.tmp-txt-input-request-query .clear-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--elev-1);
    filter: var(--shadow-focus);
}

.tmp-txt-input-request-query .clear-btn:active:not(:disabled) {
    transform: translateY(0) scale(.99);
}

.tmp-txt-input-request-query .result-list {
    position: absolute;
    padding: 6px;
    list-style: none;
    background: color-mix(in oklab, var(--c-bg) 92%, transparent);
    border: 1px solid var(--c-line);
    border-radius: 4px;
    max-height: 0;
    overflow: clip;
    transition: max-height var(--speed-slow) var(--bezier), box-shadow var(--speed) var(--bezier), border-color var(--speed) var(--bezier), background var(--speed) var(--bezier), backdrop-filter var(--speed) var(--bezier), transform var(--speed) var(--bezier);
    box-shadow: none;
    will-change: max-height;
    backdrop-filter: blur(0px);
    contain: paint;
    top: 120%;
    left: 0;
    width: 100%;
    display: none;
}

.tmp-txt-input-request-query.list-view .result-list {
    max-height: var(--list-maxh);
    overflow: auto;
    border-color: color-mix(in oklab, var(--c-ac) 35%, var(--c-line));
    animation: ttiq-pop var(--speed-slow) var(--bezier);
    backdrop-filter: blur(6px);
    transform-origin: 20% 0;
    display: flex;
    z-index: 10;
}

/* Glass enhancement when supported */
@supports (backdrop-filter: blur(6px)) {
    .tmp-txt-input-request-query .result-list {
        background: color-mix(in oklab, var(--c-bg) 88%, transparent);
        backdrop-filter: blur(8px) saturate(120%);
    }
}

/* Sticky drag / handle + edge fades */
.tmp-txt-input-request-query .result-list::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    display: block;
    margin: 0 auto 6px;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--c-line) 70%, transparent);
    transform: translateY(4px);
}

.tmp-txt-input-request-query .result-list::after {
    content: "";
    position: sticky;
    display: block;
    bottom: 0;
    height: 10px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .04));
    border-bottom-left-radius: var(--rd);
    border-bottom-right-radius: var(--rd);
}

.tmp-txt-input-request-query .result-item {
    text-align: left;
    width: 100%;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background var(--speed) var(--bezier), border-color var(--speed) var(--bezier), transform var(--speed) var(--bezier), box-shadow var(--speed) var(--bezier), filter var(--speed) var(--bezier);
    transform-origin: 10% 50%;
    position: relative;
    isolation: isolate;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
}


.tmp-txt-input-request-query .result-item:hover {
    background: color-mix(in oklab, var(--c5) 10%, transparent);
    border-color: color-mix(in oklab, var(--c-ac) 24%, var(--c-line));
    transform: translateY(-1px);
}

.tmp-txt-input-request-query .result-item:hover::after {
    opacity: .75;
}

.tmp-txt-input-request-query .result-item.active,
.tmp-txt-input-request-query .result-item[aria-selected="true"] {
    background: color-mix(in oklab, var(--c-ac) 9%, var(--c-bg));
    border-color: color-mix(in oklab, var(--c-ac) 36%, var(--c-line));
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-ac) 26%, transparent) inset;
    animation: ttiq-pulse 900ms ease-out;
}

/* Keyboard focus ring (item & controls) */
.tmp-txt-input-request-query :is(button, [role="option"], input):focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.tmp-txt-input-request-query .result-item:focus-visible {
    box-shadow: var(--ring-soft), inset 0 0 0 1px color-mix(in oklab, var(--c-ac) 40%, var(--c-line));
}

/* Parallax / hover (pointer= fine) */
@media (pointer: fine) {
    .tmp-txt-input-request-query .result-item {
        --x: 50%;
        --y: 50%;
    }

    .tmp-txt-input-request-query .result-item:hover {
        filter: drop-shadow(0 4px 10px rgba(var(--c-shadow), .12));
    }

    .tmp-txt-input-request-query .result-item:hover * {
        transition: transform var(--speed) var(--bezier);
    }
}

.tmp-txt-input-request-query .empty,
.tmp-txt-input-request-query .sentinel,
.tmp-txt-input-request-query .loading {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    color: var(--c-sub);
    font-size: var(--fs-sm);
}

.tmp-txt-input-request-query .loading .dots {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
    align-items: end;
}

.tmp-txt-input-request-query .loading .dots::before,
.tmp-txt-input-request-query .loading .dots::after,
.tmp-txt-input-request-query .loading .dots span {
    content: "";
    width: .45em;
    height: .45em;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
    transform-origin: 50% 50%;
    animation: ttiq-bounce 900ms var(--bezier) infinite;
}

.tmp-txt-input-request-query .loading .dots::after {
    animation-delay: .15s;
}

.tmp-txt-input-request-query .loading .dots span {
    animation-delay: .30s;
}

.tmp-txt-input-request-query .item-h {
    font-weight: 600;
}

.tmp-txt-input-request-query .item-s {
    color: var(--c-sub);
}

.tmp-txt-input-request-query .item-badge {
    justify-self: end;
    border-radius: 50%;
    background: color-mix(in oklab, var(--c-ac) 18%, var(--c-bg));
    color: color-mix(in oklab, var(--c-ac) 70%, var(--c-fg));
    border: 1px solid color-mix(in oklab, var(--c-ac) 40%, var(--c-line));
    font-weight: 600;
    padding: 4px;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-txt-input-request-query .tmp-query-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
    min-width: 0;
}

.tmp-txt-input-request-query .tmp-query-item .line {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmp-txt-input-request-query .hit {
    background: color-mix(in oklab, var(--c-ac) 22%, transparent);
    padding: 0 .2em;
    border-radius: 4px;
}

.tmp-txt-input-request-query .result-list>.hint {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in oklab, var(--c-bg) 92%, transparent);
    border: 1px solid var(--c-line);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 2px;
    font-size: var(--fs-sm);
    color: var(--c-sub);
    backdrop-filter: blur(6px);
}

/*========================
  SCROLLBARS (solo lista)
=========================*/
.tmp-txt-input-request-query .result-list {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--c-ac) 35%, var(--c-line)) transparent;
    flex-direction: column;
}

.tmp-txt-input-request-query .result-list::-webkit-scrollbar {
    width: 9px;
}

.tmp-txt-input-request-query .result-list::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--c-ac) 35%, var(--c-line));
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.tmp-txt-input-request-query .result-list::-webkit-scrollbar-track {
    background: transparent;
}

.tmp-txt-input-request-query .is-error {
    border-color: color-mix(in oklab, var(--c-err) 60%, var(--c-line)) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-err) 20%, transparent) inset !important;
}

.tmp-txt-input-request-query .is-warn {
    border-color: color-mix(in oklab, var(--c-warn) 60%, var(--c-line)) !important;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-warn) 20%, transparent) inset !important;
}

.tmp-txt-input-request-query[data-size="sm"] {
    --fs: 13px;
    --fs-sm: 12px;
    --fs-lg: 14px;
    --h: 40px;
    --rd: 10px;
}

.tmp-txt-input-request-query[data-size="lg"] {
    --fs: 15px;
    --fs-sm: 14px;
    --fs-lg: 18px;
    --h: 52px;
    --rd: 14px;
}

/*========================
  RTL SUPPORT
=========================*/
.tmp-txt-input-request-query[dir="rtl"] .icon {
    right: auto;
    left: 10px;
}

.tmp-txt-input-request-query[dir="rtl"] .wrap::after {
    left: 46px;
    right: 10px;
}

.tmp-txt-input-request-query[dir="rtl"] .result-item {
    grid-template-columns: auto 1fr;
}

@keyframes ttiq-pop {
    0% {
        opacity: 0;
        transform: translateY(-4px) scale(.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ttiq-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--c-ring), .25);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(var(--c-ring), 0);
    }
}

@keyframes ttiq-bounce {

    0%,
    80%,
    100% {
        transform: translateY(0) scale(1);
        opacity: .7;
    }

    40% {
        transform: translateY(-3px) scale(1.05);
        opacity: 1;
    }
}

@keyframes ttiq-shimmer {
    100% {
        transform: translateX(200%);
    }
}

@keyframes ttiq-confirm {
    0% {
        transform: translateY(-1px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes ttiq-input-bar {
    100% {
        background-position: -200% 0;
    }
}

@keyframes ttiq-fade-in {
    0% {
        opacity: 0;
        translate: 0 6px;
    }

    100% {
        opacity: 1;
        translate: 0 0;
    }
}

/*========================
  SKELETON / PLACEHOLDERS
=========================*/
.tmp-txt-input-request-query .skl {
    position: relative;
    overflow: hidden;
    background: color-mix(in oklab, var(--c-bg) 80%, transparent);
}

.tmp-txt-input-request-query .skl::after {
    content: "";
    position: absolute;
    inset: 0;
    translate: -100% 0;
    background: var(--skl);
    animation: ttiq-shimmer 1200ms linear infinite;
}

.tmp-txt-input-request-query.list-view .result-list {
    transform-origin: 20% 0;
}

.tmp-txt-input-request-query :where(button, [role="option"], input)[aria-disabled="true"] {
    pointer-events: none;
    opacity: .6;
}

.tmp-txt-input-request-query.select .wrap {
    border: 2px solid #2ecc71;
    background: rgba(134, 248, 73, 0.5);
}

.tmp-txt-input-request-query.select .wrap::after {
    transform: scaleX(1);
    background: color-mix(in oklab, var(--c-ok) 50%, transparent);
}

.tmp-txt-input-request-query.select input[type="text"] {
    background: transparent;
}

.tmp-txt-input-request-query.select .icon>div {
    background: var(--c13);
}

.tmp-txt-input-request-query.select .clear-btn {
    opacity: 1;
    transform: scale(1);
    background: red;
    border: solid 1px white;
}

.tmp-txt-input-request-query.select .clear-btn:hover {
    filter: var(--shadow-focus);
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--c-ok) 45%, transparent),
        var(--elev-1);
}

.tmp-txt-input-request-query.select .clear-btn u>div {
    background: white;
}

.tmp-txt-input-request-query.select .result-list {
    border-color: color-mix(in oklab, var(--c-ok) 35%, var(--c-line));
    background: color-mix(in oklab, var(--c-bg) 94%, transparent);
}

.tmp-txt-input-request-query.select .result-item:hover {
    background: color-mix(in oklab, var(--c-ok) 10%, var(--c-bg));
    border-color: color-mix(in oklab, var(--c-ok) 32%, var(--c-line));
}

.tmp-txt-input-request-query.select .item-badge {
    background: color-mix(in oklab, var(--c-ok) 22%, var(--c-bg));
    color: color-mix(in oklab, var(--c-ok) 70%, var(--c-fg));
    border-color: color-mix(in oklab, var(--c-ok) 40%, var(--c-line));
}

.tmp-txt-input-request-query.select :is(button, [role="option"], input):focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-ok) 28%, transparent);
}

/* ****************************************************************CROPPER MANAGER */
.tmp-modal-welcome {
    --c-bg: #ffffff;
    --c-fg: #111111;
    --c-accent: #0056d2;
    --c-border: #e0e0e0;
    --c-overlay: rgba(0, 0, 0, 0.6);
    --fs-base: clamp(0.95rem, 1vw, 1.1rem);
    --r-radius: 0.75rem;
    --z-modal: 1000;
    --t-base: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    --shadow-md: 0 0.75rem 2rem rgba(0, 0, 0, 0.2);

    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    backdrop-filter: blur(0px);
    z-index: var(--z-modal);
    font-family: system-ui, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--c-fg);
    contain: layout;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base), backdrop-filter var(--t-base);
}

.tmp-modal-welcome .modal-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    --dec-size: 30rem;
    --dec-size-small: calc(-1*var(--dec-size) / 2);
    overflow: hidden;
}

.tmp-modal-welcome .modal-background .dec {
    width: var(--dec-size);
    height: var(--dec-size);
    position: absolute;
    background: var(--c3);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    mask-position: bottom;
    opacity: .2;
}

.tmp-modal-welcome .modal-background .dec.shape-001 {
    top: var(--dec-size-small);
    left: var(--dec-size-small);
    -webkit-mask-image: url("../../../icon/figure/shape-001.svg");
    mask-image: url("../../../icon/figure/shape-001.svg");
}

.tmp-modal-welcome .modal-background .dec.shape-002 {
    top: var(--dec-size-small);
    right: var(--dec-size-small);
    -webkit-mask-image: url("../../../icon/figure/shape-002.svg");
    mask-image: url("../../../icon/figure/shape-002.svg");
}

.tmp-modal-welcome .modal-background .dec.shape-003 {
    bottom: var(--dec-size-small);
    left: var(--dec-size-small);
    -webkit-mask-image: url("../../../icon/figure/shape-003.svg");
    mask-image: url("../../../icon/figure/shape-003.svg");
}

.tmp-modal-welcome .modal-background .dec.shape-004 {
    bottom: var(--dec-size-small);
    right: var(--dec-size-small);
    -webkit-mask-image: url("../../../icon/figure/shape-004.svg");
    mask-image: url("../../../icon/figure/shape-004.svg");
}

.tmp-modal-welcome.active {
    opacity: 1;
    pointer-events: all;
    background-color: var(--c-overlay);
    backdrop-filter: blur(6px);
    animation: tmpModalWelcomeActive ease 1s;
    transform: scale(1);
}

@keyframes tmpModalWelcomeActive {
    0% {
        background-color: transparent;
        transform: scale(1.1);
        opacity: 0;
        backdrop-filter: blur(0);
    }

    100% {
        background-color: var(--c-overlay);
        backdrop-filter: blur(6px);
        transform: scale(1);
        opacity: 1;
    }
}

.tmp-modal-welcome .modal-content {
    background-color: var(--c-bg);
    border-radius: var(--r-radius);
    max-width: 80rem;
    width: 100%;
    max-height: 95vh;
    overflow-y: auto;
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
    position: relative;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all var(--t-base);
    display: grid;
    grid-template-columns: 40% auto;
    gap: 2rem;
    z-index: 10;
    opacity: 0;
}

.tmp-modal-welcome.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.tmp-modal-welcome h2 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    text-align: left;
    font-family: 'f2';
    position: relative;
}

.tmp-modal-welcome .modal-model {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    z-index: 0;
}

.tmp-modal-welcome .modal-model>.background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    overflow: hidden;
    border-radius: 1rem;
    background: none;
    background: var(--c3);
}

.tmp-modal-welcome .modal-model>.background .shadow {
    background: none;
    opacity: .4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.tmp-modal-welcome .modal-model>.background img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .2;
    width: 100%;
    z-index: 0;
}

.tmp-modal-welcome .modal-model .dec {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.tmp-modal-welcome .modal-model .person {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
}

.tmp-modal-welcome .modal-model .person img {
    width: auto;
    height: 45rem;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}

.tmp-modal-welcome .modal-model .dec {
    z-index: 10;
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: -50%;
    width: 55rem;
    height: 55rem;
}

.tmp-modal-welcome .modal-model .dec .circle-big {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
}

.tmp-modal-welcome .modal-model .dec .circle-small {
    width: 50%;
    height: 50%;
    background: var(--c3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

@keyframes modalIconPop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.tmp-modal-welcome .btn-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    background: var(--c32);
    border-radius: 50%;
    transform: scale(.9);
    transition: all .5s;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-modal-welcome .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg) scale(1);
    background: var(--c9);
}

.tmp-modal-welcome .btn-close u>div {
    background: white;
}

/* PIE DE MODAL */
.tmp-modal-welcome .modal-footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
    opacity: 0.85;
}

.tmp-modal-welcome .modal-footer a {
    color: var(--c-accent);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.tmp-modal-welcome .modal-footer a:hover {
    color: #003c9d;
}

/* Mejora de tipografía, layout y acciones SOLO para el bloque solicitado */
.tmp-modal-welcome .modal-details {
    display: grid;
    align-content: start;
    position: relative;
    z-index: 10;
}

.tmp-modal-welcome .modal-details .title h2 {

    line-height: 1.2;
    color: var(--c14);
    font-family: 'f3';
    letter-spacing: .5px;
}

.tmp-modal-welcome .modal-details .title b {
    font-size: clamp(.95rem, 1.3vw, 1.05rem);
    color: var(--c1);
    background: var(--c3);
    padding: 4px;
    border-radius: 4px;
    color: white;
}

.tmp-modal-welcome .modal-description ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
}

.tmp-modal-welcome .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .7rem 1rem;
    border-radius: calc(var(--r-radius) - .15rem);
    background: var(--c-accent);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .15);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.tmp-modal-welcome .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 .55rem 1.25rem rgba(0, 0, 0, .18);
}

.tmp-modal-welcome .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .18);
}

.tmp-modal-welcome .btn-primary:focus-visible,
.tmp-modal-welcome .btn-close:focus-visible,
.tmp-modal-welcome .modal-footer a:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--c-accent) 70%, #fff);
    outline-offset: 2px;
    border-radius: calc(var(--r-radius) - .2rem);
}

.tmp-modal-welcome .modal-footer {
    margin-top: .5rem;
}

.tmp-modal-welcome .modal-footer a {
    font-weight: 600;
    text-underline-offset: 2px;
}

.tmp-modal-welcome .btn-cont {
    width: 100%;
    position: relative;
    z-index: 0;
}

.tmp-modal-welcome .btn-option {
    z-index: 20;
    max-width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    gap: .5rem;
    cursor: pointer;
    border: 1px solid var(--c-border);
    border-radius: var(--r-radius);
    padding: 1rem 2rem;
    text-align: left;
    isolation: isolate;
    background: var(--c6);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05) inset, 0 .25rem .75rem rgba(0, 0, 0, .06);
    transition:
        transform .18s ease, box-shadow .2s ease,
        background .25s ease, border-color .25s ease;
}

.tmp-modal-welcome .btn-option::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 200% at -20% 0%, color-mix(in oklab, var(--c-accent) 18%, transparent) 0%, transparent 60%),
        linear-gradient(145deg, transparent 0 40%, color-mix(in oklab, var(--c-accent) 12%, #fff) 60%, transparent 80%);
    opacity: 0;
    transition: opacity .25s ease;
}

.tmp-modal-welcome .btn-option::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    left: -45%;
    transform: skewX(-20deg);
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    opacity: 0;
    transition: left .6s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}

.tmp-modal-welcome .btn-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .1), 0 1px 0 rgba(255, 255, 255, .6) inset;
    border-color: color-mix(in oklab, var(--c-accent) 28%, var(--c-border));
    background: var(--c7);
}

.tmp-modal-welcome .btn-option:hover::before {
    opacity: .10;
}

.tmp-modal-welcome .btn-option:hover::after {
    left: 115%;
    opacity: .8;
}

.tmp-modal-welcome .btn-option:active {
    transform: translateY(0);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12) inset, 0 .15rem .5rem rgba(0, 0, 0, .08);
}

.tmp-modal-welcome .btn-option:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--c-accent) 70%, #fff);
    outline-offset: 2px;
    border-radius: calc(var(--r-radius) - .1rem);
}

.tmp-modal-welcome .btn-option figure {
    margin: 0;
    display: flex;
    place-items: center;
}

.tmp-modal-welcome .btn-option figure u {
    width: 3.5rem;
    height: 3.5rem;
}

.tmp-modal-welcome .btn-option figure u>div {
    background: white;
}

.tmp-modal-welcome .btn-option .btn-description b {
    font-size: 1rem;
    line-height: 1;
    color: white;
    letter-spacing: 1px;
}

.tmp-modal-welcome .btn-option .btn-description p {
    margin: 0;
    opacity: .82;
    color: white;
}

.tmp-modal-welcome .btn-option[aria-disabled="true"],
.tmp-modal-welcome .btn-option:disabled {
    cursor: not-allowed;
    opacity: .6;
    transform: none;
    filter: grayscale(.15);
    box-shadow: none;
}

.tmp-modal-welcome .btn-option[data-loading="true"] {
    pointer-events: none;
    opacity: .9;
}

.tmp-modal-welcome .btn-option[data-loading="true"]::before {
    opacity: .14;
}

.tmp-modal-welcome .btn-option[data-loading="true"] .btn-description {
    opacity: .65;
}

.tmp-modal-welcome .btn-option[data-loading="true"] .btn-description b {
    padding-right: 1.6rem;
}

.tmp-modal-welcome .btn-option[data-loading="true"] .btn-description b::after {
    content: "";
    position: absolute;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: .18rem solid rgba(255, 255, 255, .7);
    border-top-color: var(--c-accent);
    animation: tmp-spin .8s linear infinite;
}


/* Lista de ventajas dentro del modal */
.tmp-modal-welcome .modal-description ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(.8rem, 1.8vw, 1rem);
}



.tmp-modal-welcome .modal-description li {
    column-gap: .9rem;
    row-gap: .35rem;
    padding: clamp(.85rem, 1.8vw, 1rem);
    border-radius: calc(var(--r-radius) - .2rem);
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
    will-change: transform;
    background: rgb(240, 240, 240);
}

.tmp-modal-welcome .modal-description .icon u {
    width: 4rem;
    height: 4rem;
}

/*

.tmp-modal-welcome .modal-description li:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.1rem rgba(0, 0, 0, .3);
    border-color: color-mix(in oklab, var(--c-accent) 25%, var(--c-border));
    border: solid 2px rgb(220, 220, 220);
}

.tmp-modal-welcome .modal-description li:focus-within {
    outline: 2px solid color-mix(in oklab, var(--c-accent) 70%, #fff);
    outline-offset: 2px;
}


*/
/* Títulos y texto */
.tmp-modal-welcome .modal-description h3 {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.2;
    letter-spacing: .1px;
    font-family: 'f2';
    letter-spacing: 1px;
    color: var(--c5);
}

.tmp-modal-welcome .btn-container {
    display: flex;
    width: 100%;
}

.tmp-modal-welcome .modal-description p {
    margin: 0;
    color: color-mix(in oklab, var(--c-fg) 78%, transparent);
}

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

    .tmp-modal-welcome .modal-content {
        max-width: 95%;
        grid-template-columns: auto 23rem;
    }

    .tmp-modal-welcome .modal-model .person img {
        height: 40rem;
    }

    .tmp-modal-welcome .modal-model {
        overflow: revert;
    }

    .tmp-modal-welcome .modal-model .person {
        bottom: -.5rem;
    }
}

@media only screen and (max-width: 768px) {
    .tmp-modal-welcome .modal-model>.background {
        opacity: 0;
    }

    .tmp-modal-welcome .modal-model {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .tmp-modal-welcome .modal-content {
        grid-template-columns: auto 7rem;
    }

    .tmp-modal-welcome .modal-model {
        overflow: clip;
    }

    .tmp-modal-welcome .modal-model .person {
        left: auto;
        right: -5rem;
        transform: none;
        bottom: 0;
    }
}

@media only screen and (max-width: 480px) {
    .tmp-modal-welcome .modal-content {
        grid-template-columns: auto;
        padding: 1rem;
    }

    .tmp-modal-welcome .modal-description li {
        background: none;
        box-shadow: none;
        border: none;
    }

    .tmp-modal-welcome .modal-description p {
        color: black;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.7);
        padding: 4px;
    }
}

@media only screen and (max-height: 640px) {
    .tmp-modal-welcome .modal-model .person {
        right: 0;
    }

    .tmp-modal-welcome .modal-background {
        display: none;
    }

    .tmp-modal-welcome .modal-model {
        display: none;
    }

    .tmp-modal-welcome .modal-content {
        grid-template-columns: auto;
    }
}

/************************************************** ADMINISTRADOR DE BOTON */
.tmp-form-btn-manager {
    width: auto;
    background: var(--c6);
    border-radius: 4px;
}

.tmp-form-btn-manager .form-btn {
    position: relative;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease, transform 0.3s ease,
        box-shadow 0.3s ease;
    width: 100%;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0 1rem;
    color: var(--btn-color, var(--c21));
    /* background-color: var(--c5); */
}

.tmp-form-btn-manager::after {
    content: "";
    position: absolute;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.1);
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 1s ease;
}

.tmp-form-btn-manager u {
    width: 1.3rem;
    height: 1.3rem;
}

.tmp-form-btn-manager i {
    color: white;
    font-size: 1rem;
}

.tmp-form-btn-manager:hover i,
.tmp-form-btn-manager:hover u {
    transform: rotate(360deg);
    opacity: 0.9;
    transition: transform var(--icon-transition-speed),
        opacity var(--icon-transition-speed);
}

.tmp-form-btn-manager:hover {
    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 3px;
    transform: scale(1);
}

.tmp-form-btn-manager u>div {
    background: white;
}

.tmp-form-btn-manager .btn-text {
    font-size: 0.8rem;
    font-family: "f2";
    color: white;
}

.tmp-form-btn-manager .form-btn:not(:disabled):hover {
    background-color: var(--c7);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tmp-form-btn-manager .form-btn::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.4);
    opacity: 0;
    transform: scale(2);
    border-radius: 50%;
    pointer-events: none;
    transition: opacity 0.6s, transform 0.6s;
}

.tmp-form-btn-manager .form-btn:active::after {
    opacity: 1;
    transform: scale(0);
    transition: 0s;
}

.tmp-form-btn-manager .form-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.tmp-form-btn-manager .form-btn.success {
    background-color: #4caf50;
    color: #fff;
    animation: pulse 1s ease-in-out;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.tmp-form-btn-manager .form-btn.error {
    background-color: #f44336;
    color: #fff;
    animation: shake 0.5s ease;
}

.tmp-form-btn-manager .form-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tmp-form-btn-manager.save {
    margin-top: 2rem;
}

.tmp-form-btn-manager.save .form-btn {
    padding: 2rem;
}

@media only screen and (max-width: 480px) {
    .tmp-form-btn-manager {
        width: 100%;
    }
}

/* ****************************************************************CROPPER MANAGER */
.tmp-switch-btn {
    --switch-width: 4rem;
    --switch-height: 2rem;
    --thumb-size: 1.8rem;
    --thumb-gap: 0.1rem;
    --label-padding: 0.6rem;
    --switch-color: var(--app-c-bg-off, #ccc);

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    font: inherit;
    transition: opacity 0.3s ease;
    contain: layout;
}

.tmp-switch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tmp-switch-btn .track {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--switch-color);
    width: var(--switch-width);
    height: var(--switch-height);
    border-radius: 999px;
    position: relative;
    transition: background-color 0.3s ease;
    padding: 0 var(--thumb-gap);
    box-sizing: content-box;
}

.tmp-switch-btn .thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
    transform: translateX(0);
    position: absolute;
    top: 50%;
    left: var(--thumb-gap);
    transform: translateY(-50%);
    z-index: 2;
}

.tmp-switch-btn.is-on .thumb {
    transform: translateY(-50%) translateX(calc(var(--switch-width) - var(--thumb-size) - var(--thumb-gap) * 2));
}

.tmp-button-toggle .state-label {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--app-c-text, #333);
    padding-left: var(--label-padding);
}

.tmp-switch-btn.pending .thumb {
    background: repeating-linear-gradient(45deg,
            #fff,
            #fff 3px,
            #ccc 3px,
            #ccc 6px);
}

.tmp-button-toggle .loading-dot {
    position: absolute;
    right: -1.2rem;
    width: 0.4rem;
    height: 0.4rem;
    background: var(--switch-color);
    border-radius: 50%;
    animation: dot-pulse 1s infinite ease-in-out;
    display: none;
}

.tmp-switch-btn.pending .loading-dot {
    display: block;
}

/* Accesibilidad */
.tmp-switch-btn:focus-visible {
    outline: 2px solid var(--app-c-focus, #005fcc);
    outline-offset: 4px;
}

/* Animación del punto */
@keyframes dot-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
    }
}

/* ****************************************************************MODAL RESPNSE */
.tmp-modal-response {
    --modal-response-c-overlay: rgba(0, 0, 0, 0.5);
    --modal-response-c-bg: #ffffff;
    --modal-response-c-text: #333333;
    --modal-response-c-border: #e0e0e0;
    --modal-response-space: clamp(0.5rem, 2vw, 1rem);
    --modal-response-radius: 0.5rem;
    --modal-response-z-index-modal: 1000;
    --modal-response-font-size: clamp(1rem, 2vw, 1.125rem);
    --modal-response-btn-bg: #f9f9f9;
    --modal-response-btn-hover: #efefef;
    --modal-response-btn-active: #dddddd;
    --modal-response-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    --modal-response-focus-ring: #2684ff;
    --modal-response-anim-fast: 0.2s ease-in-out;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    animation: modal-fade-in var(--modal-response-anim-fast);
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.7);
    transition: opacity 0.5s ease;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tmp-modal-response .modal-container {
    background-color: var(--modal-response-c-bg);
    color: var(--modal-response-c-text);
    margin: var(--modal-response-space);
    max-width: 100%;
    width: clamp(300px, 90%, 65rem);
    max-height: 90%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--modal-response-shadow);
    animation: container-pop var(--modal-response-anim-fast);
    contain: layout;
    border-radius: 1rem;
}

@keyframes container-pop {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tmp-modal-response .modal-header {
    border-bottom: 1px solid var(--modal-response-c-border);
    display: flex;
    align-items: flex-start;
    gap: var(--modal-response-space);
    position: relative;
    width: 100%;
    height: 6rem;
    z-index: 0;
    font-family: 'f3';
    font-size: 1.5rem;
}

.tmp-modal-response .modal-header figure {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
    border-radius: 1rem 1rem 0 0;
}

.tmp-modal-response .modal-header figure img {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmp-modal-response .header-actions {
    position: absolute;
    top: .5rem;
    right: 1rem;
    z-index: 20;
}

.tmp-modal-response .header-details {
    display: flex;
    position: relative;
    z-index: 20;
    width: 80%;
    height: 100%;
    padding: 1rem;
    border-radius: 1rem;
    flex-grow: 1;
    flex-direction: column;
    gap: .5rem;
    background: rgba(170, 170, 170, 0.2);
}

.tmp-modal-response .header-title {
    position: relative;
    color: white;
    font-family: 'f1';
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 70%;
}

.tmp-modal-response .header-title h2 {
    font-size: 1.3rem;
    font-family: 'f2';
    letter-spacing: 1px;
    padding: 0 .5rem;
    border-radius: 4px;
    background: white;
    color: var(--c1);
}

.tmp-modal-response .header-title h3 {
    font-size: 1rem;
    font-family: 'f2';
    letter-spacing: 1px;
    padding: 0 .5rem;
    border-radius: 4px;
    background: white;
    color: var(--c1);
}

.tmp-modal-response .header-description {
    position: relative;
    color: white;
    font-family: 'f1';
    font-size: .8rem;
    max-width: 90%;
}

.tmp-modal-response .action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .5rem;
    align-items: center;
}

.tmp-modal-response .action-list li {
    position: relative;
}

.tmp-modal-response .action-list button {
    background-color: var(--modal-response-btn-bg);
    color: var(--modal-response-c-text);
    border: none;
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5em;
    transition: background-color var(--modal-response-anim-fast), transform var(--modal-response-anim-fast);
    white-space: nowrap;
    position: relative;
    z-index: 0;
}

.tmp-modal-response .action-list button u>div {
    background: gray;
}

.tmp-modal-response .action-list button:hover {
    background-color: var(--modal-response-btn-hover);
}

.tmp-modal-response .action-list button:hover u>div {
    background: var(--c1);
}

.tmp-modal-response .action-list button:active {
    background-color: var(--modal-response-btn-active);
    transform: scale(0.97);
}

.tmp-modal-response .action-list button:focus-visible {
    outline: 2px solid var(--modal-response-focus-ring);
    outline-offset: 2px;
}



.tmp-modal-response .action-list button.btn-main {
    width: 3rem;
    height: 3rem;
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: .8;
    transform: scale(.8);
    transition: all .5s;
}

.tmp-modal-response .action-list button.btn-main u {
    width: 1.5rem;
    height: 1.5rem;
}

.tmp-modal-response .action-list button.btn-main span {
    opacity: 0;
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: 10;
}

.tmp-modal-response .action-list button.btn-main u>div {
    background: white;
}

.tmp-modal-response .action-list button.btn-main:hover {
    background: black;
    transform: scale(1);
    opacity: 1;
}

.tmp-modal-response .action-list button.btn-main:hover span {
    background: black;
    color: white;
    opacity: 1;
    padding: 4px .5rem;
    border-radius: 4px;
}

.tmp-modal-response .has-submenu ul {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    background-color: var(--modal-response-c-bg);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    box-shadow: var(--modal-response-shadow);
    border-radius: var(--modal-response-radius);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity var(--modal-response-anim-fast), transform var(--modal-response-anim-fast);
    min-width: 160px;
    z-index: calc(var(--modal-response-z-index-modal) + 1);
}

.tmp-modal-response .has-submenu>button[aria-expanded="true"]+ul {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.tmp-modal-response .has-submenu ul li {
    margin: 0;
}

.tmp-modal-response .has-submenu ul button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    padding: 0.5em 1em;
    cursor: pointer;
    transition: background-color var(--modal-response-anim-fast);
}

.tmp-modal-response .has-submenu ul button:hover {
    background-color: var(--modal-response-btn-hover);
}

.tmp-modal-response .has-submenu ul button:focus-visible {
    outline: 2px solid var(--modal-response-focus-ring);
}

.tmp-modal-response .modal-body {
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
    line-height: 1.5;
    min-height: 5rem;
}

.tmp-modal-response {
    display: none;
}

.tmp-modal-response.is-visible {
    display: flex;
}

@media only screen and (max-width: 768px) {
    .tmp-modal-response .header-title {
        width: 100%;
    }

    .tmp-modal-response .modal-header {
        min-height: 8rem;
    }

    .tmp-modal-response .header-details {
        padding-top: 3rem;
        width: 100%;
    }

    .tmp-modal-response .action-list {
        gap: 0;
    }

    .tmp-modal-response .header-actions {
        right: .5rem;
    }

}

@media only screen and (max-width: 420px) {
    .tmp-modal-response .action-list button.btn-main {
        width: 2.5rem;
        height: 2.5rem;
    }

    .tmp-modal-response .action-list button.btn-main u {
        height: 1rem;
        width: 1rem;
    }

    .tmp-modal-response .header-title h3 {
        font-size: .8rem;
        font-family: 'f2';
        letter-spacing: 1px;
        padding: 0 .5rem;
        border-radius: 4px;
        background: white;
        color: var(--c1);
    }

    .tmp-modal-response .header-description {
        position: relative;
        color: white;
        font-family: 'f1';
        font-size: .7rem;
    }

    .tmp-modal-response .header-details {
        padding: .5rem;
        padding-top: 1rem;
    }

    .tmp-modal-response .modal-header {
        min-height: 5rem;
    }
}

@supports (display: grid) {
    .tmp-modal-response .header-banner {
        grid-area: banner;
    }

    .tmp-modal-response .header-title {
        grid-area: title;
    }

    .tmp-modal-response .header-actions {
        grid-area: actions;
    }
}

/* ****************************************************************CALENDARIO */
.tmp-calendar {
    --calendar-c-bg: #fff;
    --calendar-c-fg: #232b34;
    --calendar-c-header-bg: #f6f8fa;
    --calendar-c-accent: #2d7ff9;
    --calendar-c-border: #e3e3e3;
    --calendar-c-border-radius: 1em;
    --calendar-c-task-bg: #efefef;
    --calendar-c-task-fg: #232323;
    --calendar-c-disabled: #ededed;
    --calendar-c-today-bg: #e6f0fe;
    --calendar-c-today-border: #2d7ff9;
    --calendar-c-shadow: 0 8px 32px #0002;
    --calendar-c-slot-bg: #f8fafc;
    --calendar-c-slot-border: #e3e9f3;
    --calendar-c-scrollbar-thumb: #d1e1fb;
    --calendar-c-scrollbar-track: #f8fafc;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    background: var(--calendar-c-bg);
    border-radius: var(--calendar-c-border-radius);
    width: 100%;
}

.tmp-calendar-nav {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.7em 0.8em;
    background: var(--calendar-c-header-bg);
    border-bottom: 1px solid var(--calendar-c-border);
}

.tmp-calendar-nav__controls {
    display: flex;
    gap: 0.25em;
}

.tmp-calendar-nav__btn {
    background: var(--calendar-c-today-bg);
    border: 1px solid var(--calendar-c-border);
    border-radius: 0.7em;
    padding: 0.2em 0.8em;
    cursor: pointer;
    transition: background 0.13s;
    font-size: 1em;
}

.tmp-calendar-nav__btn:hover,
.tmp-calendar-nav__btn:focus-visible {
    background: var(--calendar-c-accent);
    color: #fff;
}

.tmp-calendar-nav__title {
    flex: 1;
    text-align: center;
    font-size: clamp(1.1em, 3vw, 1.36em);
    font-weight: 600;
}

.tmp-calendar-nav__views {
    display: flex;
    gap: 0.2em;
}

.tmp-calendar-nav__view-btn {
    background: none;
    border: none;
    padding: 0.2em 0.6em;
    border-radius: 0.6em;
    cursor: pointer;
    transition: background 0.14s;
}

.tmp-calendar-nav__view-btn.active,
.tmp-calendar-nav__view-btn:hover,
.tmp-calendar-nav__view-btn:focus-visible {
    background: var(--calendar-c-accent);
    color: #fff;
}

.tmp-task-card {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    padding: 0.4em 0.8em;
    border: 1px solid var(--calendar-c-border);
    border-radius: 4px;
    background: var(--calendar-task-bg, var(--calendar-c-task-bg));
    color: var(--calendar-task-text, var(--calendar-c-task-fg));
    cursor: pointer;
    outline: none;
    transition: box-shadow 0.12s, border-color 0.13s, background 0.13s;
    padding-top: 1.5rem;
    position: relative;
}

.tmp-task-card:hover,
.tmp-task-card:focus-visible {
    border-color: var(--calendar-c-accent);
    background: var(--calendar-c-today-bg);
}

.tmp-task-card__status {
    font-size: 1.1em;
    flex-shrink: 0;
    margin-top: 0.1em;
}

.tmp-task-card__status figure {
    height: 100%;
}

.tmp-task-card__status figure u {
    width: 2rem;
    height: 2rem;
    background: white;
    border-radius: 50%;
    padding: 6px;
}

.tmp-task-card__status figure u>div {
    background: var(--c1);
}

.tmp-task-card__main {
    flex: 1;
    min-width: 0;
}

.tmp-task-card__title {
    margin: 0;
    font-size: 1em;
    font-family: 'f3';
    white-space: pre-line;
}

.tmp-task-card__project {
    font-size: 0.9em;
    font-family: 'f2';
    color: black;
}

.tmp-task-card__time {
    font-size: 0.7em;
    color: black;
    font-family: 'f2';
    flex-shrink: 0;
    position: absolute;
    top: 4px;
    right: 4px;
    background: white;
    padding: 0 4px;
    border-radius: 4px;
}

.tmp-month {
    display: flex;
    flex-direction: column;
    background: var(--calendar-c-bg);
}

.tmp-month__grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--calendar-c-header-bg);
    padding: 0.5em 0;
    font-weight: 600;
    text-align: center;
}

.tmp-month__grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3em;
    padding: 0.5em;
}

.tmp-month__cell {
    background: var(--calendar-c-bg);
    border: 1px solid var(--calendar-c-border);
    border-radius: 0.5em;
    display: flex;
    flex-direction: column;
    padding: 0.3em;
    cursor: pointer;
    outline: none;
}

.tmp-month__cell.dimmed {
    opacity: 0.4;
}

.tmp-month__cell.today {
    border-color: var(--calendar-c-today-border);
    background: var(--calendar-c-today-bg);
}

.tmp-month__cell:hover:not(.today),
.tmp-month__cell:focus-visible {
    background: var(--calendar-c-today-bg);
    border-color: var(--calendar-c-accent);
}

.tmp-month__cell-header {
    font-weight: 600;
    margin-bottom: 0.2em;
}

.tmp-month__task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.tmp-month__task-more {
    font-size: 0.9em;
    color: var(--calendar-c-accent);
    cursor: pointer;
}

.tmp-week {
    display: grid;
    grid-template-columns: auto 1fr;
    overflow: hidden;
}

.tmp-week__hours {
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    font-size: 0.85em;
    color: #667;
}

.tmp-week__hour {
    height: 2.4em;
    line-height: 2.4em;
}

.tmp-week__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
    overflow-y: auto;
    background: var(--calendar-c-slot-bg);
    border-left: 1px solid var(--calendar-c-border);
}

.tmp-week__col {
    position: relative;
    border-right: 1px solid var(--calendar-c-border);
}

.tmp-week__col-header {
    position: sticky;
    top: 0;
    background: var(--calendar-c-header-bg);
    padding: 0.4em;
    font-weight: 600;
    text-align: center;
}

.tmp-week__task {
    position: relative;
    left: 2%;
    right: 2%;
    background: transparent;
    pointer-events: none;
}

.tmp-week__task .tmp-task-card {
    pointer-events: auto;
}

/* ==========================
   DAY VIEW
   ========================== */
.tmp-calendar-day {
    display: flex;
    width: 100%;
    min-height: 24em;
    background: var(--calendar-c-bg);
}

.tmp-calendar-day__times {
    width: 3.5em;
    padding: 0.5em 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.85em;
    color: #667;
}

.tmp-calendar-day__time-label {
    height: 2.4em;
    line-height: 2.4em;
    padding-right: 0.3em;
}

.tmp-calendar-day__slots {
    flex: 1;
    display: grid;
    grid-template-rows: repeat(48, 1fr);
    position: relative;
    overflow-y: auto;
    padding: 0.5em 0;
}

.tmp-calendar-day__slot {
    border-bottom: 1px solid var(--calendar-c-slot-border);
}

.tmp-agenda-filters {
    display: flex;
    gap: 0.7em;
    padding: 0.5em;
}

.tmp-agenda-filter {
    background: var(--calendar-c-today-bg);
    border: 1px solid var(--calendar-c-border);
    border-radius: 0.6em;
    padding: 0.3em 0.8em;
    cursor: pointer;
}

.tmp-agenda-filter.active,
.tmp-agenda-filter:hover,
.tmp-agenda-filter:focus-visible {
    background: var(--calendar-c-accent);
    color: #fff;
}

.tmp-agenda-week {
    margin: 0.5em;
    border: 1px solid var(--calendar-c-border);
    border-radius: 0.7em;
    overflow: hidden;
}

.tmp-agenda-week__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em;
    background: var(--calendar-c-header-bg);
    cursor: pointer;
}

.tmp-agenda-week__range {
    font-weight: 600;
    color: var(--calendar-c-accent);
}

.tmp-agenda-week__stats {
    color: #667;
}

.tmp-agenda-week__progress {
    width: 6em;
    height: 0.5em;
    accent-color: var(--calendar-c-accent);
    border: none;
    background: #f4f6fd;
    border-radius: 0.3em;
}

.tmp-agenda-week__days {
    padding: 0.5em;
}

.tmp-agenda-day {
    margin-bottom: 0.5em;
}

.tmp-agenda-day__header {
    font-weight: 600;
    margin-bottom: 0.3em;
}

.tmp-agenda-day__tasks {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.tmp-calendar__popover {
    position: absolute;
    z-index: 100;
    background: var(--calendar-c-bg);
    border: 1px solid var(--calendar-c-border);
    border-radius: 0.5em;
    box-shadow: var(--calendar-c-shadow);
    padding: 1em;
    width: 18em;
}

.tmp-calendar__popover-close {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
}

.tmp-calendar__popover-title {
    margin: 0 0 0.5em;
    font-weight: 600;
}

.tmp-calendar__popover-list {
    max-height: 12em;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tmp-calendar__popover-empty {
    text-align: center;
    color: #888;
}

.tmp-datepicker {
    border: 1px solid var(--calendar-c-border);
    border-radius: 0.5em;
    background: var(--calendar-c-bg);
    box-shadow: var(--calendar-c-shadow);
    width: 16em;
}

.tmp-datepicker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em;
    background: var(--calendar-c-header-bg);
}

.tmp-datepicker__nav {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
}

.tmp-datepicker__label {
    font-weight: 600;
}

.tmp-datepicker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0.5em;
}

.tmp-datepicker__label-cell {
    font-weight: 600;
    text-align: center;
    padding: 0.3em 0;
}

.tmp-datepicker__cell {
    width: 2em;
    height: 2em;
    margin: 0.1em;
    border: none;
    background: none;
    cursor: pointer;
    text-align: center;
    line-height: 2em;
    border-radius: 0.3em;
    transition: background 0.13s;
}

.tmp-datepicker__cell:hover,
.tmp-datepicker__cell:focus-visible {
    background: var(--calendar-c-today-bg);
}

.tmp-datepicker__cell--blank {
    visibility: hidden;
}

.tmp-week__days,
.tmp-calendar-day__slots,
.tmp-agenda-week__days {
    scrollbar-width: thin;
    scrollbar-color: var(--calendar-c-scrollbar-thumb) var(--calendar-c-scrollbar-track);
}

.tmp-week__days::-webkit-scrollbar,
.tmp-calendar-day__slots::-webkit-scrollbar,
.tmp-agenda-week__days::-webkit-scrollbar {
    width: 7px;
}

.tmp-week__days::-webkit-scrollbar-thumb,
.tmp-calendar-day__slots::-webkit-scrollbar-thumb,
.tmp-agenda-week__days::-webkit-scrollbar-thumb {
    background: var(--calendar-c-scrollbar-thumb);
    border-radius: 8px;
}

.tmp-week__days::-webkit-scrollbar-track,
.tmp-calendar-day__slots::-webkit-scrollbar-track,
.tmp-agenda-week__days::-webkit-scrollbar-track {
    background: var(--calendar-c-scrollbar-track);
}

.tmp-calendar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.5em 0;
    font-size: 0.9em;
}

.tmp-filter {
    position: relative;
}

.tmp-filter__btn {
    background: var(--calendar-c-bg, #fff);
    color: var(--calendar-c-text, #111);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.4em 0.8em;
    cursor: pointer;
}

.tmp-filter__list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    background: white;
    border: 1px solid #ccc;
    border-radius: 0.3em;
    margin-top: 0.2em;
    list-style: none;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tmp-filter__list li {
    padding: 0.4em 0.8em;
    cursor: pointer;
}

.tmp-filter__list li:hover {
    background: #f0f0f0;
}

@media only screen and (max-width: 1024px) {
    .tmp-month__grid-body {
        gap: 0;
    }

    .tmp-task-card__status {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .tmp-task-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .tmp-week__task {
        margin-bottom: .5rem;
    }

    .tmp-filter__btn {
        width: 100%;
    }

    .tmp-filter__list {
        max-width: 100%;
        width: 100%;
    }

    .tmp-calendar-nav__controls {
        width: 100%;
        display: grid;
        grid-template-columns: 3rem auto 3rem;
    }
}

@media only screen and (max-width: 768px) {
    .tmp-calendar-filters {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .tmp-month__cell {
        border-radius: 0;
        border: none;
    }

    .tmp-month__grid-body {
        width: 100%;
        padding: 0;
    }

    .tmp-task-card {
        padding: 4px;
        border-radius: none;
        height: 3rem;
        width: 3rem;
        border-radius: 50%;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .tmp-task-card__main,
    .tmp-task-card__project,
    .tmp-task-card__time {
        display: none;
    }

    .tmp-month__task-list {
        overflow-x: auto;
    }

    .tmp-calendar-nav {
        display: flex;
        flex-direction: column;
    }

    .tmp-task-card__title {
        display: none;
    }

    .tmp-agenda-week .tmp-task-card,
    .tmp-week .tmp-task-card {
        padding: 4px;
        width: 100%;
        height: auto;
        border-radius: 4px;
    }

    .tmp-agenda-week .tmp-task-card__title,
    .tmp-agenda-week .tmp-task-card__project,
    .tmp-agenda-week .tmp-task-card__time,
    .tmp-week .tmp-task-card__title,
    .tmp-week .tmp-task-card__project,
    .tmp-week .tmp-task-card__time {
        display: flex;
        position: relative;
    }

    .tmp-week .tmp-task-card .tmp-task-card__time {
        position: relative;
    }

    .tmp-agenda-week .tmp-task-card__time,
    .tmp-agenda-week .tmp-task-card__main {
        display: flex;
    }

    .tmp-agenda-week .tmp-task-card {
        padding: 8px;
    }

    .tmp-calendar__popover .tmp-task-card {
        width: 100%;
        border-radius: 4px;
        height: auto;
        padding: 8px;
    }

    .tmp-calendar__popover {
        width: 100%;
    }

    .tmp-calendar__popover .tmp-task-card__project,
    .tmp-calendar__popover .tmp-task-card__title {
        display: flex;
    }

    .tmp-calendar__popover .tmp-task-card__main,
    .tmp-calendar__popover .tmp-task-card__project,
    .tmp-calendar__popover .tmp-task-card__time {
        display: flex;
        position: relative;
    }
}

/* ****************************************************************CROPPER MANAGER */
.tmp-selector-hora {
    --app-bg: #fff;
    --app-fg: #333;
    --app-accent: #07f;
    --app-radius: .5rem;
    --app-gap: 1rem;
    --app-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) background: var(--app-bg);
    color: var(--app-fg);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    display: grid;
    gap: var(--app-gap);
    contain: layout;
    position: relative;
    z-index: 10;
}

.tmp-selector-hora .header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.tmp-selector-hora .fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem
}

.tmp-selector-hora .dropdown {
    position: relative;
    flex: 1;
    min-width: 80px
}

.tmp-selector-hora button {
    width: 100%;
    padding: .5rem;
    font-size: 1rem;
    border: 1px solid gray;
    border-radius: 4px;
    background: var(--app-bg);
    color: var(--app-fg);
    text-align: left;
    cursor: pointer
}

.tmp-selector-hora button:focus-visible {
    outline: 2px solid var(--app-accent)
}

.tmp-selector-hora .list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow: auto;
    background: var(--app-bg);
    border: 1px solid var(--app-accent);
    border-radius: var(--app-radius);
    margin-top: .25rem;
    list-style: none;
    padding: 0;
    z-index: 10
}

.tmp-selector-hora .list li {
    padding: .5rem;
    cursor: pointer
}

.tmp-selector-hora .list li:hover,
.tmp-selector-hora .list li:focus {
    background: var(--app-accent);
    color: var(--app-bg)
}

.tmp-selector-hora .result {
    text-align: center;
    min-height: 1.5em;
    font-weight: 500;
    margin-top: .5rem
}

/* ****************************************************************VISUALIZACION DE RESULTADOS GOOGLE */
.tmp-preview-google {
    /* Tokens */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;

    --color-link: #1a0dab;
    --color-url: #70757a;
    --color-site: #202124;
    --color-text: #4d5156;
    --color-bg: #fff;

    --icon-size: 26px;
    --icon-radius: 4px;

    font-family: Arial, sans-serif;
    font-size: var(--font-size-md);
    line-height: 1.6;
    background-color: var(--color-bg);
    padding: var(--spacing-md);
    max-width: 700px;
    margin: 0 auto;
}

.tmp-preview-google .result-item {
    margin-bottom: var(--spacing-lg);
}

.tmp-preview-google .result-header {
    margin-bottom: var(--spacing-sm);
}

.tmp-preview-google .result-link {
    text-decoration: none;
    display: block;
}

.tmp-preview-google .result-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.tmp-preview-google .result-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: var(--icon-radius);
    flex-shrink: 0;
}

.tmp-preview-google .result-link-url {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.tmp-preview-google .result-link-url span:first-child {
    font-size: var(--font-size-sm);
    color: var(--color-site);
    font-weight: 600;
}

.tmp-preview-google .result-url {
    font-size: var(--font-size-xs);
    color: var(--color-url);
}

.tmp-preview-google .result-title {
    font-size: var(--font-size-lg);
    color: var(--color-link);
    text-decoration: none;
    margin: 0;
}

.tmp-preview-google .result-title:hover,
.tmp-preview-google .result-title:focus {
    text-decoration: underline;
}

.tmp-preview-google .result-snippet {
    font-size: var(--font-size-md);
    color: var(--color-text);
}

.tmp-preview-google .result-description {
    margin: 0;
}

/* ****************************************************************ADMINISTRADOR DE GESTOR DE IMAGENES */
.tmp-file-img-manager .img-wrapper {
    position: relative;
    display: flex;
    max-width: 100%;
    max-height: 30rem;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background: #f9f9f9;
    transition: box-shadow 0.3s ease;

    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
    align-items: center;
    justify-content: center;

}

.tmp-file-img-manager .img-wrapper:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tmp-file-img-manager .img-display {
    display: block;
    width: auto;
    height: 100%;
    max-height: 25rem;
    object-fit: contain;
    border: none;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tmp-file-img-manager .img-display[src]:not([src=""]) {
    opacity: 1;
    transform: scale(1);
}

.tmp-file-img-manager .btn-clear {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 1.75em;
    height: 1.75em;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.tmp-file-img-manager .btn-clear:hover,
.tmp-file-img-manager .btn-clear:focus-visible {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.1);
    outline: none;
}

.tmp-file-img-manager .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 0.75em 1.5em;
    border-radius: 4px;
    font-size: 0.9em;
    color: #333;
    font-weight: 500;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    opacity: 0;
    animation: fade-in-scale 0.3s ease forwards;
}

.tmp-file-img-manager .loading:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fade-in-scale {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ****************************************************************VISTA TEMPORAL DEL CERTIFICADO */
/* Certificado (encapsulado) */
.tmp-pdf-certificate {
    /* tokens locales */
    --fs-base: clamp(13px, 1.5vw, 15px);
    --fs-h1: clamp(18px, 2.4vw, 22px);
    --lh: 1.35;
    --c-fg: #000;
    --c-title: #e53935;
    /* rojo título */
    --c-accent: #2a7ae2;
    /* azul énfasis */
    --c-muted: #f5f7fb;
    --c-border: #ddd;
    --gap: 12px;

    color: var(--c-fg);
    line-height: var(--lh);
    font-size: var(--fs-base);
    display: flex;
    flex-direction: column;
    contain: layout;
    padding: 1rem;
    min-width: 70rem;
}

.tmp-pdf-certificate [data-id="h"] {
    text-align: left;
    margin-bottom: 21px;
}

.tmp-pdf-certificate [data-id="h"] h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    color: var(--c-title);
    margin: 0 0 10px 0;
    letter-spacing: .3px;
}

.tmp-pdf-certificate [data-id="h"] .auth {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-accent);
    margin-bottom: 2px;
}

.tmp-pdf-certificate [data-id="h"] .rd {
    font-size: 14px;
}

/* Descripción */
.tmp-pdf-certificate [data-id="d"] {
    margin-bottom: 10px;
    padding: 0;
    font-size: 14px;
}

/* Servicios */
.tmp-pdf-certificate [data-id="s"] {
    margin-bottom: 10px;
}

.tmp-pdf-certificate [data-id="s"] table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.tmp-pdf-certificate [data-id="s"] td {
    padding: 4px;
    vertical-align: top;
}

.tmp-pdf-certificate .box-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tmp-pdf-certificate .box-row .box {
    width: 16px;
    height: 16px;
    border: 1px solid gray;
    text-align: center;
    line-height: 14px;
    font-size: 12px;
    user-select: none;
}

.tmp-pdf-certificate .box-row.mark .box {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}

/* Datos del cliente */
.tmp-pdf-certificate [data-id="c"] {
    margin-bottom: 10px;
}

.tmp-pdf-certificate [data-id="c"]>div {
    width: 100%;
}

.tmp-pdf-certificate [data-id="c"]>div>table {
    width: 100%;
    border-collapse: collapse;
    text-transform: uppercase;
    background: #fff;
}

.tmp-pdf-certificate [data-id="c"] td {
    border: 1px solid var(--c-border);
    padding: 4px;
    vertical-align: top;
}

/* Firmas */
.tmp-pdf-certificate [data-id="g"] {
    margin-bottom: 10px;
    text-align: center;
}

.tmp-pdf-certificate [data-id="g"] table {
    width: 100%;
    table-layout: fixed;
}

.tmp-pdf-certificate [data-id="g"] td {
    vertical-align: bottom;
    padding: 4px;
}

.tmp-pdf-certificate [data-id="g"] hr {
    width: 80%;
    margin: 0.25rem auto 0;
}

.tmp-pdf-certificate [data-id="g"] strong {
    display: inline-block;
    margin-top: 4px;
}

/* Footer */
.tmp-pdf-certificate [data-id="f"] {
    position: relative;
    margin-top: 20px;
    padding: 10px;
    font-size: 13px;
    background: transparent;
}

.tmp-pdf-certificate [data-id="f"] table {
    width: 100%;
    border-collapse: collapse;
}

.tmp-pdf-certificate [data-id="f"] td:first-child {
    width: 20%;
    vertical-align: top;
}

.tmp-pdf-certificate [data-id="f"] figure {
    display: block;
    margin: 0;
}

.tmp-pdf-certificate [data-id="f"] figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

.tmp-pdf-certificate [data-id="f"] td:last-child {
    width: 80%;
    vertical-align: top;
    text-align: right;
}

/* Accesibilidad */
.tmp-pdf-certificate a {
    color: inherit;
    text-underline-offset: 2px;
}

.tmp-pdf-certificate a:focus-visible,
.tmp-pdf-certificate button:focus-visible,
.tmp-pdf-certificate .box:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Impresión básica */
@media print {
    .tmp-pdf-certificate {
        width: 100%;
        padding: 0;
    }

    .tmp-pdf-certificate [data-id="f"] {
        page-break-inside: avoid;
    }
}

/* ****************************************************************ADMINISTRADOR DE PDF ARRAY */
.tmp-pdf-view-canvas-manager {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    border: solid rgb(230, 230, 230) 2px;
    border-radius: .5rem;
}

/* Toolbar */
.tmp-pdf-view-canvas-manager .pdfviewer-toolbar {
    display: flex;
    align-items: center;
    background: var(--c20);
    color: var(--c34);
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-direction: row;
    gap: 1rem;
    height: 4rem;
    padding: 0 1rem;
}

.tmp-pdf-view-canvas-manager .pdfviewer-toolbar button,
.tmp-pdf-view-canvas-manager .pdfviewer-toolbar input {
    /* margin-right: 8px; */
    min-width: 2.5rem;
    border: none;
    color: gray;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-size: 0.9rem;
}

.tmp-pdf-view-canvas-manager .pdfviewer-toolbar input {
    width: 60px;
    text-align: center;
    background: white;
    height: 2.5rem;
    color: var(--c1);
}

.tmp-pdf-view-canvas-manager .pdfviewer-toolbar button {
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tmp-pdf-view-canvas-manager .pdfviewer-toolbar button u {
    width: 1.5rem;
    height: 1.5rem;
}

.tmp-pdf-view-canvas-manager .pdfviewer-toolbar button u>div {
    background: gray;
}

.tmp-pdf-view-canvas-manager .pdfviewer-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--c21);
    display: flex;
}

.tmp-pdf-view-canvas-manager .pdfviewer-toolbar button:hover {
    background: var(--c6);
    color: white;
}

.tmp-pdf-view-canvas-manager .pdfviewer-toolbar button:hover u>div {
    background: white;
}

.tmp-pdf-view-canvas-manager .pdfviewer-toolbar span {
    color: var(--c1);
}

.tmp-pdf-view-canvas-manager .pdfviewer-canvas-container {
    flex: 1;
    overflow: auto;
    background-color: var(--c21);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    position: relative;
}

.tmp-pdf-view-canvas-manager [data-action="pdfCanvas"] {
    display: block;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: none;
    height: auto;
}

/* Sidebar Overlay */
.tmp-pdf-view-canvas-manager .pdfviewer-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    transition: opacity 0.3s ease;
}

.tmp-pdf-view-canvas-manager .pdfviewer-sidebar-overlay.visible {
    display: flex;
    opacity: 1;
}

/* Sidebar (Menú de navegación) */
.tmp-pdf-view-canvas-manager .pdfviewer-sidebar {
    max-width: 30rem;
    width: 95%;
    max-height: 95%;
    min-height: 20rem;
    border-radius: .5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
    transform: translateX(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    background: white;
}

.tmp-pdf-view-canvas-manager .pdfviewer-sidebar-overlay.visible .pdfviewer-sidebar {
    transform: translateX(0);
    opacity: 1;
}

/* Botón cerrar del menú */
.tmp-pdf-view-canvas-manager .pdfviewer-sidebar .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--c10);
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tmp-pdf-view-canvas-manager .pdfviewer-sidebar .close-btn:hover {
    background: var(--c9);
    transform: scale(1.05);
}

/* Botones adicionales del menú */
.tmp-pdf-view-canvas-manager .pdfviewer-sidebar .menu-btn {
    display: none;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border: none;
    background: linear-gradient(135deg, var(--ca1), var(--ca2));
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tmp-pdf-view-canvas-manager .pdfviewer-sidebar .menu-btn:hover {
    background: linear-gradient(135deg, var(--ca3), var(--ca4));
    transform: translateY(-2px);
}

/* Input de búsqueda en el menú */
.tmp-pdf-view-canvas-manager .pdfviewer-sidebar input {
    display: none;
    width: 100%;
    padding: 10px;
    margin-bottom: 16px;
    border: 1px solid var(--c31);
    border-radius: 4px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.tmp-pdf-view-canvas-manager .pdfviewer-sidebar input:focus {
    border-color: var(--c6);
}

/* Lista de páginas */
.tmp-pdf-view-canvas-manager .pageList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tmp-pdf-view-canvas-manager .pageList li {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 12px;
    background-color: var(--c34);
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.9rem;
}

.tmp-pdf-view-canvas-manager .pageList li:hover {
    background-color: var(--c29);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.tmp-pdf-view-canvas-manager .pageList li.active {
    background-color: var(--c31);
    border-color: var(--c6);
}

/* Estilos para las miniaturas dentro de cada item de la lista */
.tmp-pdf-view-canvas-manager .pageList li .thumbnail {
    width: 50px;
    height: auto;
    margin-right: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mensajes y control de errores */
.tmp-pdf-view-canvas-manager .pdfviewer-messages {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 204, 0.95);
    color: var(--c33);
    padding: 10px 20px;
    border: 1px solid var(--ca3);
    border-radius: 4px;
    font-size: 0.9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 3000;
    max-width: 80%;
    text-align: center;
    display: none;
}

.tmp-pdf-view-canvas-manager .pdfviewer-messages.error {
    background-color: rgba(255, 204, 204, 0.95);
    border-color: var(--ca6);
}

.tmp-pdf-view-canvas-manager .pdfviewer-messages.visible {
    display: block;
}

/* Efecto fade-in */
.tmp-pdf-view-canvas-manager .fade-in {
    opacity: 0;
}

.tmp-pdf-view-canvas-manager .fade-in.active {
    opacity: 1;
}

/* Loader */
.tmp-pdf-view-canvas-manager .pdfviewer-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
}

.tmp-pdf-view-canvas-manager .pdfviewer-loader .spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid var(--c2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: tmp_pdf_view_canvas_manager_spin 1s linear infinite;
}

/* Estilos para los items de la lista */
.tmp-pdf-view-canvas-manager .pageList li {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease,
        box-shadow 0.3s ease;
    font-size: 0.95rem;
}

.tmp-pdf-view-canvas-manager .pageList li.active {
    background-color: #e0f7fa;
    border-color: #00796b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.tmp-pdf-view-canvas-manager .pageList li:hover {
    background-color: #f0f0f0;
    transform: scale(1.02);
}

/* Estilos para la miniatura dentro de cada ítem */
.tmp-pdf-view-canvas-manager .pageList li img.thumbnail {
    width: 50px;
    height: auto;
    margin-right: 10px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@keyframes tmp_pdf_view_canvas_manager_spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .tmp-pdf-view-canvas-manager .pdfviewer-sidebar {
        width: 80%;
    }

    .tmp-pdf-view-canvas-manager .pdfviewer-toolbar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ****************************************************************ESTILO DEL MENU */
/* Estilos para tmp-menu-manager */
.tmp-menu-manager {
    display: grid;
    width: 100%;
    grid-template-columns: 65% 30%;
    gap: 5%;
}

/* Estilos para la sección del menú */
.tmp-menu-manager .menu-container {
    flex: 1;
    overflow-y: auto;
}

/* Título del menú */
.tmp-menu-manager .menu-container h2 {
    margin-bottom: 1rem;
    color: #4a90e2;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

/* Listas del menú y submenús */
.tmp-menu-manager .menu-list,
.tmp-menu-manager .submenu-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Elemento del menú */
.tmp-menu-manager .menu-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s, box-shadow 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tmp-menu-manager .menu-item:hover {
    background-color: #f0f4f8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Información del menú */
.tmp-menu-manager .menu-item .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Icono del menú */
.tmp-menu-manager .menu-item .icon i {
    color: #4a90e2;
}

/* Contenedor del título */
.tmp-menu-manager .menu-item .title-container {
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

/* Identificador del menú */
.tmp-menu-manager .menu-item .identify {
    font-weight: bold;
    margin-right: 1rem;
    color: #555;
    width: 60px;
    text-align: right;
}

/* Información del título */
.tmp-menu-manager .menu-item .title-info {
    flex: 1;
}

/* Título del menú */
.tmp-menu-manager .menu-item .title-info .title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Enlace del menú */
.tmp-menu-manager .menu-item .title-info a {
    color: #4a90e2;
    text-decoration: none;
}

.tmp-menu-manager .menu-item .title-info a:hover {
    text-decoration: underline;
}

/* Acciones del menú */
.tmp-menu-manager .menu-item .item-content {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.tmp-menu-manager .menu-item .item-content .item-link {
    color: var(--c5);
    font-family: "f1";
}

.tmp-menu-manager .menu-item .item-content .item-title {
    font-family: "f2";
    color: black;
}

.tmp-menu-manager .menu-item .item-content .item-identify {
    color: white;
    background: var(--c15);
    font-family: "f2";
    min-width: 2rem;
    min-height: 1rem;
    padding: 4px 0.5rem;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 4px;
}

.tmp-menu-manager .menu-item .item-content i {
    font-size: 1.5rem;
}

.tmp-menu-manager .menu-item .item-content .item-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.tmp-menu-manager .menu-item .actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.tmp-menu-manager .menu-item .actions button {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    transition: color 0.3s;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: gainsboro;
    color: gray;
}

.tmp-menu-manager .menu-item .actions button:hover {
    color: white;
    background: var(--c5);
    border: solid 1px var(--c5);
}

.tmp-menu-manager .menu-item .actions button i {
    font-size: 1rem;
}

.tmp-menu-manager .menu-item .actions .placeholder {
    width: 1.1rem;
}

/* Detalles del menú */
.tmp-menu-manager .menu-item .details {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: #666;
}

.tmp-menu-manager .menu-item .details span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tmp-menu-manager .menu-item .details span strong {
    color: #333;
}

/* Submenús */
.tmp-menu-manager .submenu-list {
    padding-left: 1.5rem;
    border-left: 2px solid #e0e0e0;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    max-height: 100rem;
    display: flex;
}

.tmp-menu-manager .submenu-list.hidden {
    max-height: 0;
    transition: max-height 0.3s ease-out;
    display: none;
}

.tmp-menu-manager .toggle-submenu.expanded i {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

/* Submenús dentro de submenús */
.form-container {
    width: 100%;
}

.tmp-menu-manager .form-container h2 {
    margin-bottom: 1rem;
    color: #4a90e2;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

.tmp-menu-manager .form-container form {
    display: flex;
    flex-direction: column;
}

.tmp-menu-manager .form-container form label {
    font-weight: 500;
    color: #555;
}

.tmp-menu-manager .form-container form input,
.tmp-menu-manager .form-container form select {
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s;
    height: 2.5rem;
    padding-left: 1rem;
}

.tmp-menu-manager .form-container form input:focus,
.tmp-menu-manager .form-container form select:focus {
    border-color: #4a90e2;
    outline: none;
}

/* Botones del formulario */
.tmp-menu-manager .form-container form .button-group {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
}

.tmp-menu-manager .form-container form button {
    padding: 0.6rem 1rem;
    background-color: #4a90e2;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tmp-menu-manager .form-container form button:hover {
    background-color: #357ab8;
}

.tmp-menu-manager .form-container form #cancelBtn {
    background-color: #e0e0e0;
    color: #333333;
}

.tmp-menu-manager .form-container form #cancelBtn:hover {
    background-color: #cfcfcf;
}

/* Scrollbar personalizada para menu-container */
.tmp-menu-manager .menu-container::-webkit-scrollbar {
    width: 8px;
}

.tmp-menu-manager .menu-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.tmp-menu-manager .menu-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.tmp-menu-manager .menu-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Responsividad */
@media (max-width: 768px) {
    .tmp-menu-manager {
        flex-direction: column;
    }

    .tmp-menu-manager .menu-container,
    .tmp-menu-manager .form-container {
        max-width: 100%;
    }
}

/* ****************************************************************BOTON */
.tmp-btn-service {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: .5rem;
    background-color: var(--c2);
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.2);
    height: 3rem;
    transition: transform 0.3s ease, background-color 0.3s ease,
        box-shadow 0.3s ease;
    will-change: transform, background-color, box-shadow;
}

/* Animaciones en before y after */
.tmp-btn-service::after,
.tmp-btn-service::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 0;
    transition: transform 0.5s ease;
}

.tmp-btn-service::before {
    transform: scaleX(0);
    transform-origin: left;
}

.tmp-btn-service::after {
    transform: scaleY(0);
    transform-origin: top;
}

/* Efecto hover con before y after */
.tmp-btn-service:hover::before {
    transform: scaleX(1);
}

.tmp-btn-service:hover::after {
    transform: scaleY(1);
}

/* Estilo del contenido */
.tmp-btn-service .icon,
.tmp-btn-service span {
    position: relative;
    z-index: 1;
}

.tmp-btn-service span {
    margin-right: 0.5em;
    transition: color 0.3s ease;
    text-wrap: nowrap;
    font-size: 0.8rem;
    font-family: "f1";
    letter-spacing: 1px;
}

/* Icono */
.tmp-btn-service .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: white;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.tmp-btn-service .icon u {
    transition: transform 0.3s ease;
}

.tmp-btn-service .icon u>div {
    background: var(--c1);
}

.tmp-btn-service u {
    /* background: var(--c3); */
    transition: transform 0.3s ease;
}

.tmp-btn-service:hover u>div {
    background: white;
}

/* Efectos hover */
.tmp-btn-service:hover {
    background-color: var(--c3);
    transform: translateY(-3px);
    /* Efecto de levantamiento */
    box-shadow: 0 6px 15px var(--button-shadow);
    /* Sombra al elevarse */
}

.tmp-btn-service:hover span {
    color: white;
    font-family: "f2";
}

.tmp-btn-service:hover .icon {
    background-color: var(--c5);
    transform: translateX(5px) rotate(45deg);
    /* Movimiento y rotación */
}

.tmp-btn-service:hover u {
    transform: rotate(180deg);
    /* Giro completo del ícono */
}

/* Efectos en clic */
.tmp-btn-service:active {
    transform: scale(0.95);
    /* Escalado en clic */
    box-shadow: 0 2px 5px var(--button-shadow);
    /* Reducción de la sombra */
}

/* Efectos al enfocarse */
.tmp-btn-service:focus {
    outline: none;
}

.tmp-btn-service:focus-visible {
    outline: 3px solid var(--c5);
    /* Enfocar con borde visible */
    outline-offset: 4px;
}

/* Efecto de "ripple" al hacer clic */
.tmp-btn-service::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease;
}

.tmp-btn-service:active::before {
    transform: translate(-50%, -50%) scale(1);
}

.tmp-btn-service.error {
    background-color: var(--c9);
}

.tmp-btn-service.error:hover {
    background-color: red;
}

.tmp-btn-service.error .icon i {
    color: var(--c9);
}

.tmp-btn-service.error:hover .icon {
    background: rgb(82, 0, 0);
}

.tmp-btn-service.error:hover .icon i {
    color: white;
}

/* ***********************************************************************TEMPLATE BOTON */
.tmp-btn-personalized {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--c5);
    color: white;
    padding: 0 1.5rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-speed) ease-in-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    min-width: 2.5rem;
    width: auto;
    font-size: 0.8rem;
    font-family: "f1";
    min-height: 2.5rem;
    display: flex;
    flex-direction: row;
}

.tmp-btn-personalized .btn-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tmp-btn-personalized .text {
    font-size: 0.8rem;
    text-wrap: nowrap;
}

.tmp-btn-personalized .icon i {
    font-size: 1rem;
    transition: transform var(--icon-transition-speed),
        opacity var(--icon-transition-speed);
}

/* Hover avanzado para animaciones */
.tmp-btn-personalized:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    background-color: var(--c7);
}

.tmp-btn-personalized:hover .text {
    font-family: "f2";
}

.tmp-btn-personalized:hover .icon i {
    transform: rotate(360deg);
    opacity: 0.9;
}

/* Efecto ripple en click */
.tmp-btn-personalized::after {
    content: "";
    position: absolute;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.1);
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 1s ease;
}

.tmp-btn-personalized:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Estado de Carga (loading) */
.tmp-btn-personalized.loading .btn-content {
    visibility: hidden;
}

.tmp-btn-personalized.loading .loading-spinner {
    display: block;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-left-color: var(--c19);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.tmp-btn-personalized u>div {
    background: white;
}

.tmp-btn-personalized.btn {
    width: 2.5rem;
    height: 2.5rem;
    min-width: auto;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.tmp-btn-personalized.btn .btn-content {
    width: auto;
}

/* Diferentes estilos según el tipo de botón */

/* Botón Primario */
.primary-btn {
    background-color: var(--c18);
    color: var(--c19);
}

.primary-btn:hover {
    background-color: var(--c22);
}

/* Botón Secundario */
.secondary-btn {
    background-color: var(--c16);
    color: var(--c19);
}

.secondary-btn:hover {
    background-color: var(--c17);
}

/* Botón de Confirmación */
.confirm-btn {
    color: var(--c19);
}

.confirm-btn:hover {
    background-color: var(--c27);
}

/* Botón de Cancelación */
.cancel-btn {
    background-color: var(--c20);
    color: var(--c19);
}

.cancel-btn:hover {
    background-color: var(--c21);
}

/* ***********************************************************************DASHBOARD */
.tmp-hidden {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.tmp-hidden.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    animation: tmp_hidden ease 1s;
}

@keyframes tmp_hidden {
    0% {
        transform: scale(0.8);
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }
}



/* ***********************************************************************INPUT DE FECHA */
.tmp-form-txt-date {
    border-radius: 4px;
    width: 100%;
    text-align: center;
    min-height: 2rem;
}

.tmp-form-txt-date .label {
    font-size: 1.2em;
    margin-bottom: 15px;
    display: block;
    color: #333;
}

.tmp-form-txt-date .date-input {
    display: grid;
    grid-template-columns: auto 0.5rem auto 0.5rem auto;
    gap: 0.5rem;
}

.tmp-form-txt-date .date-input input {
    width: 100%;
    padding: 4px;
    border: 1px solid gainsboro;
    text-align: center;
    font-size: 0.8rem;
    font-family: "f2";
    transition: border-color 0.3s ease;
    color: black;
}

.tmp-form-txt-date .date-input input::placeholder {
    color: gray;
    font-family: "f1";
}

.tmp-form-txt-date .date-input input:focus {
    border-color: black;
    outline: none;
    border: solid 2px black;
}

.tmp-form-txt-date .date-input input[disabled] {
    background-color: #f6f6f6;
    cursor: not-allowed;
}

.tmp-form-txt-date .date-input span {
    line-height: 40px;
    color: #888;
}

/* ***********************************************************************SUBIR ARCHIVOS */
.tmp-file-upload-container {
    display: flex;
    flex-direction: column;
    /* grid-template-rows: auto 2rem; */
    padding: 1rem;
    border-radius: 4px;
    width: 100%;
    height: 20rem;
    background-color: #ffffff;
    position: relative;
    transition: border-color 0.3s ease;
    gap: 1rem;
    background: rgb(250, 250, 250);
    transition: all 0.5s;
    position: relative;
}

.tmp-file-upload-container:hover {
    background: rgb(240, 240, 240);
}

.tmp-file-upload-container figure {
    border: 2px dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
    background: none;
    z-index: 0;
    cursor: pointer;
}

.tmp-file-upload-container figure u {
    width: 5rem;
    height: 5rem;
    z-index: 10;
}

.tmp-file-upload-container figure u>div {
    background: var(--c1);
}

.tmp-file-upload-container:hover figure {
    border: 2px dashed gray;
}

.tmp-file-upload-container.dragover {
    border-color: #007bff;
    background-color: #e9f1ff;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 123, 255, 0.7);
    }

    100% {
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    }
}

.tmp-file-upload-container .file-upload-name {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-family: "f2";
    background: white;
    border-radius: 4px;
    padding: 0.5rem;
}

.tmp-file-upload-container .file-upload-preview {
    max-width: 100%;
    max-height: 200px;
    display: none;
    object-fit: cover;
    animation: fadeIn 0.5s ease;
}

.tmp-file-upload-container .file-upload-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.tmp-file-upload-container .file-upload-buttons .option {
    cursor: pointer;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tmp-file-upload-container .file-upload-buttons .option span {
    font-size: 0.8rem;
    font-family: "f2";
}

.tmp-file-upload-container .file-upload-buttons .option:hover {
    background-color: #0056b3;
}

.tmp-file-upload-container .file-upload-buttons .btn-remove {
    background-color: #dc3545;
}

.tmp-file-upload-container .file-upload-buttons .btn-remove:hover {
    background-color: #c82333;
}

.tmp-file-upload-container .file-upload-input {
    display: none;
}

.tmp-file-upload-container .file-upload-message {
    font-size: 0.8rem;
    color: gray;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 0.5rem;
    width: 80%;
    z-index: 10;
}

.tmp-file-upload-container .file-upload-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.tmp-file-upload-container.dragover .file-upload-message {
    color: #007bff;
}

/* ***********************************************************************FORMATO FORM QUOTE */
.tmp-form-quote label {
    font-size: 0.8rem;
    font-family: "f2";
    color: rgb(50, 50, 50);
    margin-bottom: 4px;
}

.tmp-form-quote input[type="text"] {
    width: 100%;
    height: 2rem;
    padding-left: 1rem;
    border: none;
    border-radius: 4px;
    background: rgb(235, 235, 235);
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: 0.8rem;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.tmp-form-quote input[type="text"]:focus {
    outline: none;
    border-bottom: solid 3px var(--c4);
}

.tmp-form-quote input[type="text"]::placeholder {
    border: none;
    color: rgb(100, 100, 100);
    font-style: italic;
    font-family: "f1";
}

.tmp-form-quote textarea {
    width: 100%;
    height: 6rem;
    padding: 1rem;
    border: none;
    border-radius: 4px;
    background: rgb(235, 235, 235);
    box-sizing: border-box;
    border: 1px solid #ccc;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    letter-spacing: 0;
    font-size: 0.8rem;
}

.tmp-form-quote textarea:focus {
    outline: none;
    border-bottom: solid 3px var(--c4);
}

.tmp-form-quote textarea::placeholder {
    border: none;
    color: rgb(100, 100, 100);
    font-style: italic;
    font-family: "f1";
    letter-spacing: 0;
}

/* ****************************************************************IMAGEN */
.img-bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: var(--c1);
    /* background-image: url("../../icon/default/m-bg-000.svg"); */
    /* background-attachment: fixed; */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
}

.img-bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* opacity: .7; */
}

.img-bg>.shadow {
    background: linear-gradient(rgba(0, 0, 0, 7) 0%, rgba(0, 0, 0, 0) 70%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    display: flex;
    opacity: 0.9;
    transition: all 0.5s;
}

/* ***********************************************************************TEMPLATE BUTTON */

.tmp-btn {
    display: grid;
    grid-template-columns: auto 3rem;
    gap: 1rem;
    border-radius: 4px;
    border: solid 1px var(--c3);
    min-width: 12rem;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    position: relative;
    z-index: 0;
    overflow: hidden;
    justify-content: space-between;
    background: white;
    box-shadow: 6px 6px 1px rgba(128, 128, 128, 0.3);
}

.tmp-btn>div {
    padding: 0 1rem;
}

.tmp-btn b {
    font-family: "f2";
    font-size: 1rem;
    color: var(--c3);
}

.tmp-btn:hover>figure u>div {
    background: var(--c3);
}

.tmp-btn:hover>figure u .cls-1 {
    fill: var(--c3) !important;
}

.tmp-btn:hover>figure {
    background: white;
    animation: tmp_btn_1 ease 0.5s;
}

@keyframes tmp_btn_1 {
    0% {
        left: 0;
        background: var(--c3);
    }

    50% {
        left: 100%;
        background: var(--c3);
    }

    100% {
        left: 0;
        background: white;
    }
}

.tmp-btn:hover {
    background: var(--c3);
    transform: scale(1.1);
}

.tmp-btn:hover b {
    color: white;
}

.tmp-btn>figure>u {
    z-index: 30;
}

.tmp-btn>figure>u>div {
    background: white;
}

.tmp-btn>figure>u .cls-1 {
    fill: white !important;
}

.tmp-btn>figure {
    position: relative;
    height: 2.5rem;
    background: var(--c3);
    transition: all 0.5s;
}

.tmp-title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.5s;
}

.tmp-title div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tmp-title div>i {
    width: 8rem;
    height: 4px;
    left: -2rem;
    position: relative;
    background: var(--c3);
    display: flex;
}

.tmp-title div>b {
    font-size: 1rem;
    font-family: "f2";
    color: var(--c3);
}

.tmp-title div>h2 strong {
    color: var(--c2);
    font-size: 1.5rem;
    font-family: "f3";
}

.tmp-title div>h2 {
    font-family: "f3";
    font-size: 2rem;
    color: var(--c4);
}

.tmp-title span {
    font-family: "f1";
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tmp-title span b {
    font-family: "f2";
    color: var(--c1);
}

/* ***********************************************************TARJETAS */

.tmp-like-services .item {
    width: 100%;
    min-height: 30rem;
    border: solid 1px white;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: all 0.5s;
    display: grid;
    grid-template-rows: auto 4rem;
    background: var(--c4);
}

.tmp-like-services .item:hover {
    background: var(--c3);
    border: solid 1px var(--c2);
}

.tmp-like-services .item .icon {
    transition: all 0.5;
}

.tmp-like-services .item:hover .icon {
    transform: scale(1.2);
}

.tmp-like-services .item:hover .img {
    opacity: 0.8;
}

.tmp-like-services .item>u {
    border-radius: 0.5rem;
    width: 3rem;
    height: 3rem;
    background: var(--c3);
    padding: 0.8rem;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.5s;
    z-index: 40;
    transition: all 0.5s;
}

.tmp-like-services .item:hover>u {
    transform: scale(1.2) translateX(-50%);
    background: var(--c1);
}

.tmp-like-services .item:hover>u>div {
    background: white;
}

.tmp-like-services .item>u>div {
    background: white;
}

.tmp-like-services .item span b {
    font-size: 1rem;
    font-family: "f2";
    color: white;
    text-align: center;
    /* letter-spacing: 1px; */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.tmp-like-services .item span {
    font-size: 0.8rem;
    font-family: "f1";
    color: white;
    padding: 0 1rem;
    display: grid;
    grid-template-rows: 5rem auto;
    gap: 1rem;
    text-align: center;
}

.tmp-like-services .item>div.img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0.6;
    transition: all 0.5s;
}

.tmp-like-services .item:hover>.img {
    transform: scale(1.8);
    opacity: 0.9;
}

.tmp-like-services .item>div.img>div:nth-child(2) {
    position: absolute;
    border-radius: 50%;
    height: 30rem;
    width: 30rem;
    background: white;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10rem;
    opacity: 0.6;
}

.tmp-like-services .item>div.img>div:nth-child(1) {
    position: absolute;
    border-radius: 50%;
    height: 30rem;
    width: 30rem;
    background: white;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7rem;
    opacity: 0.4;
}

.tmp-like-services .item figure>u {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: white;
    padding: 0.5rem;
}

.tmp-like-services .item figure>u>div {
    background: var(--c1);
}

.tmp-like-services .item figure>u .cls-1 {
    fill: white !important;
}

.tmp-like-services .item .data {
    z-index: 50;
    transition: all 0.5s;
    display: grid;
    grid-template-rows: 7rem auto;
    height: 100%;
    z-index: 20;
}

.tmp-like-services .item:hover .data span {
    color: white;
    font-family: "f2";
}

.tmp-like-services .item:hover .data span b {
    color: white;
    text-shadow: none;
}

.tmp-like-services .item:hover figure>u {
    background: var(--c1);
}

.tmp-like-services .item:hover figure>u>div {
    background: white;
}

.tmp-like-services .item:hover>div.img>div {
    opacity: 0.1;
}

/* **********************************************************CARAD CATEGORY */
/* ****************************************************************CARD  */
.tmp-card-services-category {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    grid-template-areas: "a b" "c c" "e e";
}

.tmp-card-services-category .item:nth-child(1) {
    grid-area: a;
}

.tmp-card-services-category .item:nth-child(2) {
    grid-area: b;
}

.tmp-card-services-category .item:nth-child(3) {
    grid-area: c;
}

.tmp-card-services-category .item:nth-child(4) {
    grid-area: d;
}

.tmp-card-services-category .item:nth-child(5) {
    grid-area: e;
}

.tmp-card-services-category .item b {
    text-align: center;
    font-size: 1rem;
    color: white;
    z-index: 10;
    position: relative;
}

.tmp-card-services-category .item {
    display: flex;
    flex-direction: column;
    min-height: 15rem;
    border-radius: 0.5rem;
    transition: all 0.5s;
    box-shadow: 10px 10px 2px rgba(128, 128, 128, 0.3);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, var(--c18) 100%);
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.tmp-card-services-category .item:hover {
    background: var(--c1);
    transform: scale(1.1);
    box-shadow: 8px 8px 0 rgba(128, 128, 128, 0.5);
}

.tmp-card-services-category .item:hover>div {
    opacity: 0.4;
    transform: scale(1.2);
}

.tmp-card-services-category .item>div {
    position: absolute;
    opacity: 0.2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: none;
    transition: all 0.5s;
}

.tmp-card-services-category .item span {
    z-index: 50;
    position: relative;
}

.tmp-card-services-category .item>figure {
    width: 8rem;
    height: 8rem;
    z-index: 50;
    position: relative;
}

.tmp-card-services-category .item>figure u {
    height: 5rem;
    width: 5rem;
    z-index: 30;
}

.tmp-card-services-category .item>figure u>div {
    background: white;
}

.tmp-card-services-category .item>figure u .cls-1 {
    fill: white !important;
}

.tmp-card-services-category .item .shadow {
    background: black;
    opacity: 0.2;
}

/* ****************************************************************BANNER */
.tmp-banner {
    width: 100%;
    height: 40rem;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.tmp-banner>figure {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.tmp-banner>figure.img-bg .shadow {
    background: black;
    opacity: 0.8;
}

.tmp-banner .container {
    position: relative;
    z-index: 20;
}

.tmp-banner .tmp-title {
    width: 7 0;
}

.tmp-banner .tmp-title b {
    color: var(--c4);
    font-size: 1rem;
}

.tmp-banner .tmp-title h1 {
    color: white;
    font-size: 2rem;
    font-family: "f3";
}

.tmp-banner .tmp-title span strong {
    font-size: 1rem;
    font-family: "f2";
    color: var(--c4);
}

.tmp-banner .tmp-title p {
    font-size: 1rem;
    font-family: "f1";
    color: white;
}

/**************************************************OPCIONES TMP FORM INPUT**/

.tmp-form-input {
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 10px;
    transition: border-color 0.4s ease, box-shadow 0.4s ease,
        transform 0.3s ease;
    background-color: none;
    padding: 0;
    margin: 0;
}

.tmp-form-input .fi-title {
    font-size: 0.8rem;
    margin-bottom: 10px;
    color: #444;
    text-align: left;
    font-weight: bold;
}

.tmp-form-input .fi-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border-radius: 5px;
    transition: border-color 0.3s ease, background-color 0.3s ease,
        box-shadow 0.3s ease;
    position: relative;
    width: 100%;
    padding: 0;
    z-index: 0;
}

.tmp-form-input .fi-info>div {
    width: 100%;
}

.tmp-form-input .fi-info:hover {
    box-shadow: none;
    border: none;
}

.tmp-form-input .fi-info .text input[type="text"],
.tmp-form-input .fi-info .text textarea {
    background: none;
    outline: none;
    width: 100%;
    color: black;
    transition: color 0.3s ease;
    padding-left: 1rem;
    font-size: 0.8rem;
    min-height: 2.5rem;
    background: white;
}

.tmp-form-input .fi-info .text textarea {
    min-height: 4rem;
    font-family: "f1";
    margin: 0;
}

.tmp-form-input .fi-info .icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5rem;
    align-items: center;
    justify-content: center;
}

.tmp-form-input.alert .fi-info .icon {
    display: flex;
}

.tmp-form-input.alert .fi-info .icon u {
    width: 1rem;
    height: 1rem;
}

.tmp-form-input.success .fi-info {
    border: 1px solid #2ecc71;
    background: rgba(134, 248, 73, 0.5);
}

.tmp-form-input.success .icn {
    background-color: var(--c4);
    transform: scale(1.2);
    animation: pulse-success 1.5s infinite;
}

/* Estados de error */
.tmp-form-input.error {
    border-color: #ae0011;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    transform: scale(1.02);
}

.tmp-form-input.error .fi-info {
    border-color: #ae0011;
    background-color: #f8e7e7;
}

.tmp-form-input.error .icn {
    background-color: #ae0011;
    transform: scale(1.2);
    animation: shake-error 0.4s ease-in-out both;
}

.tmp-form-input.error input {
    border: red solid 2px;
    background: rgba(255, 0, 0, 0.1);
    color: red;
}

.tmp-form-input.warning {
    border-color: #c69928;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    transform: scale(1.02);
}

.tmp-form-input.warning .fi-info {
    border-color: #c69928;
    background-color: #fff4e5;
}

.tmp-form-input.warning .icn {
    background-color: #c69928;
    transform: scale(1.2);
    animation: pulse-warning 1.5s infinite;
}

.tmp-form-input .fi-msg {
    font-size: 0.9em;
    color: #666;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
    padding: 0.5rem;
}

.tmp-form-input.error strong,
.tmp-form-input.success strong,
.tmp-form-input.warning strong {
    color: inherit;
}

.tmp-form-input.error i {
    color: #ae0011;
}

.tmp-form-input.warning i {
    color: #c69928;
}

.tmp-form-input.success i {
    color: var(--c4);
}

@keyframes pulse-success {
    0% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1.1);
    }
}

@keyframes shake-error {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-10px);
    }

    40%,
    80% {
        transform: translateX(10px);
    }
}

@keyframes pulse-warning {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

.tmp-form-input .fi-msg {
    display: none;
    opacity: 0;
}

.tmp-form-input.alert .fi-msg {
    display: flex;
    opacity: 1;
}

.tmp-form-input .fi-msg {
    flex-direction: column;
}

.tmp-form-input .fi-msg span {
    display: none;
    flex-direction: column;
    font-size: 0.8rem;
}

.tmp-form-input.error .fi-msg .error,
.tmp-form-input.info .fi-msg .info,
.tmp-form-input.success .fi-msg .success,
.tmp-form-input.warning .fi-msg .warning {
    opacity: 1;
    display: flex;
}

/* **********************************************************************FORM OPTIONS */

.tmp-form-selected-options {
    position: relative;
    width: 100%;
    user-select: none;
    transition: all 0.3s ease;
}

.tmp-form-selected-options .tfso-title {
    background-color: #ffffff;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    padding: 0 1rem;
    height: 2.5rem;
}

.tmp-form-selected-options .tfso-title span {
    color: gray;
    font-family: "f1";
    font-size: 0.8rem;
}

.tmp-form-selected-options .tfso-title.active {
    background: rgba(134, 248, 73, 0.5);
}

.tmp-form-selected-options .tfso-title.active span {
    font-family: "f3";
    color: black;
    font-size: 0.8rem;
}

.tmp-form-selected-options .tfso-title figure u {
    transition: all 0.5s;
}

.tmp-form-selected-options .tfso-title figure u>div {
    background: gray;
}

.tmp-form-selected-options:hover .tfso-title figure u {
    transform: rotate(90deg);
}

.tmp-form-selected-options .tfso-title.active figure u>div,
.tmp-form-selected-options:hover .tfso-title figure u>div {
    background: var(--c1);
}

.tmp-form-selected-options .tfso-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid var(--c0);
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    max-height: 12rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.tmp-form-selected-options .tfso-options.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tmp-form-selected-options .tfso-item {
    padding: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-family: "f1";
    background: var(--c0);
    color: black;
    width: 100%;
    height: 2rem;
}

.tmp-form-selected-options .tfso-item:hover {
    background: #dcdcdc;
    color: black;
    font-family: "f3";
}

.tmp-form-selected-options .tfso-item:hover::before {
    opacity: 1;
}

.tmp-form-selected-options .tfso-title:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.tmp-form-selected-options .tfso-options.visible {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.tmp-form-selected-options .tfso-options.visible .tfso-title::after {
    transform: rotate(180deg);
}

.tmp-form-selected-options .tfso-item.active {
    background: var(--c4);
    font-size: 0.8rem;
    font-family: "f3";
    color: white;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.tmp-form-selected-options.error .tfso-title {
    background: rgba(255, 0, 0, 0.2);
    border: solid red 1.5px;
}

.tmp-form-selected-options.error .tfso-title span {
    color: red;
    font-family: "f3";
    font-size: 1rem;
}

.tmp-form-selected-options.error .tfso-title u>div {
    background: red;
}

/* **********************************************************************CHATBOT */

.tmp-chatbot {
    width: 100%;
    max-width: 100%;
    background-color: gainsboro;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: fadeIn 0.5s ease-in-out;
    font-family: "f1";
    padding: 1rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tmp-chatbot .chatbot-header {
    text-align: center;
    font-size: 1rem;
    color: black;
    margin-bottom: 20px;
    font-weight: bold;
    letter-spacing: 0.5px;
    animation: slideDown 0.4s ease;
    font-family: "f3";
}

@keyframes slideDown {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.tmp-chatbot .chatbot-question {
    font-size: 0.8rem;
    margin-bottom: 15px;
    color: black;
    line-height: 1.5;
    font-family: "f3";
    text-align: center;
}

.tmp-chatbot .chatbot-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    animation: fadeInOptions 0.4s forwards;
    animation-delay: 0.2s;
}

@keyframes fadeInOptions {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tmp-chatbot .chatbot-option {
    padding: 0.5rem;
    background-color: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    color: #333;
    font-size: 0.8rem;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.tmp-chatbot .chatbot-option:hover {
    background-color: var(--c1);
    transform: translateY(-2px);
    color: white;
}

.tmp-chatbot .chatbot-footer {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

.tmp-chatbot button {
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s;
}

.tmp-chatbot button:hover {
    transform: translateY(-3px);
}

.tmp-chatbot button[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

.tmp-chatbot button.primary {
    background-color: #007bff;
    color: white;
}

.tmp-chatbot button.primary:hover {
    background-color: #0056b3;
}

.tmp-chatbot button.secondary {
    background-color: #f4f4f4;
    color: #444;
}

.tmp-chatbot button.secondary:hover {
    background-color: #e0e0e0;
}

.tmp-chatbot button.home {
    background: var(--c2);
}

.tmp-chatbot button.home u>div {
    background: white;
}

.tmp-chatbot .chatbot-summary {
    background-color: #f9f9f9;
    padding: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    animation: fadeInSummary 0.5s ease;
}

@keyframes fadeInSummary {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tmp-chatbot .chatbot-summary-item {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
    font-size: 0.8rem;
}

.tmp-chatbot .chatbot-summary-item:last-child {
    border-bottom: none;
}

.tmp-chatbot .chatbot-summary-item strong {
    color: black;
    font-weight: 600;
}

.tmp-chatbot .chatbot-summary-item .summary-value {
    display: flex;
    align-items: center;
    color: #333;
    padding-left: 1rem;
}

.tmp-chatbot .summary-value i {
    margin-right: 6px;
    color: #007bff;
    font-size: 0.8rem;
}

.tmp-chatbot button.primary {
    background-color: var(--c5);
    color: white;
}

.tmp-chatbot button.primary:hover {
    background-color: var(--c1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* *******************************************************************TMPLA ACORDEON */
.tmp-accordion {
    max-width: 600px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.tmp-accordion .acd-item {
    border-bottom: 1px solid #ccc;
    overflow: hidden;
}

.tmp-accordion .acd-item:last-child {
    border-bottom: none;
}

.tmp-accordion .acd-title {
    background-color: #f7f7f7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease;
    justify-content: space-between;
    padding: 0 0.5rem;
}

.tmp-accordion .acd-title span {
    font-weight: bold;
}

.tmp-accordion .acd-title:hover {
    background-color: #e2e2e2;
}

.tmp-accordion .info-description {
    max-height: 0;
    padding: 0 15px;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
}

.tmp-accordion .info-description span {
    display: block;
}

.tmp-accordion .acd-item.active .info-description {
    max-height: 100rem;
    padding: 15px;
}

.tmp-accordion .acd-item.active .info-title::after {
    transform: rotate(90deg);
}

.tmp-accordion .acd-item .decor {
    transition: all 0.5s;
}

.tmp-accordion .acd-item.active .decor {
    transform: rotate(90deg);
}

/**************************************************OPCIONES TMP FORM INPUT SEARCH**/
@import url("../methods/config.css");


/* CONTENEDOR GENERAL */
.tmp-form-input-options {
    position: relative;
    z-index: 0;
}

.tmp-form-input-options:hover {
    z-index: 10;
}


/* INPUT ENVOLTORIO */
.tmp-form-input-options .select-input {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    z-index: 0;
}

/* INPUT DE TEXTO */
.tmp-form-input-options .select-input input {
    width: 100%;
    height: 2.5rem;
    padding-left: 2.5rem;
    padding-right: 3rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

/* ICONO IZQUIERDO */
.tmp-form-input-options .select-input figure {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-form-input-options .select-input figure u {
    width: 1rem;
    height: 1rem;
}

.tmp-form-input-options .select-input figure u>div {
    background: var(--c19);
}

/* ESTADO DE ÉXITO / ERROR */
.tmp-form-input-options .select-input u.status {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
}

.tmp-form-input-options .select-input u.status .error {
    display: none;
    background: red;
    width: 100%;
    height: 100%;
}

/* ESTADO ACTIVO */
.tmp-form-input-options .select-input.active input {
    background: rgba(134, 248, 73, 0.5);
}

.tmp-form-input-options .select-input.active u.status .success {
    display: flex;
}

.tmp-form-input-options button.info {
    position: absolute;
    top: .5rem;
    right: .5rem;
    border-radius: 50%;
    background: var(--c1);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(.9);
}

.tmp-form-input-options button.info .tag {
    display: flex;
    position: absolute;
    bottom: 110%;
    right: 0;
    max-width: 15rem;
    width: max-content;
    padding: 4px;
    border-radius: 4px;
    background: var(--c1);
    color: white;
    opacity: 0;
    visibility: hidden;
    /* text-wrap: nowrap; */
    overflow: hidden;
    max-height: 3rem;
    z-index: 10;
}

.tmp-form-input-options button.info:hover .tag {
    opacity: 1;
    visibility: visible;
}

.tmp-form-input-options button.info u {
    padding: 4px;
}

.tmp-form-input-options button.info u>div {
    background: white;
}

.tmp-form-input-options button.clean {
    position: absolute;
    top: .5rem;
    right: 2rem;
    border-radius: 50%;
    background: var(--c19);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(.9);
}

.tmp-form-input-options button.clean:hover {
    background: var(--c9);
    transform: scale(1);
}

.tmp-form-input-options button.clean u {
    padding: 4px;
}

.tmp-form-input-options button.clean u>div {
    background: white;
}

/* ESTADO ERROR */
.tmp-form-input-options.error .select-input input {
    background: rgba(255, 0, 0, 0.1);
    border-color: red;
    color: red;
}

.tmp-form-input-options.error .select-input input::placeholder {
    color: red;
}

.tmp-form-input-options.error u.status .error {
    display: flex;
}

/* ESTADO DESHABILITADO */
.tmp-form-input-options.disabled .select-input input {
    background: #f5f5f5;
    cursor: not-allowed;
}

.tmp-form-input-options.disabled .select-items {
    pointer-events: none;
}

/* DROPDOWN DE OPCIONES */
.tmp-form-input-options .select-items {
    display: none;
    position: absolute;
    width: 100%;
    /* top: 100%; */
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow-y: auto;
    flex-direction: column;
}

.tmp-form-input-options .select-show {
    display: flex;
}

.tmp-form-input-options .select-items>div {
    padding: 4px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.tmp-form-input-options .select-items>div:hover {
    background-color: var(--c4, #4caf50);
    color: white;
}

.tmp-form-input-options .select-items>div:hover span {
    color: white;
}

.tmp-form-input-options .select-items>div:hover u>div {
    background: white;
}

/* OPCIONES SELECCIONADAS */
.tmp-form-input-options .select-items .same-as-selected {
    background-color: #e0e0e0;
    font-weight: bold;
}

.tmp-form-input-options .select-items .same-as-selected u {
    display: flex;
}

.tmp-form-input-options .select-items .info-description {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* OPCIÓN ACTIVA AL NAVEGAR CON TECLADO */
.tmp-form-input-options .select-items .highlight {
    background-color: var(--c4, #4caf50);
    color: white;
}

/* OCULTAR ICONOS INICIALES */
.tmp-form-input-options .select-items u {
    display: none;
    width: 1rem;
    height: 1rem;
}

.tmp-form-input-options .select-items u>div {
    width: 100%;
    height: 100%;
    background: var(--c4, #4caf50);
    border-radius: 2px;
}

.tmp-form-input-options .info .tmp-form-input-options .clean {
    visibility: hidden;
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.tmp-form-input-options .clean.visible {
    visibility: visible;
}

.tmp-form-input-options.active .select-input input {
    background: rgba(134, 248, 73, 0.5);
}

.tmp-form-input-options.active .select-input figure u>div {
    background: var(--c1);
}

.tmp-form-input-options.active .select-input figure u {
    width: 1.5rem;
    height: 1.5rem;
}

.tmp-form-input-options.active .info {
    display: flex;
    visibility: visible;

}

/* ***************************************************************COMBO BOX */

.tmp-form-checkbox-group {
    display: grid;
    grid-template-columns: auto;
    gap: 0.5rem;
}

.tmp-form-checkbox-group .cbx-item {
    display: grid;
    grid-template-columns: 1.5rem auto;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-items: center;
}

.tmp-form-checkbox-group .cbx-item:hover {
    background: gainsboro;
}

.tmp-form-checkbox-group .cbx-item:hover span {
    font-family: "f2";
}

.tmp-form-checkbox-group .cbx-item span {
    font-size: 0.7rem;
    font-family: "f1";
}

.tmp-form-checkbox-group .cbx-item.active {
    background-color: #c5ffae;
}

.tmp-form-checkbox-group figure {
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: solid gray 1px;
    border-radius: 0;
    background: var(--c0);
    transition: all 0.5s;
}

.tmp-form-checkbox-group .cbx-item.active span {
    font-family: "f2";
}

.tmp-form-checkbox-group .cbx-item.active figure {
    background: var(--c4);
}

.tmp-form-checkbox-group u>div {
    background-color: white;
}

.tmp-form-checkbox-group u {
    display: none;
    width: 0.8rem;
    height: 0.8rem;
}

.tmp-form-checkbox-group .active u {
    display: flex;
}

/**************************************************BTN RADIO TMP FORM**/
.tmp-form-btn-radio {
    gap: 1rem;
}

.tmp-form-btn-radio .rd-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
}

.tmp-form-btn-radio .rd-item .rd-item-info {
    display: grid;
    grid-template-columns: 2rem auto;
    min-height: 2rem;
    align-items: center;
    cursor: pointer;
}

.tmp-form-btn-radio .rd-item:hover span {
    font-family: "f3";
}

.tmp-form-btn-radio .rd-item span {
    font-size: 0.7rem;
    font-family: "f2";
}

.tmp-form-btn-radio .rd-item-img figure {
    width: 7rem;
    height: 7rem;
    overflow: hidden;
    border-radius: 50%;
    border: white solid 4px;
    box-shadow: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
    position: relative;
    background: var(--c20);
    transition: all 0.5s;
}

.tmp-form-btn-radio .rd-item:hover .rd-item-img figure {
    box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
}

.tmp-form-btn-radio .rd-item .rd-item-img figure img {
    left: 50%;
    bottom: -.5rem;
    transform: translateX(-50%) scale(0.8);
    transition: all 0.5s;
    position: absolute;
    width: auto;
    height: 100%;
}

@media only screen and (max-width: 768px) {
    .tmp-form-btn-radio .rd-item-img figure {
        width: 5rem;
        height: 5rem;
    }
}

.tmp-form-btn-radio .rd-item.active span {
    font-family: "f2";
    font-size: 0.8rem;
}

.tmp-form-btn-radio .rd-item .rd-item-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tmp-form-btn-radio .rd-item .rd-item-info span div {
    padding: 4px 0.5rem;
    border-radius: 4px;
}

.tmp-form-btn-radio .rd-item .rd-item-icon>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.2rem;
    height: 1.2rem;
    background: var(--c0);
    border-radius: 50%;
    border: solid 1px gray;
}

.tmp-form-btn-radio .rd-item .rd-item-icon u {
    display: none;
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tmp-form-btn-radio .rd-item .rd-item-icon u>div {
    background: var(--c1);
}

.tmp-form-btn-radio .rd-item.active .rd-item-img figure {
    box-shadow: rgba(100, 100, 100, 0.3) 5px 5px 7px;
    border: solid var(--c20) 4px;
    background: white;
}

.tmp-form-btn-radio .rd-item.active .rd-item-img figure img {
    transform: translateX(-50%) scale(1);
}

.tmp-form-btn-radio .rd-item.active .rd-item-icon>div {
    background: var(--c4);
}

.tmp-form-btn-radio .rd-item.active .rd-item-icon>div u {
    display: flex;
}

.tmp-form-btn-radio .rd-item.active .rd-item-info span>div {
    background: var(--c4);
    color: white;
}

/* ******************************************************************TMP FORM FILE */
.tmp-form-file #file-uploader-container {
    /* max-width: 600px; */
    margin: 0 auto;
    width: 100%;
}

.tmp-form-file {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tmp-form-file .select-file {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
    height: 18rem;
}

.tmp-form-file .select-file>button {
    width: 15rem;
    height: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "f2";
    letter-spacing: 1px;
}

.tmp-form-file .preview {
    border-radius: 4px;
    z-index: 10;
    background: var(--c0);
    position: relative;
    border: 1px solid rgb(175, 175, 175);
    height: 18rem;
}

.tmp-form-file .preview>figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: var(--c0);
}

.tmp-form-file .preview>figure u {
    width: 6rem;
    height: 6rem;
}

.tmp-form-file .preview>figure u>div {
    background: var(--c1);
}

.tmp-form-file .file-uploader {
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 1rem;
    transition: border-color 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    background: white;
    gap: 0.5rem;
}

.tmp-form-file .file-uploader:hover {
    border-color: #00bfff;
}

.tmp-form-file .file-uploader {
    width: 100%;
}

.tmp-form-file .file-uploader .select-file {
    width: 100%;
}

.tmp-form-file .file-uploader .select-file span {
    padding: 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--c1);
    font-size: 0.8rem;
    font-family: "f1";
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    width: 90%;
}

.tmp-form-file .file-uploader.active .select-file span {
    display: none;
}

.tmp-form-file .file-uploader.active {
    background: rgba(150, 255, 150, 0.3);
    border-color: rgb(0, 200, 0);
}

.tmp-form-file .description textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid rgb(175, 175, 175);
    border-radius: 4px;
    resize: none;
    height: 4rem;
    background: var(--c0);
}

.tmp-form-file .buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.tmp-form-file .buttons button {
    padding: 10px 20px;
    background-color: #00bfff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.tmp-form-file .buttons button:hover {
    background-color: #0077b6;
}

.tmp-form-file .file-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tmp-form-file .file-list li {
    display: grid;
    grid-template-columns: 12rem auto;
    padding: 1rem;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    animation: fadeIn 0.5s ease;
    gap: 0.5rem;
    position: relative;
}

.tmp-form-file .file-list li .file-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: gainsboro;
    border-radius: 4px;
    padding: 0.5rem;
}

.tmp-form-file .file-list li .file-preview img {
    width: 100%;
    height: auto;
}

.tmp-form-file .file-list li .file-preview figure.img-bg {
    background: none;
    align-items: center;
    justify-content: center;
    display: flex;
}

.tmp-form-file .file-list li .file-preview figure.center {
    width: 4rem;
    height: 4rem;
}

.tmp-form-file .file-list li .file-preview figure.center u {
    width: 100%;
    height: 100%;
}

.tmp-form-file .file-list li .file-preview figure.center u>div {
    background: var(--c1);
}

.tmp-form-file .file-data {
    flex-grow: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tmp-form-file .file-data .file-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tmp-form-file .file-data .file-info b {
    font-size: 1rem;
    font-family: "f3";
}

.tmp-form-file .file-data .file-info>span strong {
    font-family: "f3";
}

.tmp-form-file .file-data .file-info>span {
    width: 100%;
    min-height: 1.5rem;
    display: grid;
    grid-template-columns: 5rem auto;
    font-family: "f1";
    font-size: 0.8rem;
    align-items: center;
    border-bottom: solid gainsboro 1px;
}

.tmp-form-file .file-data .file-description {
    padding: 0.5rem;
    background: gainsboro;
    font-size: 0.8rem;
    font-family: "f1";
}

.tmp-form-file .file-actions {
    display: flex;
    gap: 0.5rem;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.tmp-form-file .file-actions button {
    background-color: gray;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 1.8rem;
    height: 1.8rem;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-form-file .file-actions button u {
    width: 1rem;
    height: 1rem;
}

.tmp-form-file .file-actions button u>div {
    background: white;
}

.tmp-form-file .file-actions button:hover {
    background-color: var(--c1);
}

.tmp-form-file .progress-bar {
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    display: none;
}

.tmp-form-file .file-actions button.top {
    background: var(--c2);
}

.tmp-form-file .file-actions button.bottom {
    background: var(--c2);
}

.tmp-form-file .file-actions button.remove {
    background: red;
}

.tmp-form-file .progress-bar .progress {
    height: 100%;
    width: 0;
    background-color: #00bfff;
    transition: width 3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.tmp-form-file .file-uploader .summary {
    display: none;
    grid-template-columns: 5rem auto;
    gap: 0;
    background: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.tmp-form-file .file-uploader .summary>div {
    display: flex;
    flex-direction: column;
}

.tmp-form-file .file-uploader .summary span {
    font-size: 0.8rem;
    font-family: "f1";
    color: black;
    border-radius: 4px;
    text-align: left;
    display: grid;
    grid-template-columns: 4rem auto;
    align-items: center;
}

.tmp-form-file .file-uploader .summary span str {
    font-family: "f3";
}

.tmp-form-file .file-uploader .summary span p {
    font-size: 0.8rem;
    font-family: "f1";
}

.tmp-form-file .file-uploader.active .summary {
    display: grid;
}

.tmp-form-file .file-uploader .summary figure u {
    width: 2.5rem;
    height: 2.5rem;
}

.tmp-form-file .file-uploader .summary figure u>div {
    background: var(--c1);
}

.tmp-form-file .total-summary {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1rem;
}

.tmp-form-file .total-summary>div {
    display: flex;
    flex-direction: row;
    background: var(--c0);
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 4px;
    font-family: "f2";
    font-size: 0.8rem;
}

.tmp-form-file .total-summary>div span {
    font-family: "f3";
}

/**************************************************OPCIONES TMP FORM**/
.tmp-form-select {
    height: 2.5rem;
    width: 100%;
    position: relative;
    z-index: 0;
    background: white;
    display: flex;
}

.tmp-form-select .custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: Arial, sans-serif;
}

.tmp-form-select .custom-select select {
    display: none;
    /* Esconder el select original */
}

.tmp-form-select .select-selected {
    background-color: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 5px 5px 1rem;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
}

.tmp-form-select .select-selected span {
    font-size: 0.8rem;
    font-family: "f2";
}

.tmp-form-select .select-selected u>div {
    background: var(--c1);
}

.tmp-form-select .select-selected[status="active"] {
    border: 1px solid #2ecc71;
    background: rgba(134, 248, 73, 0.5);
}

.tmp-form-select .select-selected[status="active"] span {
    font-family: "f3";
}

.tmp-form-select .select-items {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    z-index: 99;
    width: 100%;
    max-height: 15rem;
    overflow-y: auto;
    display: none;
    top: 100%;
    /* Inicialmente oculto */
}

.tmp-form-select .select-items>div {
    padding: 4px 8px;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1.5rem;
    gap: 0.5rem;
    align-items: center;
}

.tmp-form-select .select-items>div.icon {
    grid-template-columns: 1.5rem auto 1.5rem;
}

.tmp-form-select .select-items>div span {
    font-size: 0.8rem;
    font-family: "f1";
    color: gray;
}

.tmp-form-select .select-items>div:hover {
    background-color: #f1f1f1;
}

.tmp-form-select .same-as-selected {
    background-color: gainsboro;
}

.tmp-form-select .select-selected>u {
    width: 1rem;
    height: 1rem;
    display: flex;
}

.tmp-form-select .select-selected:focus,
.tmp-form-select .select-selected:hover {
    outline: none;
    border-color: #007bff;
}

.tmp-form-select .select-items>div>u {
    width: 1rem;
    height: 1rem;
    display: none;
}

.tmp-form-select .select-items .same-as-selected {
    background: gainsboro;
}

.tmp-form-select .select-items .same-as-selected span {
    color: black;
    font-size: 0.8rem;
    font-family: "f3";
}

.tmp-form-select .select-items .same-as-selected>u {
    display: flex;
}

.tmp-form-select .select-items .same-as-selected>u>div {
    background: var(--c4);
}

.tmp-form-select .same-as-selected u {
    display: flex;
}

.tmp-form-select .select-arrow-active:after {
    border-color: transparent transparent #333 transparent;
    top: 6px;
}

.tmp-form-select .select-show {
    display: block;
}

.tmp-form-select .select-items>div:hover {
    background: gainsboro;
}

.tmp-form-select .select-items>div:hover span {
    color: black;
}

.tmp-form-select .select-items>div:hover u>div {
    background: var(--c4);
}

.tmp-form-select .select-selected[status="active"] u>div {
    background: var(--c4);
}

.tmp-form-select .select-selected.select-arrow-active {
    background: gainsboro;
}

.tmp-form-select .select-selected.select-arrow-active>span {
    color: black;
}

.tmp-form-select .select-selected.select-arrow-active u>div.iw-169 {
    transform: rotate(90deg);
    animation: select_icon ease 0.5s;
    background: white;
}

@keyframes select_icon {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(90deg);
    }
}

.tmp-form-select .select-items>div figure>u>div,
.tmp-form-select .select-selected[status="active"] figure>u>div {
    background: var(--c1);
}

.tmp-form-select .select-selected.select-arrow-active figure>u>div {
    background: white;
}

.tmp-form-select.error .select-selected span {
    color: red;
    font-family: "f3";
    font-size: 0.8rem;
}

.tmp-form-select.error .select-selected {
    background: rgba(255, 0, 0, 0.2);
    border: solid 2px red;
}

.tmp-form-select.success .select-selected {
    background: rgb(110, 180, 45, 0.2);
    border: solid 2px var(--c4);
}

.tmp-form-select.success .select-selected span {
    font-family: "f3";
    font-size: 1rem;
    color: var(--c1);
}

/* ******************************************************CALENDARIO */
.tmp-form-calendar {
    display: inline-block;
    position: relative;
    font-size: 0.8rem;
    user-select: none;
    width: 100%;
}

/* Resulting Date Display */
.tmp-form-calendar .date-result {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid gainsboro;
    padding: 0.5rem;
    border-radius: 4px;
    transition: border-color 0.3s ease-in-out;
    width: 100%;
    flex-direction: row;
    min-height: 2.5rem;
    gap: 1rem;
    align-items: center;
}

.tmp-form-calendar .date-result figure {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-form-calendar .date-result figure u {
    width: 1.5rem;
    height: 1.5rem;
}

.tmp-form-calendar .date-result:hover {
    border-color: #00aaff;
}

.tmp-form-calendar .date-result>span {
    display: flex;
    align-items: center;
}

.tmp-form-calendar .date-result-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 0.5rem;
}

.tmp-form-calendar .date-result-info span {
    font-size: 14px;
    color: #555;
    padding: 0.5rem;
    border-radius: 4px;
    background: rgb(243, 243, 243);
    font-size: 0.8rem;
}

.tmp-form-calendar .date-result-info span:first-child {
    font-weight: bold;
    color: black;
}

/* Date Picker Popup */
.tmp-form-calendar .date-picker {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 100;
    display: none;
    background-color: #fff;
    border: 2px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 4px;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-direction: column;
    gap: 0.5rem;
}

.tmp-form-calendar.active .date-picker {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    padding: 1rem;
}

/* Date Picker Header */
.tmp-form-calendar .date-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: black;
    font-family: "f3";
}

.tmp-form-calendar .date-picker-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #00aaff;
    transition: transform 0.3s;
}

.tmp-form-calendar .date-picker-header button:hover {
    transform: scale(1.2);
}

/* Calendar Grid */
.tmp-form-calendar .date-picker-grid-title {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: black;
    margin-bottom: 10px;
    font-family: "f2";
}

.tmp-form-calendar .date-picker-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.tmp-form-calendar .date-picker-grid-body .day {
    width: 100%;
    min-height: 1.5rem;
    background: white;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, border-color 0.3s;
    color: black;
    border: solid rgb(235, 235, 235) 2px;
}

.tmp-form-calendar .date-picker-grid-body .day:hover {
    background-color: #00aaff;
    color: #fff;
}

.tmp-form-calendar .date-picker-grid-body .day.selected {
    background-color: #00aaff;
    color: #fff;
    border-color: #0077cc;
}

.tmp-form-calendar .date-picker-grid-body .day.disabled {
    color: gray;
    cursor: not-allowed;
    background: gainsboro;
    color: gray;
}

/* Time Picker */
.tmp-form-calendar .time-picker {
    display: flex;
    justify-content: space-between;
}

.tmp-form-calendar .time-picker-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.tmp-form-calendar .time-picker input {
    width: 6rem;
    padding: 0;
    border: 2px solid #e0e0e0;
    border-radius: 0;
    text-align: center;
    font-size: 16px;
    transition: border-color 0.3s;
    height: 2rem;
    background: white;
    padding-left: 0.5rem;
}

.tmp-form-calendar .time-picker input:focus {
    border-color: #00aaff;
    outline: none;
}

/* Buttons at the bottom */
.tmp-form-calendar .date-picker-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.tmp-form-calendar .date-picker-buttons button {
    padding: 4px 1rem;
    background-color: #00aaff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.3s;
    font-family: "f2";
}

.tmp-form-calendar .date-picker-buttons button:hover {
    background-color: #0077cc;
}

/* Animations for calendar transitions */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Icon animation in the date result */
.tmp-form-calendar .icn {
    width: 20px;
    height: 20px;
    background-color: #00aaff;
    transition: background-color 0.3s ease-in-out;
}

.tmp-form-calendar .date-result:hover .icn {
    background-color: #0077cc;
}

/**************************************************OPCIONES TMP FORM INPUT NUMBER**/
.tmp-form-input-num {
    overflow: scroll;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 2.5rem auto 2.5rem;
    height: 2.5rem;
}

.tmp-form-input-num button {
    background-color: var(--c3);
    color: white;
    border: none;
    cursor: pointer;
    height: 100%;
    transition: background-color 0.3s, transform 0.1s;
}

.tmp-form-input-num button u>div {
    background: white;
}

.tmp-form-input-num button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.tmp-form-input-num button:hover:not(:disabled) {
    background-color: var(--c2);
}

.tmp-form-input-num button:active:not(:disabled) {
    transform: scale(0.95);
}

.tmp-form-input-num input {
    width: 100%;
    border: none;
    font-size: 0.8rem;
    /* -moz-appearance: textfield; */
    transition: border-color 0.3s;
    text-align: center;
    height: 100%;
}

.tmp-form-input-num input:focus {
    border: none;
    outline: none;
}

.tmp-form-input-num input::-webkit-inner-spin-button,
.tmp-form-input-num input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    border: none;
    margin: 0;
}

/* ****************************************************************BOTON PARA COMPARTIR */
.btn-share {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: gainsboro;
    transition: all 0.5s;
    position: relative;
    z-index: 10;
}

.btn-share u {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    z-index: 20;
}

.btn-share u>div {
    background: var(--c1);
}

.btn-share>span {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    padding: 2px 0.5rem;
    background: gainsboro;
    color: var(--c1);
    font-family: "f2";
    font-size: 0.6rem;
    text-wrap: nowrap;
    display: none;
    z-index: 50;
    letter-spacing: 1px;
}

.btn-share.facebook {
    background: rgb(59, 89, 152);
}

.btn-share.twitter {
    background: rgb(29, 161, 242);
}

.btn-share.linkedin {
    background: rgb(0, 114, 177);
}

.btn-share.telegram {
    background: rgb(0, 136, 204);
}

.btn-share.whatsapp {
    background: rgb(37, 211, 102);
}

.btn-share.reddit {
    background: rgb(255, 69, 0);
}

.btn-share.pinterest {
    background: rgb(189, 8, 28);
}

.btn-share.snapchat {
    background: rgb(54, 70, 93);
}

.btn-share.tumblr {
    background: rgb(255, 252, 0);
}

.btn-share.instagram {
    background: rgb(228, 64, 95);
}

.btn-share.tikTok {
    background: rgb(0, 0, 0);
}

.btn-share.viber {
    background: rgb(101, 86, 187);
}

.btn-share.weChat {
    background: rgb(7, 193, 96);
}

.btn-share.messenger {
    background: rgb(0, 132, 255);
}

.btn-share.LINE {
    background: rgb(0, 195, 0);
}

.btn-share.LINE u>div,
.btn-share.facebook u>div,
.btn-share.instagram u>div,
.btn-share.linkedin u>div,
.btn-share.messenger u>div,
.btn-share.pinterest u>div,
.btn-share.reddit u>div,
.btn-share.snapchat u>div,
.btn-share.telegram u>div,
.btn-share.tikTok u>div,
.btn-share.tumblr u>div,
.btn-share.twitter u>div,
.btn-share.viber u>div,
.btn-share.weChat u>div,
.btn-share.whatsapp u>div {
    background: white;
}

.btn-share:hover {
    transform: scale(1.1);
    z-index: 50;
}

.btn-share:hover span {
    /* animation: 1s fadeIn ease; */
    display: flex;
    z-index: 50;
}

/* ************************************************************LISTA DE ITEMS */

.tmp-form-list-items {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.tmp-form-list-items .tfl-item {
    display: grid;
    grid-template-columns: 5rem auto;
    gap: 0;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--c0);
    border-radius: 4px;
    transform: scale(1);
    transition: transform 0.2s ease, background-color 0.3s ease;
    min-height: 5rem;
}

.tmp-form-list-items .tfl-item:hover {
    background-color: gainsboro;
    transform: scale(1.02);
    cursor: pointer;
}

.tmp-form-list-items .tfl-item figure u {
    width: 3rem;
    height: 3rem;
}

.tmp-form-list-items .tfl-item figure u>div {
    background: var(--c1);
}

.tmp-form-list-items .tfl-item strong {
    font-size: 0.9rem;
    font-weight: 600;
    font-family: "f2";
    color: var(--c1);
}

.tmp-form-list-items .tfl-item>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    font-family: "f1";
    color: gray;
    font-size: 0.8rem;
}

.tmp-form-list-items .item-order {
    font-size: 0.8rem;
    color: #95a5a6;
    font-weight: 500;
}

.tmp-form-list-items .fade-in {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tmp-form-list-items .tfl-item.active {
    background: var(--c1);
    transform: scale(1.02);
}

.tmp-form-list-items .tfl-item.active>figure u>div {
    background: white;
}

.tmp-form-list-items .tfl-item.active>div strong {
    font-size: 1rem;
    color: white;
}

.tmp-form-list-items .tfl-item.active>div span {
    color: white;
}

/* ***********************************************************************TEMPLATE CHATBOT */
.tmp-chat-contact {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 100;
    display: none;
}

.tmp-chat-contact.visible {
    display: flex;
    animation: chatbot_visible ease 1s;
}

@keyframes chatbot_visible {
    0% {
        left: -100%;
    }

    100% {
        left: 1rem;
    }
}

.tmp-chat-contact .contain {
    display: none;
    width: 25rem;
    background-color: var(--c0);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    flex-direction: column;
    opacity: 0;
    transform: translateY(4rem);
    transition: all 0.4s ease-in-out;
    min-height: 10rem;
    z-index: 10;
    position: absolute;
    bottom: 4rem;
    left: 1rem;
}

.tmp-chat-contact.active .contain {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    animation: star_chat_contact ease 1s;
}

@keyframes star_chat_contact {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.tmp-chat-contact .header {
    display: flex;
    justify-content: space-around;
    background-color: #f1f1f1;
    padding: 1rem;
    transition: background-color 0.3s ease;
    flex-direction: row;
    gap: 0.5rem;
}

.tmp-chat-contact .header .option {
    cursor: pointer;
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    color: #333;
    display: grid;
    grid-template-columns: 1.5rem auto;
    padding: 0.5rem;
    gap: 0.5rem;
}

.tmp-chat-contact .header .option u {
    width: 1.5rem;
    height: 1.5rem;
}

.tmp-chat-contact .header .option span {
    font-family: "f2";
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
}

.tmp-chat-contact .header .option u>div {
    background: var(--c1);
}

.tmp-chat-contact .header .option:hover {
    background-color: #e0e0e0;
}

.tmp-chat-contact .header .option.active {
    background-color: var(--c1);
    color: white;
}

.tmp-chat-contact .header .option.active u>div {
    background: white;
}

.tmp-chat-contact .header .option {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-chat-contact .header .option span {
    display: none;
}

.tmp-chat-contact .header .option.active {
    display: grid;
}

.tmp-chat-contact .header .option.active span {
    display: flex;
}

.tmp-chat-contact .content {
    transition: all 0.4s ease;
}

.tmp-chat-contact .content>.data {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease;
    display: none;
}

.tmp-chat-contact .content>.data>.info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tmp-chat-contact .content>.data>.info .item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tmp-chat-contact .content>.data>.info .item label {
    font-size: 0.8rem;
    font-family: "f2";
}

.tmp-chat-contact .content>.data.active {
    opacity: 1;
    visibility: visible;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    opacity: 1;
    animation: chat_contact 1s ease;
}

.tmp-chat-contact .content>.data.share {
    gap: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20rem;
}

.tmp-chat-contact .content>.data.share>div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

@keyframes chat_contact {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.tmp-chat-contact .buttons {
    margin-top: 1rem;
}

.tmp-chat-contact .send-message {
    width: 100%;
    padding: 10px;
    background-color: var(--c1);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.tmp-chat-contact .send-message:hover {
    background-color: var(--c4);
    transform: scale(1.05);
}

.tmp-chat-contact #toggle-button::after {
    content: "";
    background: var(--c4);
    display: flex;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    z-index: -1;
    position: absolute;
    animation: button_message infinite 2s;
}

.tmp-chat-contact.active #toggle-button::after {
    display: none;
}

@keyframes button_message {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}

.tmp-chat-contact #toggle-button {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    background-color: var(--c4);
    position: relative;
    z-index: 110;
}

.tmp-chat-contact #toggle-button u {
    animation: chat_contact_btn infinite 1.5s;
}

@keyframes chat_contact_btn {
    0% {
        transform: scale(1) rotate(0);
    }

    40% {
        transform: scale(1.1) rotate(-20deg);
    }

    60% {
        transform: scale(1.1) rotate(20deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.tmp-chat-contact #toggle-button.active {
    width: 3rem;
    height: 3rem;
}

.tmp-chat-contact #toggle-button.active u {
    animation: none;
}

.tmp-chat-contact #toggle-button.active span {
    display: none;
}

.tmp-chat-contact #toggle-button:hover {
    background: var(--c5);
}

.tmp-chat-contact #toggle-button>span {
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--c0);
    padding: 0.5rem;
    font-size: 0.8rem;
    font-family: "f2";
    color: black;
    text-wrap: nowrap;
    position: absolute;
    border-radius: 4px;
}

.tmp-chat-contact #toggle-button:hover {
    transform: scale(1.1);
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.tmp-chat-contact #toggle-button.active {
    background: red;
}

.tmp-chat-contact>.buttons {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.tmp-chat-contact>.buttons button u {
    width: 2rem;
    height: 2rem;
}

.tmp-chat-contact>.buttons button u>div {
    background: white;
}

.tmp-chat-contact .contact {
    padding: 1rem;
    background: white;
}

.tmp-chat-contact .load {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    display: none;
    background: gainsboro;
    align-items: center;
    justify-content: center;
}

.tmp-chat-contact .load.active {
    display: flex;
}

.tmp-chat-contact .load .loader {
    width: 8px;
    height: 40px;
    border-radius: 4px;
    display: block;
    margin: 20px auto;
    position: relative;
    background: currentColor;
    color: var(--c1);
    box-sizing: border-box;
    animation: chat_animloader 0.3s 0.3s linear infinite alternate;
    z-index: 50;
}

.tmp-chat-contact .load .loader::after,
.tmp-chat-contact .load .loader::before {
    content: "";
    width: 8px;
    height: 40px;
    border-radius: 4px;
    background: currentColor;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    box-sizing: border-box;
    animation: chat_animloader 0.3s 0.45s linear infinite alternate;
}

.tmp-chat-contact .load .loader::before {
    left: -20px;
    animation-delay: 0s;
}

@keyframes chat_animloader {
    0% {
        height: 48px;
    }

    100% {
        height: 4px;
    }
}

.tmp-input-range .range-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-input-range .range-container input[type="range"] {
    flex-grow: 1;
    margin: 0 10px;
    appearance: none;
    height: 8px;
    background: #ddd;
    outline: none;
    border-radius: 4px;
    padding: 0;
}

.tmp-input-range .range-container input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c3);
    cursor: pointer;
}

.tmp-input-range .range-container input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c3);
    cursor: pointer;
}

.tmp-input-range .range-container button {
    background-color: var(--c3);
    border: none;
    color: white;
    font-size: 20px;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.tmp-input-range .range-container button:focus,
.tmp-input-range .range-container button:hover {
    background-color: var(--c5);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.tmp-input-range .display-container {
    font-size: 0.8rem;
    text-align: center;
    font-family: "f2";
    letter-spacing: 1px;
}

.tmp-input-range .error {
    color: red;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    display: none;
}

/* **********************************************************CONFIG CONTAINER */
.tmp-container {
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    animation: fadeIn 0.5s ease-in-out;
    min-height: 10rem;
    background: white;
    transition: all 1s;
    display: grid;
    grid-template-columns: auto;
    width: 100%;
    max-width: 180rem;
}

.tmp-container.form {
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    gap: 1rem;
}


@media only screen and (max-width: 1920px) {
    .tmp-container {
        max-width: 85vw;
    }

}

@media only screen and (max-width: 1200px) {
    .tmp-container {
        max-width: 95vw;
    }
}

@media only screen and (max-width: 1024px) {
    .tmp-container {
        max-width: 100vw;
    }
}


/* **********************************************************PLANTILLA DE ERROR */
.tmp-customer-error {
    font-family: "Arial", sans-serif;
    color: var(--c1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    width: 25rem;
}

.tmp-customer-error>figure {
    width: 35rem;
    height: 20rem;
    overflow: hidden;
    position: relative;
}

.tmp-customer-error>figure img {
    width: auto;
    height: 20rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tmp-customer-error .error-code {
    font-size: 4rem;
    font-weight: bold;
    color: var(--c7);
}

.tmp-customer-error .error-message {
    font-size: 1rem;
    color: var(--c7);
}

.tmp-customer-error .description {
    font-size: 0.8rem;
    color: gray;
    text-align: center;
}

.tmp-customer-error .error-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tmp-customer-error .btn-back {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    color: #fff;
    background-color: var(--c6);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.tmp-customer-error .btn-back:hover {
    background-color: var(--c5);
}

/* ********************************************************************************************CONTROL DE MODAL */
/*




*/

/* ************************************************************************************************TEMPLATE BTN */
.tmp-btn-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2rem;
    background: var(--c3);
    padding: 0 1rem;
    transition: all 0.5s;
    height: 2.5rem;
}

.tmp-btn-form u>div {
    background: white;
}

.tmp-btn-form:hover {
    background: var(--c5);
    transform: scale(1.01);
}

/* ************************************************************************************************TEMPLATE input search query */
/* Wrapper básico */
.tmp-input-query-search-wrapper {
    position: relative;
    margin: 0;
    width: 100%;
}

.tmp-input-query-search-wrapper .error .no-suggestions {
    padding: 10px;
    font-style: italic;
    color: #888;
}

.tmp-input-query-search-wrapper .error .error {
    padding-bottom: 10px;
    color: #ff4d4d;
    font-weight: bold;
}

.tmp-input-query-search-wrapper .input-search {
    position: relative;
    display: grid;
    grid-template-columns: auto 2.5rem;
    gap: 0.5rem;
    width: 100%;
}

.tmp-input-query-search-wrapper .input-search .search {
    position: relative;
}

.tmp-input-query-search-wrapper .input-search .search .icon {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
}

.tmp-input-query-search-wrapper .input-search .search .icon>div {
    background: black;
}

.tmp-input-query-search-wrapper .input-search .search>figure {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    display: none;
}

.tmp-input-query-search-wrapper .input-search .search .fail u,
.tmp-input-query-search-wrapper .input-search .search .load u,
.tmp-input-query-search-wrapper .input-search .search .success u {
    width: 1rem;
    height: 1rem;
}

.tmp-input-query-search-wrapper .input-search .search .load u {
    width: 1.5rem;
    height: 1.5rem;
    animation: tmp_input_search infinite 3s;
}

.tmp-input-query-search-wrapper .input-search .search .load u>div {
    background: var(--c4);
}

.tmp-input-query-search-wrapper .input-search .search .success u>div {
    background: var(--c4);
}

.tmp-input-query-search-wrapper .input-search .search .fail u>div {
    background: red;
}

.tmp-input-query-search-wrapper .tmp-button-clean {
    width: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--c3);
}

.tmp-input-query-search-wrapper .tmp-button-clean u>div {
    background: white;
}

.tmp-input-query-search-wrapper .tmp-button-clean:hover {
    background: var(--c2);
}

@keyframes tmp_input_search {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.tmp-input-query-search-wrapper.error .input-search .fail,
.tmp-input-query-search-wrapper.load .input-search .load,
.tmp-input-query-search-wrapper.success .input-search .success {
    display: flex;
}

.tmp-input-query-search-wrapper.success .input-search input {
    background: rgba(134, 248, 73, 0.5);
    border: var(--c4) solid 1px;
}

.tmp-input-query-search-wrapper.error .input-search input {
    background: rgba(187, 3, 0, 0.2);
    border: red solid 1px;
}

input.tmp-input-query-search {
    width: 100%;
    font-size: 16px;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease-in-out;
    height: 2.5rem;
    padding-left: 2rem;
}

.tmp-input-query-search:focus {
    border-color: #007bff;
}

/* Estilos por defecto para la lista de sugerencias */
.tmp-suggestions-list {
    margin-top: 5px;
    list-style: none;
    padding: 0;
    border-radius: 4px;
    background-color: #fff;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    opacity: 0;
    /* Oculta por defecto */
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Clase visible cuando se muestran sugerencias */
.tmp-suggestions-list.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.tmp-suggestion-item {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    border-bottom: 1px gainsboro solid;
}

.tmp-suggestion-item:focus,
.tmp-suggestion-item:hover {
    background-color: #f1f1f1;
    outline: none;
}

/* **********************************************************************************INPUT */
/* ===========================
   App_FormInput styles
   Root scope: .tmp-input
   =========================== */

.tmp-input {
    /* layout */
    --fi-radius: 0.75rem;
    --fi-radius-inner: 4px;
    --fi-border-width: 1px;
    --fi-gap-x: 0.75rem;
    --fi-gap-y: 0.35rem;
    --fi-padding-x: 0.9rem;
    --fi-padding-y: 0.7rem;
    --fi-icon-size: 1.1rem;
    --fi-icon-box: 2.4rem;

    /* typography */
    --fi-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fi-font-size: clamp(0.9rem, 0.18vw + 0.85rem, 1rem);
    --fi-line-height: 1.45;
    --fi-label-size: 0.8rem;
    --fi-msg-size: 0.78rem;
    --fi-count-size: 0.78rem;

    /* colors - base */
    --fi-c-bg: #f7f7f9;
    --fi-c-bg-alt: #ffffff;
    --fi-c-bg-active: #ffffff;
    --fi-c-border: #d3d6dd;
    --fi-c-border-strong: #babec7;
    --fi-c-border-focus: #3b82f6;
    --fi-c-border-error: #ef4444;
    --fi-c-border-success: #16a34a;

    --fi-c-text: #111827;
    --fi-c-text-soft: #6b7280;
    --fi-c-placeholder: #9ca3af;
    --fi-c-icon: #6b7280;

    --fi-c-error: #b91c1c;
    --fi-c-error-soft: #fee2e2;
    --fi-c-success: #15803d;
    --fi-c-success-soft: #dcfce7;

    --fi-c-focus-ring: rgba(59, 130, 246, 0.32);
    --fi-c-shadow-soft: rgba(15, 23, 42, 0.04);

    /* sizing */
    --fi-field-min-h: 2.6rem;
    --fi-textarea-min-h: 4.8rem;
    --fi-touch-h: 2.8rem;
    --fi-max-w: 100%;

    /* transitions */
    --fi-tr-fast: 0.16s ease-out;
    --fi-tr-normal: 0.22s ease-out;

    /* misc */
    --fi-count-weight: 500;
    --fi-msg-weight: 400;

    line-height: var(--fi-line-height);
}

.tmp-input .fi-wrap {
    display: flex;
    align-items: stretch;
    gap: var(--fi-gap-x);
    background-color: var(--fi-c-bg);
    border-radius: var(--fi-radius);
    padding: 0;
    border: none;
    box-shadow: 0 1px 3px var(--fi-c-shadow-soft);
    width: 100%;
}

/* Estado visual global del contenedor */
.tmp-input.fi-error .fi-wrap {
    border-color: var(--fi-c-border-error);
    background-color: var(--fi-c-error-soft);
}

.tmp-input.fi-success .fi-wrap {
    border-color: var(--fi-c-border-success);
    background-color: var(--fi-c-success-soft);
}

.tmp-input .fi-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fi-gap-y);
    position: relative;
    z-index: 0;
}

.tmp-input .fi-field {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding-left: 1rem;
    padding-right: 3rem;
    border-radius: var(--fi-radius-inner);
    border: var(--fi-border-width) solid var(--fi-c-border);
    background-color: var(--fi-c-bg-active);
    color: var(--fi-c-text);
    font-family: inherit;
    font-size: inherit;
    line-height: var(--fi-line-height);
    outline: none;
    resize: vertical;
    max-height: 15rem;
    caret-color: var(--fi-c-border-focus);
    transition:
        border-color var(--fi-tr-normal),
        box-shadow var(--fi-tr-normal),
        background-color var(--fi-tr-fast),
        color var(--fi-tr-fast);
    min-width: 0;
}

/* Textarea específico */
.tmp-input textarea.fi-field {
    min-height: var(--fi-textarea-min-h);
    padding: .5rem;
    padding-right: 3rem;
}

/* Keyboard focus */
.tmp-input .fi-field:focus-visible {
    border-color: var(--fi-c-border-focus);
    box-shadow: 0 0 0 2px var(--fi-c-focus-ring);
}

/* Estados de error / éxito */
.tmp-input.fi-error .fi-field {
    border-color: var(--fi-c-border-error);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25);
}

.tmp-input.fi-success .fi-field {
    border-color: var(--fi-c-border-success);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.3);
}

/* Dirty / touched (sutiles) */
.tmp-input.fi-dirty:not(.fi-error):not(.fi-success) .fi-field {
    border-color: var(--fi-c-border-strong);
}

.tmp-input.fi-touched:not(.fi-error):not(.fi-success) .fi-field {
    background-color: rgba(255, 255, 255, 0.92);
}

/* Disabled / readonly */
.tmp-input .fi-field:disabled,
.tmp-input .fi-field[readonly] {
    cursor: not-allowed;
    opacity: 0.75;
    background-color: rgba(148, 163, 184, 0.08);
    border-style: dashed;
}

/* Placeholder */
.tmp-input .fi-field::placeholder {
    color: var(--fi-c-placeholder);
    opacity: 1;
}

/* Selection */
.tmp-input .fi-field::selection {
    background-color: rgba(59, 130, 246, 0.24);
}

.tmp-input .fi-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: calc(var(--fi-padding-x) * 0.4);
    padding-bottom: 0.1rem;
}

/* Contenedor base de mensajes */
.tmp-input .fi-msg {
    flex: 1 1 auto;
    min-height: calc(var(--fi-msg-size) * 1.6);
    font-size: var(--fi-msg-size);
    line-height: 1.4;
    font-weight: var(--fi-msg-weight);
    letter-spacing: 0.01em;
}

/* Mensaje de error */
.tmp-input .fi-msg-error {
    color: var(--fi-c-error);
    opacity: 0;
    transform: translateY(-0.1rem);
    transition:
        opacity var(--fi-tr-normal),
        transform var(--fi-tr-normal);
}

/* Mensaje de éxito */
.tmp-input .fi-msg-success {
    color: var(--fi-c-success);
    opacity: 0;
    transform: translateY(-0.1rem);
    transition:
        opacity var(--fi-tr-normal),
        transform var(--fi-tr-normal);
}

/* Mostrar mensajes según estado */
.tmp-input.fi-error .fi-msg-error {
    opacity: 1;
    transform: translateY(0);
}

.tmp-input.fi-error .fi-msg-success {
    opacity: 0;
    transform: translateY(-0.1rem);
}

.tmp-input.fi-success .fi-msg-success {
    opacity: 1;
    transform: translateY(0);
}

.tmp-input.fi-success .fi-msg-error {
    opacity: 0;
    transform: translateY(-0.1rem);
}

/* Contador de caracteres */
.tmp-input .fi-count {
    flex: 0 0 auto;
    font-weight: var(--fi-count-weight);
    color: var(--fi-c-text-soft);
    min-height: calc(var(--fi-count-size) * 1.5);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    position: absolute;
    top: .8rem;
    right: .5rem;
}

/* Colores de contador según estado */
.tmp-input.fi-error .fi-count {
    color: var(--fi-c-error);
}

.tmp-input.fi-success .fi-count {
    color: var(--fi-c-success);
}

@supports (backdrop-filter: blur(4px)) {
    .tmp-input .fi-wrap {
        backdrop-filter: blur(5px);
        background-color: color-mix(in srgb, var(--fi-c-bg) 88%, transparent);
    }
}

@supports not (backdrop-filter: blur(4px)) {
    .tmp-input .fi-wrap {
        background-image: linear-gradient(135deg,
                rgba(255, 255, 255, 0.35),
                rgba(255, 255, 255, 0.05));
    }
}

.tmp-input.fi-compact .fi-field {
    padding-block: calc(var(--fi-padding-y) * 0.65);
    min-height: 2.35rem;
}

.tmp-input.fi-compact .fi-meta {
    padding-bottom: 0;
}

/* ===========================
   Estados interactivos (hover)
   =========================== */

.tmp-input .fi-field:not(:disabled):not([readonly]):hover {
    border-color: var(--fi-c-border-strong);
}

.tmp-input.fi-error .fi-field:not(:disabled):not([readonly]):hover {
    border-color: var(--fi-c-border-error);
}

.tmp-input.fi-success .fi-field:not(:disabled):not([readonly]):hover {
    border-color: var(--fi-c-border-success);
}

.tmp-input .fi-icon {
    position: absolute;
    top: .5rem;
    left: 4px;
    width: 1.5rem;
    height: 1.5rem;
    z-index: 10;
}

.tmp-input .fi-icon>.icn {
    background-color: var(--fi-c-icon);
}

.tmp-input.fi-error .fi-icon {
    border-color: var(--fi-c-border-error);
}

.tmp-input.fi-success .fi-icon {
    border-color: var(--fi-c-border-success);
}

.tmp-input.fi-has-icon input.fi-field {
    padding-left: 2.5rem;
}

.tmp-input.fi-touched .fi-icon>.icn {
    background-color: var(--c13);
}

.tmp-input.fi-dirty .fi-field {
    background-color: var(--c22);
    font-family: "f2";
}

.tmp-input.fi-dirty .fi-icon>.icn {
    background-color: var(--c13);
}

/* ************************************************************************************************************TABLE MANAGER */
.table-manager {
    --border-radius: 6px;
    --box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.table-manager .filter-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.table-manager .filter-group label {
    color: var(--c7);
}

.table-manager .filter-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.table-manager .filter-group input,
.table-manager .filter-group select {
    padding: 10px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    width: 100%;
}

.table-manager .filter-group input:focus,
.table-manager .filter-group select:focus {
    border-color: var(--c5);
    outline: none;
}

/* Filtros de checkbox */
.table-manager .status-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botones de acción */
.table-manager .filter-actions .btn-filter,
.table-manager .filter-actions .btn-reset {
    background-color: var(--c5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.table-manager .filter-actions .btn-reset {
    background-color: #ccc;
}

.table-manager .filter-actions .btn-filter:hover {
    background-color: var(--c7);
}

.table-manager .filter-actions .btn-reset:hover {
    background-color: #aaa;
}

/* Indicador de carga */
.table-manager .loader {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c7);
}

.table-section {
    background-color: white;
    border-radius: var(--border-radius);
    max-width: 100%;
    overflow-x: auto;
    margin: 0;
    padding: 0;
}

.result-table {
    width: 100%;
    /* display: block; */
}

.result-table td span,
.result-table th span {
    white-space: nowrap;
}

.table-manager .result-table {
    border-collapse: collapse;
    width: 100%;
}

/* .table-manager .result-table.active{
    display: block;
} */

.table-manager .result-table td,
.table-manager .result-table th {
    /* padding: 12px 15px; */
    padding: 0.5rem;
    margin: 0;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.table-manager .result-table td .buttons {
    display: flex;
    flex-direction: row;
    gap: 0;
}

.table-manager .result-table td .buttons .action-btn {
    width: 2.5rem;
    height: 2.5rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
}

.table-manager .result-table td .buttons .action-btn i,
.table-manager .result-table td .buttons .action-btn u {
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.5s;
    transform: scale(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.table-manager .result-table td .buttons .action-btn:hover {
    transform: scale(1);
    box-shadow: rgba(0, 0, 0, 0.3) 0 0 4px;
}

.table-manager .result-table td .buttons .action-btn:hover i,
.table-manager .result-table td .buttons .action-btn:hover u {
    transform: scale(1);
}

.table-manager .result-table td .buttons .status.error {
    background: red;
    padding: 0.5rem 1rem;
    text-wrap: nowrap;
}

.table-manager .result-table td .buttons .status.error:hover {
    background: rgb(158, 0, 0);
}

.table-manager .result-table td .buttons .status.approved {
    background: var(--c5);
}

.table-manager .result-table td .buttons .status.wait {
    background: var(--c20);
}

.table-manager .result-table td .link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.table-manager .result-table td .link .btn:hover {
    background: var(--c5);
    color: white;
}

.table-manager .result-table td .link .btn:hover u>div {
    background: white;
}

.table-manager .result-table td .link .btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: all 0.5s;
    gap: 0.5rem;
    background: var(--c20);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.5s;
}

.table-manager .result-table td .link .btn span {
    font-family: "f2";
}

.table-manager .result-table td .link .btn u {
    width: 1.2rem;
    height: 1.2rem;
}

.table-manager .result-table td .link .btn u>div {
    background: var(--c1);
}

.table-manager .result-table td .link .btn:hover {
    border-bottom: 1px var(--c1) solid;
}

.table-manager .result-table td .date {
    text-align: center;
    text-wrap: nowrap;
}

.table-manager .result-table td .buttons .btn {
    position: relative;
    z-index: 10;
    color: white;
    cursor: pointer;
    min-height: 2rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.table-manager .result-table td .buttons .btn u>div {
    background: white;
}

.table-manager .result-table th {
    background-color: var(--c20);
    color: black;
    position: relative;
    cursor: pointer;
    text-align: center;
    height: 2rem;
    border-right: solid white 2px;
}

.table-manager .result-table th:last-child {
    border: none;
}

.table-manager .result-table th:hover {
    background: var(--c3);
    color: white;
}

.table-manager .result-table th button {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: black;
    border: none;
}

.table-manager .result-table th>div {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.table-manager .result-table th>div span {
    text-align: center;
    text-wrap: wrap;
    font-family: "f1";
}

.table-manager tbody tr:nth-child(odd) {
    background-color: white;
}

.table-manager tbody tr:nth-child(even) {
    background-color: var(--c20);
}

.table-manager tbody tr:hover {
    background-color: gainsboro;
}

/* Mensajes de no resultados */
.table-manager .no-results-message {
    text-align: center;
    padding: 20px;
    color: #999;
    border-radius: var(--border-radius);
    background-color: #f9f9f9;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.table-manager .no-results-message figure {
    width: 20rem;
    height: 20rem;
}

/* Estilos para las acciones adicionales */
.table-manager .additional-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: #f5f5f5;
    /* Fondo sutil */
}

/* Estilo para la sección de información de resultados */
.table-manager .additional-actions .result-info-section {
    color: #333;
    /* Color de texto */
}

/* Estilo para el control de selección de resultados por página */
.table-manager .additional-actions .results-per-page-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

.table-manager .additional-actions .results-per-page-control label {
    color: #666;
    /* Color de texto secundario */
}

.table-manager .additional-actions .results-per-page-control select {
    padding: 5px 10px;
    color: #333;
    /* Color del texto del select */
    border: 1px solid #ccc;
    /* Borde gris claro */
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    width: 5rem;
    height: 2.5rem;
    text-align: center;
    font-family: "f2";
}

/* Estilo para la opción seleccionada */
.table-manager .additional-actions .results-per-page-control select option {
    color: black;
    font-family: "f2";
    text-align: center;
}

.table-manager .btn-export {
    background-color: var(--c5);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.table-manager .btn-export:hover {
    background-color: var(--c7);
}

/* Paginación */
.table-manager .pagination-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.table-manager .pagination-section button {
    width: 9rem;
    height: 2rem;
}

/* Modal */
.table-manager .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.table-manager .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 100%;
}

.table-manager .close-modal {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Sección de información de resultados */
.table-manager .result-info-section {
    text-align: center;
    font-family: "f2";
}

@media (max-width: 1024px) {
    .filter-group.date-range.gt-x2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .table-manager .filter-controls {
        grid-template-columns: repeat(1, 1fr);
        /* Dos columnas en pantallas medianas */
    }
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .table-manager .filter-controls {
        grid-template-columns: auto;
    }

    .table-manager .additional-actions {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .table-manager .pagination-section {
        flex-direction: row;
        gap: 5px;
    }

    .table-manager .filter-group input,
    .table-manager .filter-group select {
        max-width: 100%;
    }

    .table-manager .btn-export {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .table-manager {
        padding: 10px;
    }

    .table-manager .filter-actions .btn-filter,
    .table-manager .filter-actions .btn-reset {
        padding: 8px;
        font-size: 0.9rem;
    }
}

/* ******************************************************************************Contenedor principal del modal */
/* Contenedor principal del modal con efecto Glassmorphism */
.tmp-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    /* Efecto Glassmorphism */
    background-color: rgba(0, 0, 0, 0.7);
    /* Fondo translúcido */
    z-index: 1000;
    /* Capa superior */
    transition: opacity 0.3s ease;
    /* Transición de visibilidad */
    opacity: 0;
}

.tmp-modal.active {
    display: flex;
    /* Habilitar flexbox al activarse */
    opacity: 1;
    /* Mostrar con transición */
    animation: fade-in 0.3s ease-out;
    /* Animación de entrada */
}

.tmp-modal .modal button.btn {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0 1rem;
}

.tmp-modal .modal button.btn u {
    width: 1.5rem;
    height: 1.5rem;
}

.tmp-modal .modal button.btn span {
    text-wrap: nowrap;
}

.tmp-modal .modal {
    background-color: var(--c20);
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 35rem;
    min-height: 17rem;
    width: 100%;
    overflow: hidden;
    animation: modal-zoom-in 0.4s ease-out;
    /* Animación de apertura */
    display: grid;
    height: auto;
    padding: 1rem;
}

.tmp-modal .modal>div {
    width: 100%;
}

.tmp-modal .modal-header {
    animation-delay: 0.2s;
    gap: 1rem;
    padding-bottom: 0;
    font-weight: bold;
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    transform: scale(0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tmp-modal .modal-header h4 {
    font-family: "f2";
}

.tmp-modal .modal-header .modal-icon {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.tmp-modal .modal-header .modal-icon>u {
    width: 6rem;
    height: 6rem;
    padding: 1rem;
    animation: tmp_modal_icon ease infinite 2s;
}

.tmp-modal .modal-header .modal-icon .progress {
    width: 150px;
    height: 15px;
    -webkit-mask: linear-gradient(90deg, #000 60%, #0000 0) 0 / 15%;
    background: linear-gradient(var(--c5) 0 0) 0 / 0% no-repeat var(--c19);
    animation: tmp-modal-progress 2s infinite steps(6);
}

@keyframes tmp-modal-progress {
    100% {
        background-size: 120%
    }
}


@keyframes tmp_modal_icon {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.tmp-modal .modal-body {
    color: #444;
    text-align: center;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    overflow-y: auto;
    max-height: 25rem;
    height: 100%;
}

.tmp-modal .modal-footer {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    background-color: var(--c20);
    padding: 1rem;
}

.tmp-modal .modal-footer button {
    height: 2.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    /* Efectos de hover */
    position: relative;
    overflow: hidden;
    min-width: 10rem;
}

.tmp-modal .modal-footer button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.3s ease;
    /* Deslizamiento del efecto hover */
}

.tmp-modal .modal-footer button:hover::after {
    left: 100%;
}

.tmp-modal .modal-footer button:hover {
    transform: scale(1.1);
    /* Crece ligeramente al pasar el mouse */
}

.tmp-modal .modal-footer button.confirm-btn {
    background-color: var(--c5);
    /* Verde */
    color: white;
}

.tmp-modal .modal-footer button.confirm-btn:hover {
    background-color: var(--c7);
}

.tmp-modal .modal-footer button.cancel-btn {
    background-color: var(--c10);
    /* Rojo */
    color: white;
}

.tmp-modal .modal-footer button.cancel-btn:hover {
    background-color: var(--c9);
}

/* Animaciones */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-zoom-in {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes modal-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }
}

.tmp-modal .modal.exit {
    animation: modal-shake 0.3s ease-out, fade-in 0.4s ease-out reverse forwards;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.tmp-modal .modal-header,
.tmp-modal .modal-body,
.tmp-modal .modal-footer {
    opacity: 0;
    animation: staggered-fade-in 0.3s ease forwards;
}

.tmp-modal .modal-body {
    animation-delay: 0.4s;
}

.tmp-modal .modal-footer {
    animation-delay: 0.6s;
}

@keyframes staggered-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ícono para preguntas */
.tmp-modal .icn.question {
    background-color: var(--c5);
    /* Azul */
    box-shadow: 0 4px 6px rgba(52, 152, 219, 0.4);
    /* Sombra ligera */
}

/* Ícono para éxito */
.tmp-modal .icn.success {
    background-color: var(--c4);
    /* Verde */
    box-shadow: 0 4px 6px rgba(76, 175, 80, 0.4);
}

/* Ícono para error */
.tmp-modal .icn.error {
    background-color: var(--c10);
    /* Rojo */
    box-shadow: 0 4px 6px rgba(244, 67, 54, 0.4);
}

/* Ícono para advertencia */
.tmp-modal .icn.warning {
    background-color: var(--c11);
    /* Amarillo */
    box-shadow: 0 4px 6px rgba(255, 193, 7, 0.4);
}

/* Ícono para información */
.tmp-modal .icn.info {
    background-color: var(--c15);
    /* Azul más oscuro */
    box-shadow: 0 4px 6px rgba(33, 150, 243, 0.4);
}

/* Ícono para eliminación */
.tmp-modal .icn.remove {
    background-color: var(--c9);
    /* Gris */
    box-shadow: 0 4px 6px rgba(158, 158, 158, 0.4);
}

/* Ícono para cargando */
.tmp-modal .icn.loader {
    background-color: var(--c5);
    /* Morado */
    box-shadow: 0 4px 6px rgba(103, 58, 183, 0.4);
    position: relative;
    /* Para el spinner interno */
}

/* ***********************************************************************************TEMPLATE TITLE EN TABLAS */
.tmp-title-table {
    display: flex;
    margin-bottom: 1rem;
    justify-content: space-between;
}

.tmp-title-table h2 {
    font-family: "f2";
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    color: var(--c7);
}

.tmp-title-table h2 i {
    font-size: 1.5rem;
}

@media only screen and (min-width: 1920px) {}

@media only screen and (max-width: 1919px) and (min-width: 1440px) {
    .tmp-modal .modal {
        max-width: 40rem;
    }
}

@media only screen and (max-width: 1439px) and (min-width: 1280px) {}

@media only screen and (max-width: 1279px) and (min-width: 1024px) {}

@media only screen and (max-width: 1023px) and (min-width: 768px) {}

@media only screen and (max-width: 767px) and (min-width: 480px) {
    .tmp-modal .modal {
        max-width: 90%;
    }

    .tmp-form-input .fi-info .text textarea {
        height: 8rem;
    }

    .tmp-form-calendar .date-picker {
        padding: 0;
        border: none;
    }

    .tmp-form-calendar .date-picker-grid .date-picker-grid-body {
        gap: 2px;
    }

    .tmp-form-file .file-uploader .select-file span {
        font-size: 0.7rem;
        width: 80%;
    }

    .tmp-form-file .select-file>button {
        width: 70%;
    }

    .tmp-form-file .buttons button {
        padding: 0.5rem;
    }

    .tmp-form-file .file-uploader {
        padding: 0.5rem;
    }

    .tmp-form-file .description textarea {
        height: 6rem;
    }

    .tmp-form-file .file-uploader .summary {
        grid-template-columns: 4rem auto;
    }

    .tmp-form-file .file-list li {
        grid-template-columns: auto;
        grid-template-rows: 8rem auto;
        border-bottom: 2px gainsboro solid;
        border: none;
        padding: 0;
    }

    .tmp-banner .tmp-title h1 {
        font-size: 1.5rem;
    }

    .tmp-banner .tmp-title p {
        font-size: 0.8rem;
    }

    .tmp-title div>h2 {
        font-size: 1.5rem;
    }

    .tmp-title span {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 479px) and (min-width: 360px) {
    .tmp-container {
        padding: 0.5rem;
    }

    .tmp-modal .modal {
        max-width: 90%;
    }

    .tmp-form-input .fi-info .text textarea {
        height: 8rem;
    }

    .tmp-form-calendar .date-picker {
        padding: 0;
        border: none;
    }

    .tmp-form-calendar .date-picker-grid .date-picker-grid-body {
        gap: 2px;
    }

    .tmp-form-file .file-uploader .select-file span {
        font-size: 0.7rem;
        width: 80%;
    }

    .tmp-form-file .select-file>button {
        width: 70%;
    }

    .tmp-form-file .buttons button {
        padding: 0.5rem;
    }

    .tmp-form-file .file-uploader {
        padding: 0.5rem;
    }

    .tmp-form-file .description textarea {
        height: 6rem;
    }

    .tmp-form-file .file-uploader .summary {
        grid-template-columns: 4rem auto;
    }

    .tmp-form-file .file-list li {
        grid-template-columns: auto;
        grid-template-rows: 8rem auto;
        border-bottom: 2px gainsboro solid;
        border: none;
        padding: 0;
    }

    .tmp-chat-contact .contain {
        width: 90vw;
    }

    .tmp-banner .tmp-title h1 {
        font-size: 1.5rem;
    }

    .tmp-banner .tmp-title p {
        font-size: 0.8rem;
    }

    .tmp-title div>h2 {
        font-size: 1.5rem;
    }

    .tmp-title span {
        font-size: 0.8rem;
    }

    .tmp-card-services-category {
        grid-template-columns: auto;
        display: grid;
        grid-template-areas: "a" "b" "c" "d" "e";
    }
}

@media only screen and (max-width: 359px) and (min-width: 10px) {
    .tmp-container {
        padding: 0.5rem;
    }

    .tmp-modal .modal {
        max-width: 90%;
    }

    .tmp-chat-contact .contain {
        right: 0;
    }

    .tmp-chatbot .chatbot-option {
        font-size: 0.7rem;
        padding: 4px;
    }

    .tmp-chatbot .chatbot-options {
        gap: 0.5rem;
    }

    .tmp-chat-contact .content>.data>.info {
        gap: 0.5rem;
    }

    .tmp-chat-contact .content>.data>.info b {
        font-size: 0.8rem;
    }

    .tmp-chat-contact .header {
        padding: 4px;
    }

    .tmp-form-input .fi-info .text textarea {
        height: 5rem;
    }

    .tmp-form-calendar .date-picker {
        padding: 0;
        border: none;
    }

    .tmp-form-calendar .date-picker-grid .date-picker-grid-body {
        gap: 2px;
    }

    .tmp-form-file .file-uploader .select-file span {
        font-size: 0.7rem;
        width: 80%;
    }

    .tmp-form-file .select-file>button {
        width: 70%;
    }

    .tmp-form-file .buttons button {
        padding: 0.5rem;
    }

    .tmp-form-file .file-uploader {
        padding: 0.5rem;
    }

    .tmp-form-file .description textarea {
        height: 6rem;
    }

    .tmp-form-file .file-uploader .summary {
        grid-template-columns: 4rem auto;
    }

    .tmp-form-file .file-list li {
        grid-template-columns: auto;
        grid-template-rows: 8rem auto;
        border-bottom: 2px gainsboro solid;
        border: none;
        padding: 0;
    }

    .tmp-chat-contact .contain {
        width: 90vw;
    }

    .tmp-banner .tmp-title h1 {
        font-size: 1.5rem;
    }

    .tmp-banner .tmp-title p {
        font-size: 0.8rem;
    }

    .tmp-title div>h2 {
        font-size: 1.5rem;
    }

    .tmp-title span {
        font-size: 0.8rem;
    }

    .tmp-card-services-category {
        grid-template-columns: auto;
        display: grid;
        grid-template-areas: "a" "b" "c" "d" "e";
    }
}

@media only screen and (min-height: 1280px) {}

@media only screen and (max-height: 1279px) and (min-height: 1024px) {}

@media only screen and (max-height: 1023px) and (min-height: 768px) {}

@media only screen and (max-height: 767px) and (min-height: 480px) {}

@media only screen and (max-height: 479px) and (min-height: 360px) {
    .tmp-modal .modal-body {
        padding: 1rem;
        gap: 1rem;
        overflow: hidden;
        overflow-y: auto;
        max-height: 10rem;
        height: 100%;
    }

    .tmp-modal .modal-header {
        padding: 0.5rem;
    }

    .tmp-modal .modal-header .modal-icon>u {
        height: 4rem;
        width: 4rem;
        padding: 0.5rem;
    }
}

@media only screen and (max-height: 359px) and (min-height: 10px) {
    .tmp-modal .modal-body {
        padding: 1rem;
        gap: 1rem;
        overflow: hidden;
        overflow-y: scroll;
        max-height: 5rem;
        height: 100%;
    }

    .tmp-modal .modal-header {
        padding: 0.5rem;
    }

    .tmp-modal .modal-header .modal-icon>u {
        height: 4rem;
        width: 4rem;
        padding: 0.5rem;
    }
}

/*************************************************************************** DASHBOAR MENU FLOTANTE*/

@keyframes tmp_menu_container_slideIn {
    from {
        right: -300px;
        opacity: 0;
    }

    to {
        right: 1rem;
        opacity: 1;
    }
}

/* Animación de salida */
@keyframes tmp_menu_container_slideOut {
    from {
        right: 0;
        opacity: 1;
    }

    to {
        right: -300px;
        opacity: 0;
    }
}

.tmp-menu-container {
    position: fixed;
    top: 50%;
    right: -22rem;
    transform: translateY(-50%);
    width: 20rem;
    border-radius: 0.5rem 0 0 0.5rem;
    transition: right 0.5s ease-in-out;
    z-index: 190;
}

.tmp-menu-container.open {
    right: 1rem;
    animation: tmp_menu_container_slideIn 0.4s ease-in-out forwards;
    opacity: 1;
}

.tmp-menu-container.close {
    animation: tmp_menu_container_slideOut 0.4s ease-in-out forwards;
}

.tmp-menu-container .menu-btn-main {
    position: absolute;
    left: -5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c21);
    border: none;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 2rem;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, width 0.3s ease;
    height: 9rem;
}

.tmp-menu-container .menu-btn-main.open:hover {
    background: var(--c4);
}

.tmp-menu-container .menu-btn-main span {
    transform: rotate(-90deg);
    font-family: "f2";
    letter-spacing: 2px;
    width: 5rem;
    display: flex;
}

.tmp-menu-container .menu-btn-main u {
    margin-top: 0.5rem;
}

.tmp-menu-container .menu-btn-main u>div {
    background: white;
}

.tmp-menu-container .menu-btn-main.open {
    background: var(--c2);
}

.tmp-menu-container.open .menu-btn-main {
    left: -2.5rem;
    background: var(--c9);
}

.tmp-menu-container.open .menu-btn-main:hover {
    background: var(--c10);
}

.tmp-menu-container .menu-list-items {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    background: white;
    padding: 0.5rem;
    opacity: 0;
}

.tmp-menu-container.open .menu-list-items {
    opacity: 1;
}

.tmp-menu-container .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--c19);
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.4s ease, color 0.4s ease, transform 0.2s;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    transform: scale(0.95);
}

.tmp-menu-container .menu-item span {
    font-family: "f2";
    color: var(--c32);
}

.tmp-menu-container .menu-item:hover {
    background: var(--c29);
    color: var(--c21);
    transform: scale(1);
}

.tmp-menu-container .menu-item:hover span {
    color: var(--c1);
}

.tmp-menu-container .menu-item:hover i {
    color: var(--c1);
}

.tmp-menu-container .menu-item i {
    font-size: 1.2rem;
    color: var(--c32);
}

.tmp-menu-container .menu-item-link {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

/* === Submenús animados === */
.tmp-menu-container .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    opacity: 0;
}

.tmp-menu-container .submenu.open {
    max-height: 350px;
    opacity: 1;
}

.tmp-menu-container .icon {
    transition: transform 0.3s ease;
}

.tmp-menu-container .rotate {
    transform: rotate(90deg);
}

.tmp-menu-container .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease;
    opacity: 0;
    padding-left: 1rem;
    /* Espaciado para subniveles */
}

.tmp-menu-container .submenu.open {
    max-height: 500px;
    /* Permitir expansión */
    opacity: 1;
}

.tmp-menu-container .submenu .menu-item {
    background: rgb(255, 255, 255);
    margin-top: 5px;
    padding-left: 1rem;
}

.tmp-menu-container .submenu .submenu {
    padding-left: 1.5rem;
}

.tmp-menu-container .icon {
    transition: transform 0.3s ease;
}

.tmp-menu-container .submenu .menu-item:hover {
    background: gray;
}

.tmp-menu-container .submenu .menu-item:hover span {
    color: white;
}

.tmp-menu-container .menu-item-btn u {
    width: 1.5rem;
    height: 1.5rem;
    padding: 4px;
}

.tmp-menu-container .menu-item-btn u>div {
    background: var(--c1);
}

/* *******************************************************************FORMULARIO DE BUSQUEDA */

.tmp-search-select-input {
    width: 100%;
    width: 100%;
    border-radius: 8px;
    background: white;
    display: grid;
    grid-template-columns: auto 16rem 6rem;
    gap: 0;
    height: 3.5rem;
    position: relative;
    z-index: 10;
    border: solid var(--c31) 1px;
}

.tmp-search-select-input>div {
    z-index: 10;
}

.tmp-search-select-input .search-input {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

.tmp-search-select-input .search-option-select .icon,
.tmp-search-select-input .search-input .icon {
    width: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-search-select-input .search-option-select .icon u,
.tmp-search-select-input .search-input .icon u {
    width: 1.2rem;
    height: 1.2rem;
}

.tmp-search-select-input .search-option-select .icon u>div,
.tmp-search-select-input .search-input .icon u>div {
    background: var(--c5);
}

.tmp-search-select-input .search-input input {
    flex: 1;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
    height: 100%;
    border: none;
}

.tmp-search-select-input .search-input input:focus {
    border-color: var(--c3);
}

.tmp-search-select-input .btn-clear-input {
    background: transparent;
    border: none;
    color: var(--c5);
    cursor: pointer;
    transition: color 0.3s;
}

.tmp-search-select-input .btn-clear-input:hover {
    color: var(--c1);
}

.tmp-search-select-input .search-options {
    position: relative;
    z-index: 20;
}

.tmp-search-select-input .search-option-select {
    cursor: pointer;
    height: 100%;
    background: var(--c20);
    padding: 0 0.5rem;
    display: grid;
    grid-template-columns: 1.5rem auto;
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
    position: relative;
}

.tmp-search-select-input .search-option-select .icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-search-select-input .search-option-select span {
    color: var(--c5);
}

.tmp-search-select-input .search-option-list {
    display: none;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    /* border-top: 1px solid var(--c1); */
    background: white;
    position: absolute;
    top: 4.5rem;
}

.tmp-search-select-input .search-option-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tmp-search-select-input .search-option-list ul li {
    padding: 4px 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    min-height: 2.5rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.tmp-search-select-input .search-option-list ul li:hover {
    background-color: var(--c31);
}

.tmp-search-select-input .btn-clear-input,
.tmp-search-select-input .btn-clear-select {
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    width: 1.5rem;
    height: 1.5rem;
    padding: 4px;
    position: absolute;
    right: 0.5rem;
    display: none;
    border-radius: 50%;
    background: var(--c19);
    color: white;
    align-items: center;
    justify-content: center;
}

.tmp-search-select-input .btn-clear-input u>div,
.tmp-search-select-input .btn-clear-select u>div {
    background: white;
}

.tmp-search-select-input .btn-clear-input:hover,
.tmp-search-select-input .btn-clear-select:hover {
    background: var(--c10);
}

.tmp-search-select-input .search-buttons {
    text-align: right;
    width: 100%;
    height: 100%;
    display: flex;
}

.tmp-search-select-input .btn-action {
    background-color: var(--c7);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
}

.tmp-search-select-input .btn-action:hover {
    background-color: var(--c2);
}

.tmp-search-select-input .btn-action.loading {
    pointer-events: none;
    background-color: var(--c2);
}

.tmp-search-select-input .btn-action .spiner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.tmp-search-select-input .search-result-list {
    max-height: 250px;
    overflow-y: auto;
    position: absolute;
    top: 4.5rem;
    width: 100%;
    left: 0;
    background: white;
    border-radius: 0.5rem;
}

.tmp-search-select-input .search-result-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tmp-search-select-input .search-result-list ul li {
    border-bottom: 1px solid #eee;
}

.tmp-search-select-input .search-result-list ul li a {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
    flex-direction: row;
    gap: 0.5rem;
}

.tmp-search-select-input .search-result-list ul li a:hover {
    background-color: #f9f9f9;
    color: var(--c2);
}

.tmp-search-select-input .search-result-list ul li a u>div {
    background: gray;
}

.tmp-search-select-input .search-result-list,
.tmp-search-select-input .search-option-list {
    scrollbar-width: thin;
    scrollbar-color: #bbb white;
}

.tmp-search-select-input .search-result-list::-webkit-scrollbar,
.tmp-search-select-input .search-option-list::-webkit-scrollbar {
    width: 8px;
}

.tmp-search-select-input .search-result-list::-webkit-scrollbar-thumb,
.tmp-search-select-input .search-option-list::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 4px;
}

.tmp-search-select-input .search-result-list::-webkit-scrollbar-thumb:hover,
.tmp-search-select-input .search-option-list::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

.tmp-search-select-input .search-option-list ul li .text {
    font-family: "f2";
    color: var(--c1);
    font-size: 0.8rem;
    color: var(--c1);
}

.tmp-search-select-input .search-option-select.select {
    background: var(--c29);
}

.tmp-search-select-input .search-option-select.select span {
    color: var(--c1);
    font-family: "f2";
}

.tmp-search-select-input .search-option-select.select .icon u>div {
    background: var(--c1);
}

.tmp-search-select-input .search-option-list ul li.select {
    background-color: var(--c3);
    font-weight: bold;
}

.tmp-search-select-input .search-option-list ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tmp-search-select-input .search-option-list ul li u {
    width: 1rem;
    height: 1rem;
}

.tmp-search-select-input .search-option-list ul li u>div {
    background: var(--c1);
}

.tmp-search-select-input .search-result-list {
    background: white;
    padding: 1rem;
    box-shadow: rgba(153, 153, 153, 0.4) 0 -4px 10px;
}

.tmp-search-select-input .search-result-list .list-link {
    width: 100%;
    min-height: 2.5rem;
    background: white;
    border-bottom: solid 1px var(--c31);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1rem;
    gap: 1rem;
    z-index: 20;
}

.tmp-search-select-input .search-result-list .list-link u>div {
    background: gray;
}

.tmp-search-select-input .search-result-list .list-link span {
    color: gray;
}

.tmp-search-select-input .search-result-list .list-link:hover {
    background: var(--c31);
}

.tmp-search-select-input .search-result-list .list-link:hover span {
    font-family: "f3";
    color: var(--c1);
}

.tmp-search-select-input .search-result-list .list-link:hover u>div {
    background: var(--c1);
}

/* ********************************************************************************CALENDARIO */
.tmp-calendar-selected-buttos {
    position: relative;
    z-index: 0;
    font-size: 0.8rem;
    transition: border 0.3s, box-shadow 0.3s;
    width: 100%;
    max-width: 40rem;
}

/* Estados */
.tmp-calendar-selected-buttos.active {
    z-index: 50;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #005a9e;
}

.tmp-calendar-selected-buttos.error {
    border: 1px solid #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
}

/* Encabezado */
.tmp-calendar-selected-buttos:hover .calendar-display {
    background: var(--c20);
}

.tmp-calendar-selected-buttos .calendar-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--c19);
    height: 2.5rem;
    position: relative;
    z-index: 20;
    padding: 0 1rem;
    cursor: pointer;
    outline: none;
    border-radius: 4px;
}

.tmp-calendar-selected-buttos.selected .calendar-display {
    background: rgba(134, 248, 73, 0.2);
}

.tmp-calendar-selected-buttos .calendar-display u {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
}

.tmp-calendar-selected-buttos .calendar-display u>div {
    background: var(--c1);
    width: 100%;
    height: 100%;
}

.tmp-calendar-selected-buttos .calendar-display .selected-date {
    font-size: 0.8rem;
    color: black;
    transition: color 0.3s;
    font-family: "f2", sans-serif;
    letter-spacing: 1px;
}

.tmp-calendar-selected-buttos .calendar-display .selected-date:hover {
    color: #005a9e;
    text-shadow: 1px 1px 3px rgba(0, 90, 158, 0.3);
}

.tmp-calendar-selected-buttos.selected .calendar-display .selected-date {
    font-family: "f3";
    font-size: 0.9rem;
    color: rgb(0, 99, 0);
}

.tmp-calendar-selected-buttos.selected .calendar-display u>div {
    background: rgb(0, 99, 0);
}

.tmp-calendar-selected-buttos .calendar-body {
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 100%;
    overflow: hidden;
    background: #ffffff;
    padding: 1rem;
    transform: translateZ(0);
    will-change: transform, opacity;
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: absolute;
    top: 2.6rem;
    left: 0;
    right: 0;
    z-index: 50;
}

.tmp-calendar-selected-buttos.visible .calendar-body {
    display: flex;
}

.tmp-calendar-selected-buttos .calendar-body:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Navegación */
.tmp-calendar-selected-buttos .calendar-navigation {
    text-align: center;
}

.tmp-calendar-selected-buttos .navigation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
}

.tmp-calendar-selected-buttos .navigation-controls button {
    border: none;
    font-size: 1rem;
    color: #005a9e;
    cursor: pointer;
    transition: color 0.3s, transform 0.2s;
    background: var(--c20, transparent);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.tmp-calendar-selected-buttos .navigation-controls button:hover:not(:disabled) {
    color: #003b6f;
    transform: scale(1.1);
}

.tmp-calendar-selected-buttos .navigation-controls button:disabled {
    color: #ccc;
    cursor: not-allowed;
    transform: none;
}

.tmp-calendar-selected-buttos .current-month-label {
    font-size: 1rem;
    color: black;
    background: linear-gradient(90deg, #005a9e, #003b6f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "f3", sans-serif;
}

/* Cuadrícula del Calendario */
.tmp-calendar-selected-buttos .calendar-grid {
    display: flex;
    flex-direction: column;
}

.tmp-calendar-selected-buttos .calendar-grid .grid-header,
.tmp-calendar-selected-buttos .calendar-grid .grid-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.tmp-calendar-selected-buttos .calendar-grid .day-label {
    font-size: 0.875rem;
    font-weight: bold;
    color: #005a9e;
    text-align: center;
    padding-bottom: 5px;
}

.tmp-calendar-selected-buttos .calendar-grid .day-cell {
    text-align: center;
    border-radius: 4px;
    background-color: #f8faff;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s,
        transform 0.2s;
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmp-calendar-selected-buttos .calendar-grid .day-cell:hover:not(.day-disabled) {
    background-color: #e0f0ff;
    box-shadow: 0 3px 8px rgba(0, 90, 158, 0.2);
    border-color: #005a9e;
    transform: translateY(-2px);
    color: black;
}

.tmp-calendar-selected-buttos .calendar-grid .day-disabled {
    background-color: #f2f2f2;
    color: #999;
    cursor: not-allowed;
}

.tmp-calendar-selected-buttos .calendar-grid .selected-date {
    background-color: #005a9e;
    color: #fff;
    border: 2px solid #003b6f;
    animation: fade-in 0.4s ease-in-out;
}

.tmp-calendar-selected-buttos .calendar-grid .special-date {
    background-color: #ffd700;
    color: #333;
    border: 1px solid #e6b800;
}

/* Selección de Hora */
.tmp-calendar-selected-buttos .calendar-time-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.tmp-calendar-selected-buttos .time-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.tmp-calendar-selected-buttos .time-control {
    gap: 0.5rem;
    width: 100%;
    display: grid;
    grid-template-columns: 2.5rem auto 2.5rem;
}

.tmp-calendar-selected-buttos .input-hour,
.tmp-calendar-selected-buttos .input-minute {
    width: 100%;
    padding: 0;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.8rem;
    background-color: #f9f9f9;
    cursor: not-allowed;
    height: 2rem;
}

.tmp-calendar-selected-buttos .time-control button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tmp-calendar-selected-buttos .time-control button:hover:not(:disabled) {
    background-color: #0056b3;
}

.tmp-calendar-selected-buttos .time-control button:active:not(:disabled) {
    background-color: #004494;
}

.tmp-calendar-selected-buttos .time-control button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.tmp-calendar-selected-buttos .time-picker label {
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: #555;
}

/* Botones de Acción */
.tmp-calendar-selected-buttos .calendar-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.tmp-calendar-selected-buttos .calendar-actions button {
    background-color: #005a9e;
    height: 2rem;
    min-width: 6rem;
    color: #fff;
    padding: 0.5rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.tmp-calendar-selected-buttos .calendar-actions button:hover:not(:disabled) {
    background-color: #003b6f;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.tmp-calendar-selected-buttos .calendar-actions button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Animaciones */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsividad */
@media (max-width: 480px) {
    .tmp-calendar-selected-buttos {
        max-width: 100%;
        padding: 15px;
    }

    .tmp-calendar-selected-buttos .calendar-grid .day-cell {
        height: 2rem;
    }

    .tmp-calendar-selected-buttos .calendar-actions button {
        padding: 6px 15px;
        font-size: 0.9rem;
    }

    .tmp-calendar-selected-buttos .calendar-time-selection {
        grid-template-columns: 1fr;
    }

    .tmp-calendar-selected-buttos .time-control {
        justify-content: space-between;
    }
}

/* Estados Adicionales */
.tmp-calendar-selected-buttos.error .calendar-display .selected-date {
    color: #e74c3c;
}

.tmp-calendar-selected-buttos.success .calendar-display .selected-date {
    color: var(--c1);
    font-family: "f3";
    font-size: 0.9rem;
}

.tmp-calendar-selected-buttos.active .calendar-body {
    display: flex;
}

.tmp-calendar-selected-buttos.success {
    border: 1px solid #2ecc71;
    background: rgba(134, 248, 73, 0.5);
}

.tmp-calendar-selected-buttos.success .calendar-display u>div {
    background: var(--c23);
}

.tmp-calendar-selected-buttos.success .calendar-display .selected-date {
    color: var(--c23);
}

@media only screen and (max-width: 768px) {
    #navbar .dropdown-toggle {
        width: 2rem;
        height: 2rem;
    }

    #navbar .dropdown-toggle .fa-solid,
    #navbar .dropdown-toggle .fas {
        font-size: 1rem;
    }

    #navbar .dropdown-menu {
        right: 0rem;
        min-width: 15rem;
        max-width: 100%;
        width: 10rem;
    }

    #navbar .navbar-right {
        gap: 0;
    }

    #navbar .dropdown .badge {
        top: -5px;
        right: -5px;
    }

    .tmp-menu-container .menu-btn-main {
        left: 0;
    }
}

@media only screen and (max-width: 480px) {
    .tmp-menu-container {
        width: 80%;
    }

    .tmp-menu-container .menu-btn-main {
        left: -4rem;
    }
}