:root {
    --vista-blue: #0a5b9d;
    --vista-blue-deep: #073b70;
    --vista-cyan: #5cc8ee;
    --vista-glass: rgba(225, 243, 255, .78);
    --vista-line: rgba(22, 70, 110, .34);
    --ink: #183149;
    --muted: #65798a;
    --paper: rgba(249, 252, 255, .92);
    --green: #237e77;
    --line: #c9d9e5;
    --shadow: 0 20px 55px rgba(0, 25, 55, .42), 0 2px 10px rgba(0, 24, 56, .28);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font: 14px "Segoe UI", Tahoma, Arial, sans-serif;
    background:
        radial-gradient(ellipse at 19% 84%, rgba(100, 225, 168, .92) 0, rgba(74, 191, 178, .45) 18%, transparent 45%),
        radial-gradient(ellipse at 78% 15%, rgba(96, 210, 255, .75) 0, transparent 42%),
        linear-gradient(145deg, #062f62 0%, #0a6dab 42%, #4aa9b4 72%, #8ccc8e 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    opacity: .42;
    background:
        linear-gradient(115deg, transparent 0 52%, rgba(255, 255, 255, .24) 53%, transparent 55%),
        repeating-linear-gradient(165deg, transparent 0 70px, rgba(255, 255, 255, .035) 71px 72px);
}
.aurora { position: fixed; z-index: -1; filter: blur(1px); pointer-events: none; border-radius: 50%; }
.aurora-one { width: 65vw; height: 34vh; left: -12vw; bottom: -10vh; transform: rotate(-12deg); background: radial-gradient(ellipse, rgba(168, 244, 122, .8), transparent 66%); }
.aurora-two { width: 48vw; height: 26vh; right: -10vw; top: 5vh; transform: rotate(19deg); background: radial-gradient(ellipse, rgba(92, 215, 252, .55), transparent 70%); }
a { color: #0869a9; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

.shell {
    display: flex;
    width: calc(100% - 36px);
    max-width: 1700px;
    min-height: calc(100vh - 36px);
    margin: 18px auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 13px;
    background: rgba(218, 238, 251, .68);
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(12, 54, 90, .35);
    backdrop-filter: blur(22px) saturate(135%);
}

aside {
    position: relative;
    flex: 0 0 238px;
    min-height: calc(100vh - 36px);
    padding: 28px 17px 24px;
    color: #173b5b;
    border-right: 1px solid rgba(42, 91, 127, .42);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(225, 244, 255, .38)),
        linear-gradient(180deg, rgba(246, 252, 255, .88), rgba(185, 220, 239, .76));
    box-shadow: inset -1px 0 rgba(255, 255, 255, .64);
}
aside::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 170px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .48), transparent);
}
.brand { position: relative; display: flex; align-items: center; gap: 11px; color: #17456a; font-size: 22px; font-weight: 300; text-shadow: 0 1px #fff; }
.brand:hover { text-decoration: none; }
.brand small { display: block; margin-top: 4px; color: #66829a; font-size: 8px; font-weight: 600; letter-spacing: 1.8px; }
.monogram, .app-orb {
    display: grid;
    place-items: center;
    color: #fff;
    font-family: Georgia, serif;
    text-shadow: 0 -1px rgba(0, 0, 0, .32);
    border: 1px solid rgba(5, 58, 93, .6);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .85) 0 7%, transparent 8% 44%, rgba(0, 55, 89, .36) 45%),
        linear-gradient(#4bc0df, #117ab1 48%, #075a91 52%, #063e6d);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .9), 0 2px 4px rgba(0, 31, 60, .35);
}
.monogram { width: 43px; height: 43px; border-radius: 50%; font-size: 24px; }
.nav-label { position: relative; margin: 46px 11px 12px; color: #54758e; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; }
nav { position: relative; display: grid; gap: 5px; }
nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: #234d6a;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    text-shadow: 0 1px rgba(255, 255, 255, .8);
}
nav a:hover {
    text-decoration: none;
    border-color: rgba(73, 136, 176, .42);
    background: linear-gradient(rgba(255, 255, 255, .84), rgba(184, 220, 242, .72));
    box-shadow: inset 0 1px #fff, 0 1px 2px rgba(12, 62, 100, .18);
}
nav a.active {
    color: #073c68;
    border-color: rgba(31, 104, 155, .6);
    background: linear-gradient(rgba(255, 255, 255, .95), rgba(137, 201, 237, .8) 49%, rgba(95, 173, 218, .78) 51%, rgba(185, 225, 246, .86));
    box-shadow: inset 0 1px #fff, inset 0 0 5px rgba(255, 255, 255, .65), 0 1px 4px rgba(18, 77, 117, .24);
}
.nav-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #fff;
    border: 1px solid rgba(14, 75, 112, .55);
    border-radius: 7px;
    background: linear-gradient(145deg, #78d5ee, #1683ba 50%, #096096 51%, #3d94bf);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .85), 0 1px 2px rgba(0, 48, 78, .28);
    font-size: 15px;
    text-shadow: 0 -1px rgba(0, 0, 0, .3);
}
.aside-bottom { position: absolute; right: 17px; bottom: 24px; left: 17px; padding: 17px 8px 0; color: #345b75; border-top: 1px solid rgba(68, 111, 140, .28); font-size: 11px; }
.aside-bottom small { display: block; margin: 7px 0 0 15px; color: #6c8799; font-size: 9px; }
.online-dot, .footer-status i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border: 1px solid #32702d; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8ffc6, #57b541 55%, #237326); box-shadow: 0 0 5px rgba(71, 181, 62, .75); }

main { display: flex; flex: 1; min-width: 0; flex-direction: column; background: rgba(242, 248, 252, .88); }
.titlebar {
    position: relative;
    display: flex;
    height: 58px;
    flex: 0 0 58px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 19px;
    color: #fff;
    border-bottom: 1px solid #113f6a;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 8%, rgba(255, 255, 255, .12) 48%, rgba(0, 31, 66, .25) 49%),
        linear-gradient(100deg, #176ba5, #1b88b4 55%, #155b91);
    box-shadow: inset 0 1px rgba(255, 255, 255, .72), inset 0 -1px rgba(255, 255, 255, .18), 0 2px 5px rgba(0, 39, 73, .25);
    text-shadow: 0 1px 2px rgba(0, 31, 58, .75);
}
.titlebar-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.technosys-logo { display: block; width: 78px; height: 24px; object-fit: contain; }
.titlebar-brand, .titlebar-brand span, .titlebar-brand small { color: #fff !important; text-shadow: none !important; opacity: 1; filter: none; }
.titlebar-brand small { margin-left: 0; font-size: 9px; font-weight: 600; }
.app-orb { width: 31px; height: 31px; border-radius: 50%; font-size: 17px; }
.profile { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.profile small { display: block; margin-top: 2px; color: #d4eafb; font-size: 9px; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; color: #0d4f79; border: 1px solid rgba(255, 255, 255, .86); border-radius: 5px; background: linear-gradient(#fff, #b9dff2); box-shadow: 0 1px 3px rgba(0, 34, 65, .4); font-size: 17px; font-weight: 600; text-shadow: 0 1px #fff; }
.quiet { padding: 6px 10px; color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(8, 62, 102, .3); box-shadow: inset 0 1px rgba(255, 255, 255, .25); }
.quiet:hover { color: #fff; background: rgba(5, 41, 75, .5); }
.toolbar { display: flex; min-height: 42px; align-items: center; justify-content: space-between; padding: 8px 22px; color: #456279; border-bottom: 1px solid #aebfca; background: linear-gradient(#fff, #e6eef3 48%, #d7e2e9 51%, #edf3f6); box-shadow: inset 0 1px #fff; font-size: 11px; }
.toolbar i { margin: 0 9px; color: #7e98aa; font-style: normal; font-size: 18px; vertical-align: -1px; }
.breadcrumb { color: #176da7; }
.toolbar-date { padding: 4px 10px; color: #546f81; border: 1px solid #c4d1da; border-radius: 4px; background: rgba(255, 255, 255, .68); box-shadow: inset 0 1px #fff; }
.content { width: 100%; max-width: 1430px; min-height: calc(100vh - 177px); margin: 0 auto; padding: 25px 24px 36px; }
footer { display: flex; min-height: 34px; align-items: center; justify-content: space-between; margin-top: auto; padding: 7px 18px; color: #587386; border-top: 1px solid #b8c8d3; background: linear-gradient(#f9fcfd, #d8e3e9); box-shadow: inset 0 1px #fff; font-size: 9px; }

.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 9px; color: #2e78a8; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
h1 { margin: 0 0 7px; color: #183a57; font-size: 31px; font-weight: 300; line-height: 1.18; letter-spacing: -.5px; text-shadow: 0 1px #fff; }
h2 { margin: 0 0 17px; color: #214b6a; font-size: 21px; font-weight: 400; }
h3 { color: #254d68; font-size: 15px; font-weight: 500; }
.muted { margin: 0 0 17px; color: var(--muted); line-height: 1.55; }
.page-heading .muted { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
.cards article, .card, .aero-panel {
    position: relative;
    overflow: hidden;
    padding: 23px;
    border: 1px solid rgba(79, 117, 143, .43);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(244, 250, 253, .82) 55%, rgba(222, 239, 248, .82));
    box-shadow: inset 0 1px #fff, inset 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 5px rgba(17, 67, 101, .18);
}
.cards article::before, .card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent);
}
.cards article > *, .card > * { position: relative; }
.cards article::after { content: ""; position: absolute; top: 20px; right: 20px; width: 10px; height: 10px; border: 1px solid rgba(23, 105, 159, .4); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #65c9e8 45%, #0873aa); box-shadow: 0 0 7px rgba(55, 170, 212, .6); }
.cards span { color: #5e7585; font-size: 11px; }
.cards strong { display: block; margin: 13px 0 9px; color: #174e75; font-size: 32px; font-weight: 300; letter-spacing: -.7px; }
.cards strong.amount { font-size: 27px; }
.cards strong.state { font-size: 27px; }
.cards p, .cards a { margin: 0; color: #718797; font-size: 10px; }
.card { margin-bottom: 20px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.section-heading h2 { margin: 0; }
.section-heading a { font-size: 11px; }
.subtle { color: #718ca0; font-size: 9px; letter-spacing: 1px; }
.dashboard-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 14px; }
.home-main { min-width: 0; }
.home-main .cards { gap: 11px; margin: 0 0 14px; }
.home-main .cards article { min-height: 122px; padding: 17px; }
.home-main .cards article::after { top: 15px; right: 15px; }
.home-main .cards strong { margin: 9px 0 6px; font-size: 27px; }
.home-main .cards strong.amount, .home-main .cards strong.state { font-size: 23px; }
.recent-card { margin-bottom: 0; }
.tinted { color: #164c55; border-color: rgba(39, 130, 140, .42); background: linear-gradient(140deg, rgba(231, 255, 253, .94), rgba(166, 226, 226, .84)); }
.tinted h2 { margin: 18px 0; color: #165263; font-size: 27px; line-height: 1.25; }
.steps { margin-top: 22px; padding-left: 22px; }
.steps li { padding: 0 0 17px 7px; color: #285d64; font-size: 11px; }
.steps p { margin: 5px 0 0; color: #517d82; font-size: 10px; line-height: 1.5; }
.empty { padding: 35px 14px; color: #71889a; text-align: center; }
.empty h3 { color: #315a77; }
.empty p { max-width: 340px; margin: 9px auto 19px; font-size: 11px; line-height: 1.6; }
.empty-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 14px; place-items: center; color: #fff; border: 1px solid #4a9ac4; border-radius: 50%; background: linear-gradient(#a7e6f5, #2798c7 49%, #0870a7 51%, #59b2d5); box-shadow: inset 0 2px rgba(255, 255, 255, .8), 0 2px 5px rgba(12, 75, 112, .3); font-size: 25px; text-shadow: 0 -1px #185e85; }
.empty.compact { padding: 15px; }
.badge { display: inline-block; padding: 5px 10px; color: #176445; border: 1px solid rgba(50, 131, 95, .38); border-radius: 12px; background: linear-gradient(#f4fff3, #bfe5c1); box-shadow: inset 0 1px #fff; font-size: 9px; white-space: nowrap; }
.badge.amber { color: #875d13; border-color: rgba(159, 112, 32, .36); background: linear-gradient(#fffdf1, #f0d795); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 11px 9px; color: #42677f; border-top: 1px solid #b7cad7; border-bottom: 1px solid #91adbf; background: linear-gradient(#fafdff, #d7e7f1 49%, #c6dce9 51%, #e9f2f7); font-size: 9px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; }
td { padding: 15px 9px; color: #2a485e; border-bottom: 1px solid #d9e4eb; font-size: 11px; }
tbody tr:nth-child(even) { background: rgba(223, 239, 248, .26); }
tbody tr:hover { background: rgba(174, 221, 246, .28); }
td b { font-weight: 600; }
td small { display: block; margin-top: 5px; color: #7890a0; font-size: 9px; }
td a { font-size: 10px; }
tr:last-child td { border-bottom: 0; }
label { display: block; color: #33566e; font-size: 10px; font-weight: 600; }
input, select, textarea {
    display: block;
    width: 100%;
    min-height: 40px;
    margin: 7px 0 18px;
    padding: 10px 12px;
    color: #17364d;
    border: 1px solid #8eacbf;
    border-radius: 5px;
    outline: 1px solid rgba(255, 255, 255, .75);
    background: linear-gradient(#fff, #f7fbfd);
    box-shadow: inset 0 1px 3px rgba(20, 66, 95, .14), 0 1px #fff;
    font-size: 12px;
}
input:focus, select:focus { border-color: #2d91c4; box-shadow: 0 0 0 2px rgba(67, 166, 218, .25), inset 0 1px 2px rgba(20, 66, 95, .1); }
select[size] { padding: 4px; }
select[size] option { padding: 10px; border-radius: 3px; }
label small { display: block; margin-top: -11px; margin-bottom: 18px; color: #7890a0; font-size: 9px; font-weight: 400; }
button, .button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 17px;
    color: #fff;
    border: 1px solid #075580;
    border-radius: 5px;
    background: linear-gradient(#76cff0 0%, #168bbe 46%, #0671a7 50%, #1684b8 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .92), inset 0 -1px rgba(0, 43, 78, .34), 0 1px 3px rgba(4, 58, 91, .3);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 -1px rgba(0, 44, 75, .72);
    cursor: pointer;
}
button:hover, .button:hover { text-decoration: none; background: linear-gradient(#a4e6f8, #28a8d7 46%, #087caf 50%, #35a6cf); box-shadow: inset 0 1px 1px #fff, 0 0 6px rgba(36, 151, 205, .65); }
button:active, .button:active { transform: translateY(1px); background: linear-gradient(#0c6493, #1689ba); box-shadow: inset 0 2px 4px rgba(0, 37, 66, .4); }
button:disabled { color: #ecf1f3; border-color: #82939d; background: linear-gradient(#bbc9d0, #8c9ba3); box-shadow: inset 0 1px rgba(255, 255, 255, .5); cursor: not-allowed; }
.secondary { color: #244c65; border-color: #819daf; background: linear-gradient(#fff, #e8f0f5 47%, #d3e0e8 51%, #f1f6f9); text-shadow: 0 1px #fff; }
.secondary:hover { color: #14517b; background: linear-gradient(#fff, #dff4fd 47%, #bae1f2 51%, #edf9fd); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.work-grid { display: grid; grid-template-columns: minmax(0, 1fr) 335px; gap: 20px; align-items: start; }
.checkout { position: sticky; top: 17px; }
.checkout h2 { font-size: 23px; }
.checkout .total { margin: 20px 0; padding: 20px 0; border-top: 1px solid #c8d8e2; border-bottom: 1px solid #c8d8e2; }
.total span { color: #667f91; font-size: 10px; }
.total strong { display: block; margin-top: 7px; color: #0c6392; font-size: 31px; font-weight: 300; letter-spacing: -.5px; }
.tabs { display: flex; gap: 3px; margin: 18px 0 20px; padding: 4px 4px 0; border: 1px solid #a7bdcb; border-radius: 6px 6px 0 0; background: linear-gradient(#f7fbfd, #d4e2ea); }
.tabs button { min-height: 31px; padding: 7px 14px; color: #526e80; border-color: transparent; border-radius: 4px 4px 0 0; background: transparent; box-shadow: none; text-shadow: 0 1px #fff; }
.tabs button.active { color: #155c87; border: 1px solid #9bb4c4; border-bottom-color: #fff; background: linear-gradient(#fff, #eaf5fa); box-shadow: inset 0 1px #fff; }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid #d0dde5; font-size: 11px; }
.summary-row span { color: #6c8494; }
.summary-row b { color: #294d65; font-weight: 600; }
.full { width: 100%; margin-top: 13px; }
.hint { margin: 12px 0 0; color: #7890a0; font-size: 9px; line-height: 1.6; }
.icon-button { min-height: 27px; padding: 2px 9px; color: #fff; border-color: #9a332a; background: linear-gradient(#f5a99d, #c74b3d 48%, #a52e25 52%, #d36556); font-size: 16px; }
.notice { margin-bottom: 17px; padding: 13px; color: #72530f; border: 1px solid #d1b45f; border-radius: 5px; background: linear-gradient(#fffdf1, #f5e8b7); box-shadow: inset 0 1px #fff; font-size: 11px; line-height: 1.6; }
.back { display: inline-block; margin-bottom: 22px; color: #2876a6; font-size: 10px; }
.success, .error { position: relative; margin-bottom: 20px; padding: 13px 17px 13px 44px; color: #1e623a; border: 1px solid #79ac79; border-radius: 6px; background: linear-gradient(#f5fff2, #cbe9c7); box-shadow: inset 0 1px #fff, 0 1px 3px rgba(32, 83, 44, .15); font-size: 11px; }
.success > span { position: absolute; top: 9px; left: 12px; display: grid; width: 23px; height: 23px; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(#85d276, #36923e); box-shadow: inset 0 1px rgba(255, 255, 255, .8); }
.error { color: #812f27; border-color: #c1786c; background: linear-gradient(#fff7f4, #f0c8c0); }
.error p { margin: 6px 0; }
.quick-dates { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0 0 17px; color: #738a9b; font-size: 9px; }
.chip { min-height: 25px; padding: 4px 7px; color: #315b74; border-color: #91a9b9; background: linear-gradient(#fff, #dfeaf0); text-shadow: 0 1px #fff; font-size: 9px; }
.installment { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid #d3e0e7; font-size: 11px; }
.installment small { display: block; margin-top: 4px; color: #7990a0; }
.negative { color: #ae4033; }
.pager { display: flex; justify-content: center; gap: 18px; margin-top: 17px; color: #6d8494; font-size: 10px; }
.nowrap { white-space: nowrap; }

.guest-view .shell { max-width: 1080px; min-height: min(650px, calc(100vh - 16px)); }
.guest-view main { background: linear-gradient(135deg, rgba(232, 247, 255, .54), rgba(235, 252, 246, .4)); }
.guest-view .titlebar { flex: 0 0 49px; height: 49px; padding-right: 18px; padding-left: 18px; }
.guest-view .titlebar-brand { gap: 8px; }
.guest-view .titlebar-brand, .guest-view .titlebar-brand span, .guest-view .titlebar-brand small { color: #fff !important; text-shadow: none !important; opacity: 1; filter: none; }
.guest-view .titlebar-brand small { font-size: 9px; font-weight: 600; }
.guest-view .content { display: grid; min-height: min(550px, calc(100vh - 101px)); place-items: center; padding: 28px 36px; }
.login-stage { display: grid; width: min(780px, 100%); grid-template-columns: minmax(0, 1fr) 350px; align-items: center; gap: 72px; }
.login-copy { color: #7b3f60; text-align: center; text-shadow: none; }
.login-copy .eyebrow { color: #d9f5ff; }
.login-copy > h2 { margin: 29px 0 12px; color: #b77972; font-size: 34px; font-weight: 700; line-height: 1.08; text-align: center; text-shadow: none; }
.login-promise { max-width: 370px; margin: 0 auto; color: #b77972; font-size: 12px; font-weight: 600; line-height: 1.65; text-align: center; text-shadow: none; }
.login-client-brand { display: flex; flex-direction: column; align-items: center; margin: 0 auto; color: #7b3f60; text-align: center; text-shadow: none; }
.login-client-logo { display: grid; width: 154px; height: 154px; padding: 7px; place-items: center; object-fit: contain; border: 2px solid rgba(255, 255, 255, .9); border-radius: 17px; background: #fff; box-shadow: 0 5px 16px rgba(71, 20, 56, .2); }
.login-client-placeholder { color: #fff; background: linear-gradient(145deg, #e679b1, #9e2f70); font: 58px Georgia, serif; }
.login-client-brand h1 { margin: 20px 0 0; color: #7b3f60; font-size: 30px; font-weight: 800; line-height: 1.08; text-align: center; text-shadow: none; }
.login-client-brand p { margin: 8px 0 0; color: #c43e9a; font-size: 20px; font-weight: 500; line-height: 1.15; text-align: center; text-shadow: none; }
.vista-bloom { position: relative; display: block; width: 92px; height: 92px; margin-bottom: 26px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff, #80e7ef 13%, #1f94ca 40%, #1163a2 62%, #79c956 63%, #1e843c 81%); box-shadow: inset 0 3px 9px rgba(255, 255, 255, .8), 0 7px 22px rgba(0, 35, 65, .45), 0 0 20px rgba(115, 222, 238, .6); }
.vista-bloom::before, .vista-bloom::after { content: ""; position: absolute; width: 43px; height: 32px; border: 3px solid rgba(255, 255, 255, .82); border-radius: 60% 20%; transform: rotate(-26deg); }
.vista-bloom::before { top: 20px; left: 18px; border-right: 0; border-bottom-color: transparent; }
.vista-bloom::after { right: 13px; bottom: 18px; transform: rotate(150deg); border-right: 0; border-bottom-color: transparent; }
.login { padding: 30px 30px 27px; text-align: center; }
.login::before { height: 50%; }
.login h2 { margin-bottom: 5px; font-size: 25px; font-weight: 300; }
.login form { margin-top: 22px; text-align: left; }
.login-user-tile { position: relative; display: grid; width: 78px; height: 78px; margin: -66px auto 17px; place-items: center; border: 3px solid rgba(255, 255, 255, .94); border-radius: 7px; background: linear-gradient(145deg, #bfefff, #3c9bc7 50%, #0c5e94 51%, #62b5d6); box-shadow: 0 3px 10px rgba(10, 55, 88, .38), inset 0 1px rgba(255, 255, 255, .9); }
.login-user-tile span { color: #fff; font: 42px Georgia, serif; text-shadow: 0 2px 4px rgba(0, 48, 81, .6); }
.login-help { margin: 22px -34px -27px; padding: 12px; color: #5c778a; border-top: 1px solid #b9ccd8; border-radius: 0 0 8px 8px; background: linear-gradient(#edf5f9, #dce8ef); box-shadow: inset 0 1px #fff; font-size: 9px; }

/* Identidad femenina con acabado Aero */
body {
    background:
        radial-gradient(ellipse at 15% 86%, rgba(255, 167, 201, .86) 0, rgba(222, 117, 176, .44) 21%, transparent 48%),
        radial-gradient(ellipse at 82% 12%, rgba(230, 185, 255, .78) 0, transparent 43%),
        linear-gradient(145deg, #562a68 0%, #a83e7a 41%, #d076a8 70%, #efb6c9 100%);
}
.aurora-one { background: radial-gradient(ellipse, rgba(255, 183, 210, .9), transparent 66%); }
.aurora-two { background: radial-gradient(ellipse, rgba(226, 191, 255, .72), transparent 70%); }
.shell { background: rgba(248, 226, 239, .7); box-shadow: 0 20px 55px rgba(61, 15, 54, .43), 0 2px 10px rgba(75, 20, 63, .3), inset 0 0 0 1px rgba(100, 37, 82, .32); }
aside { color: #67405d; border-right-color: rgba(137, 68, 112, .4); background: linear-gradient(90deg, rgba(255, 255, 255, .62), rgba(255, 236, 246, .38)), linear-gradient(180deg, rgba(255, 250, 253, .94), rgba(240, 205, 226, .8)); }
.brand { color: #74325d; }
.brand small, .nav-label { color: #9b6689; }
.monogram, .app-orb { border-color: rgba(121, 38, 91, .62); background: linear-gradient(160deg, rgba(255, 255, 255, .9) 0 7%, transparent 8% 44%, rgba(91, 17, 68, .28) 45%), linear-gradient(#f6a8d0, #cc4e92 48%, #ab3378 52%, #702557); }
.brand-logo, .titlebar-logo { display: block; object-fit: contain; border: 1px solid rgba(132, 61, 105, .42); background: rgba(255, 255, 255, .88); box-shadow: inset 0 1px #fff, 0 2px 5px rgba(91, 25, 69, .25); }
.brand-logo { width: 48px; height: 48px; padding: 3px; border-radius: 12px; }
.titlebar-logo { width: 32px; height: 32px; padding: 2px; border-radius: 7px; }
nav a { color: #714b67; }
nav a:hover { border-color: rgba(183, 94, 146, .42); background: linear-gradient(rgba(255, 255, 255, .9), rgba(246, 203, 229, .76)); }
nav a.active { color: #6d2554; border-color: rgba(176, 66, 130, .62); background: linear-gradient(rgba(255, 255, 255, .97), rgba(247, 188, 222, .85) 49%, rgba(230, 135, 190, .8) 51%, rgba(251, 218, 237, .9)); }
.nav-icon { border-color: rgba(134, 35, 94, .55); background: linear-gradient(145deg, #f6b4d7, #d6579d 50%, #ad2f79 51%, #dc72ad); }
.aside-bottom { color: #79566e; border-top-color: rgba(145, 78, 120, .3); }
.aside-bottom small { color: #9b718e; }
.titlebar { border-bottom-color: #6e2755; background: linear-gradient(180deg, rgba(255, 255, 255, .52), transparent 8%, rgba(255, 255, 255, .13) 48%, rgba(76, 18, 60, .25) 49%), linear-gradient(100deg, #9d3972, #c44d91 55%, #8e3068); }
.profile small { color: #f9ddec; }
.avatar { color: #872b65; background: linear-gradient(#fff, #f4c6df); }
.quiet { background: rgba(95, 21, 68, .28); }
.quiet:hover { background: rgba(77, 15, 57, .52); }
.toolbar { color: #73536a; border-bottom-color: #cfadc0; background: linear-gradient(#fff, #f8eaf2 48%, #efd9e6 51%, #fcf5f9); }
.breadcrumb { color: #a33c79; }
.toolbar-date { color: #806174; border-color: #dec6d3; }
main { background: rgba(253, 246, 250, .91); }
footer { color: #86677b; border-top-color: #d9bfce; background: linear-gradient(#fff, #f0dce8); }
.eyebrow { color: #b24882; }
h1 { color: #60344f; }
h2, h3 { color: #733c5f; }
a { color: #ad3e7d; }
.cards article, .card, .aero-panel { border-color: rgba(151, 91, 127, .42); background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 247, 252, .87) 55%, rgba(247, 225, 239, .86)); box-shadow: inset 0 1px #fff, inset 0 0 0 1px rgba(255, 255, 255, .4), 0 2px 6px rgba(105, 37, 79, .17); }
.cards article::after { border-color: rgba(171, 66, 129, .44); background: radial-gradient(circle at 35% 30%, #fff, #ef91c3 45%, #b7327d); box-shadow: 0 0 7px rgba(218, 91, 161, .6); }
.cards strong, .total strong { color: #9c326f; }
.tinted { color: #6a365e; border-color: rgba(175, 93, 151, .42); background: linear-gradient(140deg, rgba(255, 240, 250, .96), rgba(237, 188, 221, .88)); }
.tinted h2 { color: #813b69; }
.steps li { color: #7a3f68; }
.steps p { color: #976781; }
.empty-icon { border-color: #c05491; background: linear-gradient(#f9c6e1, #dc67a7 49%, #b4387e 51%, #e58cbd); text-shadow: 0 -1px #88315f; }
th { color: #744c66; border-color: #cda9bd; background: linear-gradient(#fff, #f7e5ef 49%, #edcfdf 51%, #fbf2f7); }
td { color: #56404f; border-bottom-color: #ead9e3; }
tbody tr:nth-child(even) { background: rgba(249, 224, 239, .3); }
tbody tr:hover { background: rgba(242, 190, 222, .28); }
input, select, textarea { color: #553248; border-color: #c494b0; background: linear-gradient(#fff, #fff8fc); }
input:focus, select:focus, textarea:focus { border-color: #cf5799; box-shadow: 0 0 0 2px rgba(219, 99, 164, .24), inset 0 1px 2px rgba(85, 28, 61, .09); }
.agenda-card { min-width: 0; }
.agenda-card { margin-bottom: 0; padding: 17px; }
.agenda-card .section-heading { margin-bottom: 6px; }
.agenda-card .section-heading h2 { font-size: 18px; }
.agenda-list { overflow: visible; padding-right: 0; }
.agenda-slot { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 34px; padding: 3px 0; border-top: 1px solid #ead6e2; }
.agenda-slot:first-child { border-top: 0; }
.agenda-slot time { color: #8f3268; font-size: 13px; font-weight: 700; }
.agenda-slot div { display: flex; min-width: 0; flex-direction: column; color: #65465a; font-size: 11px; }
.agenda-slot div span { color: #a37c94; }
.agenda-slot div small { margin-top: 2px; color: #9c708a; }
.agenda-slot a { white-space: nowrap; font-size: 9px; font-weight: 700; }
.agenda-full { color: #9a7189; font-size: 9px; text-transform: uppercase; }
.appointment-form-card { max-width: 900px; }
.service-picker { margin: 20px 0; padding: 14px; border: 1px solid #d8b7ca; border-radius: 7px; }
.service-picker legend { padding: 0 7px; color: #7b4263; font-size: 11px; font-weight: 700; }
.service-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.service-checks label { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px; border: 1px solid #ead4e0; border-radius: 6px; background: rgba(255, 255, 255, .55); }
.service-checks input { width: auto; margin-top: 2px; }
.service-checks span { display: flex; flex-direction: column; }
.service-checks small { margin-top: 3px; color: #997086; }
.staff-form-card { max-width: 980px; }
.check-row { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; color: #70465f; font-size: 11px; }
.check-row input { width: auto; min-height: 0; margin: 0; }
button, .button { border-color: #8f2462; background: linear-gradient(#f4a5cf 0%, #d45299 46%, #b3307b 50%, #cf4d92 100%); text-shadow: 0 -1px rgba(91, 20, 62, .72); }
button:hover, .button:hover { background: linear-gradient(#fac6e0, #e875b1 46%, #c43d86 50%, #e477b0); box-shadow: inset 0 1px 1px #fff, 0 0 7px rgba(210, 75, 149, .6); }
button:active, .button:active { background: linear-gradient(#962867, #ce4d91); }
.secondary { color: #70425e; border-color: #c197af; background: linear-gradient(#fff, #f9edf4 47%, #efd9e6 51%, #fff7fb); text-shadow: 0 1px #fff; }
.secondary:hover { color: #963469; background: linear-gradient(#fff, #ffe8f5 47%, #f2c3de 51%, #fff4fa); }
.tabs { border-color: #d0afc2; background: linear-gradient(#fffafd, #f0dce8); }
.tabs button.active { color: #9c3c73; border-color: #c9a0b7; border-bottom-color: #fff; background: linear-gradient(#fff, #fff2f9); }
.login-copy .eyebrow { color: #ffe5f2; }
.vista-bloom { border-color: rgba(255, 255, 255, .78); background: radial-gradient(circle at 35% 25%, #fff, #ffc8e2 14%, #e864aa 41%, #ad347c 62%, #b785d5 63%, #784aab 82%); box-shadow: inset 0 3px 9px rgba(255, 255, 255, .84), 0 7px 22px rgba(74, 14, 59, .45), 0 0 22px rgba(255, 166, 212, .65); }
.login-user-tile { border-color: rgba(255, 255, 255, .94); background: linear-gradient(145deg, #ffd8eb, #e776b2 50%, #b53b80 51%, #e58bbd); }
.login-user-tile img { width: 100%; height: 100%; padding: 4px; object-fit: contain; border-radius: 4px; background: rgba(255, 255, 255, .92); }
.login-help { color: #826176; border-top-color: #d8bdcc; background: linear-gradient(#fff6fb, #efdae6); }
.brand-settings .section-heading { align-items: flex-start; }
.brand-preview { display: grid; width: 76px; height: 76px; flex: 0 0 76px; place-items: center; overflow: hidden; color: #fff; border: 2px solid #fff; border-radius: 12px; background: linear-gradient(145deg, #f7b6d8, #c9448d); box-shadow: 0 2px 8px rgba(109, 35, 78, .28); font-size: 34px; }
.brand-preview img { width: 100%; height: 100%; padding: 4px; object-fit: contain; background: #fff; }

@media (max-width: 1100px) {
    .shell { width: calc(100% - 20px); margin: 10px; min-height: calc(100vh - 20px); }
    aside { flex-basis: 205px; min-height: calc(100vh - 20px); padding-right: 12px; padding-left: 12px; }
    .content { padding: 27px 24px 42px; }
    .work-grid { grid-template-columns: minmax(0, 1fr) 290px; }
    .cards strong.amount { font-size: 23px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .home-grid { grid-template-columns: minmax(0, 1fr) 270px; }
    .login-stage { gap: 48px; grid-template-columns: minmax(0, 1fr) 350px; }
}

@media (max-width: 780px) {
    body { background: linear-gradient(145deg, #67295f, #b84c86 68%, #eba7c2); }
    .shell { display: block; width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
    aside { min-height: auto; padding: 13px 15px 8px; border-right: 0; border-bottom: 1px solid #638eaa; }
    .brand { font-size: 18px; }
    .monogram { width: 35px; height: 35px; font-size: 19px; }
    nav { display: flex; gap: 4px; margin-top: 13px; overflow-x: auto; }
    nav a { flex: 0 0 auto; gap: 5px; padding: 6px 9px; font-size: 10px; }
    .nav-icon { width: 23px; height: 23px; font-size: 12px; }
    .nav-label, .aside-bottom { display: none; }
    .titlebar { height: 49px; flex-basis: 49px; padding: 6px 12px; }
    .titlebar-brand { font-size: 12px; }
    .titlebar-brand small { display: none; }
    .app-orb { width: 28px; height: 28px; }
    .profile { gap: 5px; font-size: 9px; }
    .profile small, .avatar { display: none; }
    .quiet { min-height: 29px; padding: 5px 7px; font-size: 9px; }
    .toolbar { min-height: 37px; padding: 6px 14px; font-size: 9px; }
    .toolbar-date { display: none; }
    .content { min-height: calc(100vh - 150px); padding: 22px 14px 35px; }
    .page-heading { align-items: stretch; flex-direction: column; gap: 13px; }
    .page-heading .button { width: 100%; }
    h1 { font-size: 27px; }
    .cards { grid-template-columns: 1fr; gap: 9px; }
    .home-grid { grid-template-columns: 1fr; }
    .cards article { display: grid; padding: 16px; grid-template-columns: 1fr auto; align-items: center; }
    .cards article::after { display: none; }
    .cards strong, .cards strong.amount, .cards strong.state { margin: 0; font-size: 25px; grid-column: 2; grid-row: 1 / 3; }
    .cards p, .cards a { margin-top: 6px; }
    .work-grid, .two-columns, .form-grid { grid-template-columns: 1fr; }
    .service-checks { grid-template-columns: 1fr; }
    .checkout { position: static; }
    .card { padding: 18px; }
    .section-heading { align-items: flex-start; }
    .subtle { display: none; }
    .table-wrap table { min-width: 460px; }
    .guest-view .shell { min-height: 100vh; }
    .guest-view .content { min-height: calc(100vh - 90px); padding: 35px 18px; }
    .login-stage { display: block; width: min(390px, 100%); }
    .login-copy { display: block; margin-bottom: 22px; text-align: center; }
    .login-copy > h2, .login-promise { display: none; }
    .login-client-brand { width: 100%; margin: 0; }
    .login-client-logo { width: 72px; height: 72px; flex-basis: 72px; }
    .login-client-brand h1 { margin-top: 10px; font-size: 22px; }
    .login-client-brand p { margin-top: 4px; font-size: 11px; }
    .login { margin-top: 0; }
    footer { padding: 7px 12px; }
}

@media print {
    body { color: #111; background: #fff; }
    .shell { display: block; width: 100%; margin: 0; border: 0; box-shadow: none; }
    aside, .titlebar, .toolbar, footer, .back, .no-print, .success, .error { display: none !important; }
    .content { max-width: none; min-height: 0; padding: 0; }
    .work-grid { display: block; }
    .card { padding: 10px; border: 0; box-shadow: none; break-inside: avoid; }
    .card::before { display: none; }
    .checkout { position: static; }
    .page-heading { margin: 0; }
    .table-wrap { overflow: visible; }
    table { min-width: 0 !important; }
}