*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* ── Impobiomedical Palette ─────────────────────────────── */
    --ink: #f8fafc;           /* Fondo ultra oscuro (Noche) */
    --bark: #f1f5f9;          /* Fondo oscuro navy teal */
    --ember: #e2e8f0;         /* Fondo medio teal */
    --copper: #10757e;        /* Teal principal (color logo oscuro) */
    --honey: #159ba7;         /* Teal claro brillante */
    --amber: #2dbecb;         /* Highlight cyan */
    --gilt: #9fa5a9;          /* Gris corporativo (del texto BIO) */
    --parchment: #ffffff;     /* Fondo claro (Día) */
    --white: #1e293b;
    --danger: #e03c3c;
    --info: #3a9fd5;
    --success: #22c55e;

    /* ── Aliases actualizados (Biomédicos) ─────────── */
    --brown-deep: var(--ink);
    --brown-rich: var(--bark);
    --brown-mid: var(--copper);
    --brown-warm: var(--honey);
    --brown-light: #6acacc;
    --gold: var(--copper);          /* Reemplazo de dorado por teal */
    --gold-light: var(--amber);     /* Reemplazo de dorado claro por cyan */
    --cream: var(--parchment);
    --text-dark: #1e293b;
    --text-mid: #334155;
    --text-soft: #64748b;

    /* ── Glass ─────────────────────────────────────────────── */
    --glass-bg: rgba(16, 117, 126, 0.04);
    --glass-bg-light: rgba(16, 117, 126, 0.07);
    --glass-bg-medium: rgba(16, 117, 126, 0.11);
    --glass-border: rgba(45, 190, 203, 0.14);
    --glass-border-medium: rgba(45, 190, 203, 0.22);
    --glass-border-strong: rgba(45, 190, 203, 0.32);

    /* ── Shadows ───────────────────────────────────────────── */
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 28px 56px rgba(0, 0, 0, 0.6);
    --shadow-gold: 0 0 28px rgba(45, 212, 212, 0.2);

    /* ── Typography ────────────────────────────────────────── */
    --font-main: 'Inter', sans-serif;
    --font-display: 'Inter', sans-serif;

    /* ── Transitions ───────────────────────────────────────── */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.18s ease;
    --transition-normal: 0.28s ease;
    --transition-slow: 0.5s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--ink);
    color: var(--white);
    line-height: 1.65;
}

body.login-page {
    overflow: hidden;
    height: 100vh;
}

/* ════════════════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════════════════ */
@keyframes floatBlob {
    0% {
        transform: translate(0, 0) scale(1)
    }

    100% {
        transform: translate(40px, 30px) scale(1.08)
    }
}

@keyframes ringSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes spinRing {
    to {
        transform: rotate(360deg)
    }
}

@keyframes haloPulse {

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

    50% {
        transform: scale(1.06);
        opacity: .9
    }
}

@keyframes dashSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes logoPulse {

    0%,
    100% {
        box-shadow: 0 0 24px rgba(45, 190, 203, .5), 0 0 50px rgba(16, 117, 126, .3)
    }

    50% {
        box-shadow: 0 0 44px rgba(45, 190, 203, .75), 0 0 90px rgba(16, 117, 126, .55)
    }
}

@keyframes textShine {
    to {
        background-position: 200% center
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes logoReveal {
    from {
        opacity: 0;
        transform: scale(.78) translateY(-10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(44px) scale(.96)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg)
    }

    100% {
        transform: translateX(100%) rotate(45deg)
    }
}

@keyframes shimmer {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(100%)
    }
}

@keyframes spinLoad {
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulseText {

    0%,
    100% {
        opacity: .4
    }

    50% {
        opacity: 1
    }
}

@keyframes errorShine {
    0% {
        left: -100%
    }

    100% {
        left: 100%
    }
}

@keyframes shake {

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

    25% {
        transform: translateX(-7px)
    }

    75% {
        transform: translateX(7px)
    }
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(28px)
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

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

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0
    }
}

/* ════════════════════════════════════════════════════════════
   FONDO — canvas, grain, cursor, loading
════════════════════════════════════════════════════════════ */
#particle-canvas {
    position: fixed; left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.noise-overlay {
    position: fixed; left: 0;
    inset: 0;
    opacity: .032;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#cursor {
    position: fixed; left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width .15s, height .15s, background .15s, transform .1s;
}

#cursor-ring {
    position: fixed; left: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(45, 190, 203, .55);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: left .09s linear, top .09s linear;
}

#cursor.clicked {
    transform: translate(-50%, -50%) scale(.7);
    background: var(--brown-warm);
}

.loading-overlay {
    position: fixed; left: 0;
    inset: 0;
    background: rgba(0, 0, 0, .95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    flex-direction: column;
    backdrop-filter: blur(10px);
}

.loading-overlay.active {
    display: flex;
}

.loader {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--gold);
    border-right-color: var(--brown-warm);
    animation: spinLoad 1s linear infinite;
    position: relative;
}

.loader::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--brown-light);
    animation: spinLoad 2s linear infinite reverse;
}

.loading-text {
    color: var(--gold-light);
    margin-top: 20px;
    font-size: 1.2rem;
    letter-spacing: 3px;
    animation: pulseText 1.5s ease-in-out infinite;
    font-family: var(--font-display);
}

/* ════════════════════════════════════════════════════════════
   LOGIN
════════════════════════════════════════════════════════════ */
.login-page {
    margin-top: 2px;
    min-height: 100vh;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #000000 25%);
    background-size: 400% 400%;
}

.card-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    width: min(920px, 96vw);
    min-height: 430px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, .5),
        0 0 0 1px rgba(255, 255, 255, .1) inset,
        0 0 100px rgba(45, 190, 203, .2);
    animation: cardReveal .9s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-style: preserve-3d;
}

.card-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 180%;
    height: 180%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, .1) 50%, transparent 70%);
    transform: rotate(45deg);
    animation: shine 6s infinite;
    pointer-events: none;
    z-index: 100;
}

.panel-left {
    flex: 1.15;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(20px);
    padding: 46px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(45, 190, 203, .2);
}

.panel-left::before {
    content: '';
    position: absolute;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 117, 126, .25) 0%, transparent 68%);
    bottom: -95px;
    right: -95px;
    animation: floatBlob 11s ease-in-out infinite alternate;
}

.panel-left::after {
    content: '';
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 190, 203, .15) 0%, transparent 68%);
    top: -55px;
    left: -55px;
    animation: floatBlob 14s ease-in-out infinite alternate-reverse;
}

.acc-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(45, 190, 203, .2);
    z-index: 1;
    animation: ringSpin linear infinite;
}

.acc-ring-1 {
    width: 240px;
    height: 240px;
    bottom: 52px;
    right: 22px;
    animation-duration: 32s;
}

.acc-ring-2 {
    width: 170px;
    height: 170px;
    bottom: 87px;
    right: 57px;
    border-color: rgba(45, 190, 203, .1);
    animation-duration: 22s;
    animation-direction: reverse;
}

.panel-brand {
    position: relative;
    z-index: 2;
}

.brand-eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideInLeft .7s .3s both;
}

.brand-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.panel-brand h1 {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.08;
    color: var(--white);
    margin-bottom: 22px;
    animation: slideInLeft .7s .45s both;
}

.panel-brand h1 span {
    color: var(--gold);
    display: block;
}

.services {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    animation: slideInLeft .7s .7s both;
}

.svc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 13px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid transparent;
    transition: border-color .3s, background .3s;
}

.svc:hover {
    border-color: var(--brown-warm);
    background: rgba(25, 155, 167, .07);
}

.svc-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(25, 155, 167, .1);
    border: 1px solid rgba(25, 155, 167, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svc-icon i {
    font-size: 12px;
    color: var(--gold);
}

.svc-text {
    font-size: 12px;
    color: var(--white);
    line-height: 1.35;
}

.svc-text strong {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    margin-bottom: 2px;
}

.panel-footer {
    position: relative;
    z-index: 2;
    animation: slideInLeft .7s .9s both;
}

.footer-divider {
    width: 42px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin-bottom: 12px;
}

.panel-footer p {
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .5px;
}

.panel-right {
    flex: 1;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(20px);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.panel-right::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 117, 126, .15) 0%, transparent 70%);
    top: -55px;
    right: -55px;
    pointer-events: none;
}

.panel-right::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 190, 203, .1) 0%, transparent 70%);
    bottom: -35px;
    left: -35px;
    pointer-events: none;
}

.logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
    animation: logoReveal .8s .1s both;
}

.logo-ring-wrap {
    position: relative;
    width: 92px;
    height: 92px;
    margin-bottom: 16px;
}

.logo-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--gold);
    border-right-color: var(--brown-warm);
    animation: spinRing 3s linear infinite;
}

.logo-ring:nth-child(2) {
    width: 115%;
    height: 115%;
    top: -7.5%;
    left: -7.5%;
    border-top-color: var(--brown-light);
    border-right-color: var(--gold);
    animation-duration: 4s;
    animation-direction: reverse;
}

.logo-ring:nth-child(3) {
    width: 130%;
    height: 130%;
    top: -15%;
    left: -15%;
    border-top-color: var(--brown-warm);
    border-right-color: var(--brown-light);
    animation-duration: 5s;
}

.logo-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(45, 190, 203, .35);
    animation: haloPulse 2.8s ease-in-out infinite;
}

.logo-halo:nth-child(5) {
    inset: -8px;
    border-color: rgba(45, 190, 203, .2);
    animation-delay: .4s;
    animation-duration: 3.2s;
}

.logo-halo:nth-child(6) {
    inset: -16px;
    border-color: rgba(45, 190, 203, .1);
    animation-delay: .8s;
    animation-duration: 3.8s;
}

