/* ============================================================
   MARSUPIA · assets/css/activar.css
   Wizard público de activación (activar.php) — paleta y tokens
   idénticos a assets/css/style.css (el panel admin), pero hoja aparte
   porque esta pantalla no requiere sesión ni el resto del sistema de
   diseño del panel (sidebar, tablas, etc.). Mobile-first: la mayoría
   de los padres lo va a llenar desde el celular.
   ============================================================ */
:root {
    --pino: #035159;
    --pino-2: #739CA6;
    --menta: #42B8C4;
    --arena: #E2DFD4;
    --papel: #F7F2EA;
    --tinta: #0C2427;
    --salvia: #6F827E;
    --bruma: #DCEAEA;
    --miel: #E6B45C;
    --clay: #B5533C;
    --sombra-sm: 0 1px 2px rgba(3,81,89, .06), 0 1px 3px rgba(3,81,89, .05);
    --sombra-md: 0 1px 2px rgba(3,81,89, .06), 0 4px 10px rgba(3,81,89, .08), 0 12px 24px rgba(3,81,89, .05);
    --sombra-lg: 0 2px 4px rgba(3,81,89, .08), 0 8px 20px rgba(3,81,89, .10), 0 20px 40px rgba(3,81,89, .08);
    --sombra: var(--sombra-md);
}
* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
    background: var(--papel);
    color: var(--tinta);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--menta); color: var(--pino); }

.act-header {
    background: var(--pino);
    padding: 18px 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.act-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.act-volver {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(247,242,234, .1); color: var(--papel);
    transition: background .2s;
}
.act-volver:hover { background: rgba(247,242,234, .2); }
.act-brand { display: flex; align-items: center; gap: 10px; }
.act-brand span {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--papel);
    font-size: 20px;
    font-weight: 600;
}
.act-badge {
    background: rgba(66,184,196, .15);
    border: 1px solid rgba(66,184,196, .3);
    color: var(--menta);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.act-progress { background: var(--pino); padding: 0 24px 18px; }
.act-progress-dots { display: flex; align-items: center; gap: 0; }
.act-dot {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .25);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .5);
    flex-shrink: 0; transition: all .25s;
}
.act-dot.active { background: var(--menta); border-color: var(--menta); color: var(--pino); }
.act-dot.done { background: rgba(66,184,196, .3); border-color: var(--menta); color: var(--menta); }
.act-dot svg { width: 13px; height: 13px; }
.act-line { flex: 1; height: 2px; background: rgba(255, 255, 255, .15); transition: background .25s; }
.act-line.done { background: var(--menta); }

.act-container { max-width: 540px; margin: 0 auto; padding: 24px 20px 48px; }

.act-alert {
    background: rgba(181, 83, 60, .1);
    border: 1px solid rgba(181, 83, 60, .35);
    color: var(--clay);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.5;
}

.act-step { display: none; }
.act-step.visible { display: block; }
.act-step-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px; font-weight: 600;
    color: var(--pino); margin-bottom: 6px; line-height: 1.2;
}
.act-step-desc { color: var(--salvia); font-size: 14px; margin-bottom: 22px; line-height: 1.5; }

/* Tranquilidad desde el primer momento: este formulario no se repite. Solo
   en el paso 1 (primera impresión), mismo tono "buenas noticias" que
   .act-ciclo-aviso-gratis/.act-pago-box-gratis. */
.act-nota-unica-vez {
    display: flex; align-items: center; gap: 8px;
    background: rgba(66,184,196, .12); border: 1.5px solid rgba(66,184,196, .4);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 18px;
    font-size: 13px; font-weight: 600; color: var(--pino);
}
.act-nota-unica-vez svg { flex: none; color: var(--pino); }

