/* Mika — capa MARCA MIKA: vidrio, botones dinámicos, transiciones y ajustes finales. Tramo 5 de 5 del estilo de la interfaz: se cargan EN ORDEN
   (index.html) y la cascada es la de un solo archivo. */
/* =====================================================================================================
   MARCA MIKA (2026-10-15): vidrio (glassmorphism), botones dinámicos y transiciones.
   Va al final para mandar sobre lo anterior. Todo el movimiento se apaga con prefers-reduced-motion.
   ===================================================================================================== */
:root {
  --vidrio: rgba(255, 255, 255, .62); --vidrio-fuerte: rgba(255, 255, 255, .8); --vidrio-borde: rgba(255, 255, 255, .7);
  --desenfoque: blur(18px) saturate(160%);
  --sombra-vidrio: 0 8px 32px rgba(76, 52, 200, .10), inset 0 1px 0 rgba(255, 255, 255, .65);
  --brillo-violeta: 0 8px 22px rgba(108, 79, 248, .30);
  --curva: cubic-bezier(.2, .8, .2, 1);
}

/* Fondo: niebla con dos auras suaves (violeta y menta) detrás de los paneles de vidrio */
body { background: var(--fondo); position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, rgba(108, 79, 248, .16), transparent 70%),
    radial-gradient(34vmax 34vmax at 92% 22%, rgba(168, 230, 207, .38), transparent 70%),
    radial-gradient(40vmax 40vmax at 70% 105%, rgba(108, 79, 248, .10), transparent 70%);
  animation: auras 24s var(--curva) infinite alternate; }
@keyframes auras { to { transform: translate3d(-3vmax, 2vmax, 0) rotate(4deg); } }

/* Barra: vidrio claro (el logo va sobre fondo claro, según la guía) */
.barra { position: sticky; top: 0; z-index: 30; background: var(--vidrio-fuerte); color: var(--tinta);
         backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque);
         border-bottom: 1px solid rgba(108, 79, 248, .10); box-shadow: 0 4px 24px rgba(54, 40, 140, .06); }
.marca { display: inline-flex; align-items: center; color: var(--tinta); transition: transform .25s var(--curva); }
.marca:hover { transform: scale(1.03); }
.marca img { height: 30px; width: auto; display: block; }
.barra__usuario { color: var(--tinta); opacity: 1; font-weight: 600; }
.barra__creditos { color: var(--coral-oscuro); background: rgba(108, 79, 248, .08); border-color: rgba(108, 79, 248, .25); font-weight: 700; }
.barra .boton--secundario { color: var(--tinta); border-color: rgba(32, 32, 57, .12); background: rgba(255, 255, 255, .55); }
.barra .boton--secundario:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--coral-oscuro); background: var(--blanco);
                                                                           border-color: rgba(108, 79, 248, .45); }
.dispositivo { background: rgba(108, 79, 248, .08); }
.dispositivo button { color: var(--tinta); transition: background .25s var(--curva), color .25s; }
.dispositivo button[aria-pressed="true"] { background: var(--coral); color: var(--blanco); box-shadow: 0 2px 8px rgba(108, 79, 248, .35); }

/* Paneles de vidrio */
.asistente, .acceso__caja, .usuario, .resumen-gratis, .periodo, .avance__tarjeta, .tarjeta-sitio, .tarjeta-plan,
.dialogo-plan, .chat, .paginacion button, .versiones button {
  background: var(--vidrio); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque);
  border-color: var(--vidrio-borde); box-shadow: var(--sombra-vidrio); }
.chat { border-right: 1px solid rgba(108, 79, 248, .10); }
.asistente, .acceso__caja { border: 1px solid var(--vidrio-borde); }
.dialogo-plan { background: rgba(247, 247, 252, .88); }
.dialogo-plan::backdrop { background: rgba(32, 32, 57, .35); backdrop-filter: blur(6px); }
textarea, .campo input, .usuarios__filtros input, .carga-creditos input { background: rgba(255, 255, 255, .85); }

