/* =============================================================
 *  MiKPI · Aviso de datos nuevos
 * -------------------------------------------------------------
 *  Una tarjeta que entra por abajo cuando llega un mes nuevo.
 *
 *  Se apoya en los tokens de css/base.css, así que hereda el modo
 *  oscuro sin reglas propias salvo donde hace falta precisión.
 *
 *  En móvil se coloca POR ENCIMA de la barra de navegación: ahí
 *  abajo está el pulgar y es donde se mira. En escritorio va a la
 *  esquina inferior derecha, fuera del contenido.
 * ============================================================= */

.aviso-datos {
  position: fixed;
  z-index: 300;                       /* sobre la barra inferior (100) */
  left: 12px;
  right: 12px;
  bottom: calc(72px + var(--safe-bottom));

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* Una sola declaración de elevación: la sombra. Un borde marcado
     más una sombra ancha es la tarjeta fantasma. */
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);

  /* Estado de partida ya visible salvo por la opacidad: la entrada es
     un desplazamiento corto hacia arriba, no una aparición desde cero. */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s cubic-bezier(.22, 1, .36, 1),
              transform .28s cubic-bezier(.22, 1, .36, 1);
}
.aviso-datos.visible { opacity: 1; transform: translateY(0); }

.aviso-icono {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 19px;
}

.aviso-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.aviso-titulo  { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
.aviso-detalle { font-size: 12.5px; color: var(--text-2); line-height: 1.35; }

.aviso-accion {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease;
}
.aviso-accion:hover { filter: brightness(1.07); }

.aviso-cerrar {
  flex-shrink: 0;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-3);
  font-size: 17px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.aviso-cerrar:hover { background: var(--surface-2); color: var(--text); }

/* ---------- escritorio: a la esquina, no cruzando la pantalla ---------- */
@media (min-width: 720px) {
  .aviso-datos {
    left: auto;
    right: 20px;
    bottom: 20px;
    max-width: 420px;
  }
}

/* ---------- móvil estrecho: el botón pasa debajo, la × se queda arriba ----
   Con `flex-wrap` a secas la × caía a la segunda fila y quedaba suelta a la
   izquierda del botón, como si fuera otra acción. Se ancla a la esquina y la
   fila de abajo la ocupa solo el botón. */
@media (max-width: 420px) {
  .aviso-datos { flex-wrap: wrap; padding-right: 52px; position: fixed; }
  .aviso-texto { flex-basis: calc(100% - 50px); }
  .aviso-accion { order: 3; flex-basis: 100%; margin-top: 4px; }
  .aviso-cerrar { position: absolute; top: 6px; right: 6px; }
}

/* ---------- movimiento reducido ---------- */
/* No se mueve de sitio, pero sigue apareciendo: que algo surja de la
   nada sin transición alguna se lee como un fallo de pintado. */
@media (prefers-reduced-motion: reduce) {
  .aviso-datos { transform: none; transition: opacity .15s linear; }
  .aviso-datos.visible { transform: none; }
}