/* ===== Portal De Codigos ===== */
:root {
  --fondo: #0c0d11; --panel: #15171d; --panel-2: #1c1f27; --borde: #272b35;
  --texto: #eef0f4; --suave: #9ba2b0; --acento: #e5383b; --acento-2: #ff5a5d; --azul: #3b6cff;
  --bien: #3fb27f; --aviso: #e0a93b; --mal: #e5383b;
  --netflix: #e5383b; --disney: #3b6cff; --crunchyroll: #f47521;
  --radio: 12px;
  --fuente: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--texto);
  font: 15px/1.5 var(--fuente);
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(229,56,59,.16), transparent 60%),
    radial-gradient(800px 500px at 100% 110%, rgba(59,108,255,.12), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
}
a { color: var(--acento-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; margin: 0 0 6px; }
h2 { font-size: 1.1rem; letter-spacing: -.01em; margin: 0 0 10px; }
.suave { color: var(--suave); }
.pequeno { font-size: .85rem; }
.nowrap { white-space: nowrap; }

/* ----- barra superior ----- */
.barra { display: flex; align-items: center; gap: 16px; padding: 10px 24px; flex-wrap: wrap;
  background: rgba(21,23,29,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.01em; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca img { width: 34px; height: 34px; border-radius: 9px; }
.menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.menu a { color: var(--suave); padding: 6px 12px; border-radius: 8px; font-weight: 600; }
.menu a:hover, .menu a.activo { color: var(--texto); background: var(--panel-2); text-decoration: none; }
.menu a.activo { box-shadow: inset 0 -2px 0 var(--acento); }
.quien { color: var(--suave); font-size: .85rem; display: flex; align-items: center; gap: 12px; }

.contenedor { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px 20px 48px; }
.contenedor.estrecho { max-width: 560px; }
.contenedor.medio { max-width: 820px; }
.contenedor.amplio { max-width: 1080px; }
.pie { text-align: center; padding: 18px 16px 26px; color: var(--suave); font-size: .85rem; border-top: 1px solid var(--borde); }

/* ----- piezas comunes ----- */
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; margin: 16px 0; }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--suave); margin: 16px 0 6px; }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], select, textarea {
  width: 100%; padding: 12px 14px; background: var(--panel-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 10px; font: inherit; }
textarea { min-height: 120px; resize: vertical; font-family: var(--mono); font-size: .9rem; }
input::placeholder { color: #626977; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
.boton { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--panel-2); color: var(--texto); font: inherit; font-weight: 700;
  cursor: pointer; transition: border-color .15s, background .15s, transform .08s; }
.boton:hover { border-color: var(--suave); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.principal:hover { background: var(--acento-2); border-color: var(--acento-2); }
.boton.chico { padding: 5px 10px; font-size: .85rem; }
.boton.peligro { color: var(--acento-2); }
.boton.ancho-total { width: 100%; padding: 13px 18px; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--acento-2); outline-offset: 2px; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.fila > * { flex: 1; min-width: 160px; }
.fila > .fijo { flex: 0 0 auto; min-width: 0; }
form.en-linea { display: inline; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; color: var(--suave); font-weight: 600; font-size: .8rem; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
td { padding: 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.tabla-scroll { overflow-x: auto; }
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .75rem; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--borde); color: var(--suave); }
.etiqueta.bien { color: var(--bien); border-color: var(--bien); }
.etiqueta.aviso { color: var(--aviso); border-color: var(--aviso); }
.etiqueta.mal { color: var(--mal); border-color: var(--mal); }
.aviso-ok, .aviso-error { padding: 11px 14px; border-radius: 10px; margin: 12px 0; font-size: .92rem; }
.aviso-ok { background: rgba(63,178,127,.12); border: 1px solid var(--bien); }
.aviso-error { background: rgba(229,56,59,.12); border: 1px solid var(--mal); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.check { display: flex; gap: 8px; align-items: center; font-size: .92rem; font-weight: 400; color: var(--texto); margin: 2px 0; }
.check input { width: auto; }
.bloqueado { opacity: .5; }
.paginacion { display: flex; gap: 12px; align-items: center; margin-top: 14px; }

.campo-clave { position: relative; }
.campo-clave input { padding-right: 46px; }
.ojito { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center;
  background: none; border: 0; color: var(--suave); cursor: pointer; padding: 6px; border-radius: 6px; }
.ojito:hover { color: var(--texto); }

/* ----- colores por plataforma ----- */
.plat-netflix { --c: var(--netflix); }
.plat-disney { --c: var(--disney); }
.plat-crunchyroll { --c: var(--crunchyroll); }

/* ----- inicio de sesión ----- */
.pagina-login .contenedor { display: flex; align-items: center; max-width: 980px; }
.login { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; width: 100%; }
.login-marca h1 { font-size: 2.6rem; margin-top: 22px; }
.login-marca p { max-width: 38ch; font-size: 1.05rem; }
.logo-grande { width: 112px; height: 112px; border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 70px rgba(229,56,59,.45), 0 0 120px rgba(59,108,255,.2); }
.plataformas-mini { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 22px 0 0; }
.mini { padding: 6px 14px; border-radius: 99px; font-size: .85rem; font-weight: 700; border: 1px solid; }
.mini-netflix { color: #ff6b6e; border-color: rgba(229,56,59,.5); background: rgba(229,56,59,.1); }
.mini-disney { color: #7da0ff; border-color: rgba(59,108,255,.5); background: rgba(59,108,255,.1); }
.mini-crunchyroll { color: #ff9a55; border-color: rgba(244,117,33,.5); background: rgba(244,117,33,.1); }
.login-form { background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; padding: 30px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.login-form h2 { font-size: 1.4rem; margin-bottom: 4px; }

/* ----- saludo y pasos ----- */
.saludo { margin-bottom: 18px; }
.ruta { list-style: none; display: flex; gap: 0; margin: 0 0 22px; padding: 12px 8px; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio); }
.ruta li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 4px 12px; font-weight: 600; font-size: .92rem; position: relative; }
.ruta li + li::before { content: ""; position: absolute; left: -2px; top: 50%; width: 1px; height: 22px; background: var(--borde); transform: translateY(-50%); }
.ruta .num { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--suave);
  display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; }
.ruta .espera-paso .num { background: var(--aviso); border-color: var(--aviso); color: #1a1405; }
.ruta .espera-paso { color: var(--aviso); }

/* ----- consulta: formulario + boleto ----- */
.consulta { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: start; }
.formulario { margin: 0; }
.formulario label:first-child { margin-top: 0; }
.plataformas { display: flex; gap: 8px; flex-wrap: wrap; }
.plat { flex: 1 1 110px; padding: 14px 10px; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel-2);
  color: var(--texto); font: inherit; font-weight: 700; cursor: pointer; border-top: 3px solid var(--c, var(--suave));
  transition: background .15s, border-color .15s; }
.plat:hover { border-color: var(--c, var(--suave)); }
.plat[aria-pressed=true] { background: color-mix(in srgb, var(--c, #444a57) 70%, #000); border-color: var(--c, var(--suave)); color: #fff; }
.tipos { display: flex; gap: 8px; flex-wrap: wrap; }
.tipos[hidden] { display: none; }
.chip { padding: 9px 14px; border-radius: 99px; border: 1px solid var(--borde); background: var(--panel-2);
  color: var(--texto); font: inherit; cursor: pointer; }
.chip:hover { border-color: var(--suave); }
.chip[aria-pressed=true] { background: var(--texto); border-color: var(--texto); color: #111; font-weight: 700; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.acciones .principal { flex: 1 1 170px; padding: 14px 18px; font-size: 1.02rem; }
.acciones .boton:not(.principal) { flex: 1 1 150px; }

.ticket { position: sticky; top: 16px; background: var(--panel); border: 1px solid var(--borde); border-radius: 18px;
  overflow: visible; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.ticket-banda { height: 8px; border-radius: 18px 18px 0 0; background: var(--borde); }
.ticket-banda.plat-netflix, .ticket-banda.plat-disney, .ticket-banda.plat-crunchyroll { background: var(--c); }
.ticket-cuerpo { padding: 22px 22px 20px; min-height: 270px; display: flex; flex-direction: column; }
.t-quien { color: var(--suave); font-size: .88rem; }
.t-quien strong { color: var(--texto); }
.digitos { display: flex; gap: 8px; margin: 16px 0 6px; flex-wrap: wrap; }
.digito { width: 46px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--panel-2);
  border: 1px solid var(--borde); border-radius: 10px; font: 700 2.1rem/1 var(--mono); user-select: all; }
.digito.vacio { color: #3a3f4b; }
.digito.nuevo { animation: voltear .5s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes voltear { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.perforacion { position: relative; border-top: 2px dashed var(--borde); margin: 18px -22px 16px; }
.perforacion::before, .perforacion::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--fondo); border: 1px solid var(--borde); }
.perforacion::before { left: -11px; clip-path: inset(0 0 0 50%); }
.perforacion::after { right: -11px; clip-path: inset(0 50% 0 0); }
.t-pie { color: var(--suave); font-size: .88rem; margin-top: auto; }
.t-pie p { margin: 0 0 6px; }
.t-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.t-acciones .boton { flex: 1 1 140px; }
.t-acciones.enlaces { margin: 18px 0 4px; }
.t-acciones.enlaces .boton { padding: 16px; font-size: 1.05rem; }
.celda-acciones { white-space: nowrap; }
.celda-acciones .boton + .boton { margin-left: 6px; }
.dialogo { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 16px;
  padding: 22px; width: calc(100% - 32px); max-width: 440px; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.dialogo::backdrop { background: rgba(5,5,10,.72); }
.dialogo h2 { margin-top: 0; }
.dialogo-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.dialogo .boton.peligro { background: var(--acento); border-color: var(--acento); color: #fff; }
.rayos-lienzo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
.rayos-lienzo.apagado { display: none; }
.fuera-de-vista { position: fixed; left: -9999px; top: 0; opacity: 0; }
.enlace-grande { width: 100%; padding: 16px; font-size: 1.05rem; margin: 18px 0 4px; }
.t-aviso { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(224,169,59,.12);
  border: 1px solid var(--aviso); font-size: .9rem; color: var(--texto); }
.ticket.exito { border-color: rgba(63,178,127,.6); }
.ticket.viejo { border-color: rgba(224,169,59,.7); }
.ticket.fallo { border-color: rgba(229,56,59,.6); }
.t-mensaje { font-size: 1.08rem; font-weight: 700; margin: 10px 0 6px; }
.t-centro { margin: auto; text-align: center; }

.anillo { width: 124px; height: 124px; margin: 8px auto 10px; position: relative; }
.anillo svg { width: 124px; height: 124px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 8; }
.anillo .pista { stroke: var(--panel-2); }
.anillo .avance { stroke: var(--aviso); stroke-linecap: round; stroke-dasharray: 326.7; transition: stroke-dashoffset 1s linear; }
.anillo.lista .avance { stroke: var(--bien); }
.anillo .segundos { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 2rem/1 var(--mono); }

.mis-cuentas { margin-top: 34px; }
.lista-cuentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cuenta { text-align: left; padding: 12px 14px; background: var(--panel); border: 1px solid var(--borde); border-left: 4px solid var(--c, var(--suave));
  border-radius: 10px; color: var(--texto); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.cuenta:hover { border-color: var(--c, var(--suave)); background: var(--panel-2); }
.cuenta-correo { font-weight: 600; overflow-wrap: anywhere; }
.cuenta-meta { color: var(--suave); font-size: .82rem; }

/* ----- inicio (admin / colaborador) ----- */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dato { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--borde);
  border-left: 4px solid var(--suave); border-radius: var(--radio); color: var(--texto); }
a.dato:hover { text-decoration: none; background: var(--panel-2); }
.dato strong { font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; }
.dato span { color: var(--suave); font-size: .85rem; }
.dato-aviso { border-left-color: var(--aviso); }
.dato-malo { border-left-color: var(--mal); }
.dato-bien { border-left-color: var(--bien); }
.acciones-rapidas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dos-columnas .tarjeta { margin: 8px 0; }

/* ----- responsive ----- */
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; gap: 28px; }
  .login-marca { text-align: center; }
  .login-marca p { margin-left: auto; margin-right: auto; }
  .plataformas-mini { justify-content: center; }
  .login-marca h1 { font-size: 2rem; }
  .consulta, .dos-columnas { grid-template-columns: 1fr; }
  .ticket { position: static; }
}
@media (max-width: 640px) {
  .contenedor { padding: 20px 14px 36px; }
  .barra { padding: 10px 14px; }
  h1 { font-size: 1.6rem; }
  .ruta { flex-wrap: wrap; row-gap: 8px; }
  .ruta li { flex: 1 1 45%; }
  .ruta li + li::before { display: none; }
  .digito { width: 42px; height: 58px; font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.dias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }

.centrado { text-align: center; margin-top: 4px; }
.barra .quien a.boton { text-decoration: none; }

/* ===== Métricas ===== */
.filtros { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin: 20px 0 14px; }
.selector { display: flex; gap: 8px; flex-wrap: wrap; }
a.chip { display: inline-block; text-decoration: none; color: var(--texto); }
a.chip:hover { text-decoration: none; }
.chip[aria-current=page] { background: var(--texto); border-color: var(--texto); color: #0c0d11; font-weight: 700; }
.dato .cambio { font-size: .8rem; }
.dato .cambio.sube { color: var(--bien); }
.dato .cambio.baja { color: var(--acento-2); }
.grafica { width: 100%; height: auto; display: block; }
.grafica .eje { stroke: var(--borde); stroke-width: 1; }
.grafica .b-total { fill: rgba(224,169,59,.5); }
.grafica .b-ok { fill: var(--bien); }
.grafica-horas .b-ok { fill: var(--azul); }
.grafica-horas .b-total { fill: rgba(59,108,255,.25); }
.grafica .etq { fill: var(--suave); font-size: 11px; font-family: var(--fuente); }
.grafica .col rect { transition: filter .2s; }
.grafica .col:hover rect { filter: brightness(1.25) drop-shadow(0 0 6px rgba(63,178,127,.8)); }
.grafica-horas .col:hover rect { filter: brightness(1.25) drop-shadow(0 0 6px rgba(59,108,255,.9)); }
.leyenda { color: var(--suave); font-size: .85rem; display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; margin: 8px 0 0; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: middle; flex: 0 0 10px; }
.punto.ok { background: var(--bien); }
.punto.otros { background: rgba(224,169,59,.6); margin-left: 6px; }
.punto.aviso { background: var(--aviso); }
.punto.mal { background: var(--mal); }
.punto.neutro { background: #6b7280; }
.lista-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lb-fila { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.pct { width: 100%; height: 8px; display: block; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.pct .fondo { fill: var(--panel-2); }
.pct .valor { fill: var(--c, var(--acento)); }
.gran { margin: 0 0 12px; }
.gran strong { font-size: 2.4rem; letter-spacing: -.02em; margin-right: 8px; }
.desglose { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; }
.desglose li { display: flex; align-items: center; }
.desglose strong { margin-left: auto; padding-left: 12px; }
.alerta-cuentas { border-color: rgba(229,56,59,.55); box-shadow: 0 0 34px -14px var(--mal); }

/* ===== Franja de aviso ===== */
.franja { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 12px; margin: 0 0 18px;
  background: rgba(224,169,59,.12); border: 1px solid rgba(224,169,59,.55); color: #f3d28b; font-weight: 600;
  box-shadow: 0 0 28px -10px var(--aviso); }
.franja-pausa { background: rgba(229,56,59,.12); border-color: rgba(229,56,59,.6); color: #ffb3b5; box-shadow: 0 0 28px -10px var(--mal); }
.franja-punto { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: 0 0 10px; animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: .55; box-shadow: 0 0 0 7px transparent; } }

/* ===== Neón y movimiento flotante ===== */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes giro { to { --ang: 360deg; } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes flota-suave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes deriva { from { transform: translate(0, 0) scale(1); } to { transform: translate(9vw, 7vh) scale(1.18); } }
@keyframes corre { to { background-position: 200% 0; } }
@keyframes respira { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* orbes de luz que se desplazan despacio detrás de todo */
body::before, body::after { content: ""; position: fixed; z-index: -1; width: 42vmax; height: 42vmax; border-radius: 50%;
  filter: blur(90px); opacity: .2; pointer-events: none; animation: deriva 30s ease-in-out infinite alternate; }
body::before { top: -14vmax; left: -10vmax; background: var(--acento); }
body::after { bottom: -16vmax; right: -12vmax; background: var(--azul); animation-duration: 38s; animation-direction: alternate-reverse; }

/* línea de neón bajo la barra superior */
.barra { position: relative; }
.barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--acento), var(--azul), var(--acento), transparent);
  background-size: 200% 100%; animation: corre 9s linear infinite; filter: drop-shadow(0 0 5px var(--acento)); }
.marca img { box-shadow: 0 0 14px rgba(229,56,59,.55); }

/* borde de neón que da vueltas */
.ticket, .login-form, .formulario, .neon-suave { --neon: var(--acento); }
.ticket.exito { --neon: var(--bien); }
.ticket.viejo { --neon: var(--aviso); }
.ticket.fallo { --neon: var(--mal); }
.login-form, .formulario, .neon-suave { position: relative; }
.ticket::before, .login-form::before, .formulario::before, .neon-suave::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 58%, var(--neon) 80%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: giro 7s linear infinite; }
.ticket, .login-form, .formulario {
  box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 0 42px -14px color-mix(in srgb, var(--neon) 65%, transparent); }
.ticket { animation: flota-suave 8s ease-in-out infinite; }
.ticket.exito .digito:not(.vacio), .ticket.viejo .digito:not(.vacio) {
  border-color: color-mix(in srgb, var(--neon) 70%, transparent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--neon) 75%, transparent);
  box-shadow: 0 0 18px -6px var(--neon); }

/* flotación del logo y del título */
.logo-grande { animation: flota 6s ease-in-out infinite, respira 6s ease-in-out infinite; }
.login-marca h1 { text-shadow: 0 0 30px rgba(229,56,59,.35); }

/* respuesta al tocar o pasar el mouse */
.plat, .chip, .cuenta, a.dato, .boton { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.plat:hover, .cuenta:hover, a.dato:hover { transform: translateY(-3px); box-shadow: 0 10px 26px -10px var(--c, var(--acento)); }
.plat[aria-pressed=true] { box-shadow: 0 0 24px -4px var(--c, var(--acento)); }
.chip:hover { transform: translateY(-2px); }
.boton.principal { box-shadow: 0 0 0 0 transparent; }
.boton.principal:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px var(--acento); }
.dato { transition: transform .18s ease, box-shadow .18s ease; }
.dato:not(a):hover { box-shadow: 0 8px 24px -12px var(--acento-2); }
.mini { transition: box-shadow .2s ease; }
.mini:hover { box-shadow: 0 0 18px -4px currentColor; }

@media (max-width: 860px) { .ticket { animation: none; } }