/* Botones dinámicos: degradado violeta que se desplaza, se elevan, destello al pasar, se hunden al pulsar */
.boton { position: relative; overflow: hidden; isolation: isolate;
         background: linear-gradient(135deg, #8a72ff 0%, var(--coral) 45%, var(--coral-oscuro) 100%); background-size: 180% 180%;
         background-position: 0% 50%; box-shadow: var(--brillo-violeta);
         transition: transform .2s var(--curva), box-shadow .25s var(--curva), background-position .45s var(--curva),
                     color .2s, border-color .2s; }
.boton::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
                background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
                transform: translateX(-120%); transition: transform .6s var(--curva); }
.boton:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-2px); background-position: 100% 50%;
         box-shadow: 0 12px 28px rgba(108, 79, 248, .38); color: var(--blanco); }
.boton:hover:not(:disabled):not([aria-disabled="true"])::after { transform: translateX(120%); }
.boton:active:not(:disabled) { transform: translateY(0) scale(.97); box-shadow: 0 4px 12px rgba(108, 79, 248, .3); }
.boton--secundario { background: rgba(255, 255, 255, .6); box-shadow: none; color: var(--tinta); border-color: rgba(32, 32, 57, .12); }
.boton--secundario::after { background: linear-gradient(105deg, transparent 35%, rgba(108, 79, 248, .12) 50%, transparent 65%); }
.boton--secundario:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--blanco); color: var(--coral-oscuro);
         border-color: rgba(108, 79, 248, .45); box-shadow: 0 8px 20px rgba(54, 40, 140, .10); }
/* Trabajando: el botón muestra un giro (aria-busy lo pone la interfaz mientras espera) */
.boton[aria-busy="true"] { pointer-events: none; }
.boton[aria-busy="true"]::before { content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .5em;
         vertical-align: -.12em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: var(--blanco);
         animation: girar .8s linear infinite; }
.boton--secundario[aria-busy="true"]::before { border-color: rgba(108, 79, 248, .25); border-top-color: var(--coral); }
:focus-visible { outline: 3px solid rgba(108, 79, 248, .55); outline-offset: 2px; }
textarea:focus, .campo input:focus, .usuarios__filtros input:focus { box-shadow: 0 0 0 4px rgba(108, 79, 248, .14); }
textarea, .campo input, .usuarios__filtros input { transition: border-color .2s, box-shadow .2s; }

/* Selecciones (plantillas, estilos, letras, filtros): se elevan y se marcan con violeta */
.plantilla, .estilo, .tarjeta-sitio, .tarjeta-plan, .usuario, .filtro-estado button, .periodo button, .pestanas button,
.paginacion button, .versiones button {
  transition: transform .25s var(--curva), box-shadow .25s var(--curva), border-color .2s, background .25s, color .2s; }
.plantilla:hover:not(:disabled), .estilo:hover, .tarjeta-sitio:hover, .tarjeta-plan:hover { transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(76, 52, 200, .14); }
.plantilla[aria-checked="true"], .estilo:has(input:checked) { box-shadow: 0 0 0 3px rgba(108, 79, 248, .18), var(--sombra); }
.periodo button[aria-pressed="true"], .filtro-estado button[aria-pressed="true"], .paginacion button[aria-current="page"],
.versiones button[aria-current="true"] { background: var(--coral); border-color: var(--coral); color: var(--blanco);
  box-shadow: 0 4px 12px rgba(108, 79, 248, .3); }
.pestanas button:hover { color: var(--coral-oscuro); }
.asistente__pasos li { transition: border-color .35s var(--curva), color .35s; }
.asistente__pasos li.hecho { border-color: var(--coral-oscuro); }

