:root{--green:#58a817;--teal:#078b91;--ink:#171717;--muted:#686868;--line:#e2e2e2;--bg:#f3f3f3}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}a{color:inherit;text-decoration:none}.booking-shell{max-width:1500px;margin:auto;padding:18px 32px 60px}.step-title{display:flex;gap:18px;align-items:center;margin-bottom:26px}.step-title h1{font-size:25px;margin:0}.step-title>a,.step-title>span{font-size:38px;font-weight:300}.booking-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,.95fr);gap:48px}.main-card,.profile-card,.summary-card,.success-panel{background:#fff;border-radius:20px;padding:26px}.main-card h2{font-size:27px;margin:0 0 28px}.professional-label{font-size:16px;color:#666;margin:28px 0}.service-row{border:1px solid var(--line);border-radius:18px;padding:28px;display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:18px;margin:18px 0}.service-row:hover{border-color:var(--green);box-shadow:0 8px 24px #0000000c}.service-row strong{display:block;font-size:21px;margin-bottom:8px}.service-row small{font-size:18px}.service-row b{font-size:38px;font-weight:300}.service-icon{width:58px;height:58px;border:2px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--teal);font-size:28px}.profile-card{text-align:center;padding:55px 35px}.profile-card img{width:min(280px,80%);height:105px;object-fit:contain}.profile-card h2{font-size:27px;margin:24px 0 12px}.profile-card p{color:var(--muted);font-size:17px;line-height:1.5}.summary-card{margin-top:24px}.summary-card h2{font-size:24px}.summary-card div{display:grid;grid-template-columns:1fr auto;gap:10px;padding:18px 0}.summary-card small{grid-column:1/-1;color:var(--muted)}.summary-card footer{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between}.calendar-time-layout{display:grid;grid-template-columns:380px 1fr;gap:48px}.month-nav{display:flex;justify-content:space-between;align-items:center;text-transform:capitalize;font-size:19px;margin-bottom:18px}.month-nav a{font-size:30px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center}.calendar span,.calendar a{height:42px;display:grid;place-items:center;border-radius:9px}.calendar .disabled{color:#b7b7b7;text-decoration:line-through;pointer-events:none}.calendar .available{font-weight:bold}.calendar .available:hover,.calendar .selected{background:var(--green);color:#fff}.timezone{display:grid;gap:8px;margin-top:30px;font-size:17px}.timezone select,input,select,textarea{width:100%;padding:13px;border:1px solid #d6d6d6;border-radius:10px;background:#fff;font:inherit}.time-column h3{margin:0 0 18px}.time-button{width:calc(50% - 8px);margin:0 12px 12px 0;padding:15px;border:1px solid #d2d2d2;background:#fff;border-radius:9px;font-size:20px;font-weight:bold;cursor:pointer}.time-button:hover,.time-button.chosen{border-color:var(--green);background:#f2fae9}.patient-form{border-top:1px solid var(--line);margin-top:34px;padding-top:28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label{display:grid;gap:7px}.form-grid .wide{grid-column:1/-1}.primary-action{display:inline-block;border:0;background:var(--green);color:#fff;font-size:17px;font-weight:bold;padding:15px 24px;border-radius:10px;margin-top:20px;cursor:pointer}.error-box{padding:12px;background:#fff2f2;color:#9b2424;border-radius:9px;margin-bottom:15px}.success-panel{max-width:650px;text-align:center;margin:10vh auto}.success-panel img{max-width:360px;width:100%}.success-panel h1{font-size:34px}@media(max-width:900px){.booking-shell{padding:16px}.booking-layout,.calendar-time-layout{grid-template-columns:1fr}.booking-layout{gap:20px}.profile-card{padding:25px}.service-row{padding:18px;grid-template-columns:50px 1fr auto}.service-row small{font-size:15px}.form-grid{grid-template-columns:1fr}.time-button{width:100%;margin-right:0}}
.time-choice{display:inline-block;width:calc(50% - 10px);margin:0 8px 12px 0}.time-choice input{position:absolute;opacity:0;pointer-events:none}.time-choice span{display:block;padding:15px;border:1px solid #d2d2d2;background:#fff;border-radius:9px;font-size:20px;font-weight:bold;text-align:center;cursor:pointer}.time-choice:hover span,.time-choice.chosen span,.time-choice input:checked+span{border-color:var(--green);background:#f2fae9;box-shadow:0 0 0 2px rgba(88,168,23,.12)}.selected-time-note{font-weight:bold;color:var(--teal)}@media(max-width:900px){.time-choice{width:100%;margin-right:0}}
.booking-notice{margin:-8px 0 24px;color:#667273}.time-column{min-width:280px}.time-grid{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:12px}.time-choice{display:block}.time-choice input{position:absolute;opacity:0;pointer-events:none}.time-choice span{display:flex;align-items:center;justify-content:center;min-height:58px;border:1px solid #d9dedd;border-radius:10px;font-weight:700;font-size:20px;cursor:pointer;background:#fff}.time-choice:hover span,.time-choice.chosen span{border-color:#4cae20;background:#eff8e9;color:#27640d}.empty-times{padding:18px;border-radius:10px;background:#f6f7f5;color:#687270}@media(max-width:760px){.time-grid{grid-template-columns:1fr}.time-column{min-width:0}}

.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(480px,100%);background:#fff;border-radius:22px;padding:34px;box-shadow:0 20px 60px #00000010}.auth-card.wide-auth{width:min(760px,100%)}.auth-card img{width:100%;height:95px;object-fit:contain}.auth-card form{display:grid;gap:16px}.auth-card label{display:grid;gap:7px}.text-link{color:var(--teal);font-weight:700}.notice-box{padding:12px;background:#eff8e9;border-radius:9px;margin-bottom:14px}.portal-header{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:18px;padding:12px 20px;margin-bottom:22px}.portal-header img{width:260px;height:65px;object-fit:contain}.portal-header div{display:flex;gap:18px;align-items:center}.portal-header a{color:var(--teal);font-weight:700}.page-actions{display:flex;justify-content:space-between;align-items:center}.appointment-list{display:grid;gap:12px}.appointment-list article{display:flex;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:14px;padding:18px}.appointment-list p{margin:6px 0}.portal-status{align-self:start;padding:6px 10px;border-radius:999px;background:#eee}.status-approved{background:#e8f6df;color:#2f6c10}.status-pending{background:#fff5d8;color:#7b5c00}.patient-summary{display:grid;gap:4px;padding:16px;border-radius:12px;background:#f3f8ef;margin-bottom:16px}.patient-summary span{color:var(--muted)}@media(max-width:700px){.portal-header,.portal-header div,.page-actions{align-items:flex-start;flex-direction:column}.portal-header img{width:220px}.appointment-list article{flex-direction:column}}

.manage-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:end;margin:18px 0}.secondary-action,.danger-action{border:0;border-radius:10px;padding:13px 18px;font-weight:700;cursor:pointer}.secondary-action{background:#eef4ee;color:#0b777b}.danger-action{background:#9f2f2f;color:#fff}.appointment-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}.appointment-actions a{font-weight:700;color:var(--teal);font-size:14px}
.portal-nav{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}.portal-nav a{font-size:.9rem}.appointment-actions a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;border-radius:10px;text-decoration:none;font-size:18px;background:#edf6eb;border:1px solid #d8e8d3}.secondary-action{display:inline-flex;padding:11px 16px;border:1px solid #6aa13d;border-radius:12px;color:#285c35;text-decoration:none;font-weight:700}

/* V13: navegación del portal y formularios de cuenta */
.portal-nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.portal-nav a { text-decoration:none; font-weight:700; color:#0b777b; }
.portal-nav a:hover { text-decoration:underline; }

/* V15: acciones visibles para reagendar y cancelar */
.appointment-actions-text a{gap:7px;padding:8px 11px;min-width:auto;font-size:14px}
.appointment-actions-text a span{display:inline}
.manage-appointment-link{background:#eaf5e4!important;border-color:#bad8aa!important;color:#2f6716!important}
.manage-disabled{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:10px;background:#f2f2f2;color:#777;font-size:14px;font-weight:700}
.appointment-manage-card{max-width:900px;margin:0 auto}
.manage-section{padding:18px 0;border-top:1px solid var(--line)}
.manage-section h2{margin:0 0 8px;font-size:21px}
.cancel-section{margin-top:18px}
@media(max-width:700px){.appointment-actions-text a,.manage-disabled{width:100%;justify-content:center}.appointment-actions-text a span{display:inline}}

/* V17: reagendamiento seguro: únicamente fechas y horas con disponibilidad real */
.manage-form select[name="date"]{min-width:230px}.availability-note{padding:12px 14px;border-radius:10px;background:#eff8e9;color:#315f22;font-size:14px}.empty-times{border:1px solid #e2e6df}
.payment-policy{margin:24px 0;padding:20px;text-align:left;background:#f3f8ee;border:1px solid #dce9cf;border-radius:16px}.payment-policy h2{margin-top:0;color:var(--teal)}
/* V19 responsive booking experience */
.portal-header{position:sticky;top:0;z-index:20;background:rgba(255,252,244,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(11,80,83,.08);padding:.75rem 1rem}.portal-header>div{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.booking-layout{align-items:start}.main-card,.profile-card,.summary-card{border-radius:24px}.service-row{min-height:78px}.time-choice span{min-height:48px;display:grid;place-items:center}.primary-action{min-height:50px;font-weight:800}.booking-notice{border-left:4px solid #bfdc35;background:#f6f9e5;padding:.75rem 1rem;border-radius:12px}.selected-time-note:not(:empty){background:#e8f5ef;color:#075657;padding:.7rem 1rem;border-radius:12px;font-weight:800}
@media(max-width:820px){.booking-shell{padding:0}.portal-header{margin:0}.portal-header img{max-width:150px}.portal-header>div strong{width:100%}.portal-header>div a{padding:.5rem .7rem;border-radius:999px;background:#eef4ef;text-decoration:none}.step-title{padding:1rem;margin:0}.step-title h1{font-size:1.45rem}.booking-layout{display:flex;flex-direction:column;padding:0 .75rem 1.25rem;gap:.75rem}.main-card{order:1;width:100%;padding:1rem}.booking-layout>aside{order:2;width:100%;display:grid;gap:.75rem}.profile-card,.summary-card{padding:1rem}.calendar-time-layout{display:flex;flex-direction:column;gap:1rem}.calendar{gap:.2rem}.calendar a,.calendar span{min-height:42px;display:grid;place-items:center}.time-column{border-top:1px solid #e3ece5;padding-top:.8rem}.time-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.reservation-form{padding:1rem}.patient-summary{display:grid;gap:.25rem}.primary-action{width:100%;position:sticky;bottom:.5rem;z-index:5;box-shadow:0 10px 26px rgba(11,80,83,.22)}.summary-card footer{position:static}.success-panel{margin:1rem;border-radius:24px;padding:1.25rem}.payment-policy{padding:1rem}.service-row{padding:.8rem}.service-row small{line-height:1.35}}
@media(max-width:420px){.time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar a,.calendar span{font-size:.9rem}.main-card h2{font-size:1.2rem}.portal-header>div{gap:.35rem}.portal-header>div a{font-size:.8rem}.service-icon{display:none}}


/* PiensaMente V5 — reserva primero, acceso después */

.booking-page {
    width: min(1380px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
}

.booking-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
    margin-bottom: 1.2rem;
}

.booking-progress span {
    min-height: 42px;
    display: grid;
    place-items: center;
    padding: .55rem;
    border-radius: 12px;
    background: #edf1ec;
    color: #75817c;
    font-size: .76rem;
    font-weight: 850;
    text-align: center;
}

.booking-progress span.is-current {
    background: #0b676a;
    color: #fff;
}

.booking-progress span.is-done {
    background: #e1efd8;
    color: #3f7822;
}

.booking-step {
    padding: clamp(1rem, 2.5vw, 2rem);
    border: 1px solid #dfe8df;
    border-radius: 26px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 40px rgba(18,63,61,.07);
}

.booking-step-heading {
    max-width: 750px;
    margin-bottom: 1.5rem;
}

.booking-step-heading.compact {
    margin-bottom: 1rem;
}

.booking-step-heading h1 {
    margin: .35rem 0 .45rem;
    color: #123f42;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.05;
}

.booking-step-heading p {
    margin: 0;
    color: #697570;
}

.service-list-v5 {
    display: grid;
    gap: .8rem;
}

.service-professional {
    margin: 1.1rem 0 .2rem;
    color: #66716d;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.service-card-v5 {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 1rem;
    min-height: 112px;
    padding: 1rem;
    border: 1px solid #dfe7df;
    border-radius: 20px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: .18s ease;
}

.service-card-v5:hover {
    transform: translateY(-2px);
    border-color: #aed199;
    box-shadow: 0 14px 30px rgba(18,63,61,.08);
}

.service-card-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    background: #f8fbf6;
}

.service-card-icon img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.service-card-copy {
    min-width: 0;
    display: grid;
    gap: .55rem;
}

.service-card-copy strong {
    color: #163f41;
    font-size: 1.08rem;
}

.service-card-copy small {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    color: #697570;
    font-weight: 750;
}

.service-card-arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #e8f3e2;
    color: #438322;
    font-size: 1.55rem;
}

.booking-back {
    display: inline-flex;
    margin-bottom: 1rem;
    color: #0b676a;
    font-weight: 850;
    text-decoration: none;
}

.booking-grid-v5 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .56fr);
    gap: 1.2rem;
}

.booking-calendar-card,
.booking-times-card {
    padding: 1.1rem;
    border: 1px solid #e0e8df;
    border-radius: 22px;
    background: #fbfcf9;
}

.calendar-navigation-v5 {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.calendar-navigation-v5 a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e7f2e2;
    color: #275f2f;
    font-size: 1.45rem;
    text-decoration: none;
}

.calendar-navigation-v5 strong {
    color: #153f41;
    text-align: center;
    text-transform: capitalize;
}

.calendar-weekdays-v5,
.calendar-days-v5 {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .38rem;
}

.calendar-weekdays-v5 {
    margin-bottom: .45rem;
    color: #75817c;
    font-size: .72rem;
    font-weight: 900;
    text-align: center;
}

.calendar-day-v5,
.calendar-empty {
    aspect-ratio: 1;
}

.calendar-day-v5 {
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #173f41;
    font-weight: 850;
    text-decoration: none;
}

.calendar-day-v5:not(.is-disabled):hover {
    background: #e7f2e2;
}

.calendar-day-v5.is-selected {
    background: #56a91d;
    color: #fff;
}

.calendar-day-v5.is-disabled {
    color: #c2c8c4;
    text-decoration: line-through;
}

.booking-times-card header h2 {
    margin: .25rem 0 1rem;
    color: #123f42;
}

.time-list-v5 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.time-list-v5 button {
    width: 100%;
    min-height: 62px;
    display: grid;
    place-items: center;
    gap: .1rem;
    border: 1px solid #cfded2;
    border-radius: 14px;
    background: #fff;
    color: #123f42;
    cursor: pointer;
}

.time-list-v5 button:hover {
    border-color: #66ad2e;
    background: #edf7e8;
}

.time-list-v5 button strong {
    font-size: 1rem;
}

.time-list-v5 button small {
    color: #7a8580;
}

.hold-help {
    margin: 1rem 0 0;
    color: #6e7b75;
    font-size: .8rem;
    line-height: 1.5;
}

.booking-empty-state {
    min-height: 300px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .35rem;
    color: #74807b;
    text-align: center;
}

.booking-empty-state > span {
    font-size: 2.2rem;
    color: #6fa63d;
}

.auth-choice-page,
.confirm-booking-page,
.booking-success-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 90% 8%, rgba(96,166,42,.12), transparent 24rem),
        #f4f6f2;
}

.auth-choice-card,
.confirm-booking-card,
.booking-success-card {
    width: min(920px, 100%);
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid #dfe8df;
    border-radius: 26px;
    background: #fffef8;
    box-shadow: 0 20px 50px rgba(18,63,61,.10);
}

.auth-choice-logo,
.confirm-logo {
    display: block;
    width: min(300px, 70%);
    margin: 0 auto 1rem;
}

.selected-booking-summary {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 18px;
    background: #edf5e9;
    text-align: center;
}

.selected-booking-summary h1,
.selected-booking-summary h2 {
    margin: .35rem 0;
    color: #123f42;
}

.selected-booking-summary p {
    margin: .2rem 0;
    color: #0b676a;
    font-weight: 900;
}

.selected-booking-summary small {
    color: #697570;
}

.hold-countdown {
    margin: 1rem 0;
    padding: .8rem;
    border-radius: 14px;
    background: #fff4da;
    color: #8d5d16;
    text-align: center;
}

.auth-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.auth-choice-option {
    min-height: 210px;
    display: grid;
    align-content: center;
    gap: .55rem;
    padding: 1.2rem;
    border: 1px solid #dfe7df;
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
    transition: .18s ease;
}

.auth-choice-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(18,63,61,.08);
}

.auth-choice-option.is-existing {
    background: #e9f4f3;
}

.auth-choice-option.is-new {
    background: #edf5e8;
}

.auth-choice-icon {
    font-size: 2rem;
}

.auth-choice-option strong {
    color: #153f41;
    font-size: 1.2rem;
}

.auth-choice-option small {
    color: #697570;
    line-height: 1.45;
}

.auth-choice-option b {
    color: #0b676a;
}

.auth-choice-note {
    margin: 1rem 0 0;
    color: #74807b;
    text-align: center;
}

.booking-expired {
    display: grid;
    place-items: center;
    gap: .5rem;
    min-height: 360px;
    text-align: center;
}

.booking-expired > span {
    font-size: 3rem;
    color: #6da43c;
}

.confirm-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.confirm-summary-grid > div {
    display: grid;
    gap: .2rem;
    padding: .8rem;
    border-radius: 14px;
    background: #f4f7f1;
}

.confirm-summary-grid span {
    color: #75817c;
    font-size: .72rem;
}

.confirm-summary-grid strong {
    color: #173f41;
}

.confirm-patient {
    display: grid;
    gap: .2rem;
    margin-bottom: 1rem;
    padding: .9rem;
    border-left: 4px solid #5fa82b;
    background: #f7faf4;
}

.confirm-patient span {
    color: #6f7b76;
    font-size: .82rem;
}

.password-field-v5 {
    position: relative;
    display: block;
}

.password-field-v5 input {
    width: 100%;
    padding-right: 3.1rem;
}

.password-field-v5 button {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.booking-success-card {
    max-width: 680px;
    text-align: center;
}

.success-check {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    background: #5ca71d;
    color: #fff;
    font-size: 2rem;
}

.reservation-policy-box {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 16px;
    background: #fff3d6;
    color: #775114;
    text-align: left;
}

.success-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .7rem 1rem;
    border: 1px solid #cbded0;
    border-radius: 14px;
    color: #0b676a;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 900px) {
    .booking-grid-v5 {
        grid-template-columns: 1fr;
    }

    .auth-choice-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .booking-page {
        width: min(100% - 1rem, 1380px);
        padding-top: .8rem;
    }

    .booking-progress {
        grid-template-columns: repeat(4, minmax(62px, 1fr));
        overflow-x: auto;
    }

    .booking-progress span {
        font-size: .66rem;
    }

    .service-card-v5 {
        grid-template-columns: 58px minmax(0, 1fr) 34px;
        gap: .7rem;
        padding: .8rem;
    }

    .service-card-icon {
        width: 55px;
        height: 55px;
        border-radius: 16px;
    }

    .service-card-icon img {
        width: 52px;
        height: 52px;
    }

    .service-card-copy small {
        display: grid;
        gap: .2rem;
    }

    .calendar-days-v5,
    .calendar-weekdays-v5 {
        gap: .2rem;
    }

    .time-list-v5 {
        grid-template-columns: 1fr;
    }

    .confirm-summary-grid,
    .success-actions {
        grid-template-columns: 1fr;
    }
}


/* PiensaMente V5.0.2 — corrección del logo en la cabecera de reserva */

.portal-topbar {
    min-height: 84px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: .7rem 1.2rem !important;
    overflow: hidden !important;
    background: #fffdf7 !important;
    border-bottom: 1px solid #e1e8df !important;
    box-shadow: 0 5px 18px rgba(18, 63, 61, .05) !important;
}

.portal-brand {
    display: inline-flex !important;
    align-items: center !important;
    width: 250px !important;
    max-width: 42vw !important;
    height: 66px !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.portal-brand img {
    display: block !important;
    width: 100% !important;
    max-width: 250px !important;
    height: 66px !important;
    max-height: 66px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.portal-account-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .9rem !important;
    flex-wrap: wrap !important;
    margin-left: auto !important;
}

.portal-account-links a,
.portal-account-links strong {
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    .portal-topbar {
        min-height: 72px !important;
        padding: .55rem .75rem !important;
    }

    .portal-brand {
        width: 205px !important;
        max-width: 62vw !important;
        height: 54px !important;
    }

    .portal-brand img {
        max-width: 205px !important;
        height: 54px !important;
        max-height: 54px !important;
    }

    .portal-account-links strong {
        display: none !important;
    }

    .portal-account-links {
        gap: .55rem !important;
    }

    .portal-account-links a {
        font-size: .82rem !important;
    }
}

@media (max-width: 480px) {
    .portal-topbar {
        min-height: 66px !important;
        padding: .45rem .6rem !important;
    }

    .portal-brand {
        width: 170px !important;
        max-width: 58vw !important;
        height: 46px !important;
    }

    .portal-brand img {
        max-width: 170px !important;
        height: 46px !important;
        max-height: 46px !important;
    }

    .portal-account-links a {
        font-size: .75rem !important;
    }
}


/* PiensaMente V5.0.3 — controles de cuenta del portal */

.portal-account-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .6rem !important;
    margin-left: auto !important;
}

.portal-nav-button {
    min-height: 42px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    padding: .62rem .85rem !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease,
        border-color .16s ease !important;
}

.portal-nav-button:hover {
    transform: translateY(-1px);
}

.portal-nav-button:focus-visible {
    outline: 3px solid rgba(11, 103, 106, .22);
    outline-offset: 2px;
}

.portal-nav-button svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: currentColor;
}

.portal-nav-login {
    color: #fff !important;
    background: linear-gradient(135deg, #0b777b, #075b5f) !important;
    box-shadow: 0 8px 18px rgba(11, 103, 106, .18) !important;
}

.portal-nav-login:hover {
    background: linear-gradient(135deg, #0c8589, #075256) !important;
    box-shadow: 0 10px 22px rgba(11, 103, 106, .23) !important;
}

.portal-nav-appointments {
    color: #346f20 !important;
    background: #e8f3e1 !important;
    border-color: #d3e7c7 !important;
}

.portal-nav-appointments:hover {
    background: #dcefd2 !important;
    box-shadow: 0 8px 18px rgba(76, 129, 37, .13) !important;
}

.portal-nav-logout {
    color: #80513d !important;
    background: #fff2eb !important;
    border-color: #efd8cd !important;
}

.portal-nav-logout:hover {
    background: #fde7dc !important;
    box-shadow: 0 8px 18px rgba(128, 81, 61, .12) !important;
}

.portal-user-chip {
    min-height: 44px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    padding: .35rem .65rem .35rem .4rem;
    border: 1px solid #dfe8df;
    border-radius: 14px;
    background: #f7faf4;
}

.portal-user-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(135deg, #68b325, #0b8589);
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
}

.portal-user-copy {
    min-width: 0;
    display: grid;
    gap: .05rem;
    line-height: 1.08;
}

.portal-user-copy small,
.portal-user-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-user-copy small {
    color: #7a8580;
    font-size: .61rem;
    font-weight: 750;
}

.portal-user-copy strong {
    max-width: 180px;
    color: #173f41;
    font-size: .76rem;
}

@media (max-width: 820px) {
    .portal-user-copy small {
        display: none;
    }

    .portal-user-copy strong {
        max-width: 130px;
    }

    .portal-nav-button {
        min-height: 40px;
        padding: .58rem .68rem !important;
    }
}

@media (max-width: 650px) {
    .portal-account-links {
        gap: .35rem !important;
    }

    .portal-user-chip {
        grid-template-columns: 32px;
        padding: .3rem !important;
    }

    .portal-user-copy {
        display: none;
    }

    .portal-user-avatar {
        width: 32px;
        height: 32px;
    }

    .portal-nav-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .portal-nav-button span {
        display: none;
    }

    .portal-nav-button svg {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }
}

@media (max-width: 420px) {
    .portal-topbar {
        gap: .4rem !important;
    }

    .portal-brand {
        max-width: 54vw !important;
    }
}