.logo-dash {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px dashed rgba(45, 190, 203, .32);
    animation: dashSpin 14s linear infinite;
}

.logo-circle {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10;
    border: 2.5px solid var(--gold);
    box-shadow: 0 0 30px rgba(45, 190, 203, .6), 0 0 60px rgba(16, 117, 126, .4);
    animation: logoPulse 2s ease-in-out infinite;
    transition: all .3s ease;
}

.logo-circle:hover {
    transform: scale(1.07);
}

.logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    margin-bottom: -8px;
    animation: textShine 3s linear infinite;
    background: linear-gradient(to right, var(--white), var(--gold-light), var(--white));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(45, 190, 203, .5);
}

.login-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    text-align: center;
    margin-top: 8px;
    letter-spacing: 1px;
}

/* ════════════════════════════════════════════════════════════
   FORMULARIO LOGIN
════════════════════════════════════════════════════════════ */
.form-body {
    position: relative;
    z-index: 2;
}

.fgroup {
    margin-bottom: 20px;
    animation: fadeUp .6s both;
}

.fgroup:nth-child(1) {
    animation-delay: .3s;
}

.fgroup:nth-child(2) {
    animation-delay: .44s;
}

.fgroup label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 8px;
}

.fgroup label i {
    font-size: 12px;
    color: var(--gold);
}

.iw {
    position: relative;
}

.iw .bi-left {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: rgba(255, 255, 255, .5);
    pointer-events: none;
    transition: all .3s ease;
}

.iw:focus-within .bi-left {
    color: var(--gold);
}

.iw input {
    width: 100%;
    padding: 14px 14px 15px 45px;
    background: rgba(255, 255, 255, .05);
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--white);
    transition: all .3s ease;
}

.iw input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 20px rgba(45, 190, 203, .2), inset 0 0 20px rgba(45, 190, 203, .05);
    transform: translateY(-2px);
}

.iw input::placeholder {
    color: rgba(255, 255, 255, .4);
}

.iw::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    right: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--brown-warm));
    border-radius: 2px;
    transition: left .3s, right .3s;
    pointer-events: none;
}

.iw:focus-within::after {
    left: 0;
    right: 0;
}

.eye-btn {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 16px;
    color: rgba(255, 255, 255, .5);
    padding: 4px;
    transition: all .2s ease;
    cursor: pointer;
}

.eye-btn:hover {
    color: var(--gold);
    transform: translateY(-50%) scale(1.1);
}

.error-box {
    background: rgba(239, 68, 68, .2);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #fecaca;
    font-size: .9rem;
    padding: 12px 15px;
    border-radius: 12px;
    margin-top: 15px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.error-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    animation: errorShine 2s infinite;
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, rgba(45, 190, 203, .9), rgba(16, 117, 126, .9));
    border: none;
    border-radius: 12px;
    color: var(--white);
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .2) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    animation: fadeUp .6s .68s both;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 0 30px rgba(45, 190, 203, .4);
}

.btn-login:active {
    transform: translateY(-1px);
}

.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform .45s;
}

.btn-login:hover::before {
    transform: translateX(100%);
}

.btn-login .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    transform: scale(0);
    animation: rippleEffect .6s ease-out;
    pointer-events: none;
}

.btn-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.particle-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    opacity: 0;
}

.btn-login.loading {
    pointer-events: none;
}

.btn-login.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    animation: shimmer .9s infinite;
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR / MENÚ LATERAL
════════════════════════════════════════════════════════════ */
.menu-lateral {
    width: 140px;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border-medium);
    position: fixed; left: 0;
    height: 100vh;
    z-index: 1000;
    text-align: center;
    padding-top: 30px;
    transition: margin-left .4s cubic-bezier(.4, 0, .2, 1);
}

.menu-lateral.oculto {
    margin-left: -140px;
}

.logo-empresa img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 30px;
    border: 2px solid rgba(45, 190, 203, .3);
    box-shadow: 0 0 30px rgba(45, 190, 203, .2);
}

.lista-menu-lateral {
    list-style: none;
}

.lista-menu-lateral li {
    margin: 30px 0;
}

.lista-menu-lateral a {
    color: var(--white);
    font-size: 22px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(45, 190, 203, .1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    text-decoration: none;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

.lista-menu-lateral a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(45, 190, 203, .2), transparent);
    transition: left .5s;
}

.lista-menu-lateral a:hover::before {
    left: 100%;
}

.lista-menu-lateral a:hover {
    background: rgba(45, 190, 203, .15);
    border-color: rgba(45, 190, 203, .3);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(45, 190, 203, .2);
}

.lista-menu-lateral a i {
    color: var(--gold);
    transition: all .3s;
}

.lista-menu-lateral a:hover i {
    color: var(--gold-light);
}

.panel-flotante {
    position: fixed; left: 0;
    left: 130px;
    top: 0;
    width: 320px;
    height: 100vh;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(30px);
    border-right: 1px solid var(--glass-border);
    box-shadow: 12px 0 40px rgba(0, 0, 0, .3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-30px);
    transition: all .4s ease;
    padding: 40px 30px;
    overflow-y: auto;
}

.panel-flotante.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.submenu {
    list-style: none;
}

.submenu h3 {
    color: var(--gold);
    font-size: 14px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 12px;
}

.submenu li {
    margin-bottom: 8px;
}

.submenu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .3s ease;
    border-radius: 10px;
    border: 1px solid transparent;
}

.submenu a:hover {
    background: rgba(45, 190, 203, .1);
    border-color: rgba(45, 190, 203, .2);
    color: var(--gold-light);
    padding-left: 25px;
}

.submenu a i {
    color: var(--gold);
    font-size: 16px;
    width: 24px;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════
   CONTENIDO PRINCIPAL / DASHBOARD
════════════════════════════════════════════════════════════ */
.contenido-principal {
    margin-left: 120px;
    padding: 40px;
    min-height: 100vh;
    position: relative;
    z-index: 10;
    transition: margin-left .4s cubic-bezier(.4, 0, .2, 1);
}

.contenido-principal.completo {
    margin-left: 0;
}

.cabecera-superior {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--glass-border-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cabecera-bienvenida {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cabecera-bienvenida h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, var(--white), var(--gold-light));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cabecera-bienvenida .rol-admin,
.cabecera-bienvenida .rol-usuario {
    font-size: 10px;
    padding: 5px 12px;
}

.boton-menu-ocultar {
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border-medium);
    color: var(--white);
    padding: 14px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all .3s ease;
    text-transform: uppercase;
}

.boton-menu-ocultar:hover {
    background: rgba(45, 190, 203, .15);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(45, 190, 203, .15);
}

.boton-menu-ocultar i {
    font-size: 20px;
    color: var(--gold);
    transition: transform .3s;
}

.boton-menu-ocultar:hover i {
    transform: rotate(180deg);
}

.rol-admin,
.rol-usuario {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 50px;
    width: fit-content;
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.rol-admin {
    background: linear-gradient(135deg, rgba(45, 190, 203, .2), rgba(16, 117, 126, .1));
    border: 1px solid rgba(45, 190, 203, .3);
    color: var(--gold-light);
    box-shadow: 0 0 20px rgba(45, 190, 203, .1);
}

.rol-usuario {
    background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--cream);
}

/* ════════════════════════════════════════════════════════════
   TARJETAS DASHBOARD
════════════════════════════════════════════════════════════ */
.contenedor-tarjetas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tarjeta-dashboard {
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow-md);
    animation: slideUp .6s ease both;
}

.tarjeta-dashboard:nth-child(1) {
    animation-delay: .1s;
}

.tarjeta-dashboard:nth-child(2) {
    animation-delay: .2s;
}

.tarjeta-dashboard:nth-child(3) {
    animation-delay: .3s;
}

.tarjeta-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
    transition: left .7s;
}

.tarjeta-dashboard:hover::before {
    left: 100%;
}

.tarjeta-dashboard:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
    border-color: rgba(45, 190, 203, .3);
}

.numero-principal {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0;
    animation: countUp 1s ease forwards;
    animation-delay: .5s;
}