/* Chat: Mika en menta (su color), quien escribe en violeta; avatar de Mika en sus mensajes */
.msj--usuario { background: var(--coral); color: var(--blanco); box-shadow: 0 4px 14px rgba(108, 79, 248, .25); }
.msj--mika, .msj--trabajando { background: var(--menta); color: var(--tinta); box-shadow: 0 4px 14px rgba(70, 140, 115, .14); }
.msj--trabajando { font-style: normal; }
.msj__autor { display: flex; align-items: center; gap: .4rem; color: var(--tinta); font-weight: 800; }
.msj__autor::before { content: ""; width: 20px; height: 20px; flex: none; background: url("/estatico/marca/mika-simbolo-64.png") center / contain no-repeat; }
.msj__progreso::after { content: ""; display: inline-block; width: 1.4em; text-align: left; vertical-align: bottom;
                        animation: puntos 1.2s steps(4, end) infinite; overflow: hidden; }
@keyframes puntos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.chat__mensajes .msj:last-child { animation: burbuja .4s var(--curva) both; }
@keyframes burbuja { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.chat__mensajes { scroll-behavior: smooth; }
.chat__entrada { background: rgba(255, 255, 255, .5); }

/* Vacío de «Tus páginas»: Mika invita a empezar */
.vacio--mika { display: grid; justify-items: center; text-align: center; gap: .6rem; padding: 2rem 1rem;
               border: 2px dashed rgba(108, 79, 248, .22); border-radius: var(--radio); background: rgba(255, 255, 255, .45); }
.vacio--mika img { width: 56px; height: 56px; animation: flotar 3.5s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-6px); } }

/* Transiciones entre pantallas y al abrir ventanas */
main:not([hidden]) { animation: entrar .45s var(--curva) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
.paso-asistente:not([hidden]) { animation: entrar .35s var(--curva) both; }
.dialogo-plan[open] { animation: abrir .35s var(--curva) both; }
@keyframes abrir { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.dialogo-plan[open]::backdrop { animation: velo .3s ease both; }
@keyframes velo { from { opacity: 0; } }
.aviso-temporal:not([hidden]), .error-form:not(:empty) { animation: entrar .3s var(--curva) both; }

/* Respeto a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::before { animation: none; }
}
/* El vidrio no debe borrar la marca de «pendiente» en Usuarios */
.usuario { border-left: 5px solid rgba(32, 32, 57, .10); }
.usuario--pendiente { border-left-color: var(--coral); }

/* Ajustes de la marca tras verla en pantalla */
.asistente__botones { background: rgba(255, 255, 255, .55); backdrop-filter: var(--desenfoque);
                      -webkit-backdrop-filter: var(--desenfoque); }  /* vidrio: lo que pasa por debajo se intuye, no se lee */
.dispositivo button { white-space: nowrap; }                     /* «Escritorio» y «Móvil» en una línea */
.barra__centro strong { max-width: 22ch; }
.msj--sistema[data-veces]::after { content: " " attr(data-veces); font-weight: 700; color: var(--coral-oscuro); }
.chat__costo { font-size: .75rem; color: var(--tinta-suave); padding: 0 .9rem .7rem; background: rgba(255, 255, 255, .5); }
.chat__entrada { border-top-color: rgba(108, 79, 248, .10); }
#boton-enviar { width: 2.75rem; height: 2.75rem; padding: 0; display: grid; place-items: center; }
/* Celular: la barra en dos filas (marca + acciones de la página / cuenta), sin botones partidos */
.barra .boton { white-space: nowrap; }
@media (max-width: 860px) {
  .barra { flex-wrap: wrap; row-gap: .45rem; }
  .barra__usuario { display: none; }
  .barra__cuenta { margin-left: auto; gap: .4rem; }
  .barra__centro { order: 3; flex-basis: 100%; }
  .barra__centro:empty { display: none; }
  .barra__acciones { order: 4; }
  .barra .boton--chico { padding: .4rem .75rem; }
}
@media (max-width: 860px) {
  .asistente__botones { background: rgba(255, 255, 255, .9); margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; }
}