/* Caja de planes de la plantilla clásica (partials/public_planes_caja.html). */
.pub-planes {
  padding: 1.1rem;
  border: 1px solid #e9ecf3;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(35, 45, 80, 0.05);
  gap: 0.75rem;
}
.pub-planes-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pub-planes-titulo { font-size: 1rem; font-weight: 600; margin: 0; }
.pub-planes-filtro { width: auto; max-width: 60%; border-radius: 999px; }

/* Unas 6 filas a la vista; con más, scroll interno. Si caben, no hay barra. */
.pub-planes-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 366px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand, #6D28D9) 60%, white) transparent;
}
.pub-plan {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 56px;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ECE9F5;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}
.pub-plan[hidden] { display: none; }
.pub-plan:hover { border-color: color-mix(in srgb, var(--brand, #6D28D9) 40%, white); }
.pub-plan.is-elegido {
  border-color: var(--brand, #6D28D9);
  background: color-mix(in srgb, var(--brand, #6D28D9) 5%, white);
}
.pub-plan-radio { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--brand, #6D28D9); }
.pub-plan-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pub-plan-nombre { font-weight: 600; font-size: 0.9rem; color: #2d3748; }
.pub-plan-sub { font-size: 0.75rem; color: #8592a3; }
.pub-plan[data-agotado] .pub-plan-sub { color: #b42318; }
.pub-plan-promo { flex: 0 0 auto; color: var(--brand, #6D28D9); font-size: 1rem; line-height: 1; }
/* Descuento por período: la tarjeta "−N %" con el acento de la plantilla (partials/descuento_periodo.html). */
.pub-planes .pkg-descuento { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: var(--ma-radio-boton, 50rem); background: var(--ma-acento, var(--brand, #6D28D9)); color: var(--ma-fondo, #fff); font-weight: 700; font-size: .75rem; line-height: 1.4; white-space: nowrap; }
.pub-planes .pkg-descuento-hasta { font-weight: 500; opacity: .85; }
.pub-planes .pkg-precio-lista { opacity: .6; font-weight: 400; margin-right: .15rem; }
.pub-plan-modal .pkg-descuento { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: var(--ma-radio-boton, 50rem); background: var(--ma-acento, var(--brand, #6D28D9)); color: var(--ma-fondo, #fff); font-weight: 700; font-size: .75rem; line-height: 1.4; white-space: nowrap; }
.pub-plan-modal .pkg-descuento-hasta { font-weight: 500; opacity: .85; }
.pub-plan-modal .pkg-precio-lista { opacity: .6; font-weight: 400; margin-right: .15rem; }
.pub-plan-descuento { flex: 0 0 auto; padding: .1rem .4rem; }
.pub-plan-modal .pkg-descuento { margin-bottom: 1rem; }
.pub-plan-precio { flex: 0 0 auto; font-weight: 700; font-size: 0.9rem; color: #2d3748; white-space: nowrap; }
.pub-planes-vacio { margin: 0; font-size: 0.85rem; color: #8592a3; }

.pub-planes-acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pub-planes-btn {
  height: 44px;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
}
.pub-planes-ver {
  background: #fff;
  color: var(--brand, #6D28D9);
  border: 1px solid color-mix(in srgb, var(--brand, #6D28D9) 35%, white);
}
.pub-planes-comprar { background: var(--brand, #6D28D9); color: #fff; border: 0; }
.pub-planes-comprar:hover:not(:disabled) { filter: brightness(1.1); }
.pub-planes-btn:disabled { background: #F1F0F5; color: #A39CBB; border: 1px solid #E4E1EC; cursor: not-allowed; }

.pub-planes .combinadas-generales,
.pub-plan-modal .combinada-tira {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.35;
  background: color-mix(in srgb, var(--brand, #6D28D9) 6%, white);
  border: 1px dashed color-mix(in srgb, var(--brand, #6D28D9) 35%, white);
}
.pub-plan-modal .combinada-tira { margin-bottom: 1rem; }
.pub-plan-modal .combinada-tira__cuerpo { display: flex; flex-direction: column; gap: 0.1rem; }
.pub-plan-modal .combinada-tira__ti { font-weight: 700; }

/* Detalle del plan. */
.pub-plan-modal .modal-header { align-items: flex-start; }
.pub-plan-modal-precio { font-size: 1.6rem; font-weight: 700; color: #2d3748; margin-top: 0.15rem; }
.pub-plan-modal .modal-body { color: #4a5568; }
.pub-plan-desc { white-space: pre-line; margin-bottom: 1rem; }
.pub-plan-modal .pkg-info-list li i { color: var(--brand, #6D28D9); opacity: 1; }
.pub-plan-modal .modal-footer { display: grid; border-top: 0; padding-top: 0; }
.pub-plan-modal .modal-footer > * { margin: 0; }
.pub-plan-variantes { margin-top: 1rem; }
.pub-plan-variantes summary { cursor: pointer; font-weight: 600; }
.pub-plan-variantes ul { list-style: none; padding: 0; margin: 0.5rem 0; }
.pub-plan-variantes li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0; }
.pub-plan-variantes .pub-planes-btn { height: 34px; }

/* Teléfono: el detalle es una hoja que sube desde abajo. `.modal.pub-plan-modal`
   y no `.pub-plan-modal`: el `.modal.fade .modal-dialog` de Sneat (core.css) es más
   específico y le imponía su zoom. La altura la da el contenido (sin el `height` de
   modal-dialog-scrollable ni el centrado de modal-dialog-centered), con tope de 88vh;
   el cuerpo hace scroll dentro de .modal-content. */
@media (max-width: 767.98px) {
  .modal.pub-plan-modal .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: auto;
    margin: 0;
    max-width: none;
    min-height: 0;
    max-height: 88vh;
  }
  .modal.pub-plan-modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
  }
  .modal.pub-plan-modal.show .modal-dialog { transform: none; }
  .pub-plan-modal .modal-content { border-radius: 18px 18px 0 0; max-height: 88vh; }
}