/*
 * Reemplaza la cadena AngularJS 1.2 + Bootstrap 3 + homer.js que servía
 * CustomViewService desde Content/app/login-backoffice.html. Mismo layout,
 * sin dependencias externas.
 */

/*
 * Paleta: M1 Specialty Brand Color Palette — "Color Reference Summary",
 * páginas "Primary Brand Colors" y "Supporting Neutrals". Los hex de --m1-*
 * son literales del documento de marca; no hay ninguno inventado.
 *
 * La única derivación es --tc-muted (Medium Gray aclarado contra blanco), y
 * está marcada abajo: el documento no define un gris de texto secundario.
 *
 * Reemplaza la paleta heredada del IdentityServer3 (btn #fcca65 / hover
 * #b7820b, texto #52565A, fondo #F2F2F2), que era la del tema Homer y no la
 * de M1.
 */
:root {
    /* Primary brand colors */
    --m1-black: #000000;
    --m1-gold: #b8861f;

    /* M1 Metallic Gold. Copiado de .metallic-gold-bg en m1specialty.com
       (botones PORTAL LOGIN y ACCEPT ALL): el oro es #B8861F plano más una
       textura encima — no un gradiente CSS. Los dos inset hacen el filo
       claro arriba y oscuro abajo. El background-color plano queda igual: es
       el mismo respaldo que usa el sitio si la textura no carga. */
    --m1-gold-text: #0a0a0a;
    --m1-gold-edge-light: rgba(255, 230, 170, .55);
    --m1-gold-edge-dark: rgba(40, 25, 5, .45);
    /* Realce del metal. La textura sola da un rango de ~51 niveles de luminancia
       sobre un boton de 34px, que a 1x se lee como oro plano: el degradado esta,
       pero no se percibe. Esta capa amplifica el MISMO perfil que ya tiene la
       textura --borde superior oscuro, banda brillante arriba, oscurecimiento
       hacia abajo-- hasta un rango de ~89, medido.

       ES UN AGREGADO NUESTRO: el sitio no la tiene. Sin ella el boton es
       literalmente lo que declara .metallic-gold-bg, pero en botones chicos y
       sobre fondo claro no se distingue del plano. Para volver al comportamiento
       exacto del sitio, alcanza con dejar --m1-gold-sheen en none. */
    --m1-gold-sheen: linear-gradient(180deg,
        rgba(40, 25, 5, .20) 0%,
        rgba(255, 250, 228, .62) 22%,
        rgba(255, 240, 205, .16) 46%,
        rgba(60, 38, 6, .10) 70%,
        rgba(60, 38, 6, .34) 100%);
    /* Reencodeada del gold-texture.png del sitio (1254², 2.0 MB) a WebP 512²
       (6 KB, indistinguible al tamaño de un botón) e incrustada acá.
       Va inline y no como archivo a propósito: IIS de los proyectos net462 no
       trae MIME type para .webp y devolvía 404, dejando el botón en el oro
       plano. Incrustada no depende del MIME, ni de que el archivo se publique,
       ni de cómo CssRewriteUrlTransform reescriba la ruta en el bundle. */
    --m1-gold-texture: url("data:image/webp;base64,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");

    --m1-white: #ffffff;

    /* Supporting neutrals */
    --m1-off-white: #f8f6f3;
    --m1-light-gray: #dcdee1;
    --m1-medium-gray: #4a4d53;
    --m1-dark-gray: #14161a;
    --m1-near-black: #0c0d0f;

    /* El design system de M1 no usa esquinas redondeadas: --radius: 0 en el
       :root de m1specialty.com. */
    --m1-radius: 0;

    --tc-text: var(--m1-medium-gray);
    --tc-heading: var(--m1-near-black);
    /* Derivado: Medium Gray aclarado contra blanco para texto secundario.
       Light Gray (#DCDEE1) es un color de superficie, no alcanza para texto. */
    --tc-muted: #7a7e86;
    --tc-muted: color-mix(in srgb, var(--m1-medium-gray) 72%, var(--m1-white));
    --tc-border: var(--m1-light-gray);
    --tc-primary: var(--m1-gold);
    /* #0A0A0A sobre #B8861F: 6.4:1. Es el color que usa el sitio. */
    --tc-primary-text: var(--m1-gold-text);
    --tc-danger-bg: #f2dede;
    --tc-danger-text: #a94442;
    --tc-panel: var(--m1-white);
    --tc-page: var(--m1-off-white);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--tc-page);
    color: var(--tc-text);
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.brand {
    text-align: center;
    padding-top: 40px;
}

