/* ============================================================================
   rb-login.css · Pantalla de acceso de DELIRICURAS
   ----------------------------------------------------------------------------
   Razón de ser: el login de siempre llevaba la marca genérica del software y fuentes que no
   existen en el equipo. Esta hoja da al acceso la identidad de Deliricuras (vino del
   logo + dorado de la marca), entrada animada, campos con etiqueta flotante y un
   estado de carga claro, sin ninguna dependencia externa (todo local, sirve sin internet).

   Todo lleva el prefijo dl-: header.php carga Bootstrap, style.css y tema-oscuro.css
   antes, y esta hoja no debe heredar ni pisar nada de ellos. Marcado: app/Views/auth/login.php,
   comportamiento: public/js/rb-login.js. Respeta prefers-reduced-motion.
   ========================================================================== */

.dl-login {
    --dl-wine-950: #2c0507;
    --dl-wine-900: #3a0709;
    --dl-wine-800: #570b0d;/* fondo del logo */   
    --dl-wine-700: #7a1013;
    --dl-red:      #a4161a;/* color primario de la marca */   
    --dl-red-dark: #7a0c10;
    --dl-gold:     #e09f3e;/* color secundario de la marca */   
    --dl-gold-ink: #8a5a0c;/* dorado legible sobre crema */   
    --dl-cream:    #fff8ee;
    --dl-ink:      #2a1412;
    --dl-mut:      #6f5f58;
    --dl-line:     #e6d9cb;
    --dl-bad:      #b3261e;
    --dl-ok:       #1c6b3a;
    --dl-logo:     128px;
    --dl-ease:     cubic-bezier(.2, .8, .2, 1);

    position: relative; isolation: isolate; overflow: hidden;
    display: flex; min-height: 100vh; min-height: 100dvh; margin: 0;
    padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 16px; line-height: 1.45; color: var(--dl-ink); text-align: left;
    -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
    background:
        radial-gradient(120% 90% at 12% 0%, #8c1519 0%, rgba(140, 21, 25, 0) 58%),
        radial-gradient(110% 90% at 100% 100%, #6a0e12 0%, rgba(106, 14, 18, 0) 62%),
        linear-gradient(160deg, #4a0a0d 0%, var(--dl-wine-950) 100%);
}/* tema-oscuro.css fuerza `div {color: inherit}` con mayor especificidad que una sola clase. */

.dl-login.dl-login { color: var(--dl-ink); }/* El fondo del documento (rebote del celular, zonas fuera del contenedor) en el mismo vino. */

html:has(.dl-login), html body:has(.dl-login) { background: var(--dl-wine-950, #2c0507) !important; }

.dl-login *, .dl-login *::before, .dl-login *::after { box-sizing: border-box; }
.dl-login [hidden] { display: none !important; }
.dl-login .dl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }/* ---------- fondo: patrón de platos a la deriva + luces + chispas ---------- */


.dl-login .dl-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dl-login .dl-pattern {
    position: absolute; inset: -320px; opacity: .09;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22 viewBox=%220 0 300 300%22 fill=%22none%22 stroke=%22%23ffd9b0%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(58 62) rotate(-8)%22%3E%3Cpath d=%22M-17 8C-33 6-33-16-15-18C-12-33 13-33 15-18C33-16 33 6 17 8%22/%3E%3Cpath d=%22M-17 8V22H17V8M-17 15H17%22/%3E%3C/g%3E%3Cg transform=%22translate(222 70) rotate(18)%22%3E%3Cpath d=%22M-20-26V-12Q-20-4-14-4Q-8-4-8-12V-26M-14-26V26%22/%3E%3Cellipse cx=%2212%22 cy=%22-14%22 rx=%226.5%22 ry=%2211%22/%3E%3Cpath d=%22M12-3V26%22/%3E%3C/g%3E%3Cg transform=%22translate(70 214) rotate(-6)%22%3E%3Cpath d=%22M-15-16L-11 24H11L15-16Z%22/%3E%3Cpath d=%22M-13.2-4H13.2%22/%3E%3Cpath d=%22M5-16L12-34H21%22/%3E%3Ccircle cx=%22-15%22 cy=%22-16%22 r=%227%22/%3E%3Cpath d=%22M-19-16H-11M-15-20V-12%22/%3E%3C/g%3E%3Cg transform=%22translate(228 220) rotate(12)%22%3E%3Cpath d=%22M-24 10A24 24 0 0 1 24 10Z%22/%3E%3Cpath d=%22M-19 16H19%22 stroke-dasharray=%222 5%22/%3E%3Cpath d=%22M-11-5Q-4-12 5-12%22/%3E%3C/g%3E%3Cg fill=%22%23e09f3e%22 stroke=%22none%22%3E%3Cpath transform=%22translate(150 140)%22 d=%22M0-8L2.2-2.2L8 0L2.2 2.2L0 8L-2.2 2.2L-8 0L-2.2-2.2Z%22/%3E%3Cpath transform=%22translate(272 150) scale(.7)%22 d=%22M0-8L2.2-2.2L8 0L2.2 2.2L0 8L-2.2 2.2L-8 0L-2.2-2.2Z%22/%3E%3Cpath transform=%22translate(24 146) scale(.8)%22 d=%22M0-8L2.2-2.2L8 0L2.2 2.2L0 8L-2.2 2.2L-8 0L-2.2-2.2Z%22/%3E%3Cpath transform=%22translate(150 280) scale(.6)%22 d=%22M0-8L2.2-2.2L8 0L2.2 2.2L0 8L-2.2 2.2L-8 0L-2.2-2.2Z%22/%3E%3Ccircle cx=%22140%22 cy=%2220%22 r=%222.4%22/%3E%3Ccircle cx=%22120%22 cy=%22210%22 r=%222.2%22/%3E%3Ccircle cx=%22280%22 cy=%2230%22 r=%222.2%22/%3E%3Ccircle cx=%2212%22 cy=%2230%22 r=%222%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 300px 300px repeat;
    animation: dlDrift 90s linear infinite;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, rgba(0, 0, 0, .35) 100%);
            mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, rgba(0, 0, 0, .35) 100%);
}
.dl-login .dl-glow { position: absolute; border-radius: 50%; will-change: transform; }
.dl-login .dl-glow.g1 {
    width: 56vmax; height: 56vmax; left: -18vmax; top: -22vmax;
    background: radial-gradient(circle, rgba(224, 159, 62, .30) 0%, rgba(224, 159, 62, 0) 64%);
    animation: dlFloatA 22s ease-in-out infinite alternate;
}
.dl-login .dl-glow.g2 {
    width: 52vmax; height: 52vmax; right: -20vmax; bottom: -24vmax;
    background: radial-gradient(circle, rgba(196, 36, 42, .45) 0%, rgba(196, 36, 42, 0) 66%);
    animation: dlFloatB 26s ease-in-out infinite alternate;
}
.dl-login .dl-spark {
    position: absolute; bottom: -16px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
    background: radial-gradient(circle, #ffe2ad 0%, rgba(224, 159, 62, .85) 55%, rgba(224, 159, 62, 0) 72%);
    opacity: 0; animation: dlRise var(--d) linear var(--t) infinite;
}
@keyframes dlDrift  { to { transform: translate3d(300px, 300px, 0); } }
@keyframes dlFloatA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vmax, 7vmax, 0) scale(1.12); } }
@keyframes dlFloatB { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-8vmax, -6vmax, 0) scale(.94); } }
@keyframes dlRise {
    0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
    12%  { opacity: .9; }
    50%  { transform: translate3d(14px, -52vh, 0) scale(1); }
    88%  { opacity: .55; }
    100% { transform: translate3d(-10px, -108vh, 0) scale(.7); opacity: 0; }
}/* ---------- logo + tarjeta ---------- */