.tarjeta-dashboard:nth-child(1) .numero-principal {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tarjeta-dashboard:nth-child(2) .numero-principal {
    background: linear-gradient(135deg, var(--brown-light), var(--gold));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tarjeta-dashboard:nth-child(3) .numero-principal {
    background: linear-gradient(135deg, var(--brown-warm), var(--brown-light));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.titulo-tarjeta {
    font-size: 14px;
    color: rgba(255, 255, 255, .6);
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.icono-tarjeta {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all .3s ease;
}

.tarjeta-dashboard:hover .icono-tarjeta {
    transform: scale(1.1) rotate(5deg);
}

.icono-tarjeta.administradores {
    background: linear-gradient(135deg, rgba(45, 190, 203, .25), rgba(45, 190, 203, .05));
    color: var(--gold);
    border: 1px solid rgba(45, 190, 203, .2);
    box-shadow: 0 8px 32px rgba(45, 190, 203, .15);
}

.icono-tarjeta.usuarios {
    background: linear-gradient(135deg, rgba(232, 196, 154, .25), rgba(232, 196, 154, .05));
    color: var(--brown-light);
    border: 1px solid rgba(232, 196, 154, .2);
    box-shadow: 0 8px 32px rgba(232, 196, 154, .15);
}

.icono-tarjeta.cotizaciones {
    background: linear-gradient(135deg, rgba(16, 117, 126, .25), rgba(16, 117, 126, .05));
    color: var(--brown-warm);
    border: 1px solid rgba(16, 117, 126, .2);
    box-shadow: 0 8px 32px rgba(16, 117, 126, .15);
}

/* ════════════════════════════════════════════════════════════
   BOTONES REUTILIZABLES
════════════════════════════════════════════════════════════ */
.boton-primario {
    background: linear-gradient(135deg, rgba(45, 190, 203, .9), rgba(16, 117, 126, .9));
    border: none;
    color: var(--white);
    padding: 12px 20px;
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .2) inset;
}

.boton-primario::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform .45s;
}

.boton-primario:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 0 30px rgba(45, 190, 203, .4);
}

.boton-primario:hover::before {
    transform: translateX(100%);
}

.boton-primario:active {
    transform: translateY(-1px);
}

.boton-limpiar,
.boton-secundario {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .8);
    padding: 10px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.boton-limpiar:hover,
.boton-secundario:hover {
    background: rgba(231, 76, 60, .15);
    border-color: rgba(231, 76, 60, .4);
    color: #fecaca;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(231, 76, 60, .15);
}

.acciones-tabla {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.boton-editar,
.boton-generar-pdf {
    background: rgba(52, 152, 219, .15);
    border: 1px solid rgba(52, 152, 219, .3);
    color: #85c1e9;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.boton-editar::before,
.boton-generar-pdf::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    transition: left .5s;
}

.boton-editar:hover,
.boton-generar-pdf:hover {
    background: rgba(52, 152, 219, .25);
    border-color: rgba(52, 152, 219, .5);
    color: #aed6f1;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, .2);
}

.boton-editar:hover::before,
.boton-generar-pdf:hover::before {
    left: 100%;
}

.boton-eliminar {
    background: rgba(231, 76, 60, .15);
    border: 1px solid rgba(231, 76, 60, .3);
    color: #f5b7b1;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.boton-eliminar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    transition: left .5s;
}

.boton-eliminar:hover {
    background: rgba(231, 76, 60, .25);
    border-color: rgba(231, 76, 60, .5);
    color: #fadbd8;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(231, 76, 60, .2);
}

.boton-eliminar:hover::before {
    left: 100%;
}

/* ════════════════════════════════════════════════════════════
   TABLAS
════════════════════════════════════════════════════════════ */
.tabla-contenedor {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.tabla-datos {
    width: 100%;
    border-collapse: collapse;
}

.tabla-datos thead {
    background: rgba(45, 190, 203, .1);
    border-bottom: 1px solid var(--glass-border);
}

.tabla-datos th {
    padding: 20px;
    text-align: left;
    font-weight: 600;
    color: var(--gold-light);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

.tabla-datos tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    transition: background .22s;
}

.tabla-datos tbody tr:hover {
    background: rgba(45, 190, 203, .05);
}

.tabla-datos td {
    padding: 18px;
    color: rgb(255, 255, 255);
}

/* ════════════════════════════════════════════════════════════
   FORMULARIOS GLOBALES
════════════════════════════════════════════════════════════ */
.formulario-contenedor {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.formulario .grupo-campo {
    margin-bottom: 20px;
}

.formulario label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgb(255, 255, 255);
}

.formulario input,
.formulario select,
.formulario textarea {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, .1);
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--white);
    transition: all .3s ease;
}

.formulario select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23D4A853' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 45px;
}

.formulario select option,
.seleccion-producto .producto-existente option {
    background: #000000;
    color: #ffffff;
    padding: 12px;
    font-size: 14px;
}

.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 20px rgba(45, 190, 203, .1);
}

/* Modal */
.modal {
    display: none;
    position: fixed; left: 0;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(8px);
    animation: fadeIn .25s ease both;
}

.modal-contenido {
    background: linear-gradient(145deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .05) 100%);
    backdrop-filter: blur(40px);
    border: 1px solid var(--glass-border-medium);
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin: 4% auto;
    padding: 48px 44px;
    border-radius: 28px;
    width: 90%;
    max-width: 580px;
    position: relative;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 60px rgba(45, 190, 203, .08);
    animation: cardReveal .35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal-contenido::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    border-radius: 2px;
}

.modal-contenido::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(45, 190, 203, .12) 0%, transparent 40%, transparent 60%, rgba(16, 117, 126, .06) 100%);
    pointer-events: none;
    z-index: -1;
}

.modal-contenido h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border-medium);
    background: linear-gradient(135deg, var(--white), var(--gold-light));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-contenido .grupo-campo input[type="text"],
.grupo-campo input[type="date"] {
    width: 100%;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 5px;
    font-family: var(--font-main);
    font-size: 13px;
    color: var(--brown-deep);
    transition: all .3s ease;
}

.cerrar {
    color: rgba(255, 255, 255, .5);
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    transition: all .3s ease;
    line-height: 1;
}

.cerrar:hover {
    background: rgba(231, 76, 60, .2);
    border-color: rgba(231, 76, 60, .4);
    color: #fecaca;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(231, 76, 60, .2);
}

.grupo-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.grupo-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border-medium);
}

/* Búsqueda */
.barra-busqueda {
    margin-bottom: 30px;
}

.formulario-busqueda {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.formulario-busqueda input[type="text"] {
    flex: 1;
    min-width: 250px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, .08);
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--white);
    transition: all .3s ease;
}

.seleccion-producto .formulario .producto-existente {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23D4A853' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 45px;
}

.seleccion-producto .producto-existente {
    width: 22%;
    padding: 13px;
    background: rgba(255, 255, 255, .1);
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--white);
    transition: all .3s ease;
}

/* ════════════════════════════════════════════════════════════
   PANEL USUARIO — TAREAS
════════════════════════════════════════════════════════════ */
.servicios-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
    animation: fadeIn .8s ease both;
}

.svc-tarea {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border-strong);
    transition: all var(--transition-normal);
}

.svc-tarea:hover {
    background: var(--glass-bg-medium);
    border-color: var(--gold);
    box-shadow: var(--shadow-sm), var(--shadow-gold);
}

.svc-tarea-contenido {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.svc-tarea .svc-icon {
    background: rgba(45, 190, 203, .15);
    color: var(--gold);
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-tarea .svc-text {
    min-width: 0;
    flex: 1;
}

.svc-tarea .svc-text strong {
    color: var(--gold-light);
    font-family: var(--font-display);
    letter-spacing: .5px;
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
}

.svc-tarea .svc-text span {
    color: var(--white);
    font-size: .8rem;
    opacity: .9;
    display: block;
}

.svc-tarea .boton-primario {
    padding: 8px 14px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

.tareas-vacias {
    background: rgba(45, 190, 203, .05);
    border: 1px dashed var(--gold);
    color: var(--gold-light);
    padding: 30px 20px;
    text-align: center;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.tareas-vacias i {
    font-size: 2rem;
    opacity: .6;
}

.tareas-vacias p {
    font-size: .95rem;
    letter-spacing: 1px;
}

.panel-dos-columnas {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 30px;
    margin-top: 0;
    align-items: start;
}

.columna-izquierda {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

.columna-derecha {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
}

.columna-derecha .contenedor-usuario {
    overflow: visible;
}

.columna-derecha .usuario-principal {
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--glass-border-medium);
    border-radius: 24px;
    padding: 24px;
    overflow: visible;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.columna-derecha .usuario-principal-nombre h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--white), var(--gold-light));
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.columna-derecha .login-sub {
    text-align: left;
    margin-top: 0;
    font-size: 12px;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .grupo-fila {
        grid-template-columns: 1fr;
    }

    .panel-right {
        padding: 30px 20px;
    }

    .formulario-contenedor {
        padding: 25px;
    }

    .tabla-datos th,
    .tabla-datos td {
        padding: 12px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .menu-lateral {
        margin-left: -120px;
    }

    .menu-lateral.visible {
        margin-left: 0;
    }

    .contenido-principal {
        margin-left: 0 !important;
        padding: 20px;
    }

    .panel-flotante {
        left: 120px;
        width: 260px;
    }

    .card-wrapper {
        flex-direction: column;
        min-height: auto;
    }

    .panel-left {
        display: none;
    }

    .panel-right {
        padding: 40px 30px;
    }

    .numero-principal {
        font-size: 40px;
    }

    .contenedor-tarjetas {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .panel-dos-columnas {
        grid-template-columns: 1fr;
    }

    .contenedor-tarjetas {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════
   BOTÓN MODO DÍA / NOCHE
════════════════════════════════════════════════════════════ */






















/* ════════════════════════════════════════════════════════════
   TRANSICIÓN GLOBAL AL CAMBIAR MODO
════════════════════════════════════════════════════════════ */
body,
body * {
    transition-property: background-color, border-color, color, box-shadow, opacity;
    transition-duration: .35s;
    transition-timing-function: ease;
}

/* ════════════════════════════════════════════════════════════
   MODO DÍA — "Papel Tostado"
════════════════════════════════════════════════════════════ */








/* Sidebar modo día */






















/* Cabecera modo día */


/* ── Título de bienvenida del panel ───────────────────────────────────────── */
.bienvenida-titulo {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    background: linear-gradient(135deg, var(--white), var(--gold-light));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}















/* Tarjetas modo día */






















/* Botones modo día */
















/* Tablas modo día */












/* Formularios modo día */












/* Modal modo día */














/* Búsqueda modo día */






/* Panel tareas modo día */


















/* Error box modo día */


/* Scrollbar modo día */








/* ════════════════════════════════════════════════════════════
   CORRECCIONES MODO DÍA - LOGIN PAGE
════════════════════════════════════════════════════════════ */

/* Panel izquierdo en modo día - fondo más claro y texto visible */






/* Título principal en panel izquierdo */




/* Eyebrow/Sistema de Gestión */




/* Servicios - cajas con fondo visible */












/* Footer panel izquierdo */




/* Anillos decorativos */




/* Panel derecho - fondo más claro */






/* Título Iniciar Sesión */




/* Anillos del logo */
















/* ════════════════════════════════════════════════════════════
   CAMPOS DE FORMULARIO EN MODO DÍA - LOGIN
════════════════════════════════════════════════════════════ */

/* Labels de los campos */




/* Contenedor de input */


/* Icono izquierdo del input */




/* Inputs de usuario y contraseña */




/* Línea decorativa inferior del input */


/* Botón del ojo (mostrar contraseña) */




/* Botón de iniciar sesión - estilo dorado/café */




/* Caja de error */


/* Cursor en modo día */




/* Loading overlay en modo día */








/* ════════════════════════════════════════════════════════════
           MODAL PDF VIEWER
        ════════════════════════════════════════════════════════════ */
.modal-pdf-viewer {
    display: none;
    position: fixed; left: 0;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(8px);
}

.modal-pdf-contenido {
    background: linear-gradient(145deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .05) 100%);
    backdrop-filter: blur(40px);
    border: 1px solid var(--glass-border-medium);
    margin: 2% auto;
    padding: 20px;
    border-radius: 20px;
    width: 95%;
    max-width: 900px;
    height: 90vh;
    position: relative;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
}

.modal-pdf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--glass-border-medium);
    flex-shrink: 0;
}

.modal-pdf-header h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--white), var(--gold-light));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.modal-pdf-acciones {
    display: flex;
    gap: 10px;
}

.pdf-container {
    width: 100%;
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    min-height: 0;
}

.pdf-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.btn-cerrar-pdf {
    background: rgba(231, 76, 60, .15);
    border: 1px solid rgba(231, 76, 60, .3);
    color: #f5b7b1;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-cerrar-pdf:hover {
    background: rgba(231, 76, 60, .25);
    border-color: rgba(231, 76, 60, .5);
    transform: translateY(-2px);
}

.btn-descargar-pdf {
    background: rgba(46, 204, 113, .15);
    border: 1px solid rgba(46, 204, 113, .3);
    color: #a9dfbf;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-descargar-pdf:hover {
    background: rgba(46, 204, 113, .25);
    border-color: rgba(46, 204, 113, .5);
    color: #d5f5e3;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(46, 204, 113, .2);
}

.btn-ver-pdf {
    background: rgba(52, 152, 219, .15);
    border: 1px solid rgba(52, 152, 219, .3);
    color: #85c1e9;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.btn-ver-pdf:hover {
    background: rgba(52, 152, 219, .25);
    border-color: rgba(52, 152, 219, .5);
    color: #aed6f1;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(52, 152, 219, .2);
}

.btn-ver-pdf i {
    font-size: 14px;
}

/* ════════════════════════════════════════════════════════════
    FORMULARIO BÚSQUEDA - FLEX LAYOUT 
════════════════════════════════════════════════════════════ */

.formulario-busqueda input[type="text"],
.formulario-busqueda input[type="date"] {
    flex: 1;
    min-width: 200px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .08);
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--white);
    transition: all .3s ease;
    height: 44px;
}

