/*
 * Registro web en 5 pasos (resources/views/auth/registro/*).
 * Colores, tipografía y medidas del Manual de marca HazConta v2:
 * azul #003954, naranja #FC440C (un solo botón naranja por pantalla, texto
 * blanco de 19 px), Figtree, campos con borde pizarra, tarjetas sin sombra,
 * error carmesí #A8123F siempre con ícono.
 */
:root {
    --azul: #003954;
    --azul-medio: #006999;
    --azul-700: #045073;
    --cielo: #75c9f0;
    --azul-200: #a8c7db;
    --azul-50: #f0f8fe;
    --naranja: #fc440c;
    --tinta: #0b1f2a;
    --pizarra: #5b7482;
    --niebla: #eef3f6;
    --linea: #d5dfe5;
    --listo-texto: #14613a;
    --listo-fondo: #e7f6ec;
    --revisar-texto: #8a5a00;
    --revisar-fondo: #fdf3dd;
    --error-texto: #a8123f;
    --error-fondo: #fdecea;
    --aviso-texto: #005a85;
    --aviso-fondo: #e6f3fa;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    background: var(--niebla);
    color: var(--tinta);
    font-family: 'Figtree', Helvetica, Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
a {
    color: var(--azul-medio);
}
a:hover {
    color: var(--azul-700);
}
button,
input,
select {
    font-family: inherit;
}
[hidden] {
    display: none !important;
}

.rg {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
}

/* Panel de valor (web) */
.rg-panel {
    flex: 1 1 420px;
    background: var(--azul);
    color: var(--niebla);
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.rg-panel__logo {
    width: 180px;
    height: 64px;
    display: block;
}
.rg-panel h1 {
    margin: 0;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    max-width: 460px;
}
.rg-panel p {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--azul-200);
    max-width: 460px;
}
.rg-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 460px;
}
.rg-panel li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.5;
}
.rg-panel li svg {
    flex: none;
    margin-top: 2px;
}
.rg-panel__pie {
    margin-top: auto;
    border-top: 1px solid var(--azul-700);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 460px;
    font-size: 14px;
    color: var(--azul-200);
}
.rg-panel__pie div {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Encabezado (celular) */
.rg-encabezado {
    display: none;
}

/* Columna del formulario */
.rg-main {
    flex: 999 1 560px;
    min-width: 0;
    padding: 40px 24px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.rg-main__arriba {
    width: 100%;
    max-width: 560px;
    display: flex;
    justify-content: flex-end;
    font-size: 15px;
    color: var(--pizarra);
}
.rg-tarjeta {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.rg-ayuda {
    width: 100%;
    max-width: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: var(--pizarra);
    text-align: center;
}

/* Pasos */
.rg-pasos {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rg-pasos__texto {
    display: none;
    font-size: 14px;
    font-weight: 700;
}
.rg-pasos__lista {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rg-pasos__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--pizarra);
}
.rg-pasos__item::before {
    content: '';
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--linea);
}
.rg-pasos__item.es-hecho {
    color: var(--tinta);
}
.rg-pasos__item.es-hecho::before,
.rg-pasos__item.es-actual::before {
    background: var(--azul);
}
.rg-pasos__item.es-actual {
    color: var(--tinta);
    font-weight: 700;
}
.rg-subpaso {
    font-size: 14px;
    font-weight: 700;
    color: var(--azul-medio);
}

/* Texto */
.rg-titulo {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.rg-sub {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--pizarra);
}
.rg-sub b {
    color: var(--tinta);
}
.rg-nota {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pizarra);
}
.rg-bloque {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Campos */
.rg-fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.rg-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.rg-campo label,
.rg-leyenda {
    font-size: 14px;
    font-weight: 600;
}
.rg-campo label span {
    font-weight: 400;
    color: var(--pizarra);
}
.rg-input,
.rg-select {
    height: 48px;
    width: 100%;
    border: 1px solid var(--pizarra);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 16px;
    color: var(--tinta);
    background: #fff;
}
.rg-input:focus,
.rg-select:focus {
    outline: 2px solid rgba(0, 105, 153, 0.35);
    outline-offset: 0;
    border-color: var(--azul-medio);
}
.rg-input.es-error {
    border: 2px solid var(--error-texto);
}
.rg-campo__ayuda {
    font-size: 13px;
    color: var(--pizarra);
}
.rg-campo__error {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--error-texto);
}
.rg-clave {
    display: flex;
    align-items: center;
    border: 1px solid var(--pizarra);
    border-radius: 8px;
    height: 48px;
    padding-right: 6px;
}
.rg-clave:focus-within {
    outline: 2px solid rgba(0, 105, 153, 0.35);
    border-color: var(--azul-medio);
}
.rg-clave input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 16px;
    color: var(--tinta);
    outline: none;
}
.rg-fuerza {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.rg-fuerza span {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: var(--linea);
}
fieldset.rg-grupo {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
fieldset.rg-grupo legend {
    padding: 0;
    margin-bottom: 10px;
}
.rg-check {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 15px;
    min-height: 44px;
    cursor: pointer;
}
.rg-check input {
    width: 20px;
    height: 20px;
    accent-color: var(--azul);
    flex: none;
    margin: 0;
}

/* Opciones en tarjeta */
.rg-opciones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.rg-opciones--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rg-opcion {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    min-height: 80px;
    background: #fff;
    border: 1px solid var(--pizarra);
    margin: 1px;
    color: var(--tinta);
}
.rg-opcion[aria-pressed='true'] {
    background: var(--azul-50);
    border: 2px solid var(--azul);
    margin: 0;
}
.rg-opcion__titulo {
    font-size: 15px;
    font-weight: 600;
}
.rg-opcion__desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--pizarra);
}

