/* Cannis Asesores (cara pública) — armazon.css
   DERIVADO de public/css/repronline/v3/embudo.css (rangos 20-118, 2540-2612, 2631-2633, 2635-2657, 1981-2021) con el prefijo rp- → as-.
   Se parte de Repronline a propósito: Asesores NO depende del bundle de Repronline (lo arma `php artisan repronline:css` y no está en git). */

/* ── 1. El stepper ───────────────────────────────────────────────────────
   Cuatro pasos para que el paciente vea dónde está y cuánto le falta antes
   de pagar. Va en la barra, debajo del nav, y SÓLO dentro del embudo: fuera
   manda la franja de destinos. Tener los dos era decir lo mismo dos veces. */

.as-pasos {
    background: var(--w-surface);
    border-bottom: 1px solid var(--w-border);
}

.as-pasos__lista {
    max-width: var(--w-max);
    margin-inline: auto;
    padding: 0 var(--w-gutter);
    min-height: 64px;
    display: flex;
    align-items: center;
    /* Centrado. Antes los cuatro pasos tenían `flex: 1 1 0` y se repartían el
       ancho en partes iguales: como el último no lleva línea de unión, su
       cuarto quedaba medio vacío y toda la barra se veía corrida a la
       izquierda —207 px de aire a la derecha y cero a la izquierda, medido en
       el navegador—. Ahora cada paso ocupa lo suyo, las uniones tienen un
       ancho propio y el grupo se centra como cualquier otro contenido de la
       página. */
    justify-content: center;
    gap: 0;
    list-style: none;
    margin-block: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.as-pasos__lista::-webkit-scrollbar { display: none; }

.as-pasos__item { display: flex; align-items: center; flex: 0 0 auto; }

.as-paso {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    padding: var(--w-s2) 0;
    font-size: 0.8125rem;
    color: var(--w-muted);
    text-decoration: none;
}

.as-paso__marca {
    width: 26px; height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--w-font-titulos);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--w-border);
    background: var(--w-surface-2);
    color: var(--w-muted);
}

.as-paso__nombre { white-space: nowrap; font-weight: 600; }

.as-paso__union {
    flex: 0 0 clamp(24px, 5vw, 80px);
    height: 1px;
    background: var(--w-border);
    margin-inline: var(--w-s2);
}

.as-pasos__item:last-child .as-paso__union { display: none; }

.as-paso--hecho { color: var(--w-text-soft); }
.as-paso--hecho .as-paso__marca {
    background: var(--w-menta-suave);
    border-color: var(--w-border-fuerte);
    color: var(--w-menta);
}
.as-paso--hecho + .as-paso__union { background: var(--w-border-fuerte); }
.as-paso--hecho:hover .as-paso__nombre { color: var(--w-menta); }

.as-paso--actual { color: var(--w-text); }
.as-paso--actual .as-paso__marca {
    /* La tinta sobre el acento es la navy, nunca blanco: sobre menta el
       blanco da 1,6:1. Es la deuda #32 del CLAUDE.md, y acá no se repite. */
    background: var(--w-menta);
    border-color: transparent;
    color: var(--w-ink);
}
.as-paso--actual .as-paso__nombre { font-weight: 800; }

@media (max-width: 640px) {
    /* Los cuatro nombres no entran: queda el del paso actual y los demás se
       reducen a su número. Sigue diciendo "vas 2 de 4". */
    .as-paso:not(.as-paso--actual) .as-paso__nombre { display: none; }

    /* Centrar y desbordar a la vez recorta el arranque: si no entra, que
       empiece por el principio. */
    .as-pasos__lista { justify-content: flex-start; }
}

.as-cuenta { position: relative; }

.as-cuenta > summary { cursor: pointer; list-style: none; }
.as-cuenta > summary::-webkit-details-marker { display: none; }

.as-cuenta__flecha {
    width: 0.8em;
    height: 0.8em;
    color: var(--w-muted);
    transition: transform var(--w-transicion);
}
.as-cuenta[open] .as-cuenta__flecha { transform: rotate(180deg); }

.as-cuenta__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 120;
    min-width: 15rem;
    padding: var(--w-s2);
    border: 1px solid var(--w-border-fuerte);
    border-radius: var(--w-radio-sm);
    background: var(--w-navy-2, #0f2341);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.as-cuenta__quien {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: var(--w-s2);
    margin-bottom: var(--w-s2);
    border-bottom: 1px solid var(--w-border);
}

.as-cuenta__nombre { font-weight: 700; font-size: 0.92rem; color: var(--w-text); }

