/* ===========================================================
   LOGIN REDCONAR — capa de presentación 2026
   ===========================================================
   La usan las 4 pantallas de /login: ingresar.php,
   recuperar_usuario.php, recuperar_contrasena.php (y por include
   primer_ingreso.php) y recuperar_contrasena_token.php.

   Se carga desde login/elements/head.php y TODO cuelga de
   body.rc-login-page: una pantalla sin esa clase queda igual que
   antes. Por eso no hace falta tocar login.css, que es el que
   sostiene el estilo viejo.

   Dos variantes:
     .rc-login-page                  -> dos columnas (ingresar.php)
     .rc-login-page.rc-login-simple  -> tarjeta centrada (recuperación)

   Es CSS puro: no cambia ids, names, tabindex ni el flujo de las
   pantallas.
   =========================================================== */

:root {
    --rc-navy: #0F2E4A;
    --rc-ink:  #22303F;

    /* Tipografias del sistema de diseno (ver bloque TIPOGRAFIA al final) */
    --rc-font-display: "Google Sans Flex", "Google Sans", system-ui, sans-serif;
    --rc-font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Fondo azul de marca ---------- */
body.rc-login-page {
    min-height: 100vh;
    margin: 0;
    color: #fff;
    background: #1D8AD1;
    background: radial-gradient(120% 120% at 12% 8%,
                #6AC6F4 0%, #3FA9E8 40%, #1D8AD1 75%, #1272B4 100%);
    /* sin background-attachment: fixed — en iOS da saltos al enfocar
       un campo y el fondo del body ya cubre todo el viewport */
}

/* La barra superior no va en esta pantalla: el logo de marca va en la
   columna izquierda (y arriba de la tarjeta cuando se apila). */
body.rc-login-page .navbar { display: none; }

/* ---------- Layout general ---------- */
body.rc-login-page .login-page-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    margin: 0;
    padding: 36px 44px;
    min-height: 100vh;
}

/* ---------- Columna izquierda ---------- */
.rc-hero {
    flex: 1 1 540px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rc-brand {
    width: 190px;
    margin-bottom: 26px;
}

.rc-hero-title {
    margin: 0 0 14px;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
    text-shadow: 0 2px 18px rgba(4, 40, 70, .18);
    /* reparte el titular en renglones parejos; los navegadores que no
       lo soportan simplemente lo ignoran */
    text-wrap: balance;
}

.rc-hero-sub {
    margin: 0 0 30px;
    max-width: 470px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .86);
}

/* ---------- Imagen del día ---------- */
.daily-art-container {
    width: 100%;
    max-width: 520px;
}

.daily-art-title {
    margin: 0 0 10px;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    text-align: left;
}

.daily-art-frame {
    position: relative;
    margin: 0;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35),
                0 24px 50px -18px rgba(4, 32, 56, .55);
    transition: transform .35s ease, box-shadow .35s ease;
}

.daily-art-frame:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .50),
                0 30px 60px -18px rgba(4, 32, 56, .60);
}

#daily-art {
    display: block;
    width: 100%;
    height: clamp(180px, 30vh, 300px);
    object-fit: cover;
    transition: transform .6s ease;
}

.daily-art-frame:hover #daily-art { transform: scale(1.04); }

/* Caption sobre la foto, con degradado para legibilidad */
.daily-art-frame #info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 38px 18px 14px;
    color: #fff;
    font-size: .82rem;
    line-height: 1.35;
    text-align: left;
    background: linear-gradient(to top, rgba(3,24,42,.78) 0%, rgba(3,24,42,.32) 50%, rgba(3,24,42,0) 100%);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* ---------- Tarjeta de ingreso ---------- */
body.rc-login-page .login-form {
    flex: 0 0 430px;
    width: 100%;
    max-width: 430px;
    margin: 0;
    padding: 0;
}