.act-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.act-field-row { display: flex; gap: 12px; }
.act-field-row .act-field { flex: 1; }
.act-field label {
    font-size: 11.5px; font-weight: 600; color: var(--pino);
    text-transform: uppercase; letter-spacing: .04em;
}
.act-field input, .act-field select {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid rgba(3,81,89, .18);
    border-radius: 10px; font-size: 15px;
    font-family: inherit; background: #fff; color: var(--tinta);
    transition: border-color .2s;
}
.act-field input:focus, .act-field select:focus { outline: none; border-color: var(--menta); }
.act-field input::placeholder { color: #b0a898; }

.act-tel-row { display: flex; gap: 8px; }
.act-tel-row input#c-whatsapp { flex: 1; min-width: 0; }

.act-pais-combo { position: relative; flex: none; width: 92px; }
.act-tel-pais { width: 100%; cursor: pointer; padding-left: 10px; padding-right: 6px; }
@media (max-width: 480px) { .act-pais-combo { width: 78px; } .act-tel-pais { font-size: 13px; padding-left: 8px; } }

.act-pais-lista {
    display: none; position: absolute; top: calc(100% + 4px); left: 0;
    width: max-content; min-width: 100%; max-width: 280px; max-height: 220px; overflow-y: auto; z-index: 20;
    background: #fff; border: 1.5px solid rgba(3,81,89, .18); border-radius: 10px;
    box-shadow: 0 12px 30px -10px rgba(3,81,89, .3);
}
.act-pais-lista.open { display: block; }
.act-pais-item {
    padding: 9px 14px; font-size: 14px; cursor: pointer; color: var(--tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.act-pais-item:hover, .act-pais-item.activa { background: rgba(66,184,196, .15); }
.act-pais-vacio { padding: 12px 14px; font-size: 13px; color: var(--salvia); }

.act-hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

.act-error {
    color: var(--clay); font-size: 13px; margin-top: 6px;
    display: none;
}
.act-error.visible { display: block; }

.act-check-field { margin-top: 6px; margin-bottom: 18px; }
/* Selector reforzado (.act-check-field .act-check-label, no solo
   .act-check-label) a propósito: la regla genérica ".act-field label" de
   arriba (una clase + un tipo) es más específica que una sola clase, así
   que sin este refuerzo ganaba ella — dejaba el texto en mayúsculas y
   11.5px como si fuera la etiqueta de un campo, no una frase legal. */
.act-check-field .act-check-label {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    font-size: 13.5px; font-weight: 400; text-transform: none; letter-spacing: normal;
    color: var(--tinta); line-height: 1.5;
}
.act-check-label input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--pino); }
/* El texto + los 2 links deben ser UN solo <span>, no nodos de texto
   sueltos junto a los <a> como hijos directos del flex — si no, cada
   fragmento de texto y cada link se vuelve su propio flex item y el
   párrafo se rompe en columnas angostas en vez de fluir como una frase. */
.act-check-label span { flex: 1; min-width: 0; }
.act-check-label a { color: var(--pino); font-weight: 600; text-decoration: underline; text-decoration-color: var(--menta); }

/* Botón de ayuda contextual + panel que despliega — uno por paso, no por
   cada opción individual, para no saturar de clics una pantalla que va a
   llenar alguien sin experiencia previa con el sistema. */
.act-info-btn {
    display: inline; background: none; border: none; padding: 0;
    margin-left: 4px; color: var(--pino); font-size: 12.5px; font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
    font-family: inherit;
}
.act-info-panel {
    display: none; background: rgba(66,184,196, .1);
    border: 1px solid rgba(66,184,196, .3); border-radius: 10px;
    padding: 10px 13px; font-size: 13px; color: var(--tinta);
    line-height: 1.5; margin: 8px 0 4px;
}
.act-info-panel.visible { display: block; }

/* Aclaración siempre visible (no detrás de un clic) sobre la diferencia
   entre bloquear una categoría completa y bloquear una app puntual —
   es la fuente de confusión más probable, así que no se esconde. */
.act-nota-aclaracion {
    background: rgba(3, 81, 89, .08);
    border: 1px solid rgba(3, 81, 89, .25);
    border-radius: 12px; padding: 12px 15px; font-size: 13px;
    color: var(--tinta); line-height: 1.55; margin-bottom: 22px;
}
.act-nota-aclaracion strong { color: var(--pino); }

.act-btn-mas {
    display: block; width: 100%; text-align: center; background: none;
    border: none; color: var(--pino); font-family: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer; padding: 10px 0; margin-top: 2px;
}
.act-btn-mas:hover { text-decoration: underline; }
.act-apps-extra { margin-top: 10px; }

.act-nav { display: flex; gap: 12px; margin-top: 28px; }
.act-btn-back, .act-btn-next {
    padding: 13px 16px; border-radius: 12px; font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all .2s;
}
.act-btn-back { flex: 1; background: #fff; border: 2px solid rgba(3,81,89, .18); color: var(--pino); }
.act-btn-back:hover { border-color: var(--pino); }
.act-btn-next {
    flex: 2; background: var(--pino); border: none; color: var(--menta);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.act-btn-next:hover { background: var(--pino-2); }

/* Tarjeta hijo */
.act-hijo-card {
    background: #fff; border: 1.5px solid rgba(3,81,89, .14);
    border-radius: 16px; padding: 18px; margin-bottom: 14px;
    box-shadow: var(--sombra-md), inset 0 1px 0 rgba(255, 255, 255, .55); position: relative;
}
.act-hijo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.act-hijo-num {
    width: 28px; height: 28px; background: var(--menta); color: var(--pino);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.act-hijo-title { font-weight: 700; font-size: 14.5px; color: var(--pino); }
.act-btn-quitar {
    position: absolute; top: 14px; right: 14px; background: none; border: none;
    color: var(--salvia); cursor: pointer; line-height: 1; padding: 4px;
    display: flex;
}
.act-btn-quitar svg { width: 16px; height: 16px; }
.act-btn-quitar:hover { color: var(--clay); }

.act-btn-add {
    width: 100%; padding: 13px; background: #fff;
    border: 2px dashed rgba(3,81,89, .22); border-radius: 14px;
    color: var(--pino); font-family: inherit; font-size: 14.5px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.act-btn-add-icon { display: inline-flex; }
.act-btn-add-icon svg { width: 16px; height: 16px; }
.act-btn-add:hover { border-color: var(--menta); background: rgba(66,184,196, .05); }

/* Paso "¿mismas reglas?" — tarjetas de elección, mismo lenguaje visual
   que .act-hijo-card/.act-toggle pero como botón completo clicable. */
.act-regla-opciones { display: grid; gap: 14px; margin: 18px 0 6px; }
@media (min-width: 560px) { .act-regla-opciones { grid-template-columns: 1fr 1fr; } }
.act-regla-opcion {
    position: relative;
    background: #fff; border: 2px solid rgba(3,81,89, .14); border-radius: 16px;
    padding: 22px 20px 20px; text-align: left; cursor: pointer; font-family: inherit;
    box-shadow: var(--sombra-sm), inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .18s cubic-bezier(.22, .9, .3, 1);
}
.act-regla-opcion:hover { border-color: rgba(66,184,196, .6); box-shadow: var(--sombra-md), inset 0 1px 0 rgba(255, 255, 255, .55); transform: translateY(-2px); }
.act-regla-opcion:active { transform: translateY(0) scale(.98); }
.act-regla-opcion.seleccionada {
    border-color: var(--menta);
    background: linear-gradient(160deg, rgba(66,184,196, .11), rgba(66,184,196, .03) 60%);
    box-shadow: var(--sombra-md), inset 0 0 0 1px rgba(66,184,196, .5), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.act-regla-icon { width: 36px; height: 36px; color: var(--pino); margin-bottom: 12px; transition: color .2s ease; }
.act-regla-icon svg { width: 100%; height: 100%; }
.act-regla-opcion.seleccionada .act-regla-icon { color: var(--pino-2); }
.act-regla-nombre { font-weight: 700; font-size: 15.5px; color: var(--pino); margin-bottom: 6px; line-height: 1.3; }
.act-regla-desc { font-size: 13px; color: var(--salvia); line-height: 1.55; }
/* Insignia de check reutilizando el mismo patrón visual que
   .act-app-option/.act-device-option (círculo menta + check, con anillo
   de "papel" alrededor para que flote sobre el borde de la tarjeta). */
.act-regla-opcion.seleccionada::after {
    content: "";
    position: absolute; top: -8px; right: -8px;
    width: 23px; height: 23px; border-radius: 50%;
    background-color: var(--menta);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23035159' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L19 7'/%3E%3C/svg%3E");
    background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
    box-shadow: 0 0 0 3px var(--papel), 0 2px 6px rgba(3,81,89, .3);
}

/* Recomendación de protección por edad (1 clic) — vista por defecto del
   paso de protecciones. Mismo lenguaje visual que .act-pago-box-gratis
   (fondo menta suave, acento de marca) porque comunica lo mismo: "ya está
   resuelto, no tiene que hacer nada más". */
.act-recomendado-card {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, rgba(66,184,196, .17), rgba(66,184,196, .05) 55%, rgba(66,184,196, .02) 100%);
    border: 1.5px solid rgba(66,184,196, .55); border-radius: 20px;
    padding: 24px 22px 22px; margin-bottom: 22px;
    box-shadow: var(--sombra-lg), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Resplandor decorativo en la esquina — refuerza sin palabras el "esto ya
   está resuelto" de la tarjeta más importante del paso. El contenido real
   (badge/título/resumen/acciones) lleva position:relative para pintarse
   por encima: un ::before absolute sin z-index se pinta después de los
   hijos estáticos en el orden de apilamiento, así que sin ese relative
   quedaría flotando sobre el texto en vez de detrás. */
.act-recomendado-card::before {
    content: ""; position: absolute; top: -60px; right: -60px;
    width: 170px; height: 170px; border-radius: 50%;
    background: radial-gradient(circle, rgba(66,184,196, .38), rgba(66,184,196, 0) 70%);
    pointer-events: none;
}
.act-recomendado-badge {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--pino); color: var(--menta); border-radius: 999px;
    padding: 5px 12px 5px 10px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .02em; margin-bottom: 13px;
    box-shadow: 0 2px 8px rgba(3,81,89, .28);
}
.act-recomendado-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.act-recomendado-titulo {
    position: relative;
    font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600;
    color: var(--pino); margin-bottom: 8px; line-height: 1.35;
}
.act-recomendado-resumen { position: relative; margin-bottom: 19px; }
.act-recomendado-intro { font-size: 13.5px; color: var(--tinta); line-height: 1.5; margin: 0 0 12px; }
/* Reemplaza el párrafo largo de 3-4 frases seguidas que tenía antes esta
   tarjeta (reportado como "se ve muy cargado") — una idea por línea en vez
   de una sola frase corrida. Feedback 2026-07-28: un ícono SVG distinto
   por punto (users/gamepad/shopping-bag/etc.) sobrecargaba la lista — se
   reemplaza por una viñeta circular sólida y simple, sin glifo adentro.
   BUG real encontrado por el usuario (misma tarde): el tono "informativo"
   (blanco translúcido) era casi invisible sobre el fondo menta claro de
   la tarjeta — solo el último punto ("ok", pino sólido) se veía bien.
   Corregido: todas las viñetas usan pino sólido, sin distinción de tono
   (la distinción bloqueado/permitido ya la da el propio texto). */
.act-recomendado-bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.act-recomendado-bullet { display: flex; align-items: flex-start; gap: 12px; }
.act-recomendado-bullet-icon {
    flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px;
    background: var(--pino);
    box-shadow: 0 1px 2px rgba(3,81,89, .3);
}
.act-recomendado-bullet-texto { font-size: 13.5px; color: var(--tinta); line-height: 1.5; padding-top: 2px; }
.act-recomendado-acciones { position: relative; display: flex; flex-direction: column; gap: 11px; }
.act-btn-usar-recomendado {
    padding: 15px 18px; border-radius: 13px; border: none;
    background: linear-gradient(160deg, var(--pino) 0%, var(--pino-2) 100%);
    color: var(--menta); font-family: inherit;
    font-size: 15.5px; font-weight: 700; cursor: pointer;
    box-shadow: var(--sombra-md), inset 0 1px 0 rgba(255, 255, 255, .1);
    transition: transform .18s cubic-bezier(.22, .9, .3, 1), box-shadow .18s ease, background .2s;
}
.act-btn-usar-recomendado:hover {
    background: linear-gradient(160deg, var(--pino-2) 0%, #082722 100%);
    box-shadow: var(--sombra-lg), inset 0 1px 0 rgba(255, 255, 255, .1);
    transform: translateY(-2px);
}
.act-btn-usar-recomendado:active { transform: translateY(0) scale(.98); }
/* Secundario a propósito: sin fondo ni borde, subrayado solo al pasar el
   mouse — para que compita lo menos posible con el botón de arriba. */
.act-btn-personalizar {
    padding: 6px; border: none; background: none; color: var(--salvia);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    text-decoration: none; text-underline-offset: 2px; transition: color .18s ease;
}
.act-btn-personalizar:hover { color: var(--pino); text-decoration: underline; }

/* Detalle manual (categorías + aplicaciones específicas) — visible solo si
   el padre/madre eligió "Prefiero personalizar en detalle". */
.act-detalle-nav { display: flex; gap: 12px; margin-top: 8px; }
/* Tinte menta (no blanco plano como .act-btn-back) para que se lea como
   "volver a lo simple" y no como un botón de retroceso genérico. */
.act-btn-volver-recomendado {
    flex: 1; padding: 13px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; background: rgba(66,184,196, .08);
    border: 2px solid rgba(66,184,196, .35); color: var(--pino);
    transition: border-color .2s ease, background .2s ease, transform .18s cubic-bezier(.22, .9, .3, 1);
}
.act-btn-volver-recomendado:hover { border-color: var(--menta); background: rgba(66,184,196, .16); transform: translateY(-1px); }
.act-btn-volver-recomendado:active { transform: translateY(0) scale(.98); }
.act-detalle-nav .act-btn-next { flex: 2; }

/* Aviso "sin pagos hoy" bajo el selector mensual/anual del paso 1 — mismo
   tono ámbar informativo que .act-dispositivos-aviso, y menta cuando la
   noticia es "no paga nada" (mismo criterio que .act-dispositivos-aviso-plan). */
.act-ciclo-aviso {
    display: flex; align-items: center; gap: 9px;
    background: rgba(3, 81, 89, .08); border: 1.5px solid rgba(3, 81, 89, .28);
    border-radius: 10px; padding: 10px 14px; margin: 4px 0 18px; font-size: 12.5px;
    color: var(--tinta); line-height: 1.45;
}
.act-ciclo-aviso::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--miel); }
.act-ciclo-aviso:empty { display: none; }
.act-ciclo-aviso-gratis { background: rgba(66,184,196, .12); border-color: rgba(66,184,196, .45); }
.act-ciclo-aviso-gratis::before { background: var(--pino); }

/* Vista previa de instalación (pantalla final) — mismo lenguaje que
   .act-dispositivos-extra-nota (bloque informativo en menta), con una
   grilla de tarjetas por tipo de dispositivo. */
.act-instalacion-preview {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, rgba(66,184,196, .13), rgba(66,184,196, .03) 70%);
    border: 1.5px solid rgba(66,184,196, .35);
    border-radius: 16px; padding: 20px 20px 18px; margin: 22px 0; text-align: left;
    box-shadow: var(--sombra-sm);
}
/* Mismo truco de resplandor que .act-recomendado-card: contenido con
   position:relative para pintarse por encima del ::before decorativo. */
.act-instalacion-preview::before {
    content: ""; position: absolute; top: -44px; right: -44px;
    width: 130px; height: 130px; border-radius: 50%;
    background: radial-gradient(circle, rgba(66,184,196, .3), rgba(66,184,196, 0) 70%);
    pointer-events: none;
}
.act-instalacion-titulo { position: relative; font-family: 'Fraunces', Georgia, serif; font-size: 15.5px !important; color: var(--pino) !important; margin-bottom: 14px !important; }
.act-instalacion-grid { position: relative; display: grid; gap: 10px; }
.act-instalacion-card {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fff; border: 1.5px solid rgba(3,81,89, .1); border-radius: 12px;
    padding: 13px 14px;
    box-shadow: var(--sombra-sm), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: transform .18s cubic-bezier(.22, .9, .3, 1), box-shadow .18s ease;
}
.act-instalacion-card:hover { transform: translateY(-1px); box-shadow: var(--sombra-md), inset 0 1px 0 rgba(255, 255, 255, .6); }
.act-instalacion-icon {
    flex: none; width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(150deg, rgba(66,184,196, .25), rgba(3,81,89, .06));
    color: var(--pino-2);
    display: flex; align-items: center; justify-content: center;
}
.act-instalacion-card-cuerpo { flex: 1; min-width: 0; }
.act-instalacion-card-titulo { font-size: 13.5px !important; font-weight: 700; color: var(--pino) !important; margin-bottom: 2px !important; }
.act-instalacion-card-texto { font-size: 12.5px !important; color: var(--salvia) !important; line-height: 1.5 !important; margin-bottom: 0 !important; }

/* Botón "Finalizar activación" — cierre claro de la pantalla final,
   tercera acción después de WhatsApp: mismo lenguaje "ghost" que
   .act-btn-volver-recomendado pero neutro (no menta), para no competir
   visualmente con WhatsApp, que sigue siendo la acción más probable. */
.act-btn-finalizar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 12px; padding: 13px;
    background: none; border: 2px solid rgba(3,81,89, .16); border-radius: 12px;
    color: var(--pino); font-weight: 700; font-size: 14.5px; text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .18s cubic-bezier(.22, .9, .3, 1);
}
.act-btn-finalizar:hover { border-color: var(--pino); background: rgba(3,81,89, .04); transform: translateY(-1px); }
.act-btn-finalizar:active { transform: translateY(0) scale(.98); }
.act-btn-finalizar svg { transition: transform .18s ease; }
.act-btn-finalizar:hover svg { transform: translateX(2px); }

/* Pie de marca en la pantalla final — mismo diseño que el footer de
   index.html (.foot-top/.foot-brand/.foot-follow/.foot-social), adaptado
   a los tokens propios de esta hoja de estilos. Solo aparece acá, no en
   los pasos activos del wizard: durante el llenado se prioriza foco, sin
   distraer con enlaces de salida; una vez completada la activación, sí
   suma reforzar marca y los canales de seguimiento. */
.act-footer {
    background: var(--pino-2);
    padding: 30px 20px 26px;
    margin-top: 4px;
}
.act-footer-top {
    max-width: 540px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 480px) {
    .act-footer-top { flex-direction: row; align-items: center; justify-content: space-between; }
}
.act-footer-brand { display: flex; align-items: center; gap: 12px; }
.act-footer-brand svg { flex: none; }
.act-footer-word { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18.5px; color: var(--papel); line-height: 1; }
.act-footer-slo { font-style: italic; font-family: 'Fraunces', Georgia, serif; color: var(--menta); font-size: 12.5px; margin-top: 4px; }
.act-footer-follow { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 480px) { .act-footer-follow { align-items: flex-end; } }
.act-footer-follow-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bruma); font-weight: 600; }
.act-footer-social { display: flex; gap: 10px; }
.act-footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(66,184,196, .18);
    color: var(--papel); transition: transform .2s ease, background .2s, color .2s, border-color .2s;
}
.act-footer-social a:hover { transform: translateY(-2px); background: var(--menta); color: var(--pino); border-color: var(--menta); }

