/* Interfaz de login BrainHardware SSO — de la maqueta T31 aprobada (G2). */
:root {
    --brand: #FB8C00;
    --brand-ink: #ffffff;
    --logo-bg: transparent;
    --card: #ffffff;
    --ink: #1d1d1f;
    --ink-soft: #6b6b70;
    --line: #e3e0db;
    --field: #faf9f7;
    --error-bg: #fdecec;
    --error-ink: #b3261e;
    --warn-bg: #fff7e6;
    --warn-ink: #8a5a00;
    --shadow: 0 24px 60px rgba(30, 20, 5, .14);
}
@media (prefers-color-scheme: dark) {
    :root {
        --logo-bg: #ffffff;
        --card: #212228;
        --ink: #f2f2f4;
        --ink-soft: #a0a0a8;
        --line: #34353c;
        --field: #2a2b31;
        --error-bg: #3a2020;
        --error-ink: #ff9b93;
        --warn-bg: #3a3015;
        --warn-ink: #ffd47f;
        --shadow: 0 24px 60px rgba(0, 0, 0, .5);
    }
}
* { box-sizing: border-box; margin: 0; }
body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    /* Fondo animado de app.brainhardware.es/skip-process/login */
    background: linear-gradient(-45deg, #ff5722, #ff9800, #2196f3, #00bcd4);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.card {
    position: relative;
    width: min(820px, 100%);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
/* Sugerencia de crear passkey: overlay en login, página propia en post-login */
.suggest {
    position: absolute; inset: 0;
    background: var(--card);
    display: grid; align-content: center; justify-items: center;
    gap: 14px; padding: 32px; text-align: center;
}
.suggest--page { position: static; min-height: 340px; }
.suggest svg { width: 48px; height: 48px; color: var(--brand); }
.suggest h2 { font-size: 19px; max-width: 26em; }
.suggest p { color: var(--ink-soft); font-size: 14px; max-width: 34em; }
.suggest .btn { width: auto; min-width: 220px; }
.later {
    background: none; border: 0; color: var(--ink-soft);
    cursor: pointer; font: inherit;
}
.later:hover { text-decoration: underline; }
.user-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.card__head {
    display: flex; align-items: center; justify-content: center;
    padding: 28px 32px 0;
}
.logo-img {
    height: 58px;
    background: var(--logo-bg);
    border-radius: 10px;
    padding: 4px 10px;
}
/* Avatar para apps cliente sin logo_url */
.app-avatar {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--brand); color: var(--brand-ink);
    border-radius: 14px;
    font-size: 26px; font-weight: 800;
}
.panel--center { display: grid; align-content: center; }
.alert {
    margin: 18px 32px 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    display: none;
}
.alert--error { background: var(--error-bg); color: var(--error-ink); }
.alert--warn { background: var(--warn-bg); color: var(--warn-ink); }
.alert.visible { display: block; }
.panels {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 26px;
    padding: 24px 32px 8px;
}
.divider {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
}
.divider::before, .divider::after { content: ""; flex: 1; width: 1px; background: var(--line); }
.field {
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--field);
    color: var(--ink);
    font: inherit;
}
.field:focus { outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); border-color: var(--brand); }
.btn {
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    font: inherit; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    text-decoration: none;
}
.btn--brand { background: var(--brand); color: var(--brand-ink); }
.btn--brand:hover { filter: brightness(1.07); }
.btn--ghost {
    background: transparent; color: var(--ink);
    border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--field); }
.federated {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 14px 32px 0;
}
.card__foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 32px 24px;
    color: var(--ink-soft); font-size: 13px;
}
.card__foot a { color: var(--ink-soft); }
.icon { width: 18px; height: 18px; flex: none; }
/* Página /passkeys */
.passkeys { display: grid; gap: 14px; padding: 28px 32px 24px; justify-items: start; }
.passkeys h1 { font-size: 19px; }
.passkeys__empty { color: var(--ink-soft); }
.passkeys__list { list-style: none; padding: 0; width: 100%; }
.passkeys__list li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--line);
}
.passkeys__list time { color: var(--ink-soft); }
.passkeys .btn { width: auto; min-width: 220px; }
@media (max-width: 719px) {
    .panels { grid-template-columns: 1fr; gap: 14px; padding: 20px 22px 4px; }
    .divider { flex-direction: row; }
    .divider::before, .divider::after { height: 1px; width: auto; }
    .card__head, .federated, .card__foot, .passkeys { padding-left: 22px; padding-right: 22px; }
    .alert { margin-left: 22px; margin-right: 22px; }
    .federated { grid-template-columns: 1fr; }
}

.icon-passkey { vertical-align: -0.125em; margin-right: 0.4em; }