.formulario-busqueda input[type="text"]:focus,
.formulario-busqueda input[type="date"]:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 20px rgba(45, 190, 203, .1);
}

.formulario-busqueda input[type="text"]::placeholder {
    color: rgba(255, 255, 255, .4);
}

/* Forzar estilos en input date para que no use los nativos del navegador */
.formulario-busqueda input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}

/* Icono de calendario personalizado para el date picker */
.formulario-busqueda input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.3s;
}

.formulario-busqueda input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Modo día - inputs de búsqueda */




/* ════════════════════════════════════════════════════════════
           MODAL - MODO DÍA
        ════════════════════════════════════════════════════════════ */














/* ════════════════════════════════════════════════════════════
           MENSAJES ERROR PDF
        ════════════════════════════════════════════════════════════ */
.pdf-error {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.8);
}

.pdf-error i {
    font-size: 64px;
    color: #e74c3c;
    margin-bottom: 20px;
    display: block;
}

.pdf-error h4 {
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--gold-light);
}





/* Estilo para "No generado" - estado informativo/gris */
td .estado-no-generado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-style: italic;
}

td .estado-no-generado::before {
    content: '\f28b';
    font-family: 'bootstrap-icons';
    font-size: 11px;
    color: rgba(255, 255, 255, .4);
}

/* Modo día */




/* ════════════════════════════════════════════════════════════
   MENSAJES DE TABLA VACÍA
════════════════════════════════════════════════════════════ */
.tabla-mensaje-vacio {
    text-align: center;
    padding: 60px 40px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    letter-spacing: 0.5px;
}

.tabla-mensaje-vacio i {
    font-size: 48px;
    display: block;
    margin-bottom: 20px;
    opacity: 0.5;
    color: var(--gold-light);
}

/* Modo día */





/* ════════════════════════════════════════════════════════════
   PAGINACIÓN
════════════════════════════════════════════════════════════ */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 0 8px;
    flex-wrap: wrap;
}

.pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--glass-border);
    text-decoration: none;
    transition: all .25s ease;
    cursor: pointer;
}

.pag-btn:hover {
    background: rgba(45, 190, 203, .15);
    border-color: var(--gold);
    color: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(45, 190, 203, .15);
}

.pag-activo {
    background: linear-gradient(135deg, rgba(45, 190, 203, .35), rgba(16, 117, 126, .25));
    border-color: var(--gold);
    color: var(--gold-light);
    cursor: default;
    box-shadow: 0 4px 14px rgba(45, 190, 203, .2);
}

.pag-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

.pag-dots {
    color: rgba(255, 255, 255, .4);
    padding: 0 4px;
    font-size: 14px;
    line-height: 38px;
}

/* Info de paginación */
.pag-info {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
    margin-top: 6px;
    letter-spacing: .5px;
}

/* ════════════════════════════════════════════════════════════
   ALERTA DE DEPENDENCIA (producto en uso)
════════════════════════════════════════════════════════════ */
.warning-box {
    background: rgba(234, 179, 8, .18);
    border: 1px solid rgba(234, 179, 8, .35);
    color: #fef08a;
    font-size: .85rem;
    padding: 12px 16px;
    border-radius: 10px;
    margin: 10px 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ════════════════════════════════════════════════════════════
   PAGINACIÓN - MODO DÍA
════════════════════════════════════════════════════════════ */












/* ════════════════════════════════════════════════════════════
   CLASES UTILITARIAS Y NUEVOS COMPONENTES
════════════════════════════════════════════════════════════ */

.flex-1 { flex: 1; }
.pl-16 { padding-left: 16px; }
.text-center { text-align: center; }
.p-30 { padding: 30px; }
.text-gold { color: var(--gold-light); }
.text-muted { color: #888; }
.w-100 { width: 100%; }
.mt-30 { margin-top: 30px; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.d-none { display: none !important; }
.img-preview { border: 1px solid var(--glass-border); max-width: 200px; border-radius: 8px; }

.page-heading {
    font-size: 15px; 
    font-weight: 600; 
    color: var(--gold-light);
}

.success-box {
    background: rgba(46, 213, 115, 0.15);
    color: #7bed9f;
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    border: 1px solid rgba(46, 213, 115, 0.3);
    position: relative;
    overflow: hidden;
}



/* ════════════════════════════════════════════════════════════
   REDISEÑO ESTRUCTURAL: GRID CARDS Y FORMS (UX PREMIUM)
════════════════════════════════════════════════════════════ */

/* Grid Cards Generales */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.card-item {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.card-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(45, 190, 203, 0.3) inset;
    border-color: rgba(45, 190, 203, 0.4);
}

/* User Cards */
.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(45, 190, 203, 0.2), rgba(16, 117, 126, 0.1));
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 15px;
    border: 1px solid rgba(45, 190, 203, 0.3);
}
.card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 5px;
}
.card-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 15px;
}
.card-actions {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Product Cards */
.product-img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--glass-border);
}
.product-icon {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: var(--brown-warm);
    margin-bottom: 15px;
}
.product-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

/* Ticket Cards (Tareas) */
.ticket-card {
    border-left: 4px solid var(--gold);
}
.ticket-status {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Form Grid & Split Layout */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.form-split-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.form-split-left {
    flex: 2;
}
.form-split-right {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 16px;
    border: 1px dashed rgba(45, 190, 203, 0.4);
    text-align: center;
}

@media (max-width: 768px) {
    .form-grid-2 { grid-template-columns: 1fr; }
    .form-split-layout { flex-direction: column; }
    .form-split-right { width: 100%; box-sizing: border-box; }
}

/* Spotlight Search */
.spotlight-search {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(45, 190, 203, 0.3);
    border-radius: 50px;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    transition: all 0.3s ease;
}
.spotlight-search:focus-within {
    box-shadow: 0 15px 40px rgba(45, 190, 203, 0.2), 0 0 0 2px rgba(45, 190, 203, 0.5);
    background: rgba(255, 255, 255, 0.12);
}
.spotlight-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 18px;
    font-family: var(--font-main);
    padding: 12px 0;
    outline: none;
}
.spotlight-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.spotlight-icon {
    font-size: 20px;
    color: var(--gold);
    margin-right: 15px;
}
.iframe-frame {
    border: 1px solid var(--gold);
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(45, 190, 203, 0.15);
    overflow: hidden;
}

/* =========================================
   UX UI ENHANCEMENTS (v1.1.0)
   ========================================= */

/* Improved Form Inputs (Tasks) */
.form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--white);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 100%;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(45, 190, 203, 0.2);
    outline: none;
}

.form-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
    display: block;
    font-weight: 600;
}


/* Empty State Card */
.empty-state-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--glass-border-medium);
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.empty-state-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--gold);
}

.empty-state-card i {
    font-size: 40px;
    color: var(--gold);
    opacity: 0.8;
}

.empty-state-card p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}


/* Search Filters Container (Cotizaciones) */
.filter-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 15px 25px;
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
}

