/* =====================================================================
   CANS ONLINE — patrón "cans" y animaciones de acceso (26 oct 2026)
   Archivo agregado; para deshacer basta con quitar su <link> en index.html.
   Movimiento reducido: app.css ya acorta todas las animaciones.
   ===================================================================== */
:root { --tone: #0c3292; }

/* ------------------------------------------------------------ patrón en diagonal (45°)
   Mosaico de 1308×180 mostrado a 436×60. 6540 px es múltiplo de 436 y de 60,
   así el ciclo se repite sin saltos. */
@keyframes cans-drift { from { background-position: 0 0; } to { background-position: 6540px 6540px; } }
.cans-pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(../img/patron-cans.png) 0 0 / 436px 60px repeat; opacity: .12; animation: cans-drift 400s linear infinite; }

/* ------------------------------------------------------------ pantalla de acceso */
.login-page.patterned { position: relative; overflow: hidden; isolation: isolate; background: var(--tone); transition: background-color .9s var(--ease); }
.login-page.patterned .login-legal { color: rgba(255, 255, 255, .82); font-weight: 600; }
.login-page.patterned .login-card { border: 2px solid var(--border); border-bottom-width: 6px; }

@keyframes cans-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes cans-pop { 0% { opacity: 0; transform: scale(.7); } 70% { opacity: 1; transform: scale(1.05); } 100% { transform: scale(1); } }
.cascade-in { animation: cans-rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
.login-page.patterned .login-logo-plate { animation: cans-pop .5s var(--ease) .1s both; }

/* Campos: halo azul al escribir */
.login-form .input { transition: border-color .15s, box-shadow .15s; }
.login-form .input:focus { box-shadow: 0 0 0 4px var(--brand-ring); }

/* Botones 3D: se hunden al tocarlos */
.login-card .btn-primary.btn-lg { height: 52px; margin-bottom: 5px; border-radius: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 5px 0 #071e5c; transition: transform .1s ease-out, box-shadow .1s ease-out, background-color .25s; }
.login-card .btn-primary.btn-lg:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 #071e5c; }
.login-card .login-qr { height: 48px; margin-bottom: 4px; border-radius: 14px; font-weight: 700; box-shadow: 0 4px 0 var(--border-strong); transition: transform .1s ease-out, box-shadow .1s ease-out; }
.login-card .login-qr:active { transform: translateY(4px); box-shadow: 0 0 0 var(--border-strong); }

/* Acceso correcto: botón verde y palomita que se dibuja */
@keyframes cans-draw { to { stroke-dashoffset: 0; } }
.login-card .btn-primary.btn-lg.is-success { background: #1f8a3e; box-shadow: 0 5px 0 #14632c; }
.cans-check path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: cans-draw .35s ease-out .05s forwards; }

/* ------------------------------------------------------------ tono de la sección al entrar */
.splash.toned { background: var(--tone); isolation: isolate; overflow: hidden; }
.splash.toned .splash-title { color: rgba(255, 255, 255, .9); }
.splash.toned .splash-bar { background: rgba(255, 255, 255, .25); }
.splash.toned .splash-bar span { background: #ffffff; }

/* Dentro de la plataforma: franja y degradado muy suaves del color de la sección */
html[data-sec-tone] .toolbar { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--sec-tone) 75%, transparent); }
html[data-sec-tone] .main { background: linear-gradient(to bottom, color-mix(in srgb, var(--sec-tone) 8%, var(--bg)), var(--bg) 320px); }