/* =====================================================================
   Card de pack — hoja compartida

   Es la card que se ve en /packs y en la sección de promoción de
   Suscripción. En Figma es un solo componente; acá estuvo escrito dos
   veces —`.pack-card*` en PacksPage.razor.css y `.packs-promo-card*` en
   PacksPromo.razor.css— y las dos implementaciones derivaron. Carolina
   lo reportó tres veces seguidas (13, 14 y 15/10) y la tercera dijo
   exactamente qué hacer: «hay que tomar los estilos de referencia de la
   página de packs» (SCRUM-213).

   Por eso estas reglas salieron de PacksPage.razor.css tal cual y
   pasaron a una hoja global, que es el patrón que ya usan
   ds-carousel-ssr.css y mis-experiencias-ssr.css: la promo vive en el
   proyecto Client y la página de packs en el host, así que una hoja
   aislada de componente no puede servir a las dos.

   No va con scope de Blazor a propósito. Se comprobó antes de sacarlas
   que ningún otro archivo del repo usa estas clases: solo
   PacksPage.razor y su page object de E2E.

   Lo que NO está acá y se queda en PacksPage.razor.css: las reglas de
   `.pack-card-link` —envolver la card entera en un enlace es del
   catálogo, no de la card— y todos los breakpoints de `.packs-combina`.
   ===================================================================== */

.pack-card {
    position: relative;
    width: 320px;
    height: 560px;
    flex-shrink: 0;
}

/* ── Capa de color ──
   Es la banda que asoma arriba. Ocupa la card entera y el cuerpo la tapa
   desde los 33px, así que lo único que queda a la vista es esa franja,
   con el chip adentro. */
.pack-card-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
}

.card-equipo .pack-card-shadow {
    background: rgba(10, 114, 135, 0.5);
    bottom: 3.86%;
}

.card-ventas .pack-card-shadow {
    background: rgba(7, 181, 154, 0.3);
    bottom: 9.04%;
    border-radius: 12px;
}

.card-fidelizacion .pack-card-shadow {
    background: rgba(13, 172, 102, 0.5);
    bottom: 5.18%;
}

.card-full .pack-card-shadow {
    background: rgba(0, 0, 0, 0.5);
    bottom: 5.18%;
}

/* ── Cuerpo (Figma: 3 hijos con space-between) ──
   Los tres hijos son lo que reparte la holgura en dos huecos iguales en
   vez de dejarla toda junta entre la lista y el precio. */
.pack-card-body {
    position: absolute;
    top: 5.89%;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 40px 20px 24px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-equipo .pack-card-body {
    background: #e4fbff;
}

.card-ventas .pack-card-body {
    background: #effef7;
}

.card-fidelizacion .pack-card-body {
    background: #dafeed;
}

.card-full .pack-card-body {
    background: #ffffff;
    top: 5.72%;
}

/* ── Chip ──
   16 arriba y 24 de alto contra una banda de 33: queda a caballo del
   borde del cuerpo, que es como lo muestra el diseño. */
.pack-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 12px;
    border-radius: 9999px;
    z-index: 2;
}

.badge-equipo {
    background: #0a7287;
}

.badge-ventas {
    background: #07b59a;
}

.badge-fidelizacion {
    background: #0dac66;
}

.badge-full {
    background: #000000;
}

.pack-badge-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #ffffff;
    white-space: nowrap;
}

.pack-card-badge svg {
    flex-shrink: 0;
    display: block;
}

/* ── Encabezado ── */
.pack-card-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.pack-card-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: #262626;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pack-card-description {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: #000;
    margin: 0;
}

/* ── Lista de funciones ── */
.pack-card-features {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 4px;
    box-sizing: border-box;
}

.card-full .pack-card-features {
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}

.pack-feature-item {
    display: flex;
    align-items: center;
    gap: 0;
}

.pack-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    flex-shrink: 0;
}

.pack-feature-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
    flex: 1;
    min-width: 0;
}

.pack-feature-text-medium {
    font-weight: 500;
}

.pack-feature-text-bold {
    font-weight: 700;
}

/* ── Pie (precio + CTA) ── */
.pack-card-footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    width: 100%;
}

.pack-card-pricing {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    width: 100%;
}

.card-full .pack-card-pricing {
    gap: 24px;
}

/* ── Precio del Full (valor individual + ahorro) ── */
.pack-full-pricing {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.pack-full-individual {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #000;
}

.pack-full-individual-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

.pack-full-individual-price {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: line-through;
}

.pack-full-savings-badge {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    background: #dafeed;
    border-radius: 9999px;
    padding: 2px 10px;
    font-size: 14px;
    line-height: 20px;
    color: #000;
}

.pack-full-savings-label {
    font-weight: 400;
}

.pack-full-savings-amount {
    font-weight: 700;
}

/* ── Precio ── */
.pack-card-price {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: #000;
    white-space: nowrap;
}

.card-full .pack-card-price {
    gap: 8px;
}

.pack-price-amount {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 112px;
    height: 32px;
    font-size: 32px;
    font-weight: 600;
    line-height: 32px;
}

.card-full .pack-price-amount {
    width: auto;
}

.pack-price-period {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

/* ── Botón + "Cancela cuando quieras" ── */
.pack-card-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.pack-card-actions > .pack-cta-owned {
    width: 100%;
}

.pack-cta-button {
    width: 100%;
    height: 36px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    white-space: nowrap;
    transition: opacity 0.15s ease;
    /* Única línea que no venía de PacksPage.razor.css. El botón es <a> en
       los dos lados y ahí lo dejaba sin subrayar una regla global de
       app.css; declararlo acá lo hace independiente de eso. */
    text-decoration: none;
}

.pack-cta-button:hover {
    opacity: 0.9;
}

.btn-equipo {
    background: #0a7287;
}

.btn-ventas {
    background: #07b59a;
}

.btn-fidelizacion {
    background: #0dac66;
}

.btn-full {
    background: #000000;
}

.pack-cta-owned {
    width: 100%;
    gap: 8px;
    cursor: default;
    pointer-events: none;
}

.pack-cta-owned svg {
    flex-shrink: 0;
}

.pack-cancel-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
}

/* ── Mobile (< 768px) ──
   Las dos reglas que ya estaban sin acotar en el bloque de 767px de
   PacksPage.razor.css: son de la card y no de esa página. */
@media (max-width: 767px) {
    .pack-card-title {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
    }

    .pack-card-body {
        padding: 40px 16px 20px;
    }
}