body.rc-login-page .login-form form {
    margin: 0;
    padding: 30px 30px 26px;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 22px;
    box-shadow: 0 30px 60px -24px rgba(3, 32, 58, .55),
                inset 0 1px 0 rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Logo dentro de la tarjeta: solo en mobile, cuando el hero no se ve */
.rc-card-logo { display: none; text-align: center; margin-bottom: 18px; }
.rc-card-logo img { width: 150px !important; filter: brightness(0) invert(1); }

body.rc-login-page .login-form h4.modal-title {
    margin: 0 0 22px;
    text-align: left;
    font-size: 23px;
    font-weight: 700;
    color: #fff;
}

/* ---------- Campos ---------- */
body.rc-login-page .login-form .form-group {
    position: relative;
    margin-bottom: 16px;
}

.rc-label {
    display: block;
    margin: 0 0 7px;
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
}

body.rc-login-page .login-form .form-control {
    height: 48px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 15px;
    color: var(--rc-ink);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 12px;
    box-shadow: none;
    transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.rc-login-page .login-form .form-control:focus {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}

body.rc-login-page .login-form .form-control::-webkit-input-placeholder { color: #95A2B0; }
body.rc-login-page .login-form .form-control::placeholder { color: #95A2B0; }

body.rc-login-page .login-form #contrasena { padding-right: 46px; }

/* Autocompletado de Chrome: mantener el campo blanco */
body.rc-login-page .login-form .form-control:-webkit-autofill,
body.rc-login-page .login-form .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #22303F;
}

/* Ojito de la contraseña */
body.rc-login-page .login-form .field-icon {
    position: absolute;
    float: none;
    margin: 0;
    right: 16px;
    top: 38px;
    bottom: auto;
    z-index: 3;
    font-size: 17px;
    color: #7B8794;
}

/* ---------- Links de ayuda ---------- */
.rc-help {
    display: block;
    margin-top: 8px;
    text-align: right;
    font-size: 12.5px;
}

body.rc-login-page .login-form .rc-help a {
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
}

body.rc-login-page .login-form .rc-help a:hover,
body.rc-login-page .login-form .rc-help a:focus {
    color: #fff;
    text-decoration: underline;
}

/* ---------- Recordarme ---------- */
body.rc-login-page .login-form .form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 20px 0 18px;
    padding: 0;
}

body.rc-login-page .login-form .form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #fff;
    cursor: pointer;
}

body.rc-login-page .login-form .form-check-label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, .90);
    cursor: pointer;
}

/* ---------- Botones ---------- */
body.rc-login-page .login-form .btn.btn-primary {
    min-height: 50px;
    margin-top: 2px;
    background: #fff;
    color: #0F2E4A;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    box-shadow: 0 12px 24px -12px rgba(3, 32, 58, .60);
}

body.rc-login-page .login-form .btn.btn-primary:hover,
body.rc-login-page .login-form .btn.btn-primary:focus {
    background: #EAF6FE;
    color: #0F2E4A;
}

.rc-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
}

.rc-or::before,
.rc-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .35);
}

body.rc-login-page .login-form .btn-outline-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin: 0;
    font-size: 14.5px;
    border-radius: 12px !important;
    background: #fff !important;
    color: #0F2E4A !important;
    border: 1px solid rgba(15, 46, 74, .10) !important;
    box-shadow: 0 10px 22px -14px rgba(3, 32, 58, .55);
}

body.rc-login-page .login-form .btn-outline-secondary:hover,
body.rc-login-page .login-form .btn-outline-secondary:focus {
    background: #F1F7FD !important;
    color: #0F2E4A !important;
}

/* ---------- Bloque de ayuda / video ---------- */
body.rc-login-page .dudas {
    margin-top: 22px;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 255, 255, .78);
}

body.rc-login-page .dudas hr {
    width: 46px;
    border-top: 1px solid rgba(255, 255, 255, .35);
}

/* El logo de YouTube es oscuro: va sobre un chip blanco para que se lea
   sobre el fondo azul. */
body.rc-login-page .medios-dudas a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    transition: background .2s ease, transform .2s ease;
}

body.rc-login-page .medios-dudas img {
    width: 20px !important;
    margin: 0 !important;
}

body.rc-login-page .medios-dudas a:hover {
    background: #fff;
    transform: translateY(-1px);
}

/* ---------- Mensaje de error ---------- */
body.rc-login-page .login-form .alert-danger {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px 12px 16px;
    font-size: 14px;
    color: #8A1C22;
    background: rgba(255, 255, 255, .96);
    border: none;
    border-left: 4px solid #D23B43;
    border-radius: 12px;
    box-shadow: 0 14px 30px -18px rgba(3, 32, 58, .60);
    transition: opacity .25s ease, transform .25s ease;
}