.brand img {
    max-width: 280px;
    height: auto;
}

.login-container {
    width: 100%;
    max-width: 420px;
    margin: 32px auto 0;
    padding: 0 16px;
}

.login-container h1 {
    color: var(--tc-heading);
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 24px;
}

.panel {
    background: var(--tc-panel);
    border: 1px solid var(--tc-border);
    border-radius: var(--m1-radius);
    /* Regla dorada superior: el mismo recurso que usa el documento de marca
       para separar el encabezado del contenido. */
    border-top: 3px solid var(--m1-gold);
    padding: 32px;
}

.alert {
    background: var(--tc-danger-bg);
    color: var(--tc-danger-text);
    border-radius: var(--m1-radius);
    padding: 10px 14px;
    margin-bottom: 20px;
}

.field {
    margin-bottom: 18px;
}

.field-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.field a {
    color: var(--tc-text);
    font-weight: 400;
    text-decoration: none;
}

.field a:hover {
    text-decoration: underline;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--tc-border);
    border-radius: var(--m1-radius);
    font-size: 14px;
    color: var(--tc-text);
    background: var(--m1-white);
}

.field input:focus {
    outline: none;
    border-color: var(--m1-gold);
    box-shadow: 0 0 0 3px rgba(184, 134, 31, .18);
}

.actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

/* Fila de enlaces bajo el botón principal (Back to login / Forgot username?):
   alineados a la derecha, igual que los recovery-links del login. */
.form-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin: 14px 0 0;
}

.form-links a {
    color: var(--tc-text);
    font-size: 13px;
    text-decoration: underline;
}

/* Botón de marca. Port de .metallic-gold-bg + las utilidades que el sitio le
   aplica al ACCEPT ALL: px-6 py-2.5 text-[11px] font-semibold tracking-[0.16em]
   uppercase. El radio es 0 porque el design system de M1 tiene --radius: 0. */
.btn-primary {
    position: relative;
    overflow: hidden;
    /* Crea contexto de apilado para que el destello pase por debajo del texto,
       que es lo que en el sitio logra la regla .metallic-gold-bg > *. */
    isolation: isolate;
    background-color: var(--m1-gold);
    background-image: var(--m1-gold-sheen), var(--m1-gold-texture);
    background-position: 0 0, 30% 30%;
    background-size: 100% 100%, 220% 220%;
    border: 0;
    border-radius: var(--m1-radius);
    box-shadow:
        inset 0 1px var(--m1-gold-edge-light),
        inset 0 -1px var(--m1-gold-edge-dark),
        0 1px 2px rgba(0, 0, 0, .2);
    color: var(--m1-gold-text);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    min-width: 130px;
    padding: 10px 24px;
    transition: background-position .6s, box-shadow .25s, filter .25s;
}

/* El destello que cruza el botón en hover. */
.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(115deg,
        rgba(0, 0, 0, 0) 30%,
        rgba(255, 245, 215, .65),
        rgba(0, 0, 0, 0) 70%);
    transform: translateX(-120%);
    transition: transform .7s;
}

.btn-primary:hover {
    filter: brightness(1.08) saturate(1.05);
    background-position: 0 0, 70% 70%;
    box-shadow:
        inset 0 1px rgba(255, 240, 195, .65),
        inset 0 -1px rgba(40, 25, 5, .4),
        0 4px 16px rgba(196, 140, 48, .4);
}

.btn-primary:hover::before {
    transform: translateX(120%);
}

.remember {
    color: var(--tc-muted);
    accent-color: var(--m1-gold);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

footer {
    color: var(--tc-muted);
    font-weight: 500;
    text-align: center;
    padding: 40px 0 30px;
}

.message {
    max-width: 520px;
    margin: 80px auto;
    text-align: center;
}

.alert-success {
    background: #dff0d8;
    color: #3c763d;
}

.hint {
    color: var(--tc-muted);
    margin: 0 0 20px;
}

.panel > p:last-child {
    margin-bottom: 0;
}

.actions a {
    color: var(--tc-text);
    text-decoration: none;
}

.actions a:hover {
    text-decoration: underline;
}