/* Botón flotante de WhatsApp — visible en todos los pasos del wizard
   (vive fuera de .act-step, a nivel de .act-shell) para que la opción de
   conversar con una persona esté siempre a un toque de distancia. */
.act-whatsapp-flotante {
    position: fixed; z-index: 40; bottom: 20px; right: 20px;
    width: 52px; height: 52px; border-radius: 50%;
    background: #25D366; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--sombra-lg), 0 0 0 0 rgba(37, 211, 102, .35);
    transition: transform .18s cubic-bezier(.22, .9, .3, 1), box-shadow .25s ease, background .2s;
    /* Entrada suave al cargar + un pulso sutil y finito (2 veces, no
       infinito) para llamar la atención una sola vez sin ser molesto. */
    animation: act-whatsapp-in .5s cubic-bezier(.22, .9, .3, 1) .3s both,
               act-whatsapp-pulso 2.4s ease-out 1.1s 2;
}
.act-whatsapp-flotante:hover {
    background: #20b858; transform: translateY(-2px) scale(1.05);
    box-shadow: var(--sombra-lg), 0 0 0 6px rgba(37, 211, 102, .18);
}
.act-whatsapp-flotante:active { transform: translateY(0) scale(.96); }
.act-whatsapp-flotante svg { width: 26px; height: 26px; }