/* Estado de salida del aviso (lo aplica el JS al cerrarlo) */
body.rc-login-page .login-form .alert-danger.rc-alert-out {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.rc-alert-close {
    margin-left: auto;
    padding: 0 2px;
    background: none;
    border: none;
    color: #8A1C22;
    font-size: 22px;
    line-height: 1;
    opacity: .55;
    cursor: pointer;
}

.rc-alert-close:hover,
.rc-alert-close:focus { opacity: 1; }

/* ---------- Responsive ---------- */

/* Notebooks / pantallas medianas */
@media (max-width: 1200px) {
    body.rc-login-page .login-page-container { gap: 40px; padding: 32px; }
    .rc-hero-title { font-size: 38px; }
    .rc-hero-sub { font-size: 15px; }
}

@media (max-width: 1080px) {
    .rc-hero-title { font-size: 33px; }
    body.rc-login-page .login-form { flex-basis: 400px; max-width: 400px; }
}

/* Tablet y celular: las dos columnas pasan a una sola.
   `display: contents` disuelve la caja del hero para poder reordenar
   sus hijos con `order`: marca y título arriba, después el formulario
   (queda visible sin scrollear) y la imagen del día al final. */
@media (max-width: 992px) {
    body.rc-login-page .login-page-container {
        flex-direction: column;
        gap: 12px;
        padding: 32px 18px 40px;
    }
    .rc-hero { display: contents; }

    .rc-brand { order: 1; width: 168px; margin: 0 0 2px; }
    .rc-hero-title { order: 2; font-size: 27px; margin: 0; text-align: center; }
    .rc-hero-sub { order: 3; font-size: 14.5px; margin: 0; max-width: 430px; text-align: center; }

    body.rc-login-page .login-form {
        order: 4;
        flex: 0 0 auto;
        max-width: 430px;
        margin-top: 10px;
    }
    /* 16px evita que iOS haga zoom al enfocar un campo */
    body.rc-login-page .login-form .form-control { font-size: 16px; }

    .daily-art-container { order: 5; max-width: 430px; margin-top: 18px; }
    .daily-art-title { text-align: center; }
    #daily-art { height: clamp(150px, 24vh, 220px); }
}

@media (max-width: 600px) {
    body.rc-login-page .login-page-container { padding: 26px 16px 34px; }
    .rc-brand { width: 150px; }
    .rc-hero-title { font-size: 24px; }
    body.rc-login-page .login-form form { padding: 24px 20px 22px; border-radius: 18px; }
    body.rc-login-page .login-form h4.modal-title { font-size: 21px; margin-bottom: 18px; }
    .daily-art-frame { border-radius: 16px; }
}

/* Celulares angostos: se prioriza el formulario */
@media (max-width: 400px) {
    .rc-hero-sub { display: none; }
    .rc-hero-title { font-size: 22px; }
    body.rc-login-page .login-form form { padding: 22px 16px 20px; }
    body.rc-login-page .dudas { font-size: 12px; }
}

/* Pantallas bajas (celular apaisado): el formulario tiene que entrar,
   así que se recorta lo decorativo. */
@media (max-height: 640px) and (max-width: 992px) {
    .rc-hero-title, .rc-hero-sub, .daily-art-container { display: none; }
    .rc-brand { width: 140px; }
}

/* ===========================================================
   VARIANTE CENTRADA — recuperar usuario / recuperar contraseña /
   primer ingreso. Una sola tarjeta, con el logo blanco arriba.
   =========================================================== */

body.rc-login-simple .login-page-container {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 40px 18px 48px;
}

body.rc-login-simple .rc-brand {
    width: 178px;
    margin: 0 auto 26px;
}

body.rc-login-simple .login-form {
    flex: 0 0 auto;
    max-width: 430px;
}

/* Bajada debajo del título de la tarjeta (ej. "Propietario e inquilinos") */
body.rc-login-page .login-form .rc-card-sub {
    margin: -16px 0 20px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, .80);
}

/* Texto explicativo dentro de la tarjeta */
body.rc-login-page .login-form form p {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
    color: rgba(255, 255, 255, .85);
}

/* Aviso de operación exitosa (mismo lenguaje que el de error) */
body.rc-login-page .login-form .alert-success {
    margin-bottom: 16px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.45;
    color: #14603F;
    background: rgba(255, 255, 255, .96);
    border: none;
    border-left: 4px solid #1F8A5B;
    border-radius: 12px;
    box-shadow: 0 14px 30px -18px rgba(3, 32, 58, .60);
}

/* Los avisos que rellena el JS con .html() no llevan botón de cierre:
   se muestran con display:block y esa es la forma correcta. */