/* Segmentado */
.rg-segmento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    background: var(--niebla);
    border-radius: 12px;
    padding: 4px;
}
.rg-segmento button {
    height: 44px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    color: var(--pizarra);
}
.rg-segmento button[aria-pressed='true'] {
    background: #fff;
    color: var(--tinta);
    box-shadow: 0 1px 3px rgba(11, 31, 42, 0.12);
}

/* Planes */
.rg-plan {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--pizarra);
    margin: 1px;
    text-align: left;
    color: var(--tinta);
}
.rg-plan[aria-pressed='true'] {
    background: var(--azul-50);
    border: 2px solid var(--azul);
    margin: 0;
}
.rg-plan__fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.rg-plan__nombre {
    font-size: 17px;
    font-weight: 700;
}
.rg-plan__desc {
    font-size: 14px;
    line-height: 1.45;
    color: var(--pizarra);
}
.rg-plan__precio {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
}
.rg-plan__antes {
    font-size: 13px;
    color: var(--pizarra);
    text-decoration: line-through;
    min-height: 16px;
}
.rg-plan__monto {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.rg-plan__unidad {
    font-size: 12px;
    color: var(--pizarra);
}

/* Insignias y avisos */
.rg-insignia {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.rg-insignia--listo {
    background: var(--listo-fondo);
    color: var(--listo-texto);
}
.rg-insignia--naranja {
    background: #fff4f1;
    color: #c93405;
}
.rg-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
}
.rg-aviso svg {
    flex: none;
    margin-top: 2px;
}
.rg-aviso--error {
    background: var(--error-fondo);
    color: var(--error-texto);
}
.rg-aviso--revisar {
    background: var(--revisar-fondo);
    color: var(--revisar-texto);
}
.rg-aviso--listo {
    background: var(--listo-fondo);
    color: var(--listo-texto);
}
.rg-aviso--info {
    background: var(--aviso-fondo);
    color: var(--aviso-texto);
}
.rg-caja {
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rg-resumen {
    background: var(--azul-50);
}
.rg-resumen__fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
}
.rg-resumen__total {
    font-size: 17px;
    font-weight: 700;
    border-top: 1px solid var(--linea);
    padding-top: 10px;
}

/* Bandeja de entrada (vista del correo) */
.rg-bandeja {
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.rg-bandeja__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex: none;
}
.rg-bandeja__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.rg-bandeja__texto span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Código */
.rg-digitos {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}
.rg-digito {
    width: 48px;
    height: 56px;
    flex: none;
    padding: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--pizarra);
    border-radius: 8px;
}
.rg-digito:focus {
    outline: 2px solid rgba(0, 105, 153, 0.35);
    border-color: var(--azul-medio);
}
.rg-digitos.es-error .rg-digito {
    border: 2px solid var(--error-texto);
}
.rg-codigo-app {
    height: 64px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
}

