/* ALTA DE PROFESIONALES (/empezar?plan=agente|profesional) · lo que producción tiene y la demo del diseñador no
   (04/10/2026).
   - El marco es el de /empezar (decisión de Marco del 03/10/2026: el alta y el ingreso conservan el panel azul de la
     izquierda): body.alta, .lado-marca y .lado-form salen de empezar.css y empezar-produccion.css, tal cual.
   - A la derecha va el formulario de 3 pasos y "Tu plan" de la demo de profesionales (paginas.css), en una sola
     columna, como la demo los muestra cuando no entran lado a lado.
   - Lo demás sigue el "Diseño propuesto para lo que falta" de nuevo-frontend/cobertura-demo.md (alta de profesionales).
   Los archivos del diseñador (marca.css, empezar.css, paginas.css) y empezar-produccion.css no se tocan. */

/* ---------- columna derecha: pasos, tarjeta del paso y "Tu plan", uno debajo del otro. El ancho máximo es el de la
   tarjeta de la demo en escritorio (1120 - 64 - 360 - 32), así su contenido se ve igual ---------- */
.pro-columna { width: 100%; max-width: 664px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.pro-columna .resumen-pro { position: static; }
/* cada paso entra deslizándose 20 px desde la derecha (panelEntra de la demo): en el celular la tarjeta ocupa todo el
   ancho y mientras entra asomaba fuera de la pantalla; se recorta solo en horizontal (sin barra de desplazamiento) */
body.pro .lado-form { overflow-x: clip; }

/* ---------- ¿Ya tenés cuenta? (el "Ingresá" de /empezar, dentro de la tarjeta porque este marco no tiene barra) ---------- */
.paso-pro .ya-cuenta { margin-top: 6px; }

/* ---------- mensajes: las notas verde y roja de /empezar; vacías no ocupan lugar en la grilla de la tarjeta ---------- */
.paso-pro .status:empty { display: none; }
.status.ambar { padding: 10px 12px; border-radius: 10px; background: var(--medio-100); color: var(--medio-texto); }
.status a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.nota-reintentar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.nota-reintentar .btn { flex: none; }
/* anillo chico para "Preparando el pago…" (el mismo giro del buscador de /empezar) */
.giro {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid var(--borde); border-top-color: var(--acento-500); animation: girar .8s linear infinite;
}

/* ---------- sesión abierta: avatar de iniciales (el de la app) + email + seguir / usar otra cuenta ---------- */
.sesion-abierta .quien { display: flex; align-items: center; gap: 12px; }
.sesion-abierta .quien p { font-size: var(--t-14); min-width: 0; overflow-wrap: anywhere; }
.sesion-abierta .avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--acento-500), var(--tinta-800)); color: #fff; font-weight: 700; font-size: 13px;
}

/* ---------- Google: el bloque conserva el espacio de la demo (botón, "o con tu email" y formulario a 16 px) ---------- */
.con-google { display: grid; gap: 16px; }

/* ---------- "Tu plan": siluetas mientras llegan los precios y anillo mientras la cuenta guarda el cambio ---------- */
.opcion-plan { position: relative; }
.opcion-plan.cargando { cursor: default; }
.opcion-plan.guardando input { opacity: 0; }
.opcion-plan.guardando::before {
  content: ""; position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid; border-color: var(--acento-500) transparent var(--acento-500) transparent; animation: girar .7s linear infinite;
}

/* ---------- pago: los campos seguros de la pasarela (iframes) con el aspecto de .entrada ---------- */
.tj-form { display: grid; gap: 16px; }
div.tj-campo {
  height: 42px; padding: 0 14px; display: flex; align-items: center; border: 1px solid var(--borde);
  border-radius: var(--r-sm); background: var(--superficie); transition: border-color var(--d-rapida);
}
div.tj-campo:hover { border-color: #CBD5E1; }
div.tj-campo iframe { width: 100%; height: 100%; }

/* ---------- botones de texto largo ("Pagar vía Mercado Pago (primer cobro el 18/10)", "Cargar toda la cartera y pagar
   desde hoy"): si no entran, el texto pasa a dos renglones en vez de ensanchar la página. En la demo a 390 px la
   cartera mide 429 px y el pago 481 px, y la página se corre de costado; mismo arreglo que las acciones de "No la
   encontramos" en /empezar ---------- */
#p-tarjeta, #p-mp, #m-sin-prueba {
  max-width: 100%; white-space: normal; height: auto; min-height: var(--alto-btn); padding-block: 8px; line-height: 1.3; text-align: center;
}

