:root {
    color-scheme: dark;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    background: #020807;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
/* Bootstrap sólo aporta el modal. Paleta verde petróleo a negro del portal. */
body { background: transparent; color: #fff; font-family: Arial, Helvetica, sans-serif; }
.recovery-modal .modal-content { background: #0b2523; color: #f5faf8; border: 1px solid #31504b; border-radius: 16px; }
.recovery-modal .modal-header, .recovery-modal .modal-footer { border-color: #31504b; }
.recovery-modal .close { color: #fff; opacity: 1; text-shadow: none; }
.recovery-modal .modal-footer .btn { width: auto; min-width: 100px; margin-top: 0; }
.recovery-panel .btn:disabled { opacity: .65; cursor: wait; }
button, input { font: inherit; }

.access-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(170deg, #007d76 0%, #00645f 28%, #063b38 56%, #020807 100%);
}

.company-photo {
    width: 100%;
    height: 100%;
    opacity: .13;
    filter: grayscale(1);
    mix-blend-mode: luminosity;
}

.access-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(0, 80, 73, .18), transparent 72%),
        linear-gradient(180deg, rgba(0, 112, 102, .08) 0%, rgba(2, 29, 26, .32) 55%, #010403 100%);
}

.shell {
    width: min(100%, 438px);
    min-height: 100vh;
    min-height: 100svh;
    padding: 64px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand { text-align: center; margin-bottom: 42px; }
.brand-logo {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 8px 36px rgba(0, 15, 37, .15);
}
.brand h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.6px; }
.brand p { margin: 9px 0 0; font-size: 16px; color: #e1efea; letter-spacing: .3px; }

.panel[hidden] { display: none; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.field { margin: 0 0 12px; }
.input-wrap { position: relative; }
.input-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b8880;
    pointer-events: none;
}
input:not([type=hidden]) {
    color-scheme: light;
    display: block;
    width: 100%;
    height: 51px;
    border: 1px solid transparent;
    border-radius: 28px;
    background: #edf5f2;
    color: #173a33;
    padding: 0 23px;
    font-size: 14px;
    box-shadow: 0 3px 16px rgba(0, 14, 35, .06);
}
.input-wrap input { padding-left: 52px; }
input::placeholder { color: #4c6b62; opacity: 1; }
input:focus-visible { outline: 3px solid #75deca; outline-offset: 3px; }
.btn {
    width: 100%;
    min-height: 51px;
    margin-top: 8px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 28px;
    background: #303338;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, box-shadow .18s;
}
.btn:hover { background: #41464e; box-shadow: 0 7px 22px rgba(0,0,0,.15); }
button:focus-visible { outline: 3px solid #75deca; outline-offset: 4px; }
.switcher { margin: 25px 0 0; text-align: center; color: #c6ded6; font-size: 14px; line-height: 1.8; }
.switcher button { border: 0; background: none; color: #fff; padding: 2px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.switcher a { color: #fff; text-underline-offset: 4px; }
.switcher a:focus-visible { outline: 3px solid #75deca; outline-offset: 4px; }
.login-action-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.login-recovery { display: flex; justify-content: center; margin: 12px 0 15px; }
.login-recovery a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 4px; color: #8fe2d2; font-size: 14px;
    line-height: 1.5; text-decoration: none;
}
.login-recovery a:hover { text-decoration: underline; text-underline-offset: 4px; }
.login-recovery a:focus-visible { outline: 3px solid #75deca; outline-offset: 4px; }
.login-invite {
    margin-top: 8px; padding: 22px; border: 1px solid #31504b;
    border-radius: 16px; background: #0b2523; text-align: center;
}
.login-invite h3 { margin: 0 0 5px; color: #f5faf8; font-size: 16px; font-weight: 700; line-height: 1.4; }
.login-invite p { margin: 0 0 16px; color: #c9ded7; font-size: 14px; line-height: 1.5; }
.login-invite-button {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 46px; padding: 10px 14px;
    border: 1px solid #8fe2d2; border-radius: 26px; background: #103730;
    color: #8fe2d2; font-size: 14px; font-weight: 700; line-height: 1.5; cursor: pointer;
}
.login-invite-button:hover { background: #184a40; }
.recovery-panel label { display: block; margin: 0 0 7px 13px; font-size: 14px; }
.access-footer { margin: 42px 0 0; text-align: center; color: #b5ccc4; font-size: 11px; letter-spacing: .7px; }
.message { padding: 14px 17px; margin: 0 0 20px; border-radius: 14px; background: #fff0f0; color: #882525; font-size: 14px; line-height: 1.5; }
.message.success { background: #e9f8ef; color: #195b36; }

.shell[data-panel=registro] { width: min(100%, 558px); padding-top: 38px; padding-bottom: 38px; }
.shell[data-panel=registro] .brand { margin-bottom: 24px; }
.shell[data-panel=registro] .brand-logo { width: 88px; height: 88px; margin-bottom: 14px; }
.registration-title { margin: 0 0 8px; text-align: center; font-size: 21px; }
.lead { margin: 0 0 24px; text-align: center; font-size: 14px; color: #dfede7; line-height: 1.55; }
#panel-registro label { display: block; margin: 0 0 7px 13px; color: #f0f7f3; font-size: 12px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.note { margin: 16px 10px 0; color: #d3e6dd; line-height: 1.6; font-size: 12px; text-align: center; }
@media (max-width: 520px) {
    .shell { padding: 38px 26px; }
    .brand { margin-bottom: 34px; }
    .brand-logo { width: 104px; height: 104px; }
    .brand h1 { font-size: 26px; }
    .brand p { font-size: 15px; }
    .grid { grid-template-columns: 1fr; gap: 0; }
    .company-photo { opacity: .12; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
@media (max-width: 380px) { .login-invite { padding: 19px 16px; } }