.dl-login .dl-stack { position: relative; width: 100%; max-width: 420px; margin: auto; padding-top: calc(var(--dl-logo) / 2); }
.dl-login .dl-card {
    position: relative; width: 100%; padding: calc(var(--dl-logo) / 2 + 22px) 28px 26px; border-radius: 28px;
    background: linear-gradient(180deg, #fffdf9 0%, var(--dl-cream) 100%);
    box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(224, 159, 62, .35), inset 0 1px 0 #fff;
    animation: dlCardIn .75s var(--dl-ease) .22s both;
}
.dl-login .dl-card.dl-shake { animation: dlCardIn .75s var(--dl-ease) .22s both, dlShake .5s ease-in-out 1.05s 1; }
.dl-login .dl-logo-wrap {
    position: absolute; left: 50%; top: calc(var(--dl-logo) / -2); width: var(--dl-logo); height: var(--dl-logo);
    margin-left: calc(var(--dl-logo) / -2); z-index: 2;
    animation: dlLogoIn .95s cubic-bezier(.2, 1.45, .4, 1) .05s both;
}
.dl-login .dl-logo {
    display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--dl-wine-800);
    box-shadow: 0 0 0 5px var(--dl-cream), 0 0 0 7px var(--dl-gold), 0 22px 38px -10px rgba(0, 0, 0, .65);
    animation: dlBreathe 6s ease-in-out 1.2s infinite;
}
.dl-login .dl-logo-fb {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: var(--dl-gold);
    font-weight: 800; font-size: calc(var(--dl-logo) * .46); background: var(--dl-wine-800);
    box-shadow: 0 0 0 5px var(--dl-cream), 0 0 0 7px var(--dl-gold), 0 22px 38px -10px rgba(0, 0, 0, .65);
}
.dl-login .dl-logo-wrap::after {/* onda dorada que respira alrededor del logo */   
    content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--dl-gold); opacity: 0;
    animation: dlPulse 3.6s ease-out 1.3s infinite; pointer-events: none;
}
@keyframes dlLogoIn  { from { opacity: 0; transform: translateY(-14px) scale(.35) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes dlCardIn  { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dlBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes dlPulse   { 0% { opacity: .75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.32); } }
@keyframes dlShake   { 0%, 100% { transform: none; } 18% { transform: translateX(-9px); } 36% { transform: translateX(8px); } 54% { transform: translateX(-6px); } 72% { transform: translateX(4px); } }
@keyframes dlUp      { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.dl-login .dl-in { animation: dlUp .55s var(--dl-ease) calc(.5s + var(--i, 0) * .07s) backwards; }/* backwards: al terminar suelta el transform (el botón conserva su hover) *//* ---------- textos ---------- */   


.dl-login .dl-title { margin: 0; padding: 0; font-size: 1.62rem; line-height: 1.12; font-weight: 800; letter-spacing: -.01em; text-align: center; text-wrap: balance; color: var(--dl-wine-800); }
.dl-login .dl-title em { font-style: normal; color: var(--dl-red); }
.dl-login .dl-sub { margin: 8px 0 22px; padding: 0; text-align: center; text-wrap: balance; font-size: .94rem; color: var(--dl-mut); }/* ---------- campos con etiqueta flotante ---------- */


.dl-login .dl-field { position: relative; margin: 0 0 14px; }
.dl-login .dl-field input.dl-input {
    display: block; width: 100%; height: 58px; margin: 0; padding: 22px 48px 6px 48px;
    border: 1.5px solid var(--dl-line) !important; border-radius: 15px; outline: 0; box-shadow: none !important;
    background: #fff !important; color: var(--dl-ink) !important; caret-color: var(--dl-red);
    font: inherit; font-size: 1rem; line-height: 1.2;
    -webkit-appearance: none; appearance: none;
    transition: border-color .18s, box-shadow .18s;
}
.dl-login .dl-field input.dl-input:hover { border-color: #cdb9a6 !important; }
.dl-login .dl-field input.dl-input:focus { border-color: var(--dl-red) !important; box-shadow: 0 0 0 4px rgba(224, 159, 62, .32) !important; }
.dl-login .dl-field input.dl-input[aria-invalid="true"] { border-color: var(--dl-bad) !important; box-shadow: 0 0 0 4px rgba(179, 38, 30, .12) !important; }
.dl-login .dl-field input.dl-input::placeholder { color: transparent !important; opacity: 0; }
.dl-login .dl-field input.dl-input:-webkit-autofill { -webkit-text-fill-color: var(--dl-ink); -webkit-box-shadow: 0 0 0 60px #fff inset !important; }
.dl-login .dl-field label {
    position: absolute; left: 48px; top: 19px; max-width: calc(100% - 100px); margin: 0; padding: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
    font-size: 1rem; font-weight: 500; line-height: 20px; color: var(--dl-mut);
    transform-origin: left top; transition: transform .17s var(--dl-ease), color .17s;
}
.dl-login .dl-input:focus ~ label, .dl-login .dl-input:not(:placeholder-shown) ~ label { transform: translateY(-12px) scale(.76); font-weight: 600; }
.dl-login .dl-input:-webkit-autofill ~ label { transform: translateY(-12px) scale(.76); font-weight: 600; }
.dl-login .dl-input:autofill ~ label { transform: translateY(-12px) scale(.76); font-weight: 600; }
.dl-login .dl-input:focus ~ label { color: var(--dl-red); }
.dl-login .dl-input[aria-invalid="true"] ~ label { color: var(--dl-bad); }
.dl-login .dl-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dl-login .dl-ic-lead { position: absolute; left: 16px; top: 19px; color: #b29b8c; pointer-events: none; transition: color .18s; }
.dl-login .dl-field:focus-within .dl-ic-lead { color: var(--dl-red); }
.dl-login .dl-eye {
    position: absolute; right: 6px; top: 7px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px;
    display: grid; place-items: center; background: transparent; color: var(--dl-mut); cursor: pointer;
    transition: background .15s, color .15s;
}
.dl-login .dl-eye:hover { background: rgba(164, 22, 26, .08); color: var(--dl-red); }
.dl-login .dl-eye:focus-visible { outline: 3px solid var(--dl-gold); outline-offset: -3px; }
.dl-login .dl-eye .dl-eye-off { display: none; }
.dl-login .dl-eye[aria-pressed="true"] .dl-eye-on { display: none; }
.dl-login .dl-eye[aria-pressed="true"] .dl-eye-off { display: block; }
.dl-login .dl-fmsg { display: flex; gap: 6px; align-items: flex-start; margin: 6px 4px 0; padding: 0; font-size: .84rem; font-weight: 600; line-height: 1.3; color: var(--dl-bad); animation: dlUp .25s var(--dl-ease) both; }
.dl-login .dl-fmsg .dl-ic { width: 16px; height: 16px; margin-top: 1px; }
.dl-login .dl-caps { display: flex; gap: 6px; align-items: center; margin: 6px 4px 0; padding: 0; font-size: .82rem; font-weight: 600; color: #8a5a0c; }
.dl-login .dl-caps .dl-ic { width: 16px; height: 16px; }/* ---------- recordar / olvidé ---------- */


.dl-login .dl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 0; }
.dl-login .dl-check { position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 0; min-height: 40px; font-size: .88rem; color: var(--dl-mut); cursor: pointer; user-select: none; }
.dl-login .dl-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.dl-login .dl-box { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid #c9b6a4; border-radius: 7px; background: #fff; transition: background .15s, border-color .15s, box-shadow .15s; }
.dl-login .dl-box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .22s ease .03s; }
.dl-login .dl-check input:checked + .dl-box { background: var(--dl-red); border-color: var(--dl-red); }
.dl-login .dl-check input:checked + .dl-box svg { stroke-dashoffset: 0; }
.dl-login .dl-check input:focus-visible + .dl-box { box-shadow: 0 0 0 4px rgba(224, 159, 62, .5); }
.dl-login a.dl-link { color: var(--dl-red) !important; font-size: .88rem; font-weight: 700; text-decoration: none; padding: 8px 2px; border-radius: 6px; }
.dl-login a.dl-link:hover { color: var(--dl-red-dark) !important; text-decoration: underline; opacity: 1; }
.dl-login a.dl-link:focus-visible { outline: 3px solid var(--dl-gold); outline-offset: 2px; }/* ---------- botón ---------- */


.dl-login .dl-btn {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px;
    margin: 18px 0 0; padding: 0 18px; border: 0; border-radius: 15px; overflow: hidden; cursor: pointer;
    background: linear-gradient(135deg, #b81a1f 0%, var(--dl-red-dark) 100%); color: #fff;
    font: inherit; font-size: 1.04rem; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 16px 28px -14px rgba(122, 12, 16, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .12s, filter .15s, box-shadow .15s;
}
.dl-login .dl-btn::after {/* destello que cruza el botón de vez en cuando */   
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg); pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
    animation: dlShine 5.5s ease-in-out 2.4s infinite;
}
@keyframes dlShine { 0% { left: -40%; } 22%, 100% { left: 130%; } }
.dl-login .dl-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 20px 32px -14px rgba(122, 12, 16, .9), inset 0 1px 0 rgba(255, 255, 255, .22); }
.dl-login .dl-btn:active { transform: translateY(1px); filter: brightness(.96); }
.dl-login .dl-btn:focus-visible { outline: 3px solid var(--dl-gold); outline-offset: 3px; }
.dl-login .dl-btn .dl-ic { transition: transform .2s var(--dl-ease); }
.dl-login .dl-btn:hover .dl-ic { transform: translateX(4px); }
.dl-login .dl-spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: dlSpin .7s linear infinite; }
@keyframes dlSpin { to { transform: rotate(360deg); } }
.dl-login .dl-btn.is-loading { pointer-events: none; filter: saturate(.85); cursor: progress; }
.dl-login .dl-btn.is-loading .dl-spin { display: block; }
.dl-login .dl-btn.is-loading .dl-ic, .dl-login .dl-btn.is-loading::after { display: none; }
.dl-login .dl-status { min-height: 0; margin: 10px 2px 0; padding: 0; text-align: center; font-size: .86rem; font-weight: 600; color: #8a5a0c; }/* ---------- avisos ---------- */


.dl-login .dl-alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.4; }
.dl-login .dl-alert .dl-ic { margin-top: 1px; }
.dl-login .dl-alert p { margin: 0; padding: 0; font-weight: 600; }
.dl-login .dl-alert p + p { margin-top: 3px; }
.dl-login .dl-alert small { display: block; margin-top: 4px; font-size: .84rem; font-weight: 500; opacity: .9; }
.dl-login .dl-alert-err { background: #fdecea; border: 1px solid #f1c3be; border-left: 5px solid var(--dl-bad); color: #7f1d17; }
.dl-login .dl-alert-err .dl-ic { color: var(--dl-bad); }
.dl-login .dl-alert-ok { background: #e8f6ee; border: 1px solid #b9e0c7; border-left: 5px solid var(--dl-ok); color: #14502b; }
.dl-login .dl-alert-ok .dl-ic { color: var(--dl-ok); }/* ---------- pie de la tarjeta y de la página ---------- */


.dl-login .dl-alt { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--dl-line); text-align: center; font-size: .86rem; color: var(--dl-mut); }
.dl-login .dl-alt a.dl-link { font-size: .86rem; }
.dl-login .dl-back { margin: 18px 0 0; padding: 0; text-align: center; }
.dl-login .dl-foot { margin: 18px 0 0; padding: 0; text-align: center; font-size: .78rem; line-height: 1.4; letter-spacing: .02em; color: rgba(255, 238, 214, .78); animation: dlUp .6s var(--dl-ease) 1.1s backwards; }
.dl-login .dl-foot b { color: var(--dl-gold); font-weight: 700; }/* ---------- pantallas bajas (teclado abierto en el celular) y angostas ---------- */


@media (max-width: 480px) {
    .dl-login { --dl-logo: 104px; padding-left: 14px; padding-right: 14px; }
    .dl-login .dl-card { padding-left: 20px; padding-right: 20px; border-radius: 24px; }
    .dl-login .dl-title { font-size: 1.45rem; }
}
@media (max-height: 640px) {
    .dl-login { --dl-logo: 84px; align-items: flex-start; }
    .dl-login .dl-card { padding-top: calc(var(--dl-logo) / 2 + 14px); }
    .dl-login .dl-sub { margin-bottom: 14px; }
    .dl-login .dl-foot { display: none; }
}/* ---------- sin movimiento ---------- */


@media (prefers-reduced-motion: reduce) {
    .dl-login *, .dl-login *::before, .dl-login *::after { animation: none !important; transition: none !important; }
    .dl-login .dl-spark { display: none; }
    .dl-login .dl-pattern { transform: none; }
}
@media (forced-colors: active) {
    .dl-login .dl-card, .dl-login .dl-field input.dl-input { border: 1px solid CanvasText; }
    .dl-login .dl-btn { border: 2px solid ButtonText; }
}