@keyframes act-whatsapp-in {
    from { opacity: 0; transform: translateY(14px) scale(.85); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes act-whatsapp-pulso {
    0% { box-shadow: var(--sombra-lg), 0 0 0 0 rgba(37, 211, 102, .35); }
    70% { box-shadow: var(--sombra-lg), 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: var(--sombra-lg), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Encabezado que aparece arriba de los pasos de protecciones/permitir
   cuando se repiten por grupo — deja clarísimo para quién es esa
   configuración específica. Oculto por defecto (display:none inline en
   el HTML): solo se muestra cuando hay más de un grupo. Acento en menta
   sobre degradado pino, mismo lenguaje que .act-nota-aclaracion (bloque
   con acento de color propio) pero en tono oscuro para que se lea como
   parte de la identidad del paso, no como una alerta. */
.act-slot-header {
    background: linear-gradient(135deg, var(--pino) 0%, var(--pino-2) 100%);
    color: var(--papel); border-radius: 12px;
    box-shadow: inset 3px 0 0 var(--menta), var(--sombra-sm);
    padding: 13px 16px 13px 14px; margin-bottom: 18px;
    display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center;
}
.act-slot-header::before {
    content: "";
    grid-column: 1; grid-row: 1 / 3;
    width: 32px; height: 32px; border-radius: 9px; align-self: center;
    background-color: rgba(66,184,196, .16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342B8C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.4'/%3E%3Cpath d='M3 20a6.2 6.2 0 0112.4 0M12.5 19.5a5 5 0 019.5.5'/%3E%3C/svg%3E");
    background-size: 17px 17px; background-position: center; background-repeat: no-repeat;
}
.act-slot-header .act-slot-header-tit { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 14.5px; }
.act-slot-header .act-slot-header-sub { grid-column: 2; grid-row: 2; font-size: 12px; color: rgba(247,242,234, .72); margin-top: 2px; }

/* Paso "organice a sus hijos en grupos" — mismo tratamiento premium que
   .act-hijo-card (sombra + inset highlight superior) para que no se vea
   plana al lado del resto del wizard. */
.act-grupo-card {
    position: relative;
    background: #fff; border: 1.5px solid rgba(3,81,89, .14); border-radius: 16px;
    padding: 18px 20px; margin-bottom: 14px;
    box-shadow: var(--sombra-md), inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: box-shadow .2s ease;
}
.act-grupo-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1.5px solid var(--arena);
}
.act-grupo-nombre { font-weight: 700; font-size: 15px; color: var(--pino); }
.act-grupo-hijos { display: flex; flex-wrap: wrap; gap: 9px; }
.act-grupo-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px;
    border: 1.5px solid rgba(3,81,89, .16); border-radius: 999px; font-size: 13px;
    font-weight: 600; color: var(--salvia); cursor: pointer; background: #fff;
    transition: border-color .18s ease, background .18s ease, color .18s ease,
                box-shadow .18s ease, transform .18s cubic-bezier(.22, .9, .3, 1);
}
/* El checkbox real sigue existiendo (accesibilidad + el listener de
   activar.js sigue leyendo su .checked) pero se oculta visualmente a
   favor de la insignia circular en .act-grupo-chip::before, el mismo
   lenguaje visual que .act-app-option/.act-device-option. */
.act-grupo-chip input {
    position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.act-grupo-chip::before {
    content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid rgba(3,81,89, .25); background: #fff;
    background-position: center; background-repeat: no-repeat; background-size: 10px 10px;
    transition: all .18s ease;
}
.act-grupo-chip:hover {
    border-color: rgba(66,184,196, .55); background: rgba(66,184,196, .06);
    color: var(--pino); transform: translateY(-1px); box-shadow: var(--sombra-sm);
}
.act-grupo-chip:active { transform: translateY(0) scale(.97); }
.act-grupo-chip.marcada {
    border-color: var(--menta); background: rgba(66,184,196, .13); color: var(--pino);
    font-weight: 700; box-shadow: var(--sombra-sm);
}
.act-grupo-chip.marcada::before {
    background-color: var(--menta); border-color: var(--menta);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23035159' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L19 7'/%3E%3C/svg%3E");
}

/* Dispositivos */
.act-dispositivos-hijo { margin-bottom: 20px; }
.act-dispositivos-hijo .nombre-edad { font-weight: 700; color: var(--pino); margin-bottom: 10px; font-size: 14.5px; }
.act-dispositivos-hijo .nombre-edad span { color: var(--salvia); font-weight: 400; }
.act-dispositivos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.act-device-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.act-device-label {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 13px 8px; background: #fff; border: 2px solid rgba(3,81,89, .14);
    border-radius: 12px; cursor: pointer; text-align: center;
}
.act-device-label:hover { border-color: var(--menta); }
.act-device-option input:checked + .act-device-label { border-color: var(--menta); background: rgba(66,184,196, .08); }
.act-device-icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: rgba(3,81,89, .06); color: var(--pino);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.act-device-icon svg { width: 19px; height: 19px; }
.act-device-option input:checked + .act-device-label .act-device-icon {
    background: rgba(66,184,196, .18); color: var(--pino-2);
}
.act-device-name { font-size: 12.5px; font-weight: 600; color: var(--pino); }
.act-device-sub { font-size: 10.5px; color: var(--salvia); }

/* Aviso de dispositivos por encima del límite del plan — mismo tono ámbar
   que .act-nota-aclaracion (información importante, no es un error). La
   variante "-plan" (recomendación de plan superior) usa menta: es una
   oportunidad, no una advertencia. */
.act-dispositivos-aviso {
    background: rgba(3, 81, 89, .08); border: 1.5px solid rgba(3, 81, 89, .28);
    border-radius: 12px; padding: 14px 16px; margin: 14px 0; font-size: 13.5px;
    color: var(--tinta); line-height: 1.55;
}
.act-dispositivos-aviso p { margin: 0; }
.act-dispositivos-aviso-plan {
    background: rgba(66,184,196, .12); border-color: rgba(66,184,196, .45);
}
.act-btn-cambiar-plan {
    margin-top: 10px; padding: 8px 16px; border-radius: 20px; border: none;
    background: var(--pino); color: var(--menta); font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.act-btn-cambiar-plan:hover { background: var(--pino-2); }

/* Protecciones */
.act-proteccion-seccion { margin-bottom: 22px; }
.act-proteccion-titulo {
    font-family: 'Fraunces', Georgia, serif; font-size: 14.5px; color: var(--pino);
    margin-bottom: 11px; padding-bottom: 7px; border-bottom: 1.5px solid var(--arena);
    display: flex; align-items: center; gap: 9px;
}
.act-titulo-icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--pino); }
.act-toggle {
    background: #fff; border: 1.5px solid rgba(3,81,89, .14); border-left: 3px solid transparent;
    border-radius: 14px; padding: 13px 15px; margin-bottom: 9px; display: flex; align-items: center;
    gap: 13px; cursor: pointer; box-shadow: var(--sombra-md), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.act-toggle:hover { border-color: var(--menta); }
.act-toggle.on { border-color: var(--menta); border-left-color: var(--menta); background: rgba(66,184,196, .07); }
.act-toggle-fijo { cursor: default; opacity: .85; background: rgba(3,81,89, .03); border-color: rgba(3,81,89, .18); }
.act-toggle-icon {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    background: rgba(3,81,89, .06); color: var(--pino);
    display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s;
}
.act-toggle-icon svg { width: 21px; height: 21px; }
.act-toggle.on .act-toggle-icon { background: rgba(66,184,196, .18); color: var(--pino-2); }
.act-toggle-info { flex: 1; }
.act-toggle-nombre { font-weight: 700; font-size: 14px; color: var(--pino); margin-bottom: 2px; }
.act-toggle-desc { font-size: 12.5px; color: var(--salvia); line-height: 1.35; }
.act-switch {
    flex-shrink: 0; width: 44px; height: 24px; border-radius: 24px;
    background: rgba(3,81,89, .18); position: relative; transition: background .2s;
}
.act-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.act-switch.on { background: var(--menta); }
.act-switch.on::after { transform: translateX(20px); }

.act-apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.act-app-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.act-app-label {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 13px 6px; background: #fff; border: 2px solid rgba(3,81,89, .14);
    border-radius: 12px; cursor: pointer; text-align: center;
}
.act-app-label:hover { border-color: var(--menta); }
.act-app-option input:checked + .act-app-label { border-color: var(--menta); background: rgba(66,184,196, .08); }
.act-app-icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: rgba(3,81,89, .06); color: var(--pino);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.act-app-icon svg { width: 18px; height: 18px; }
.act-app-option input:checked + .act-app-label .act-app-icon {
    background: rgba(66,184,196, .18); color: var(--pino-2);
}
.act-app-name { font-size: 11.5px; font-weight: 600; color: var(--pino); }
.act-app-sub { font-size: 9.5px; color: var(--salvia); margin-top: -2px; }

/* Resumen — rediseño 2026-07-27: el fondo pino sólido original dejaba
   toda la pantalla en un solo tono verde oscuro (tarjetas translúcidas
   sobre pino, prácticamente sin contraste entre secciones) — reportado
   directamente por el operador como "se ve muy verde todo". Se pasó al
   mismo lenguaje visual claro/premium que ya usa el resto del wizard
   (tarjetas blancas sobre papel, bordes finos, sombra sutil — ver
   .act-instalacion-card) y se reforzó el color-coding semántico: cada
   tipo de sección (bloqueado/permitido/base/nota) ahora se distingue por
   un tinte de fondo e icono propios, no solo por el ícono como antes. */
.act-resumen-box {
    position: relative; overflow: hidden;
    background: var(--papel); border: 1.5px solid rgba(3,81,89, .14); border-radius: 18px;
    padding: 22px; margin-bottom: 22px;
    box-shadow: var(--sombra-lg), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Prueba 2026-07-28: mismo resplandor de esquina que .act-recomendado-card,
   a pedido del operador ("intenta colocar al menos un difuminado suave...
   siempre y cuando se vea premium, sino no") — mucho más sutil acá (la
   tarjeta es blanca/papel, no menta, y tiene bastante más contenido debajo,
   así que un resplandor fuerte se vería más como mancha que como acento). */
.act-resumen-box::before {
    content: ""; position: absolute; top: -70px; right: -70px; z-index: 0;
    width: 170px; height: 170px; border-radius: 50%;
    background: radial-gradient(circle, rgba(66,184,196, .16), rgba(66,184,196, 0) 70%);
    pointer-events: none;
}
.act-resumen-titulo, .act-resumen-checklist { position: relative; z-index: 1; }
.act-resumen-titulo {
    font-family: 'Fraunces', Georgia, serif; color: var(--pino); font-size: 16px;
    margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1.5px solid rgba(3,81,89, .09);
    display: flex; align-items: center; gap: 9px;
}
.act-resumen-titulo .act-titulo-icon { color: var(--pino); }
/* Checklist del paso final — reemplaza el bloque de texto plano
   monoespaciado que se mostraba acá antes (BUG de UX real: un padre/madre
   apurado no lee un párrafo largo). El dato guardado (config_esperada) no
   cambió, ver activar.js::generarResumen() — esto solo cambia cómo se
   pinta en pantalla.
   Rediseño 2026-07-28 (feedback directo del operador: "se va perdiendo la
   visual premium" entre el detalle de configuración y este resumen, y el
   ancho de lectura quedaba más angosto acá que en el resto del wizard).
   Antes cada sección era una mini-tarjeta propia (fondo blanco + borde +
   sombra + padding lateral de 14px) ANIDADA dentro de .act-resumen-box
   (que ya tiene 22px de padding) — ese padding doble le restaba ~28px de
   ancho de lectura real frente a .act-recomendado-card (que solo tiene un
   nivel de padding). Se adopta en su lugar el mismo lenguaje del detalle
   de configuración real (.act-proteccion-titulo + lista a ancho completo,
   ver activar.css más arriba): título con ícono simple + línea divisoria,
   sin tarjeta propia por sección — mismo nivel de padding (un solo nivel,
   el de .act-resumen-box) que .act-recomendado-card y .act-final-card,
   así los 3 quedan con el mismo ancho de contenido. */
.act-resumen-checklist { display: flex; flex-direction: column; gap: 14px; }
.act-resumen-grupo + .act-resumen-grupo { margin-top: 4px; padding-top: 18px; border-top: 1.5px solid rgba(3,81,89, .1); }
.act-resumen-grupo-header {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 15px; letter-spacing: .01em; color: var(--pino);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.act-resumen-grupo-header::before {
    content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--menta);
}
/* Una sola columna siempre (no 2 en desktop) — decisión revisada
   2026-07-27. Se probó antes con CSS multi-column ("mampostería"): mejor
   que un grid de 2 columnas (que fuerza ambas celdas de una fila a la
   altura de la más alta y deja un hueco vacío enorme debajo de la corta),
   pero igual falla cuando son pocas tarjetas de largo muy desigual — con
   un preset de protección para niños de 10 años o menos (~23 apps
   bloqueadas puntualmente en una sola tarjeta) el balance de 2 columnas
   sigue dejando una columna corta con un hueco vacío grande debajo suyo
   (confirmado visualmente con ese preset, con y sin sacar la tarjeta de
   apps del balance con column-span). Este contenedor además vive dentro
   de .act-container (max-width:540px), así que "2 columnas" ya eran ~245px
   cada una — bastante angosto para tarjetas con texto largo. Una sola
   columna a todo el ancho (~500px) elimina la clase completa de huecos sin
   importar la combinación real de edad/dispositivos/apps de cada familia,
   y de paso da más aire a los chips de aplicaciones (menos amontonados). */
.act-resumen-secciones { display: block; }
/* Cada sección ya NO es una mini-tarjeta propia (ver comentario de
   .act-resumen-checklist más arriba) — es un grupo con título + línea
   divisoria, exactamente el mismo lenguaje que .act-proteccion-seccion/
   .act-proteccion-titulo del detalle de configuración real (título en
   Fraunces + ícono simple + borde inferior, sin tarjeta propia), para que
   el resumen final se sienta parte del mismo sistema en vez de un
   componente aparte — y de paso, sin un segundo nivel de padding, el
   texto usa el mismo ancho de lectura que .act-recomendado-card y
   .act-final-card (ver medición real en el reporte de este cambio). */
.act-resumen-seccion { margin-bottom: 18px; }
.act-resumen-seccion:last-child { margin-bottom: 0; }
.act-resumen-seccion-head {
    display: flex; align-items: center; gap: 9px;
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 14.5px; color: var(--pino);
    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1.5px solid var(--arena);
}
.act-resumen-seccion-icon {
    flex: none; width: 19px; height: 19px; color: var(--pino);
    display: flex; align-items: center; justify-content: center;
}
.act-resumen-seccion-icon svg { width: 19px; height: 19px; }
.act-resumen-seccion-bloqueo .act-resumen-seccion-icon { color: var(--clay); }
.act-resumen-seccion-permitido .act-resumen-seccion-icon,
.act-resumen-seccion-base .act-resumen-seccion-icon { color: var(--pino); }
/* "Recomendación adicional" es la única sección que sigue siendo un
   recuadro propio — no es una lista, es una nota destacada, mismo
   tratamiento que .act-nota-aclaracion del detalle de configuración real
   (mismos tokens: fondo/borde ámbar, radio, padding). */
.act-resumen-seccion-nota {
    background: rgba(3, 81, 89, .08); border: 1px solid rgba(3, 81, 89, .25);
    border-radius: 12px; padding: 12px 15px;
}
.act-resumen-seccion-nota .act-resumen-seccion-head { border-bottom: none; margin-bottom: 6px; padding-bottom: 0; }
.act-resumen-seccion-nota .act-resumen-seccion-icon { color: #9C6B1F; }
.act-resumen-seccion-nota p { font-size: 13.5px; color: var(--tinta); line-height: 1.55; margin: 0; }

.act-resumen-lista { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.act-resumen-lista li { display: flex; align-items: flex-start; gap: 11px; }
/* Viñeta circular simple en vez de un ícono de check por punto (feedback
   2026-07-28: mismo criterio que .act-recomendado-bullet-icon, "menos
   íconos" en las listas de punto por punto — el ícono de la cabecera de
   sección, uno solo por sección, se conserva). El color sigue distinguiendo
   bloqueado (clay) de permitido/protección base (pino), ahora solo con el
   color de fondo del círculo, sin glifo adentro. Alineada bajo el ícono de
   19px del encabezado de sección (5px = (19-9)/2, el mismo criterio de
   centrado óptico que ya tenía esta lista antes del rediseño). */
.act-resumen-lista li > .act-resumen-check { margin-left: 5px; }
.act-resumen-lista-texto { font-size: 14px; color: var(--tinta); line-height: 1.45; }
.act-resumen-lista-texto strong { color: var(--pino); font-weight: 700; display: block; }
.act-resumen-lista-texto small { display: block; color: var(--salvia); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }
.act-resumen-check {
    flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px;
}
/* check-on se reutiliza en 2 contextos con significado distinto: "esta
   categoría queda bloqueada" (clay) y "esta protección base/permitida
   está incluida" (pino) — el color del punto sigue el tono de SU sección
   en vez de un solo color fijo, para no leerse como una alerta dentro de
   la sección de protección base, que es algo positivo. */
.act-resumen-check-on { background: var(--clay); }
.act-resumen-seccion-base .act-resumen-check-on,
.act-resumen-seccion-permitido .act-resumen-check-on { background: var(--pino); }
.act-resumen-check-off { background: rgba(3,81,89, .22); }
.act-resumen-vacio { font-size: 13.5px; color: var(--salvia); font-style: italic; margin: 0; }
.act-resumen-nota-categoria { font-size: 13px; color: var(--salvia); line-height: 1.5; margin: 0 0 12px; }

.act-resumen-lista-hijos li { align-items: flex-start; }
.act-resumen-disp-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.act-resumen-disp {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(3,81,89, .05); border: 1px solid rgba(3,81,89, .1);
    border-radius: 20px; padding: 4px 10px 4px 7px;
    font-size: 12.5px; color: var(--pino); font-weight: 600;
}
.act-resumen-disp-icon { display: flex; color: var(--pino); }
.act-resumen-disp-icon svg { width: 13px; height: 13px; }

/* Chips de aplicaciones puntuales: fuera del alcance del pedido de
   "menos íconos" (el ícono acá identifica la app/categoría concreta —
   red social, mensajería, juego, etc. — no es un glifo redundante por
   punto de una lista genérica), se mantienen igual que antes. Solo se
   sube el tamaño de letra para que calce con el resto del checklist. */
.act-resumen-apps { display: flex; flex-wrap: wrap; gap: 7px; }
.act-resumen-app-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(3,81,89, .04); border: 1px solid rgba(3,81,89, .09);
    border-radius: 20px; padding: 6px 12px 6px 7px;
    font-size: 14px; font-weight: 600; color: var(--pino);
}
.act-resumen-app-icon {
    flex: none; width: 21px; height: 21px; border-radius: 50%;
    background: rgba(3,81,89, .07); display: flex; align-items: center; justify-content: center;
}
.act-resumen-app-icon svg { width: 12px; height: 12px; color: var(--pino); }
.act-resumen-app-chip-bloqueo { background: rgba(181, 83, 60, .045); border-color: rgba(181, 83, 60, .16); }
.act-resumen-app-chip-bloqueo .act-resumen-app-icon { background: rgba(181, 83, 60, .18); }
.act-resumen-app-chip-bloqueo .act-resumen-app-icon svg { color: var(--clay); }
.act-resumen-app-chip-permitido { background: rgba(66,184,196, .09); border-color: rgba(66,184,196, .32); }
.act-resumen-app-chip-permitido .act-resumen-app-icon { background: rgba(66,184,196, .3); }
.act-resumen-app-chip-permitido .act-resumen-app-icon svg { color: var(--pino); }

/* En móvil la caja ocupa casi todo el ancho de pantalla y el botón
   flotante de WhatsApp (fixed, bottom:20/right:20, 52px) queda sobre su
   esquina inferior derecha — se reserva espacio a la derecha para que
   ninguna tarjeta quede debajo del botón. */
@media (max-width: 480px) {
    .act-resumen-checklist { padding-right: 46px; }
    /* Mismo problema pero vertical: cuando se llega al fondo de la
       página (cualquier paso, no solo el final), el botón "Continuar"/
       "Confirmar y enviar" de .act-nav queda a ~16px del botón flotante
       de WhatsApp — visualmente pegados y con riesgo real de que un padre
       toque el círculo de WhatsApp pensando que toca el botón principal.
       Se amplía el padding inferior del contenedor para que quede un
       colchón cómodo (~48px) entre el botón y la zona ocupada por el
       flotante (72px: 52 alto + 20 de separación del borde). */
    .act-container { padding-bottom: 96px; }
}
.act-nota-final { text-align: center; margin-top: 18px; }
.act-nota-final button {
    background: none; border: none; color: var(--pino); font-family: inherit;
    font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline;
}

/* Confirmación final */
.act-shell-final { display: flex; flex-direction: column; min-height: 100vh; }
.act-final-card {
    /* Padding horizontal 22px — igual que .act-recomendado-card y
       .act-resumen-box (ver comentario ahí) — para que las 3 pantallas
       compartan el mismo ancho de contenido en vez de que esta quedara
       más angosta (era 26px, ~448px de contenido en 1280px vs 456px de
       las otras dos, feedback directo del operador). */
    background: #fff; border: 1.5px solid rgba(3,81,89, .14); border-radius: 18px;
    padding: 36px 22px; text-align: center; margin-top: 32px;
    box-shadow: var(--sombra-lg), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.act-final-icon {
    width: 56px; height: 56px; border-radius: 50%; background: var(--menta); color: var(--pino);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
}
.act-final-icon svg { width: 28px; height: 28px; stroke-width: 2; }
.act-final-card h1 { font-family: 'Fraunces', Georgia, serif; font-size: 24px; color: var(--pino); margin-bottom: 6px; }
.act-final-card p { color: var(--salvia); font-size: 14.5px; line-height: 1.55; margin-bottom: 10px; }
.act-final-nota { font-size: 13px !important; }
/* Agradecimiento — a propósito más chico y en itálica que el h1: es un
   acompañamiento cálido al "¡Listo!", no un segundo titular que compita
   con él. Misma línea editorial que .hero__slogan de la landing (Fraunces
   itálica para frases de marca con peso emocional). */
.act-gracias {
    font-family: 'Fraunces', Georgia, serif; font-size: 16px !important; font-weight: 400; font-style: italic;
    color: var(--pino) !important; margin: 0 0 18px !important; line-height: 1.4 !important;
}
.act-dispositivos-extra-nota {
    background: rgba(66,184,196, .12); border: 1.5px solid rgba(66,184,196, .4);
    border-radius: 12px; padding: 14px 16px; margin: 18px 0 !important; text-align: left;
    font-size: 13.5px !important; color: var(--tinta) !important; line-height: 1.5 !important;
}
.act-pago-detalle { font-size: 13px !important; color: rgba(247,242,234, .78) !important; margin-bottom: 10px !important; }
.act-pago-box {
    background: var(--pino); border-radius: 16px; padding: 22px 20px; margin: 20px 0;
    text-align: center;
}
.act-pago-box-gratis { background: rgba(66,184,196, .12); border: 1.5px solid rgba(66,184,196, .4); }
.act-pago-titulo { font-family: 'Fraunces', Georgia, serif; font-size: 16px !important; color: var(--menta) !important; margin-bottom: 6px !important; }
.act-pago-box-gratis .act-pago-titulo { color: var(--pino) !important; }
.act-pago-monto { font-family: 'Fraunces', Georgia, serif; font-size: 30px !important; font-weight: 600; color: #fff !important; margin-bottom: 14px !important; }
.act-pago-qr { width: 160px; height: 160px; object-fit: contain; background: #fff; border-radius: 10px; padding: 8px; margin: 0 auto 14px; display: block; }
.act-pago-llave { color: #fff !important; font-size: 14.5px !important; margin-bottom: 12px !important; }
.act-pago-llave strong { color: var(--menta); }
.act-pago-nota { font-size: 13px !important; color: rgba(247,242,234, .78) !important; margin-bottom: 0 !important; }
.act-pago-box-gratis .act-pago-nota { color: var(--salvia) !important; }
.act-btn-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin-top: 18px; padding: 14px; background: #25D366; border-radius: 12px;
    color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
}
.act-btn-whatsapp:hover { background: #20b858; }

/* Pulido premium: transición unificada en tarjetas interactivas + estado
   de selección con insignia de check (más allá de solo cambiar el color
   del borde) — refuerza a simple vista qué ya quedó marcado. */
.act-app-label, .act-device-label, .act-toggle, .act-hijo-card {
    transition: transform .18s cubic-bezier(.22, .9, .3, 1),
                box-shadow .18s cubic-bezier(.22, .9, .3, 1),
                border-color .18s ease, background .18s ease;
}
.act-app-label:hover, .act-device-label:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.act-toggle:not(.act-toggle-fijo):hover { transform: translateY(-1px); box-shadow: var(--sombra-lg), inset 0 1px 0 rgba(255, 255, 255, .55); }
.act-app-label:active, .act-device-label:active, .act-toggle:not(.act-toggle-fijo):active { transform: translateY(0) scale(.98); }

.act-app-option input:checked + .act-app-label::after,
.act-device-option input:checked + .act-device-label::after {
    content: "";
    position: absolute; top: -7px; right: -7px;
    width: 19px; height: 19px; border-radius: 50%;
    background-color: var(--menta);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23035159' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L19 7'/%3E%3C/svg%3E");
    background-size: 11px 11px; background-position: center; background-repeat: no-repeat;
    box-shadow: 0 0 0 3px var(--papel), 0 2px 5px rgba(3,81,89, .25);
}

.act-field input:focus-visible, .act-field select:focus-visible {
    outline: 2px solid var(--menta); outline-offset: 2px;
}
.act-app-label:has(input:focus-visible), .act-device-label:has(input:focus-visible) {
    outline: 2px solid var(--menta); outline-offset: 2px;
}
.act-grupo-chip:has(input:focus-visible) { outline: 2px solid var(--menta); outline-offset: 2px; }
.act-regla-opcion:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }
.act-btn-usar-recomendado:focus-visible, .act-btn-volver-recomendado:focus-visible,
.act-whatsapp-flotante:focus-visible { outline: 2px solid var(--menta); outline-offset: 3px; }
.act-btn-finalizar:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }
.act-footer-social a:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .act-app-label, .act-device-label, .act-toggle, .act-hijo-card,
    .act-regla-opcion, .act-grupo-chip { transition: border-color .18s ease, background .18s ease; }
    .act-app-label:hover, .act-device-label:hover, .act-toggle:not(.act-toggle-fijo):hover,
    .act-regla-opcion:hover, .act-grupo-chip:hover { transform: none; }
    .act-btn-usar-recomendado, .act-btn-volver-recomendado, .act-instalacion-card,
    .act-btn-finalizar, .act-footer-social a {
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .act-btn-usar-recomendado:hover, .act-btn-volver-recomendado:hover, .act-instalacion-card:hover,
    .act-btn-finalizar:hover, .act-footer-social a:hover { transform: none; }
    .act-whatsapp-flotante { animation: none; }
}

@media (max-width: 380px) {
    .act-apps-grid { grid-template-columns: repeat(2, 1fr); }
    .act-field-row { flex-direction: column; }
    /* Las 2 tarjetas de "¿mismas reglas?" siempre en una sola columna
       (aunque el viewport llegue a 560px, poco probable a 380px) con algo
       menos de padding/ícono para que no se sientan apretadas en pantallas
       angostas tipo iPhone SE. */
    .act-regla-opcion { padding: 18px 16px 16px; }
    .act-regla-icon { width: 30px; height: 30px; margin-bottom: 9px; }
    /* Header: back-botón + isotipo + "Marsupia" + badge en una sola fila
       sin wrap se pasan del ancho disponible en celulares angostos
       (~360-375px) — se achica badge/marca en vez de dejar que el badge
       se comprima ilegible o desborde el header. */
    .act-header { padding: 16px 20px 14px; }
    .act-progress { padding: 0 20px 16px; }
    .act-brand span { font-size: 17px; }
    .act-badge { font-size: 10px; padding: 3px 8px; }
}