/* Sign-in screens for Grupo Fontana Empleados.

   The file has two halves. "Brand" holds what is Grupo Fontana's own: the
   fonts, the colours, the radii and the page background; the logo is an image
   from the Grupo Fontana management panel with a dark subtitle for light cards. "Structure"
   holds the layout and the components and reads the brand only through the
   custom properties, so it is the same in every identity service. There is no CSS framework: this file is the whole
   stylesheet. */

/* ══ Brand ══════════════════════════════════════════════════════════════ */

/* Inter for the text and Playfair Display for the headings,
   a serif that suits a restaurant group. Self-hosted: the CSP
   (default-src 'self') blocks Google Fonts. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-variable-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/playfair-display-700-latin.woff2') format('woff2');
}

/* The management panel's palette: charcoal, Fontana gold, bottle green and
   warm paper. Every text colour reaches 4.5:1 on the surface it sits on, and
   every border or icon that identifies a control reaches 3:1. Gold is an
   accent and never sits behind white text; on the card it is darkened to
   reach 3:1 as the focus ring. */
:root {
    --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

    --color-page: #1f1e1b;
    --color-surface: #fcfbf8;
    --color-ink: #1f1e1b;
    --color-text: #2b2a26;
    --color-muted: #6f6b62;
    --color-line: #e3dfd5;
    --color-line-strong: #858074;

    --color-primary: #1f1e1b;
    --color-primary-text: #ffffff;
    --color-primary-hover: #1e4d3a;
    --color-primary-hover-text: #ffffff;
    --color-secondary: #1f1e1b;
    --color-link: #1e4d3a;
    --color-link-hover: #1f1e1b;
    --color-focus: #857402;
    --color-accent-surface: #f3eed9;

    --color-error: #a3261b;
    --color-error-surface: #f9e5e2;

    --radius-card: 20px;
    --radius-control: 10px;
    --radius-button: 999px;
    --shadow-card: 0 30px 80px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .12);

    --brand-width: 250px;
    --brand-width-small: 210px;

    --font-size-body: 16px;
    --space-brand: 28px;
    --card-padding: 40px 44px;
    --title-size: 2rem;
    --space-lead: 26px;
    --space-field: 18px;
    --control-height: 52px;
    --button-height: 54px;

}

.auth {
    background:
        radial-gradient(circle at 82% 14%, rgba(175, 152, 3, .16), transparent 32%),
        radial-gradient(circle at 12% 88%, rgba(30, 77, 58, .32), transparent 42%),
        var(--color-page);
}

/* The headings carry the display serif. */
.auth__title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
}

/* Smaller text from tablet width up. Phones keep 16px, the size below which iOS zooms into a field when it is
   tapped. */
@media (min-width: 576px) {
    :root {
        --font-size-root: 93.75%;
        --font-size-body: 15px;
    }
}

/* ══ Structure ══════════════════════════════════════════════════════════ */

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

html {
    font-size: var(--font-size-root, 100%);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-body, 17px);
    line-height: 1.55;
}

/* ── Page ─────────────────────────────────────────────────────────────── */
/* The panel centers when it fits and the page grows when content needs more height. */
.auth {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 5vh, 52px) 16px;
}

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