.filter-input {
    background: transparent;
    border: none;
    color: var(--white);
    padding: 10px;
    flex: 1;
    font-size: 15px;
    border-bottom: 1px solid transparent;
}


.filter-input:focus {
    outline: none;
    border-bottom: 1px solid var(--gold);
}

.filter-icon {
    color: var(--gold);
    font-size: 18px;
}


/* User Card Adjustments */
.user-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.user-card .card-actions {
    margin-top: auto;
    border-top: 1px solid var(--glass-border);
    padding-top: 15px;
}

.user-card .role-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    background: rgba(45, 190, 203, 0.15);
    color: var(--gold);
    margin-bottom: 5px;
}




/* Product Card Fixes */
.product-card .card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.product-card .product-price {
    font-size: 22px;
    margin-bottom: 10px;
}




/* Ticket Card Fixes (Tareas) */



/* ------------------------------------------------------------
   NEW LOGIN DESIGN (BIOMEDICAL)
------------------------------------------------------------ */
.medical-grid-overlay {
    position: fixed; left: 0;
    inset: 0;
    background-image: 
        linear-gradient(rgba(16, 117, 126, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 117, 126, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 1;
    pointer-events: none;
}

.auth-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 20px;
}

.auth-card {
    background: rgba(4, 14, 17, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border-medium);
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 20px rgba(16, 117, 126, 0.2);
    position: relative;
    overflow: hidden;
    animation: fadeUp 0.8s ease-out;
}



.pulse-line-deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    opacity: 0.5;
    pointer-events: none;
}

.heartbeat-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawHeartbeat 4s linear infinite;
}

@keyframes drawHeartbeat {
    0% { stroke-dashoffset: 1000; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1000; }
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.logo-box {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: var(--white);
    padding: 10px;
    box-shadow: 0 0 20px rgba(45, 190, 203, 0.4);
    border: 2px solid var(--copper);
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 5px;
}



.auth-subtitle {
    font-size: 13px;
    color: var(--gilt);
}



.form-group-modern {
    margin-bottom: 20px;
}

.form-group-modern label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--amber);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}



.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    color: var(--gilt);
    font-size: 16px;
}



.input-wrapper input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px 15px 14px 45px;
    border-radius: 12px;
    color: var(--white);
    font-size: 14px;
    transition: all 0.3s;
}



.input-wrapper input:focus {
    outline: none;
    border-color: var(--amber);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 15px rgba(45, 190, 203, 0.2);
}



.password-toggle {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: var(--gilt);
    cursor: pointer;
    font-size: 16px;
}



.btn-primary-modern {
    width: 100%;
    background: linear-gradient(135deg, var(--copper), var(--amber));
    border: none;
    padding: 15px;
    border-radius: 12px;
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(16, 117, 126, 0.4);
}

.btn-primary-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 190, 203, 0.5);
}

.auth-footer {
    margin-top: 25px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}



.auth-footer p {
    font-size: 12px;
    color: var(--gilt);
    margin: 5px 0;
}



.auth-footer .copyright {
    font-size: 11px;
    opacity: 0.7;
}

/* Modificamos los inputs autofill para mantener el estilo */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--ember) inset !important;
    -webkit-text-fill-color: var(--white) !important;
}


/* ------------------------------------------------------------
   DISE�O SIMPLE LOGIN (PQRS / Modulo CRUD style)
------------------------------------------------------------ */
body.login-simple {
    background-color: #f4f7f6;
    background-image: linear-gradient(135deg, #e0ebeb 0%, #f4f7f6 100%);
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    color: #333;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-box {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 117, 126, 0.08);
    text-align: center;
}

.login-logo {
    margin-bottom: 20px;
}

.login-logo img {
    max-width: 220px;
    height: auto;
}

.login-title {
    font-size: 24px;
    font-weight: 600;
    color: #10757e; /* Teal oscuro */
    margin: 0 0 5px 0;
}

.login-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}

.alert-error {
    background: #fee2e2;
    color: #b91c1c;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.login-form {
    text-align: left;
}

.input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    margin-bottom: 6px;
}

.input-field {
    position: relative;
    display: flex;
    align-items: center;
}

.input-field i:not(#eyeIcon) {
    position: absolute;
    left: 14px;
    color: #9fa5a9;
}

.input-field input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-field input:focus {
    border-color: #10757e;
    box-shadow: 0 0 0 3px rgba(16, 117, 126, 0.1);
}

.btn-eye {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #9fa5a9;
    cursor: pointer;
    padding: 0;
}

.btn-submit {
    width: 100%;
    background-color: #10757e;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s;
}

.btn-submit:hover {
    background-color: #0d6067;
}

.login-footer {
    margin-top: 25px;
    font-size: 12px;
    color: #888;
}

.btn-submit.loading span {
    display: none;
}
.btn-submit.loading::after {
    content: "Verificando...";
}
/* ------------------------------------------------------------
   DISE�O SPLIT (REFERENCIA VISUAL CON CARDIO)
------------------------------------------------------------ */
body.login-split {
    background: #0e646d; /* Fondo principal Teal oscuro */
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.split-container {
    width: 100%;
    max-width: 950px;
}

.split-card {
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    min-height: 550px;
}

/* Panel Izquierdo */
.split-left {
    flex: 1;
    background: #10757e; /* Teal brillante */
    position: relative;
    padding: 60px 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #ffffff;
}

/* C�rculos decorativos */
.circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
}

.circle-1 {
    width: 350px;
    height: 350px;
    top: -100px;
    left: -100px;
}

.circle-2 {
    width: 250px;
    height: 250px;
    bottom: -50px;
    right: -80px;
    background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
}

.circle-3 {
    width: 150px;
    height: 150px;
    bottom: 40%;
    left: -50px;
}

/* Animaci�n Cardio */
.cardio-animation {
    position: absolute;
    top: 60%;
    left: 0;
    width: 100%;
    height: 100px;
    transform: translateY(-50%);
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
}

.cardio-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: pulseCardio 3s linear infinite;
}

@keyframes pulseCardio {
    0% { stroke-dashoffset: 800; }
    40% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -800; }
}

.split-left-content {
    position: relative;
    z-index: 2;
}

.split-left-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 5px 0;
    letter-spacing: 2px;
}

.split-left-content h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 25px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
}

.split-left-content p {
    font-size: 13px;
    line-height: 1.8;
    opacity: 0.75;
    max-width: 85%;
}

/* Panel Derecho */
.split-right {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
}

.login-header {
    margin-bottom: 30px;
}

.login-header img {
    max-width: 200px;
    margin-bottom: 25px;
}

.login-header h2 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px 0;
}

.login-header p {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.split-alert {
    background: #fee2e2;
    color: #b91c1c;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-modern {
    position: relative;
    margin-bottom: 20px;
    background: #f7f9fa;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.input-modern i {
    padding-left: 20px;
    color: #555;
    font-size: 18px;
}

.input-modern input {
    width: 100%;
    padding: 16px 15px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
    font-family: 'Poppins', sans-serif;
}

.input-modern input::placeholder {
    color: #999;
}

.eye-toggle {
    position: absolute;
    right: 20px;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: #10757e;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-size: 12px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    cursor: pointer;
}

.forgot-pwd {
    color: #10757e;
    text-decoration: none;
    font-weight: 500;
}

.btn-split {
    width: 100%;
    background: #0f626a;
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    font-family: 'Poppins', sans-serif;
}

.btn-split:hover {
    background: #0b4c52;
    transform: translateY(-2px);
}

.btn-split.loading span {
    display: none;
}
.btn-split.loading::after {
    content: "Validando...";
}

@media (max-width: 850px) {
    .split-card {
        flex-direction: column;
    }
    .split-left {
        padding: 40px 30px;
    }
    .split-right {
        padding: 40px 30px;
    }
    .circle-1 {
        width: 250px;
        height: 250px;
    }
}

/* ------------------------------------------------------------
   DISE�O LOGIN PREMIUM (Animaci�n ECG & Glassmorphism)
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

body.login-premium {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    background: radial-gradient(circle at top right, #e2f1f2 0%, #f4f7f8 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.premium-wrapper {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.premium-card {
    background: #ffffff;
    width: 100%;
    max-width: 1000px;
    min-height: 600px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(16, 117, 126, 0.25);
    display: flex;
    overflow: hidden;
    position: relative;
}

/* -- LADO IZQUIERDO: BRANDING & ECG -- */
.premium-brand {
    width: 45%;
    background: linear-gradient(135deg, #10757e 0%, #0a4f55 100%);
    position: relative;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #ffffff;
}

.brand-content {
    position: relative;
    z-index: 10;
}

.brand-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 15px 0;
    letter-spacing: 1px;
}

.brand-content p {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.85;
    margin: 0;
}

/* Animaci�n de Latido (Cardio/ECG) */
.ecg-container {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 5;
    opacity: 0.4;
}

.ecg-line {
    width: 100%;
    height: 100%;
    stroke: #2bebfb; /* Azul brillante (Teal Light) */
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 4s linear infinite;
    filter: drop-shadow(0 0 8px rgba(43,235,251,0.8));
}

@keyframes dash {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: -1000; }
}

.brand-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at bottom left, rgba(43,235,251,0.1) 0%, transparent 60%);
    z-index: 1;
}

/* -- LADO DERECHO: FORMULARIO -- */
.premium-form-section {
    width: 55%;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
}

.form-header {
    margin-bottom: 40px;
    text-align: center;
}

.logo-img {
    max-height: 70px;
    margin-bottom: 25px;
    object-fit: contain;
}