.as-cuenta__mail {
    font-size: 0.8rem;
    color: var(--w-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-cuenta__item {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    width: 100%;
    padding: 0.6rem var(--w-s2);
    border: 0;
    border-radius: var(--w-radio-sm);
    background: none;
    color: var(--w-text-soft);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--w-transicion), color var(--w-transicion);
}

.as-cuenta__item:hover { background: rgba(255, 255, 255, 0.06); color: var(--w-text); }
.as-cuenta__item .w-ico { width: 1em; height: 1em; color: var(--w-menta); }

.as-cuenta__item--salir { color: #fca5a5; }
.as-cuenta__item--salir:hover { background: rgba(248, 113, 113, 0.1); color: #fca5a5; }
.as-cuenta__item--salir .w-ico { color: #fca5a5; }

/* En teléfono el menú se ancla al borde y no se sale de la pantalla. */
@media (max-width: 480px) {
    .as-cuenta__menu { right: -0.5rem; min-width: min(17rem, calc(100vw - 2rem)); }
}

@media (max-width: 900px) {
    .as-cuenta { display: none; }
}

/* La identidad arriba del todo en el menú: quién sos antes que a dónde vas. */
.as-menu__quien {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    padding-bottom: var(--w-s3);
    margin-bottom: var(--w-s1);
    border-bottom: 1px solid var(--w-border);
}

.as-menu__datos { display: flex; flex-direction: column; min-width: 0; }

.as-menu__nombre {
    font-weight: 700;
    color: var(--w-text);
    overflow-wrap: anywhere;
}

.as-menu__mail {
    font-size: 0.85rem;
    color: var(--w-muted);
    overflow-wrap: anywhere;
}

.as-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.74rem;
    font-weight: 700;
}

/* El color sale de una variable por estado y no de tres atributos style
   repetidos en el Blade, que era lo que había. */
.as-estado::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.as-estado--espera   { color: #fbbf24; }
.as-estado--curso    { color: #a78bfa; }
.as-estado--evaluar  { color: #60a5fa; }
.as-estado--ok       { color: var(--w-menta); }
.as-estado--mal      { color: #f87171; }
.as-estado--neutro   { color: #94a3b8; }



/* ═══════════════════════════════════════════════════════════════════════
   Lo NUEVO de Asesores (Repronline no lo tiene): la medida de su logo, los tonos del aviso, el contenedor de alertas y los
   remates compartidos por varias pantallas.
   ═══════════════════════════════════════════════════════════════════════ */

/* La marca: el logo de Advisorgs del módulo de marca (`<x-brand.logo ruta="advisorgs" class="w-marca w-marca--advisorgs">`), solo: el logo ya trae el nombre
   del producto y no se le suma ninguna palabra. `.w-marca` (institucional.css) le quita el aire que el SVG trae alrededor del texto con márgenes proporcionales
   al alto; acá va lo propio de este logo, medido sobre el SVG (viewBox 224,88 × 105, ancho / alto 2,1417): la tinta ocupa 1,927 × 0,387 del alto y deja 0,2964
   arriba, 0,3167 abajo, 0,1048 a la izquierda y 0,1095 a la derecha. Si se cambia el logo, se vuelve a medir. En la barra mide como el de Repronline (el texto
   queda de ~135 × 27 px). */
/* PD-77: el aire de arriba (`.w-marca--advisorgs`) se mudó a institucional.css, que lo comparte con la portada de cannis.org (la tarjeta y el
   banner de Advisorgs). Acá queda sólo el alto de cada lugar de esta cara. */
.w-nav__marca .w-marca--advisorgs { --w-marca-alto: 70px; }
.w-footer__marca .w-marca--advisorgs { --w-marca-alto: 80px; }
@media (max-width: 900px) {
    .w-nav__marca .w-marca--advisorgs { --w-marca-alto: 64px; }
}

/* Avisos: `--w-aviso-color` ya gobierna borde, fondo e ícono; el sistema sólo trae menta (`w-aviso`) y rojo (`w-aviso--error`). */
.as-aviso--alerta { --w-aviso-color: #fbbf24; }
.as-aviso--info { --w-aviso-color: #60a5fa; }
.as-aviso__cuerpo { min-width: 0; flex: 1 1 auto; }
.as-aviso__titulo { margin: 0; font-weight: 700; color: var(--w-text); }
.as-aviso__cuerpo p { margin: 0; }

/* Las alertas de sesión van arriba del contenido, dentro del ancho de la página. */
.as-alertas { padding-top: var(--w-s3); }
.as-alertas .w-aviso { margin-bottom: var(--w-s2); }

/* El ecosistema en el pie: en su propia línea, bajo la leyenda, con la misma tinta y el aire del registro. */
.w-footer .as-pie__ecosistema { margin: var(--w-s2) 0 0; font-size: 0.78rem; line-height: 1.7; color: rgba(255, 255, 255, 0.38); }

/* Utilidades compartidas por varias pantallas (en Repronline viven dentro de otras secciones). */
.as-fecha-larga { display: inline-block; }
.as-fecha-larga::first-letter { text-transform: uppercase; }

/* ── Lo que se lee con un lector de pantalla y no se ve (la etiqueta del buscador, el texto del sello) ─ */

.as-solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Paginación ────────────────────────────────────────────────────────────
   Enlaces de verdad (el listado se pagina en el servidor, con los filtros en
   la dirección): el actual es un span con aria-current, los extremos que no
   llevan a ningún lado son spans con aria-disabled. */

.as-paginas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--w-s2);
    margin-top: var(--w-s5);
}

.as-paginas__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--w-s1);
}

.as-paginas__btn {
    min-width: 40px;
    height: 40px;
    padding: 0 0.6rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--w-border);
    border-radius: 10px;
    background: var(--w-surface);
    color: var(--w-text-soft);
    font-family: var(--w-font-texto);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--w-transicion), color var(--w-transicion);
}

a.as-paginas__btn:hover { border-color: var(--w-border-fuerte); color: var(--w-text); }

a.as-paginas__btn:focus-visible {
    outline: 2px solid var(--w-text);
    outline-offset: 2px;
}

.as-paginas__btn[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }

.as-paginas__btn.activo {
    background: var(--w-menta);
    border-color: transparent;
    color: var(--w-ink);
}

.as-paginas__puntos { color: var(--w-muted); padding-inline: 0.3rem; }

/* El chevron del sistema apunta hacia abajo: se gira para mirar a un lado. */
.as-paginas__ico { width: 1.1em; height: 1.1em; }
.as-paginas__ico--anterior { transform: rotate(90deg); }
.as-paginas__ico--siguiente { transform: rotate(-90deg); }

.as-paginas__resumen {
    margin: 0;
    color: var(--w-muted);
    font-size: 0.82rem;
}