/* subscription.css — pantalla «Suscripción» de la cuenta.
   Comparte el lenguaje visual de trial.css y del paso de la tarjeta: tarjeta de estado con icono,
   datos en fichas y acciones abajo. */

.ctop-sub{ max-width:720px; margin:0 auto; }

/* ---------- Aviso de resultado ---------- */
.ctop-sub__flash{
  max-width:720px; margin:0 auto 20px; padding:14px 18px; border-radius:12px;
  font:600 14.5px/1.5 Inter,sans-serif;
}
.ctop-sub__flash--ok { background:#F0FDF4; border:1px solid #BBF7D0; color:#14532D; }
.ctop-sub__flash--mal{ background:#FEF2F2; border:1px solid #FECACA; color:#7F1D1D; }

/* ---------- Estado ---------- */
.ctop-sub__estado{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 20px; margin-bottom:22px; border-radius:14px; border:1px solid;
}
.ctop-sub__estado > i{ font-size:20px; margin-top:2px; flex:0 0 auto; }
/* Clase propia para el titular: si esta regla apuntase a `strong` a secas alcanzaría también a los
   del párrafo (fechas, días restantes) y los volvería bloque, partiendo el texto. Mismo fallo que
   hubo en el cuadro del paso de la tarjeta. */
.ctop-sub__titulo{ display:block; margin-bottom:4px; font:800 16px/1.35 Montserrat,sans-serif; }
.ctop-sub__estado p{ margin:0; font:500 14.5px/1.6 Inter,sans-serif; }
.ctop-sub__estado p strong{ display:inline; font:inherit; font-weight:700; color:inherit; }

.ctop-sub__estado--gratis { background:#F0FDF4; border-color:#BBF7D0; color:#3F6212; }
.ctop-sub__estado--gratis > i, .ctop-sub__estado--gratis .ctop-sub__titulo{ color:#16A34A; }
.ctop-sub__estado--activa { background:#EFF6FF; border-color:#BFDBFE; color:#1E3A8A; }
.ctop-sub__estado--activa > i, .ctop-sub__estado--activa .ctop-sub__titulo{ color:#2563EB; }
.ctop-sub__estado--parada { background:#FFFBEB; border-color:#FDE68A; color:#78350F; }
.ctop-sub__estado--parada > i, .ctop-sub__estado--parada .ctop-sub__titulo{ color:#F59E0B; }

/* ---------- Fichas de datos ---------- */
.ctop-sub__fichas{ display:flex; gap:14px; margin-bottom:26px; }
.ctop-sub__ficha{
  flex:1 1 0; min-width:0; padding:16px 18px;
  border:1px solid #E9EEF5; border-radius:14px; background:#fff;
}
.ctop-sub__etiqueta{
  display:block; margin-bottom:5px; font:700 11.5px/1 Inter,sans-serif;
  letter-spacing:.04em; text-transform:uppercase; color:#64748B;
}
.ctop-sub__dato{ font:700 15.5px/1.4 Inter,sans-serif; color:#0F172A; word-break:break-word; }
.ctop-sub__dato small{ font-weight:500; color:#64748B; }
.ctop-sub__falta{ font-weight:600; color:#B45309; }

/* ---------- Planes ---------- */
.ctop-sub__seccion{ margin:0 0 12px; font:800 17px/1.3 Montserrat,sans-serif; color:#0F172A; }
.ctop-sub__planes{ display:flex; gap:14px; margin-bottom:26px; }
.ctop-sub__plan{
  flex:1 1 0; min-width:0; padding:16px 18px; background:#fff;
  border:1px solid #E2E8F0; border-radius:14px;
  display:flex; flex-direction:column; gap:6px;
}
.ctop-sub__plan.is-actual{ border-color:#2563EB; box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.ctop-sub__plan-marca{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  padding:3px 10px; border-radius:999px; background:#2563EB; color:#fff;
  font:700 11.5px Inter,sans-serif;
}
.ctop-sub__plan-nombre{ font:800 14.5px Montserrat,sans-serif; color:#0F172A; }
.ctop-sub__ahorro{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px;
  background:#FEF3C7; color:#B45309; font:700 11.5px Inter,sans-serif; font-style:normal;
}
.ctop-sub__plan-precio{ font:800 22px/1 Montserrat,sans-serif; color:#2563EB; }
.ctop-sub__plan-precio small{ font:600 12.5px Inter,sans-serif; color:#64748B; margin-left:3px; }

/* ---------- Acciones ---------- */
.ctop-sub__acciones{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ctop-sub__acciones form{ margin:0; }
.ctop-sub__btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:12px 22px; border-radius:999px; border:1px solid #2563EB;
  background:#2563EB; color:#fff !important; text-decoration:none;
  font:700 14.5px Inter,sans-serif; transition:background .15s, border-color .15s;
}
.ctop-sub__btn:hover{ background:#1D4ED8; border-color:#1D4ED8; color:#fff !important; }
.ctop-sub__btn--baja{
  background:#fff; color:#B91C1C !important; border-color:#FECACA;
}
.ctop-sub__btn--baja:hover{ background:#FEF2F2; border-color:#FCA5A5; color:#B91C1C !important; }

/* ---------- «Mi plan» de hivepress-paid-listings ----------
   Su tabla se servía sin estilo ninguno: cabecera invisible, celdas vacías y un número suelto. No se
   sustituye (sigue siendo la pantalla de paquetes del add-on), pero al menos se lee. */
.hp-page table.hp-table,
.hp-page .hp-listing-packages table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid #E9EEF5; border-radius:14px; overflow:hidden; background:#fff;
}
.hp-page table.hp-table th,
.hp-page table.hp-table td{
  padding:14px 18px; text-align:left; border-bottom:1px solid #F1F5F9;
  font:500 14.5px Inter,sans-serif; color:#0F172A;
}
.hp-page table.hp-table th{ background:#F8FAFC; font:700 12.5px Inter,sans-serif; color:#64748B;
  letter-spacing:.03em; text-transform:uppercase; }
.hp-page table.hp-table tr:last-child td{ border-bottom:0; }

@media (max-width:600px){
  .ctop-sub__fichas, .ctop-sub__planes{ flex-direction:column; }
  .ctop-sub__acciones{ flex-direction:column; align-items:stretch; }
  .ctop-sub__btn{ justify-content:center; width:100%; }
}