.form-header h3 {
    font-size: 24px;
    color: #1f2937;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.form-header p {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

/* Alertas de error */
.error-alert {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #b91c1c;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Campos de Formulario */
.premium-form .input-group {
    margin-bottom: 22px;
}

.premium-form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 8px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.input-wrapper:focus-within {
    border-color: #10757e;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(16,117,126,0.1);
}

.input-wrapper i:not(#eyeIcon) {
    padding-left: 16px;
    color: #9ca3af;
    font-size: 18px;
}

.input-wrapper input {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1f2937;
    font-family: 'Outfit', sans-serif;
}

.eye-toggle {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 18px;
    transition: color 0.3s;
}

.eye-toggle:hover {
    color: #10757e;
}

/* Opciones (Recordarme / Olvid�) */
.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    font-size: 13px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    cursor: pointer;
}

.forgot-link {
    color: #10757e;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.forgot-link:hover {
    color: #0a4f55;
}

/* Bot�n Principal */
.btn-primary {
    width: 100%;
    background: #10757e;
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    font-family: 'Outfit', sans-serif;
}

.btn-primary:hover {
    background: #0a4f55;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -10px rgba(16,117,126,0.5);
}

.btn-primary i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.btn-primary:hover i {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 900px) {
    .premium-card {
        flex-direction: column;
        max-width: 500px;
    }
    .premium-brand {
        width: 100%;
        padding: 40px;
        min-height: 200px;
    }
    .premium-form-section {
        width: 100%;
        padding: 40px;
    }
    .ecg-container {
        height: 100px;
        bottom: 0;
    }
}
/* Sobrescribir autofill para login-premium */
body.login-premium input:-webkit-autofill,
body.login-premium input:-webkit-autofill:hover, 
body.login-premium input:-webkit-autofill:focus, 
body.login-premium input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #1f2937 !important;
    border-radius: 12px;
}
/* ------------------------------------------------------------
   SOBRESCRITURAS FINALES DASHBOARD (IMPBIOMEDICAL CLEAN)
------------------------------------------------------------ */
body:not(.login-premium) {
    background: #f4f7f8;
    color: #1f2937;
}

.cabecera-superior {
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-bottom: 1px solid #e5e7eb;
}

.cabecera-superior .rol-admin i,
.cabecera-superior .rol-usuario i {
    color: #10757e;
}

.menu-lateral {
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
}

.lista-menu-lateral a {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #4b5563;
}

.lista-menu-lateral a i {
    color: #10757e;
}

.lista-menu-lateral a:hover {
    background: #e2f1f2;
    border-color: #10757e;
    color: #10757e;
}

.lista-menu-lateral a:hover i {
    color: #0a4f55;
}

.panel-flotante {
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    box-shadow: 12px 0 30px rgba(0,0,0,0.05);
}

.submenu h3 {
    color: #10757e;
    border-bottom: 1px solid #e5e7eb;
}

.submenu a {
    color: #4b5563;
}

.submenu a:hover {
    background: #f4f7f8;
    color: #10757e;
}

.logo-empresa img {
    border: 2px solid #10757e;
}

.noise-overlay, .particle-canvas {
    display: none !important;
}

.card, .dashboard-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.btn, .boton-primario {
    background: #10757e !important;
    color: #ffffff !important;
    border: none !important;
}

.btn:hover, .boton-primario:hover {
    background: #0a4f55 !important;
}

table {
    background: #ffffff;
    color: #1f2937;
}

th {
    background: #e2f1f2 !important;
    color: #10757e !important;
}

td {
    border-bottom: 1px solid #e5e7eb;
}

/* ------------------------------------------------------------
   CORRECCIONES COMPLEJAS DASHBOARD Y FORMULARIOS
------------------------------------------------------------ */

/* Corregir textos invisibles o blancos sobre fondos claros */
body:not(.login-premium) h1, 
body:not(.login-premium) h2, 
body:not(.login-premium) h3, 
body:not(.login-premium) h4, 
body:not(.login-premium) h5, 
body:not(.login-premium) h6,
body:not(.login-premium) p,
body:not(.login-premium) span,
body:not(.login-premium) div {
    color: #1f2937; /* Forzar gris oscuro en general */
}

/* Excepci�n para botones u elementos que s� deben ser blancos */
.btn span, .btn i, .boton-primario, .btn-primary, 
.badge, .etiqueta, .alert-danger, .alert-success {
    color: #ffffff !important;
}

/* Corregir tarjetas (Cards) de estad�sticas (ej. Panel Principal) */
.card, .stat-card, .dashboard-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    color: #1f2937 !important;
    border-radius: 12px;
}
.card h3, .card span, .card p, .card div,
.stat-card h3, .stat-card span, .stat-card p, .stat-card div {
    color: #1f2937 !important; /* Forzar el texto dentro de tarjetas a oscuro */
}

.card .icon, .stat-card .icon {
    color: #10757e !important; /* Iconos en Teal */
}

/* Accesos R�pidos */
.acceso-rapido {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
}
.acceso-rapido i {
    color: #10757e !important;
}
.acceso-rapido:hover {
    border-color: #10757e !important;
    background: #f4f7f8 !important;
}

/* -- FORMULARIOS (Corregir Inputs Rotos) -- */
input[type="text"], 
input[type="number"], 
input[type="email"], 
input[type="password"], 
input[type="date"],
select, 
textarea {
    width: 100%;
    padding: 10px 14px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #10757e !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(16, 117, 126, 0.15) !important;
}

/* Corregir fondos de autocompletado en el resto del sistema */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
    -webkit-text-fill-color: #1f2937 !important;
}

/* Textos de Empty State ("Agrega items...") */
.empty-state, .texto-vacio, .no-data {
    color: #6b7280 !important;
}

/* Corregir Sidebar (Quitar borde azul feo y centrar bien) */
.menu-lateral {
    padding-top: 10px !important;
}
.logo-simple-wrap {
    text-align: center;
    margin-bottom: 20px;
}

/* Corregir doble borde en inputs del Login Premium */
body.login-premium .input-wrapper input {
    border: none !important;
    padding: 14px 16px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Corregir etiquetas blancas (labels) en el dashboard */
body:not(.login-premium) label, 
body:not(.login-premium) .control-label {
    color: #1f2937 !important;
    font-weight: 500;
}

/* Limpiar fondos y sombras duras en el dashboard (estilo SaaS claro) */
.formulario-contenedor, .table-container, .card-wrapper, .card-panel {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025) !important;
    backdrop-filter: none !important;
}