.auth__brand {
    display: block;
    width: var(--brand-width);
    max-width: 100%;
    height: auto;
    margin: 0 auto var(--space-brand, 28px);
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.auth__card {
    padding: var(--card-padding, 40px);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.auth__card--login {
    border-color: #ddd7ca;
    background: linear-gradient(155deg, #ffffff, var(--color-surface) 75%);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.auth__card--login .field__input {
    background: #ffffff;
}

.auth__card--login .btn--primary {
    border-color: #1f1e1b;
    background: #1f1e1b;
    color: #ffffff;
    box-shadow: 0 9px 18px rgba(31, 30, 27, .15);
}

.auth__card--login .btn--primary:hover:not(:disabled) {
    border-color: #35332e;
    background: #35332e;
    color: #ffffff;
}

.auth__card--centered {
    text-align: center;
}

.auth__icon {
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--color-accent-surface);
    color: var(--color-link);
}

.auth__icon--error {
    background: var(--color-error-surface);
    color: var(--color-error);
}

/* The status and error icons are drawn with strokes. */
.auth__icon svg,
.alert__icon,
.field__error-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.auth__icon svg {
    width: 28px;
    height: 28px;
}

.auth__title {
    margin: 0 0 8px;
    color: var(--color-ink);
    font-size: var(--title-size, 2rem);
    font-weight: 700;
    line-height: 1.12;
}

.auth__lead {
    margin: 0 0 var(--space-lead, 28px);
    color: var(--color-muted);
    font-size: 1.06rem;
}

.auth__actions {
    display: grid;
    gap: 12px;
}

.auth__foot {
    margin: 20px 0 0;
    text-align: center;
}

.auth__note {
    color: var(--color-muted);
    font-size: .95rem;
}

.auth__meta {
    margin: 20px 0 0;
    color: var(--color-muted);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

/* ── Fields ───────────────────────────────────────────────────────────── */
fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field {
    margin-bottom: var(--space-field, 20px);
}

.field__label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-ink);
    font-weight: 700;
}

.field__control {
    position: relative;
}

.field__input {
    display: block;
    width: 100%;
    min-height: var(--control-height, 50px);
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: inherit;
    /* 16px or more keeps iOS from zooming into the field. */
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.field__input::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.field__input:focus {
    border-color: var(--color-focus);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus);
}

.field__input[aria-invalid="true"] {
    border-color: var(--color-error);
    box-shadow: inset 0 0 0 1px var(--color-error);
}

.field__input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--color-error);
}

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

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

.field__visibility:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: -3px;
}

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

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

.field__hint {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: .88rem;
    line-height: 1.4;
}

.field__error {
    display: flex;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--color-error);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
}

.field__error-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.field__error p {
    margin: 0;
}

.field__error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.field__error li + li {
    margin-top: 4px;
}

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

.check {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--color-text);
    cursor: pointer;
}

.check__box {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-focus);
    cursor: pointer;
}

.check__box:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* ── Links and buttons ────────────────────────────────────────────────── */
.link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--color-link);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

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

/* A link inside a sentence keeps the line's height. */
.link--inline {
    display: inline;
    min-height: 0;
}

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

.btn {
    display: inline-flex;
    width: 100%;
    min-height: var(--button-height, 52px);
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--radius-button);
    font-family: inherit;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn--primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-text);
}

.btn--primary:hover:not(:disabled) {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    color: var(--color-primary-hover-text);
}

.btn--secondary {
    border-color: var(--color-secondary);
    background: transparent;
    color: var(--color-secondary);
}

.btn--secondary:hover {
    background: var(--color-secondary);
    color: var(--color-surface);
}

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

.btn:disabled {
    cursor: progress;
    opacity: .75;
}

/* ── Messages ─────────────────────────────────────────────────────────── */
/* The summary carries only the errors that belong to no field. It sits below
   the submit button, so nothing already on screen moves when it appears: the
   card only grows downwards. The box is the light background alone, without a
   border. */
.alert {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--color-error-surface);
    color: var(--color-error);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
}

/* A message that is part of the page from the start, above its action. */
.alert--static {
    margin: 0 0 20px;
}

.alert__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.alert p {
    margin: 0;
}

.alert__detail {
    margin-top: 4px;
    font-weight: 400;
}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .auth {
        padding: 24px 14px;
    }

    .auth__brand {
        width: var(--brand-width-small);
        margin-bottom: 22px;
    }

    .auth__card {
        padding: 28px 20px;
    }

    .auth__card--login {
        padding: 30px 24px;
    }

    .auth__title {
        font-size: 1.7rem;
    }

    .auth__lead {
        margin-bottom: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}