/* Animaciones compartidas de Aura Platform. Un solo archivo para toda la app. */

@keyframes entrada{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }
}

main > *,
.grid > *{
    animation:entrada 0.38s ease-out both;
}

main > *:nth-child(2),  .grid > *:nth-child(2){  animation-delay:0.04s; }
main > *:nth-child(3),  .grid > *:nth-child(3){  animation-delay:0.08s; }
main > *:nth-child(4),  .grid > *:nth-child(4){  animation-delay:0.12s; }
main > *:nth-child(5),  .grid > *:nth-child(5){  animation-delay:0.16s; }
main > *:nth-child(6),  .grid > *:nth-child(6){  animation-delay:0.20s; }
main > *:nth-child(7),  .grid > *:nth-child(7){  animation-delay:0.24s; }
main > *:nth-child(8),  .grid > *:nth-child(8){  animation-delay:0.28s; }
main > *:nth-child(9),  .grid > *:nth-child(9){  animation-delay:0.32s; }
main > *:nth-child(10), .grid > *:nth-child(10){ animation-delay:0.36s; }
main > *:nth-child(11), .grid > *:nth-child(11){ animation-delay:0.40s; }
main > *:nth-child(12), .grid > *:nth-child(12){ animation-delay:0.44s; }
main > *:nth-child(n+13), .grid > *:nth-child(n+13){ animation-delay:0.48s; }

button,
.card-menu,
.menu-item,
.cuenta-card,
.metodo-card,
.opcion,
.emp-card,
.regla,
.fotos a{
    transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

/* Al redibujar el contenido sin recargar, las tarjetas no vuelven a entrar en cascada */
main.sin-entrada > *{ animation:none !important; }

@keyframes destelloOk{ 0%{ background:#dcfce7; } 100%{ background:white; } }
.flash-ok{ animation:destelloOk 1.2s ease-out; }

.toast-app{
    position:fixed;
    left:50%;
    bottom:28px;
    transform:translate(-50%, 20px);
    background:#0f172a;
    color:white;
    padding:11px 20px;
    border-radius:24px;
    font-size:14px;
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
    opacity:0;
    transition:opacity 0.25s ease, transform 0.25s ease;
    z-index:10000;
    pointer-events:none;
}

.toast-app.visible{
    opacity:1;
    transform:translate(-50%, 0);
}

.presionado{
    transform:scale(0.955);
    filter:brightness(0.94);
    box-shadow:0 1px 2px rgba(0,0,0,0.08);
    transition:transform 0.07s ease-out, filter 0.07s ease-out, box-shadow 0.07s ease-out;
}

button:active,
.card-menu:active,
.menu-item:active,
.cuenta-card:active,
.metodo-card:active,
.opcion:active,
.fotos a:active{
    transform:scale(0.955);
}

/* En pantallas anchas (Telegram Desktop) el contenido se ensancha como en pagos.php */
@media (min-width: 768px){
    body main{ max-width:700px; }
}

/* La app siempre se ve en claro: evita que el modo oscuro del teléfono invierta los campos */
html{ color-scheme: light; }

input, select, textarea{
    color:#1e293b;
    -webkit-text-fill-color:#1e293b;
    caret-color:#2563eb;
    background-color:#ffffff;
}

input::placeholder, textarea::placeholder{
    color:#94a3b8;
    -webkit-text-fill-color:#94a3b8;
    opacity:1;
}

input:disabled, select:disabled, textarea:disabled{
    color:#64748b;
    -webkit-text-fill-color:#64748b;
    background-color:#f1f5f9;
}

@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
}
/* Diálogo de confirmación propio (fuera de Telegram, donde no hay uno nativo) */
.confirm-fondo{
    position:fixed; inset:0; z-index:9000;
    background:rgba(15,23,42,.45);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; transition:opacity .18s ease;
}
.confirm-fondo.visible{ opacity:1; }

.confirm-caja{
    background:white; color:#1e293b;
    border-radius:16px; padding:22px 22px 18px;
    width:100%; max-width:340px;
    box-shadow:0 20px 50px -12px rgba(15,23,42,.45);
    transform:scale(.94) translateY(8px);
    transition:transform .18s cubic-bezier(.2,.9,.3,1.2);
}
.confirm-fondo.visible .confirm-caja{ transform:scale(1) translateY(0); }

.confirm-caja p{
    font-size:15px; line-height:1.5; margin:0 0 18px;
    text-align:center; color:#1e293b;
}
.confirm-botones{ display:flex; gap:10px; }
.confirm-botones button{
    flex:1; padding:13px 12px; border:none; border-radius:10px;
    font-size:15px; font-family:inherit; cursor:pointer;
}
.confirm-no{ background:#f1f5f9; color:#475569; }
.confirm-si{ background:#2563eb; color:white; font-weight:bold; }
.confirm-si:focus-visible, .confirm-no:focus-visible{ outline:2px solid #1d4ed8; outline-offset:2px; }

@media (prefers-color-scheme: dark){
    .confirm-caja{ background:#1e293b; color:#e2e8f0; }
    .confirm-caja p{ color:#e2e8f0; }
    .confirm-no{ background:#334155; color:#cbd5e1; }
}

@media (prefers-reduced-motion: reduce){
    .confirm-fondo, .confirm-caja{ transition:none; }
}