/* Botones */
.rg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
}
.rg-btn--principal {
    height: 52px;
    border: 0;
    background: var(--naranja);
    color: #fff;
    font-size: 19px;
    width: 100%;
}
.rg-btn--principal:hover {
    background: #e63c08;
    color: #fff;
}
.rg-btn--azul {
    height: 52px;
    border: 0;
    background: var(--azul);
    color: #fff;
    font-size: 17px;
    width: 100%;
}
.rg-btn--azul:hover {
    background: var(--azul-700);
    color: #fff;
}
.rg-btn--borde {
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--pizarra);
    background: #fff;
    color: var(--tinta);
    font-size: 15px;
    font-weight: 600;
}
.rg-btn--borde-azul {
    height: 44px;
    border: 1px solid var(--azul);
    background: #fff;
    color: var(--azul);
    font-size: 15px;
    width: 100%;
}
.rg-btn--texto {
    height: 44px;
    border: 0;
    background: none;
    color: var(--tinta);
    font-size: 15px;
    font-weight: 600;
}
.rg-btn--enlace {
    border: 0;
    background: none;
    padding: 0;
    color: var(--azul-medio);
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.rg-btn--enlace:disabled {
    color: var(--pizarra);
    text-decoration: none;
    cursor: default;
}
.rg-btn[disabled],
.rg-btn.es-cargando {
    opacity: 0.7;
    cursor: progress;
}
.rg-acciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rg-botones-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.rg-btn:focus-visible,
.rg-opcion:focus-visible,
.rg-plan:focus-visible,
.rg-segmento button:focus-visible {
    outline: 2px solid var(--azul-medio);
    outline-offset: 2px;
}

/* QR y clave */
.rg-qr {
    align-self: center;
    width: 216px;
    height: 216px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 8px;
    background: #fff;
}
.rg-qr img {
    width: 100%;
    height: 100%;
    display: block;
}
.rg-clave-manual {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--pizarra);
    border-radius: 8px;
    padding: 4px 4px 4px 14px;
}
.rg-clave-manual code {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 16px;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
}
.rg-icono-circulo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rg-centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.rg-app {
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.rg-app__icono {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--azul-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.rg-app__nombre {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 160px;
    min-width: 0;
}

/* Equipo (paso 4) */
.rg-yo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #f7fafc;
}
.rg-yo__iniciales {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex: none;
}
.rg-yo__datos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.rg-yo__correo {
    font-size: 13px;
    color: var(--pizarra);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rg-chip {
    font-size: 12px;
    font-weight: 600;
    color: var(--aviso-texto);
    background: var(--aviso-fondo);
    border-radius: 999px;
    padding: 4px 10px;
    flex: none;
}
.rg-miembro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fff;
}
.rg-miembro .rg-input {
    height: 44px;
}
.rg-miembro__abajo {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.rg-miembro__abajo .rg-segmento {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px;
    border-radius: 10px;
}
.rg-miembro__abajo .rg-segmento button {
    height: 38px;
    font-size: 14px;
    white-space: nowrap;
    padding: 0 6px;
}
.rg-miembro__quitar {
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rg-miembro__error {
    grid-column: 1 / -1;
}
.rg-agregar {
    min-height: 48px;
    border: 1px dashed var(--pizarra);
    border-radius: 12px;
    background: #fff;
    color: var(--azul);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.rg-invitado {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.rg-invitado__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--listo-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.rg-invitado__nombre {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

/* Celular */
@media (max-width: 760px) {
    .rg-miembro {
        grid-template-columns: minmax(0, 1fr);
    }
    .rg-panel,
    .rg-main__arriba {
        display: none;
    }
    .rg-encabezado {
        display: flex;
        flex: 1 1 100%;
        background: var(--azul);
        padding: 12px 16px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .rg-encabezado img {
        width: 140px;
        height: 50px;
        display: block;
    }
    .rg-encabezado a {
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .rg-main {
        padding: 20px 16px 32px;
        gap: 20px;
        background: #fff;
    }
    .rg-tarjeta {
        border: 0;
        padding: 0;
        gap: 24px;
    }
    .rg-pasos__texto {
        display: block;
    }
    .rg-pasos__item {
        font-size: 0;
        gap: 0;
    }
    .rg-opciones {
        grid-template-columns: minmax(0, 1fr);
    }
    .rg-fila {
        grid-template-columns: minmax(0, 1fr);
    }
    .rg-opcion {
        min-height: 0;
    }
}

/* Paso 5: QR en computadora; en celular, botón que abre la app de códigos. */
@media not all and (max-width: 760px) and (pointer: coarse) {
    [data-solo-movil] {
        display: none !important;
    }
}
@media (max-width: 760px) and (pointer: coarse) {
    [data-solo-web] {
        display: none !important;
    }
}