/* ============================================================
   style-banner-suscripcion.css: aviso de estado de suscripción

   Autocontenido a propósito: lo cargan dos páginas con hojas de
   estilo distintas (style-inicio.css y style-perfil-nutriologo.css).
   Se apoya en los tokens que ambas ya definen (--card, --border,
   --text, --muted, --radius) y lleva fallback por si alguna
   pantalla futura no los tiene.
============================================================ */

/* El hueco vacío se saca del flujo. En inicio.php el slot es hijo de un grid
   con gap de 20px: sin esto, las páginas sin aviso arrastrarían 20px de aire
   muerto arriba del dashboard. */
#bannerSuscripcion:empty { display: none; }

/* Páginas cuyo contenedor no trae padding lateral propio (perfil-nutriologo,
   donde las tarjetas llevan su margen de 15px). El slot lo iguala para que el
   banner quede a la misma línea que la barra superior. */
#bannerSuscripcion.susc-slot-inset { margin: 15px 15px 0; }

.susc-banner {
  --susc-color: var(--accent, #4f8cff);
  --susc-tinte: rgba(79, 140, 255, .10);

  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px 13px 15px;

  background:
    linear-gradient(90deg, var(--susc-tinte) 0%, transparent 45%),
    var(--card, #0c1524);
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-left: 3px solid var(--susc-color);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, .25));
  color: var(--text, #cdd8e8);

  animation: susc-entra .32s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes susc-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .susc-banner { animation: none; }
}

/* Tonos. El único cambio entre estados es el color y el tinte: la
   jerarquía la marca el texto, no tres diseños distintos. */
.susc-banner.susc-info    { --susc-color: var(--accent, #4f8cff); --susc-tinte: rgba(79, 140, 255, .10); }
.susc-banner.susc-alerta  { --susc-color: var(--warn, #f59e0b);   --susc-tinte: rgba(245, 158, 11, .12); }
.susc-banner.susc-critico { --susc-color: var(--bad, #ef4444);    --susc-tinte: rgba(239, 68, 68, .12); }

/* Marca redonda con la inicial del tono. Un glyph tipográfico y no un
   emoji: los emoji cambian de forma en cada sistema operativo y aquí
   tienen que verse como parte del producto. */
.susc-dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--susc-color);
  color: #fff;
  font: 700 14px/1 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 0 0 4px var(--susc-tinte);
}

.susc-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.susc-titulo {
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -.2px;
  line-height: 1.3;
}

.susc-msg {
  font-size: .84rem;
  color: var(--muted, #7b8aa0);
  line-height: 1.45;
}

.susc-cta {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--susc-color);
  color: #fff;
  font: 600 .84rem/1 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}

.susc-cta:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.susc-cta:disabled { opacity: .6; cursor: progress; }
.susc-cta:focus-visible,
.susc-x:focus-visible { outline: 2px solid var(--susc-color); outline-offset: 2px; }

.susc-x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #7b8aa0);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.susc-x:hover { background: var(--chip, rgba(127, 127, 127, .14)); color: var(--text, #cdd8e8); }

/* En móvil el botón cae debajo del texto y ocupa el ancho: a 360px un
   CTA de 16px de padding a la derecha deja el mensaje en dos palabras
   por línea. */
@media (max-width: 640px) {
  .susc-banner {
    flex-wrap: wrap;
    padding: 14px;
  }
  .susc-txt { flex-basis: calc(100% - 40px); }
  .susc-cta { width: 100%; margin-top: 4px; padding: 11px 16px; }
  .susc-x { position: absolute; top: 10px; right: 10px; }
}