/* ---------- "Tu plan" en el panel azul (escritorio; pedido del diseñador del 04/10/2026): debajo de los 3 beneficios,
   tarjeta clara sobre el fondo oscuro, texto en blanco y letra chica en --tinta-200. Es la misma tarjeta que en el
   celular va debajo del formulario (la ubica ubicarPlan según el ancho) ---------- */
.lugar-plan:empty { display: none; }
.lado-marca .lugar-plan { margin-top: 24px; }
.lado-marca .resumen-pro {
  position: static; padding: 18px 20px; gap: 10px; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none;
}
.lado-marca .resumen-pro h2 { color: #fff; }
.lado-marca .opcion-plan { padding: 12px 14px; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); }
.lado-marca .opcion-plan:hover { border-color: rgba(255, 255, 255, .28); }
.lado-marca .opcion-plan b { color: #fff; }
.lado-marca .opcion-plan span { color: var(--tinta-200); }
.lado-marca .opcion-plan.elegida { border-color: var(--acento-500); background: rgba(14, 154, 141, .16); box-shadow: 0 0 0 3px rgba(14, 154, 141, .16); }
.lado-marca .prueba-pill { background: rgba(14, 154, 141, .2); color: #7FE0D5; }
.lado-marca .precio-pro { color: #fff; }
.lado-marca .precio-pro small { color: var(--tinta-200); }
.lado-marca .resumen-pro .nota-chica { color: var(--tinta-200); }
.lado-marca .resumen-pro a { color: #7FE0D5; }
.lado-marca .resumen-pro .esq { background: rgba(255, 255, 255, .08); }
.lado-marca .resumen-pro .esq::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .14) 50%, transparent 80%); }
/* "Incluye el cotejo…" (.plan-incluye: .incluye ya es una sección de paginas.css) repetiría los beneficios de arriba; vuelve cuando el panel se compacta y ellos no se ven */
.lado-marca .resumen-pro .plan-incluye { display: none; }
/* con la tarjeta el contenido llena el panel: un poco menos de aire entre bloques y el título despegado de la fila del
   logo, así a 1440 x 900 entran el título, la bajada, los 3 beneficios y la tarjeta entera */
body.pro .lado-marca .centro { margin-top: 16px; }
body.pro .lado-marca .bajada { margin-bottom: 24px; }
body.pro .lado-marca ul { gap: 12px; }
/* pantalla baja: el panel se compacta en dos niveles (los decide ajustarPanel midiendo). 1: los beneficios ceden su
   lugar a la misma frase en la letra chica de la tarjeta, con menos aire. 2: tampoco esa frase */
body.pro .lado-marca.compacto { padding-top: 28px; padding-bottom: 28px; }
.lado-marca.compacto ul { display: none; }
.lado-marca.compacto .bajada { margin-bottom: 0; }
.lado-marca.compacto .lugar-plan { margin-top: 20px; }
.lado-marca.compacto .resumen-pro { padding: 16px 18px; gap: 10px; }
.lado-marca.compacto .resumen-pro .plan-incluye { display: inline; }
.lado-marca.compacto.justo .resumen-pro .plan-incluye { display: none; }
body.pro .lado-marca.compacto.justo { padding-top: 20px; padding-bottom: 20px; }
body.pro .lado-marca.compacto.justo .centro { margin-top: 8px; }
.lado-marca.compacto.justo .lugar-plan { margin-top: 16px; }
/* y si aun así no entra, el panel se desplaza en vez de cortar la tarjeta */
@media (min-width: 961px) {
  body.pro .lado-marca {
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
  }
}

/* ---------- celular: el plan elegido en una línea arriba del formulario, con "Cambiar" que lleva a "Tu plan" ---------- */
.plan-resumen {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -16px; padding: 10px 14px;
  border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--s-1);
  font-size: var(--t-13); color: var(--tinta-900);
}
.plan-resumen > span { min-width: 0; }
.plan-resumen > span > span { white-space: nowrap; }
.plan-resumen b { font-weight: 600; }
.plan-resumen .gratis { color: var(--acento-600); font-weight: 600; }
.plan-resumen a { flex: none; font-weight: 600; }
@media (min-width: 961px) { .plan-resumen { display: none; } }