/* Login screens for Domicilia Tu Empresa.

   These pages sit on their own origin (login.domiciliatuempresa.com) but are
   part of the same journey as the website, so they carry the same tokens,
   typography and component shapes as the storefront. There is no CSS framework:
   this file is the whole stylesheet. */

/* ── Fonts ────────────────────────────────────────────────────────────── */
/* Same self-hosted files as the website: no request to Google Fonts. */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/titillium-web-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/titillium-web-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/lato-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/lato-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/lato-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/lato-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
/* Kept in sync with the website's :root block. */
:root {
    --dte-brand: #215968;
    --dte-brand-deep: #16414c;
    --dte-brand-light: #35aeb1;
    --dte-accent: #ffc000;
    --dte-ink: #1f2d2c;
    --dte-slate: #566b69;
    --dte-mist: #f1f3f3;
    --dte-line: #e3e6e6;
    --dte-danger: #c0392b;
    --dte-shadow: 0 18px 40px -20px rgba(28, 40, 44, .22);
    --dte-shadow-sm: 0 8px 20px -12px rgba(28, 40, 44, .20);
    --dte-radius: 16px;
}

/* ── Page ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    /* Same two brand hues as the website's page headers, but stronger: there the
       gradient sits behind body copy, here it is the whole screen behind a white
       card, and at the website's opacity it read as plain white. */
    background:
        radial-gradient(58% 62% at 85% 12%, rgba(53, 174, 177, .30), transparent 66%),
        radial-gradient(58% 62% at 8% 94%, rgba(255, 192, 0, .30), transparent 66%),
        linear-gradient(150deg, #eef4f4 0%, #f7f9f9 46%, #fdfaf1 100%);
    background-attachment: fixed;
    color: var(--dte-ink);
    font-family: 'Titillium Web', 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    min-height: 100%;
    /* Flex centring rather than absolute positioning, so a long validation
       message pushes the page down instead of overflowing it. */
    display: flex;
    flex-direction: column;
}

.auth {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.auth__panel {
    width: 100%;
    max-width: 400px;
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.auth__card {
    background: #ffffff;
    border: 1px solid var(--dte-line);
    border-radius: var(--dte-radius);
    box-shadow: var(--dte-shadow);
    padding: 32px 28px;
}

.auth__brand {
    display: block;
    margin: 0 auto 24px;
    width: 190px;
    max-width: 70%;
    height: auto;
}

.auth__title {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--dte-ink);
    margin: 0 0 6px;
    text-align: center;
    text-wrap: balance;
}

.auth__accent {
    color: var(--dte-brand);
}

.auth__lead {
    color: var(--dte-slate);
    font-size: .95rem;
    margin: 0 0 22px;
    text-align: center;
}

.auth__lead--continuation {
    margin-top: -10px;
}

.auth__foot {
    color: var(--dte-slate);
    font-size: .82rem;
    margin: 20px 0 0;
    text-align: center;
}

.auth__hint {
    color: var(--dte-slate);
    font-size: .82rem;
    margin: -10px 0 20px;
    text-align: center;
}

/* ── Fields ───────────────────────────────────────────────────────────── */
/* The fieldset groups the inputs for assistive technology, but the browser
   default draws a border and padding around it — a grey box inside the card. */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.field {
    margin-bottom: 16px;
}

.field__label {
    display: block;
    margin-bottom: 6px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--dte-slate);
}

.field__input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--dte-line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--dte-ink);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field__input::placeholder {
    color: #9aa8a6;
}

.field__input:focus {
    outline: none;
    border-color: var(--dte-brand);
    box-shadow: 0 0 0 3px rgba(33, 89, 104, .12);
}

.field__control {
    position: relative;
}

.field__input--with-visibility {
    padding-right: 52px;
}

.field__visibility {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dte-brand);
    cursor: pointer;
    transform: translateY(-50%);
}

.field__visibility:focus-visible {
    outline: 2px solid var(--dte-brand);
    outline-offset: 1px;
}

.field__visibility-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.field__visibility-icon[hidden] {
    display: none;
}

.field__validation {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    color: #8f2c20;
    font-size: .8rem;
}

.field__validation:empty {
    min-height: 0;
    margin-top: 0;
}

/* ── Remember me / forgot password row ────────────────────────────────── */
.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--dte-slate);
    cursor: pointer;
    margin: 0;
}

/* Drawn rather than native: the browser default ignores the brand colour and
   renders as a grey square next to the rounded inputs. Note the SVG tick below
   needs `data:` in the img-src of the CSP (see SecurityHeadersAttribute). */
.check__box {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex: none;
    margin: 0;
    border: 1px solid #b8c4c2;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.check__box:checked {
    /* Longhands on purpose: the `background` shorthand would reset the tick set
       below it, and the two are easy to reorder by accident. */
    background-color: var(--dte-brand);
    border-color: var(--dte-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.check__box:focus-visible {
    outline: 2px solid var(--dte-brand-light);
    outline-offset: 2px;
}

.link {
    color: var(--dte-brand);
    font-size: .88rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link:hover {
    color: var(--dte-brand-deep);
}

.link:focus-visible {
    outline: 2px solid var(--dte-brand-light);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: .5rem;
    padding: 9px 18px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: 'Lato', sans-serif;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn--primary {
    background: var(--dte-brand);
    color: #ffffff;
    box-shadow: var(--dte-shadow-sm);
}

.btn--primary:hover:not(:disabled) {
    background: var(--dte-brand-deep);
    color: #ffffff;
}

.btn--secondary {
    background: #ffffff;
    border-color: var(--dte-brand);
    color: var(--dte-brand);
    margin-top: 10px;
}

.btn--secondary:hover:not(:disabled) {
    background: var(--dte-brand);
    border-color: var(--dte-brand);
    color: #ffffff;
}

.btn:focus-visible {
    outline: 3px solid var(--dte-accent);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: .5;
    cursor: default;
}

/* ── Messages ─────────────────────────────────────────────────────────── */
.alert {
    border-radius: 12px;
    font-size: .9rem;
    margin: 0 0 20px;
    padding: 12px 16px;
}

.alert--error {
    background: #fdf3f2;
    border: 1px solid #f0c8c3;
    color: #8f2c20;
}

.alert p {
    margin: 0;
}

.alert__detail {
    margin-top: 6px;
    font-size: .82rem;
    opacity: .85;
}

.alert__meta {
    color: var(--dte-slate);
    font-size: .78rem;
    margin-top: 10px;
    text-align: center;
    word-break: break-all;
}

/* ── Home ─────────────────────────────────────────────────────────────── */
.home {
    text-align: center;
}

.home__brand {
    width: 260px;
    max-width: 78%;
    height: auto;
}

@media (max-width: 420px) {
    .auth {
        padding: 28px 16px;
    }

    .auth__card {
        padding: 26px 20px;
    }
}