/* Modales y ventanas flotantes */
.modal-content, .panel-flotante {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Ajuste de layout de cabecera y contenido (evitar traslapo con menu-lateral) */
.layout-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.cabecera-superior {
    margin-left: 140px; /* Igual al ancho del men� */
    padding: 15px 40px;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
    width: calc(100% - 140px);
    position: fixed; left: 0;
    top: 0;
    z-index: 100;
}
.contenido-principal {
    margin-top: 80px; /* Altura de la cabecera */
    margin-left: 140px; /* Ancho del men� */
    padding: 40px;
}

/* Soporte explicito para .card-panel usado en crear cotizacion y cliente */
.card-panel {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
}

/* Botones de acci�n limpios (Editar / Eliminar) */
.boton-editar, .btn-edit, .boton-generar-pdf {
    background: #e0f2fe !important;
    border: 1px solid #bae6fd !important;
    color: #0284c7 !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}
.boton-editar:hover, .btn-edit:hover, .boton-generar-pdf:hover {
    background: #bae6fd !important;
    color: #0369a1 !important;
}

.boton-eliminar, .btn-delete {
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}
.boton-eliminar:hover, .btn-delete:hover {
    background: #fecaca !important;
    color: #b91c1c !important;
}

/* Forzar barra lateral arriba y a la izquierda sin m�rgenes */
.menu-lateral {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: 0 !important;
    height: 100vh !important;
    z-index: 1000 !important;
}

/* Forzar cabecera superior en su lugar */
.cabecera-superior {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin-left: 140px !important;
    width: calc(100% - 140px) !important;
    z-index: 100 !important;
    margin-top: 0 !important;
}

/* ------------------------------------------------------------
   UPGRADE DE EXPERIENCIA DE USUARIO (UX) Y DISE�O (UI) GLOBAL
------------------------------------------------------------ */

/* -- 1. Mejoras en Tablas de Datos (Listas de Cotizaciones, Clientes, etc.) -- */
.tabla-responsive {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 24px;
}
.tabla-datos {
    width: 100%;
    border-collapse: collapse;
}
.tabla-datos th {
    background: #f8fafc !important; /* Gris ultra claro y profesional */
    color: #475569 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 16px 20px !important;
    border-bottom: 2px solid #e2e8f0;
}
.tabla-datos td {
    padding: 16px 20px;
    font-size: 14px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.tabla-datos tbody tr {
    transition: background-color 0.2s ease;
}
.tabla-datos tbody tr:hover {
    background-color: #f0f9ff !important; /* Celeste muy sutil al hacer hover */
}

/* -- 2. Mejoras en Paneles de B�squeda y Filtros -- */
.filter-panel, .panel-filtros {
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    border: 1px solid #e5e7eb;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.filter-input {
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    border-radius: 20px !important;
    padding: 10px 20px 10px 40px !important; /* Espacio para el icono de lupa */
    transition: all 0.3s ease !important;
}
.filter-input:focus {
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(16, 117, 126, 0.1) !important;
    border-color: #10757e !important;
}

/* -- 3. Estados Vac�os (Empty States) Universales -- */
.empty-state-global {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    margin: 20px 0;
}
.empty-state-global i {
    font-size: 48px;
    margin-bottom: 16px;
    color: #cbd5e1;
}

/* -- 4. Badges y Estados -- */
.badge-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-activo { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-inactivo { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.badge-info { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }

/* -- 5. Tarjetas de Usuario / Cuadricula (.grid-cards) -- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.card-item {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.card-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08) !important;
    border-color: #cbd5e1 !important;
}

/* ------------------------------------------------------------
   ESTILOS COMPARTIDOS PARA MODALES Y HEADERS (NUEVO DISE�O UX)
------------------------------------------------------------ */

/* -- M�dulo layout ------------------- */
.mod-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.mod-title { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0; }
.mod-sub { font-size: 13px; color: #64748b; margin: 4px 0 0; }
.btn-mod-primary { display: inline-flex; align-items: center; gap: 8px; background: #10757e; color: #fff; border: none; padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; }
.btn-mod-primary:hover { background: #0a4f55; transform: translateY(-1px); color: #fff; }

.mod-alert { padding: 12px 20px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; font-weight: 500; }
.mod-alert-ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.mod-alert-err { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.mod-search-bar { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 20px; display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.mod-search-form { display: flex; align-items: center; gap: 10px; width: 100%; position: relative; }
.mod-search-icon { color: #9ca3af; font-size: 16px; }
.mod-search-input { flex: 1; border: none; outline: none; font-size: 14px; color: #374151; background: transparent; }
.mod-btn-clear { color: #9ca3af; text-decoration: none; font-size: 16px; transition: color .2s; }
.mod-btn-clear:hover { color: #ef4444; }

/* -- Modales (imo-modal) ----------------------- */
.imo-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9000; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.imo-modal-bg.open { display: flex; }
.imo-modal { background: #fff; border-radius: 18px; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px rgba(0,0,0,.2); animation: modalIn .25s ease; }
.imo-modal-sm { max-width: 440px; }
@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(-10px) } to { opacity: 1; transform: scale(1) translateY(0) } }

.imo-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px 18px; border-bottom: 1px solid #e5e7eb; }
.imo-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.imo-modal-header.danger h3 { color: #dc2626; }
.imo-modal-close { background: none; border: none; font-size: 22px; color: #9ca3af; cursor: pointer; line-height: 1; padding: 4px; }
.imo-modal-close:hover { color: #374151; }

.imo-modal-body { padding: 24px 28px; }
.imo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.imo-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: left; }
.imo-form-group label { font-size: 12px; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: .4px; }
.imo-form-group input, .imo-form-group select { padding: 11px 14px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: 14px; color: #1f2937; transition: border-color .2s, box-shadow .2s; outline: none; background: #fff; width: 100%; box-sizing: border-box; }
.imo-form-group input:focus, .imo-form-group select:focus { border-color: #10757e; box-shadow: 0 0 0 3px rgba(16,117,126,.1); }

.imo-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; border-top: 1px solid #f1f5f9; margin-top: 8px; }
.imo-btn-cancel { padding: 10px 20px; border: 1.5px solid #e5e7eb; background: #fff; color: #374151; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.imo-btn-cancel:hover { background: #f9fafb; }
.imo-btn-save { padding: 10px 22px; background: #10757e; color: #fff; border: none; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; }
.imo-btn-save:hover { background: #0a4f55; }
.imo-btn-danger { padding: 10px 22px; background: #dc2626; color: #fff; border: none; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.imo-btn-danger:hover { background: #b91c1c; }

.mod-pag { display: flex; gap: 6px; justify-content: center; margin-top: 24px; }
.mod-pag-link { padding: 8px 14px; border-radius: 8px; border: 1px solid #e5e7eb; color: #374151; text-decoration: none; font-size: 13px; transition: all .2s; }
.mod-pag-link:hover, .mod-pag-link.active { background: #10757e; color: #fff; border-color: #10757e; }

/* -- Tablas (mod-table) ----------------------- */
.mod-table-wrap { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.04); margin-bottom: 24px; }
.mod-table { width: 100%; border-collapse: collapse; text-align: left; }
.mod-table thead tr { background: #f8fafc; }
.mod-table th { padding: 14px 18px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
.mod-table td { padding: 15px 18px; font-size: 14px; color: #374151; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.mod-table tbody tr:last-child td { border-bottom: none; }
.mod-table tbody tr:hover td { background: #f0f9ff; }
.mod-empty { text-align: center; padding: 60px 20px !important; color: #94a3b8; }
.mod-empty i { font-size: 40px; display: block; margin-bottom: 12px; }
.mod-empty p { margin: 0; font-size: 14px; }

/* -- Badges y Acciones ----------------------- */
.mod-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.badge-green { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-red { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.mod-actions { display: flex; gap: 6px; }
.mod-btn-edit, .mod-btn-del { width: 34px; height: 34px; border: none; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: all .2s; }
.mod-btn-edit { background: #e0f2fe; color: #0284c7; }
.mod-btn-edit:hover { background: #0284c7; color: #fff; }
.mod-btn-del { background: #fee2e2; color: #dc2626; }
.mod-btn-del:hover { background: #dc2626; color: #fff; }


/* -- Tarjetas Vac�as (Empty States) ----------------------- */
.mod-empty-card { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 14px; padding: 60px; text-align: center; color: #94a3b8; grid-column: 1 / -1; width: 100%; margin: 20px 0; }
.mod-empty-card i { font-size: 40px; display: block; margin-bottom: 12px; }


/* ════════════════════════════════════════
   RESPONSIVE GENERAL — Sistema Impobiomedical
   Breakpoints: 1200px | 900px | 768px | 480px
════════════════════════════════════════ */

/* ── 1200px: Sidebar compacto ── */
@media (max-width: 1200px) {
    .menu-lateral { width: 200px; }
    .contenido-principal { margin-left: 200px; }
    .panel-flotante { left: 200px; }
    .contenedor-tarjetas { grid-template-columns: repeat(2, 1fr); }
}

/* ── 900px: Layout de columna única ── */
@media (max-width: 900px) {
    .menu-lateral { width: 220px; margin-left: -220px; transition: margin-left 0.3s ease; }
    .menu-lateral.visible { margin-left: 0; }
    .contenido-principal { margin-left: 0 !important; padding: 20px 16px; }
    .panel-flotante { left: 0; width: 100%; border-radius: 0; }
    .panel-dos-columnas { grid-template-columns: 1fr; }
    .contenedor-tarjetas { grid-template-columns: repeat(2, 1fr); }
    .grupo-fila { grid-template-columns: 1fr 1fr; }
    .mod-header { flex-wrap: wrap; gap: 12px; }
    .imo-form-row { grid-template-columns: 1fr; }
    .mod-table th, .mod-table td { padding: 10px 12px; font-size: 12.5px; }
}

/* ── 768px: Móvil ── */
@media (max-width: 768px) {
    .menu-lateral { width: 260px; margin-left: -260px; }
    .menu-lateral.visible { margin-left: 0; }
    .contenido-principal { margin-left: 0 !important; padding: 16px; }
    .contenedor-tarjetas { grid-template-columns: 1fr; }
    .grupo-fila { grid-template-columns: 1fr; }
    .card-wrapper { flex-direction: column; min-height: auto; }
    .panel-left { display: none; }
    .panel-right { padding: 32px 24px; }
    .numero-principal { font-size: 36px; }
    .formulario-contenedor { padding: 20px; }
    .tabla-datos th, .tabla-datos td { padding: 10px 12px; font-size: 13px; }
    .mod-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mod-table { min-width: 520px; }
    .mod-header h2 { font-size: 18px; }
    .imo-modal-content { margin: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
    .imo-form-row { grid-template-columns: 1fr; }
    .mod-pag { flex-wrap: wrap; }
    .mod-actions { flex-wrap: nowrap; }
}

/* ── 480px: Móvil pequeño ── */
@media (max-width: 480px) {
    body { font-size: 14px; }
    .contenido-principal { padding: 12px; }
    .panel-right { padding: 24px 16px; }
    .formulario-contenedor { padding: 16px; }
    .tabla-datos th, .tabla-datos td { padding: 8px 10px; font-size: 12px; }
    .contenedor-tarjetas { grid-template-columns: 1fr; gap: 12px; }
    .grupo-fila { grid-template-columns: 1fr; }
    .mod-header { flex-direction: column; align-items: flex-start; }
    .mod-header .mod-header-actions { width: 100%; }
    .mod-btn-new { width: 100%; justify-content: center; }
    .mod-search-bar { width: 100%; }
    .mod-table { min-width: 420px; }
    .imo-modal-content { border-radius: 12px; }
}



/* ════════════════════════════════════════
   LOGIN PAGE (SCOPED: .login-page-body)
════════════════════════════════════════ */
/* ════════════════════════════════════════
   LOGIN PAGE — Impobiomedical
   Scope: .login-page-body
════════════════════════════════════════ */

/* ── Reset y base ── */
.login-page-body,
.login-page-body *,
.login-page-body *::before,
.login-page-body *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Body / contenedor ── */
.login-page-body {
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f0f1;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(16,117,126,0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(10,79,85,0.1)  0%, transparent 50%);
    padding: 16px;
    overflow: hidden;
}

/* ── Tarjeta principal ── */
.login-page-body .card {
    display: flex;
    width: 100%;
    max-width: 980px;
    height: 580px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
}

/* ════════════════════════════════════════
   PANEL IZQUIERDO
════════════════════════════════════════ */
.login-page-body .left-panel {
    width: 46%;
    position: relative;
    background: linear-gradient(145deg, #0f6870 0%, #0c5c65 40%, #06363c 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 40px;
    overflow: hidden;
}

/* Textura de ruido sutil */
.login-page-body .left-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.5;
    pointer-events: none;
}

/* Orbe decorativo */
.login-page-body .left-panel::after {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43,235,251,0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Sección superior ── */
.login-page-body .left-top {
    position: relative;
    z-index: 5;
}

/* Badge "Sistema de Gestión" */
.login-page-body .badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50px;
    padding: 6px 14px;
    margin-bottom: 24px;
}
.login-page-body .badge-pill .dot {
    width: 7px; height: 7px;
    background: #2bebfb;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(43,235,251,0.8);
    animation: pulse-dot 2s ease-in-out infinite;
}
.login-page-body .badge-pill span {
    font-size: 10px;
    font-weight: 700;
    color: #2bebfb;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 6px rgba(43,235,251,0.8); }
    50%       { box-shadow: 0 0 14px rgba(43,235,251,1), 0 0 25px rgba(43,235,251,0.4); }
}

/* Título hero */
.login-page-body .hero-title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 12px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.login-page-body .hero-title .accent {
    background: linear-gradient(135deg, #2bebfb, #a5f3fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login-page-body .hero-sub {
    font-size: 13.5px;
    font-weight: 300;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
}

/* ── ECG animado ── */
.login-page-body .ecg-wrap {
    position: relative;
    z-index: 5;
    margin: 0 -6px;
}
.login-page-body .ecg-svg {
    width: 100%;
    height: 46px;
    stroke: #2bebfb;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(43,235,251,0.7));
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: ecg 4s linear infinite;
}

@keyframes ecg {
    0%   { stroke-dashoffset: 700;  opacity: 0.2; }
    50%  { stroke-dashoffset: 0;    opacity: 1; }
    100% { stroke-dashoffset: -700; opacity: 0.2; }
}

/* ── Sección inferior: empresa asociada ── */
.login-page-body .left-bottom {
    position: relative;
    z-index: 5;
}
.login-page-body .partner-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 8px;
}
.login-page-body .partner-card {
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
}
.login-page-body .partner-card img { width: auto; max-width: 100%; max-height: 46px; object-fit: contain; display: block; margin: 0 auto; }

/* Chips de certificación */
.login-page-body .cert-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.login-page-body .cert-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(43,235,251,0.1);
    border: 1px solid rgba(43,235,251,0.2);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.login-page-body .cert-chip i {
    color: #2bebfb;
    font-size: 11px;
}

/* ════════════════════════════════════════
   PANEL DERECHO — FORMULARIO
════════════════════════════════════════ */
.login-page-body .right-panel {
    width: 54%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px;
}
.login-page-body .form-box {
    width: 100%;
    max-width: 370px;
}

/* Logo */
.login-page-body .form-logo {
    margin-bottom: 14px;
    text-align: center;
}
.login-page-body .form-logo img {
    width: 100%;
    max-width: 260px;
    height: auto;
    object-fit: contain;
}

/* Separador */
.login-page-body .form-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.login-page-body .form-sep .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb);
}
.login-page-body .form-sep .line.right {
    background: linear-gradient(90deg, #e5e7eb, transparent);
}
.login-page-body .form-sep span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Título */
.login-page-body .form-title {
    text-align: center;
    margin-bottom: 12px;
}
.login-page-body .form-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: #0d1b2a;
    margin-bottom: 2px;
}
.login-page-body .form-title p {
    font-size: 12.5px;
    color: #6b7280;
}

/* Slot de error — altura fija evita layout shift */
.login-page-body .error-slot {
    height: 40px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}
.login-page-body .error-msg {
    width: 100%;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 3px solid #ef4444;
    color: #b91c1c;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Campos */
.login-page-body .field {
    margin-bottom: 12px;
}
.login-page-body .field label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}
.login-page-body .field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-page-body .field-icon {
    position: absolute;
    left: 14px;
    color: #9ca3af;
    font-size: 15px;
    pointer-events: none;
    transition: color 0.25s;
}
.login-page-body .field-wrap input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 13.5px;
    font-family: 'Outfit', sans-serif;
    color: #0d1b2a;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.login-page-body .field-wrap input:focus {
    border-color: #10757e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(16,117,126,0.12);
}
.login-page-body .field-wrap input::placeholder {
    color: #c4c9d1;
}

/* Override autofill */
.login-page-body input:-webkit-autofill,
.login-page-body input:-webkit-autofill:hover,
.login-page-body input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #0d1b2a !important;
}

/* Botón de ojo */
.login-page-body .eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}
.login-page-body .eye-btn:hover { color: #10757e; }

/* Botón de ingreso */
.login-page-body .btn-login {
    width: 100%;
    background: linear-gradient(135deg, #10757e 0%, #0b5560 100%);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}
/* Shimmer hover */
.login-page-body .btn-login::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s;
}
.login-page-body .btn-login:hover::before { left: 140%; }
.login-page-body .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16,117,126,0.38);
}
.login-page-body .btn-login:active { transform: translateY(0); }

/* Footer */
.login-page-body .form-footer {
    text-align: center;
    margin-top: 18px;
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.login-page-body .form-footer i { color: #10757e; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

/* Tablet / pantallas medianas */
@media (max-width: 860px) {
    .login-page-body .card {
        flex-direction: column;
        height: auto;
        border-radius: 22px;
        max-width: 500px;
    }
    .login-page-body .left-panel,
    .login-page-body .right-panel {
        width: 100%;
    }
    .login-page-body .left-panel {
        padding: 36px 32px 28px;
    }
    .login-page-body .ecg-wrap {
        display: none; /* Ocultar ECG en móvil para ahorrar espacio */
    }
    .login-page-body .right-panel {
        padding: 36px 32px 40px;
    }
}

/* Móvil pequeño */
@media (max-width: 480px) {
    .login-page-body {
        padding: 12px;
        align-items: flex-start;
        padding-top: 24px;
    }
    .login-page-body .card {
        border-radius: 18px;
    }
    .login-page-body .left-panel {
        padding: 28px 22px 24px;
    }
    .login-page-body .hero-title {
        font-size: 28px;
    }
    .login-page-body .right-panel {
        padding: 28px 20px 36px;
    }
    .login-page-body .form-box {
        max-width: 100%;
    }
    .login-page-body .cert-chips {
        flex-wrap: wrap;
    }
}


/* Fix: btn-login no debe heredar text-transform del sistema */
.login-page-body .btn-login { text-transform: none; letter-spacing: normal; }

/* ═══════════════════════════════════════════════════════════
   OVERRIDES CRÍTICOS: Login anula estilos globales del sistema
   (deben ir al final para mayor especificidad)
═══════════════════════════════════════════════════════════ */

/* Neutralizar la regla global .card con !important */
.login-page-body .card {
    background: transparent !important;
    border: none !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08) !important;
    color: inherit !important;
    border-radius: 28px !important;
    display: flex !important;
    width: 100% !important;
    max-width: 980px !important;
    height: 580px !important;
    overflow: hidden !important;
}

/* Neutralizar regla body:not(.login-premium) div color */
.login-page-body div,
.login-page-body span,
.login-page-body p,
.login-page-body h1,
.login-page-body h2,
.login-page-body h3 {
    color: inherit !important;
}

/* Restaurar colores específicos */
.login-page-body .left-panel,
.login-page-body .left-panel * { color: inherit !important; }

.login-page-body .hero-title { color: #ffffff !important; }
.login-page-body .hero-sub { color: rgba(255,255,255,0.55) !important; }
.login-page-body .badge-pill span { color: #2bebfb !important; }
.login-page-body .hero-title .accent { color: transparent !important; -webkit-text-fill-color: transparent !important; }
.login-page-body .partner-label { color: rgba(255,255,255,0.35) !important; }
.login-page-body .cert-chip { color: rgba(255,255,255,0.8) !important; }
.login-page-body .cert-chip i { color: #2bebfb !important; }
.login-page-body .form-title h2 { color: #0d1b2a !important; }
.login-page-body .form-title p { color: #6b7280 !important; }
.login-page-body .field label { color: #374151 !important; }
.login-page-body .form-footer { color: #9ca3af !important; }
.login-page-body .form-footer i { color: #10757e !important; }
.login-page-body .form-sep span { color: #9ca3af !important; }
.login-page-body .error-msg { color: #b91c1c !important; }
.login-page-body .field-wrap input { color: #0d1b2a !important; padding: 13px 14px 13px 42px !important; }

/* Fondo paneles */
.login-page-body .left-panel {
    background: linear-gradient(145deg, #0f6870 0%, #0c5c65 40%, #06363c 100%) !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}
.login-page-body .right-panel {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}
.login-page-body .partner-card {
    background: rgba(255,255,255,0.97) !important;
    border: none !important;
    color: inherit !important;
}

/* Responsive con !important para vencer conflictos globales */
@media (max-width: 860px) { .login-page-body .card { flex-direction: column !important; height: auto !important; max-width: 440px !important; border-radius: 22px !important; } .login-page-body .left-panel { display: none !important; } .login-page-body .right-panel { width: 100% !important; padding: 40px 32px !important; } .login-page-body .ecg-wrap { display: none !important; } .login-page-body { align-items: center; } }

@media (max-width: 480px) {
    .login-page-body {
        padding: 12px !important;
        align-items: flex-start !important;
        padding-top: 20px !important;
        min-height: 100svh;
    }
    .login-page-body .card {
        border-radius: 16px !important;
        max-width: 100% !important;
    }
    .login-page-body .left-panel {
        padding: 24px 20px 20px !important;
    }
    .login-page-body .hero-title {
        font-size: 26px !important;
    }
    .login-page-body .right-panel {
        padding: 24px 18px 32px !important;
    }
    .login-page-body .form-box { max-width: 100% !important; }
    .login-page-body .cert-chips { flex-wrap: wrap !important; }
}

/* Fix responsive móvil: permitir scroll cuando la tarjeta supera la pantalla */
@media (max-width: 860px) {
    .login-page-body {
        overflow-y: auto !important;
        align-items: flex-start !important;
        padding: 16px !important;
    }
    .login-page-body .card {
        overflow: visible !important;
        margin: 0 auto;
    }
    .login-page-body .left-panel,
    .login-page-body .right-panel {
        overflow: visible !important;
    }
}