/* Sign-in screens for the Grupo Fontana ERP.

   The file has two halves. "Brand" holds what is Grupo Fontana's own: the
   fonts, the colours, the radii, the page background, the wordmark and the
   company name under it. "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 and the wordmark,
   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: #8c7012;
    --color-accent-surface: #f3eedf;

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

    --radius-card: 20px;
    --radius-control: 10px;
    --radius-button: 999px;
    --shadow-card: 0 28px 80px rgba(0, 0, 0, .45);

    --brand-width: 260px;
    --brand-width-small: 220px;

    --color-brand-gold: #b8961e;
    --color-brand-paper: #f6f4ef;
}

.auth {
    background:
        radial-gradient(circle at 80% 12%, rgba(184, 150, 30, .16), transparent 34%),
        radial-gradient(circle at 12% 88%, rgba(30, 77, 58, .28), transparent 40%),
        var(--color-page);
}

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

/* The wordmark is text, not an image, so it is drawn with the page's own
   serif: "Fontana" in gold and the group's line under it. */
.auth__wordmark {
    color: var(--color-brand-gold);
    text-align: center;
}

.auth__wordmark-name {
    display: block;
    font-family: var(--font-display);
    font-size: 3.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
}

.auth__wordmark-line {
    display: block;
    margin-top: 8px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
}

/* The company's legal name, in paper on the charcoal under the wordmark. */
.auth__panel > .auth__brand {
    margin-bottom: 14px;
}

.auth__brand-name {
    margin: 0 0 28px;
    color: var(--color-brand-paper);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 575px) {
    .auth__wordmark-name {
        font-size: 2.75rem;
    }

    .auth__brand-name {
        margin-bottom: 20px;
    }
}

/* ══ 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 card is anchored at a fixed distance from the top, never centred
   vertically: an error that makes it taller grows it downwards and leaves
   everything above it in place. The distance follows the height of the window,
   so a laptop and a phone both keep the card in their upper part. */
.auth {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
    padding: clamp(20px, 7vh, 88px) 16px 48px;
}

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

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

/* ── Card ─────────────────────────────────────────────────────────────── */
.auth__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--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: 2rem;
    font-weight: 700;
    line-height: 1.12;
}

.auth__lead {
    margin: 0 0 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: 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: 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: 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__brand {
        width: var(--brand-width-small);
        margin-bottom: 20px;
    }

    .auth__card {
        padding: 28px 20px;
    }

    .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;
    }
}