body.rc-login-page .login-form .alert-danger strong { color: #7A1116; }

/* Mientras se envía el pedido, el JS deshabilita el botón */
body.rc-login-page .login-form .btn.btn-primary[disabled],
body.rc-login-page .login-form .btn.btn-primary:disabled {
    opacity: .55;
    cursor: default;
}

@media (max-width: 600px) {
    body.rc-login-simple .login-page-container { padding: 30px 16px 40px; }
    body.rc-login-simple .rc-brand { width: 158px; margin-bottom: 20px; }
}

/* Los botones de la variante centrada no van en mayúsculas: sin tracking extra */
body.rc-login-simple .login-form .btn.btn-primary { letter-spacing: .02em; }


/* ===========================================================
   NUEVA CONTRASEÑA — recuperar_contrasena_token.php
   ===========================================================
   Es la única pantalla del /login con DOS campos de contraseña y
   con datos que se muestran pero no se editan (el N° de usuario,
   que igual viaja en el POST, y el alias).
   =========================================================== */

/* El ojito se apoya sobre el campo: sin este padding el texto pasa
   por debajo. La regla de más arriba solo cubre el #contrasena de
   ingresar.php. */
body.rc-login-page .login-form #contrasena1,
body.rc-login-page .login-form #contrasena2 { padding-right: 46px; }

/* Campo de solo lectura: se lee, pero no invita a escribir. No se
   pinta de blanco como los editables. */
body.rc-login-page .login-form .form-control[readonly] {
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .28);
    cursor: default;
}

body.rc-login-page .login-form .form-control[readonly]:focus {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .45);
    box-shadow: none;
}

/* Dato que se muestra y no es un campo (el alias). Mismo alto y
   mismo radio que un input, para que la columna quede pareja. */
.rc-static {
    display: block;
    min-height: 48px;
    padding: 13px 16px;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    word-break: break-word;
}

/* Sin alias cargado: es una ausencia, no un dato. */
.rc-static-vacio {
    font-size: 13.5px;
    font-style: italic;
    color: rgba(255, 255, 255, .68);
}

/* Ayuda debajo de un campo (formato esperado). A diferencia de
   .rc-help, que son links y van a la derecha, esta se alinea con
   el campo que explica. */
.rc-hint {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .72);
}



/* ===========================================================
   TIPOGRAFÍA — sistema de diseño Redconar (Brandbook 2026)
   ===========================================================
   Mismas familias y mismos archivos que el resto del sistema:
     display -> Google Sans Flex  (títulos)
     body    -> Instrument Sans   (UI, campos, botones)

   Los .ttf viven en admins/adminHtml/css/fonts/ y los declara
   admins/adminHtml/css/new_style.css (líneas 3-16). El /login no
   carga ese CSS, así que hay que repetir acá los @font-face —
   apuntando a los MISMOS archivos, no a una copia: si mañana se
   reemplaza el .ttf, las dos declaraciones lo toman.

   Peso: GoogleSansFlex.ttf son ~4 MB (es una fuente variable sin
   comprimir). Con font-display:swap la pantalla se dibuja de una
   con la fuente de respaldo y cambia al terminar la descarga, que
   además queda cacheada. Si en algún momento se convierten a woff2,
   se cambia acá y en new_style.css.

   Las pantallas de /login que NO llevan .rc-login-page siguen con
   la Varela Round de login.css.
   =========================================================== */

@font-face {
    font-family: 'Google Sans Flex';
    src: url('../../../admins/adminHtml/css/fonts/GoogleSansFlex.ttf') format('truetype');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('../../../admins/adminHtml/css/fonts/InstrumentSans.ttf') format('truetype');
    font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('../../../admins/adminHtml/css/fonts/InstrumentSans-Italic.ttf') format('truetype');
    font-weight: 400 700; font-style: italic; font-display: swap;
}

body.rc-login-page {
    font-family: var(--rc-font-body);
}

/* Los controles de Bootstrap traen su propia familia: hay que forzarlos */
body.rc-login-page .login-form .form-control,
body.rc-login-page .login-form .btn,
body.rc-login-page .login-form input,
body.rc-login-page .login-form button,
body.rc-login-page .login-form select,
body.rc-login-page .login-form textarea {
    font-family: var(--rc-font-body);
}

/* Títulos con la fuente de display */
.rc-hero-title,
body.rc-login-page .login-form h4.modal-title {
    font-family: var(--rc-font-display);
}