/* =====================================================================
   registro.css
   Pantalla publica de registro de competidores (wfRegistro.aspx) y su
   pantalla de confirmacion (wfRegistroOk.aspx).

   Esta hoja es la UNICA del proyecto que se usa fuera del panel: la
   llena un competidor desde su telefono, parado en la pista, no un
   capturista sentado frente a un monitor. Por eso esta escrita
   mobile-first de verdad -- el layout base es el de un telefono y los
   media query solo AGREGAN a partir de 768px -- y no al reves.

   Todo el color sale de variables.css. Ni un hex suelto aqui.

   Se carga desde el .aspx, no desde la Master: estas dos pantallas no
   llevan Master, igual que wfLogin.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Lienzo
   --------------------------------------------------------------------- */
.reg-body {
    background-color: var(--ds-body-background);
    color: var(--ds-texto-primary);
    /* Espacio abajo para que la barra fija de acciones no tape el ultimo
       campo del formulario. */
    padding-bottom: 96px;
}

.reg-wrap {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------------------------------------------------------------------
   Encabezado del evento
   --------------------------------------------------------------------- */
.reg-hero {
    background-color: var(--ds-primary);
    color: var(--ds-texto-nav);
    padding: 24px 16px 20px 16px;
    text-align: center;
}

.reg-hero img {
    max-width: 140px;
    width: 60%;
    height: auto;
    margin-bottom: 12px;
}

.reg-hero h1 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 6px 0;
}

.reg-hero .reg-fechas {
    font-size: .95rem;
    opacity: .92;
    margin: 0;
}

.reg-hero .reg-sede {
    font-size: .82rem;
    opacity: .82;
    margin: 10px 0 0 0;
    line-height: 1.45;
}

/* ---------------------------------------------------------------------
   Banner de la competencia

   Es la publicidad del evento (images/Banner/<CompetenciaId>.jpg) y va
   DEBAJO del logo, dentro del encabezado. Se topa a 560px porque el
   arte suele venir en formato cartel: a ancho completo en una laptop
   empujaria el primer campo del formulario fuera de la pantalla, y este
   es un formulario, no una landing.

   aspect-ratio no se fija a proposito: el cartel llega con la
   proporcion que le hayan dado y recortarlo le cortaria texto.
   --------------------------------------------------------------------- */
.reg-banner {
    max-width: 560px;
    margin: 18px auto 0 auto;
}

/* El selector lleva .reg-hero a proposito, para GANARLE a
   ".reg-hero img", que es la regla del logo (width:60%, max-width:140px)
   y aplica a cualquier imagen del encabezado, banner incluido. Con la
   misma especificidad que aquella, el max-width de 140px se colaba y el
   cartel salia diminuto y pegado a la izquierda: bloque de 140px dentro
   de una caja de 560px centrada.

   Se repiten width, max-width, margin y display los cuatro: basta con
   que falte uno para que vuelva a ganar el valor del logo. */
.reg-hero .reg-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--ds-radius-lg);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .18);
}

/* ---------------------------------------------------------------------
   Barra de pasos

   En telefono se ven solo los circulos con el numero; la etiqueta de
   texto aparece a partir de 576px, donde ya cabe sin encimarse.
   --------------------------------------------------------------------- */
.reg-pasos {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    background-color: var(--ds-gv-background);
    border-bottom: 1px solid var(--ds-gray-200);
    padding: 14px 16px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.reg-paso {
    flex: 1 1 0;
    text-align: center;
    position: relative;
}

/* La linea que une un paso con el siguiente. */
.reg-paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background-color: var(--ds-gray-200);
}

.reg-paso-num {
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    margin: 0 auto;
    font-size: .85rem;
    font-weight: 600;
    background-color: var(--ds-gray-200);
    color: var(--ds-gray-600);
    position: relative;
    z-index: 1;
    transition: var(--ds-transition);
}

.reg-paso-txt {
    display: none;
    font-size: .72rem;
    color: var(--ds-gray-500);
    margin-top: 6px;
    line-height: 1.25;
}

.reg-paso.activo .reg-paso-num {
    background-color: var(--ds-primary);
    color: var(--ds-texto-nav);
}

.reg-paso.activo .reg-paso-txt {
    color: var(--ds-primary);
    font-weight: 600;
}

.reg-paso.hecho .reg-paso-num {
    background-color: var(--ds-success);
    color: var(--ds-texto-nav);
}

/* ---------------------------------------------------------------------
   Tarjetas y campos
   --------------------------------------------------------------------- */
.reg-card {
    background-color: var(--ds-gv-background);
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-lg);
    padding: 18px 16px;
    margin-top: 16px;
}

.reg-card-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ds-text-title);
    margin: 0 0 4px 0;
}

.reg-card-nota {
    font-size: .82rem;
    color: var(--ds--text-all);
    margin: 0 0 16px 0;
    line-height: 1.45;
}

.reg-grupo {
    margin-bottom: 16px;
}

.reg-grupo:last-child {
    margin-bottom: 0;
}

/* Altura de dedo, no de mouse: 44px es el minimo comodo en telefono, y
   16px de fuente es lo que evita que iOS haga zoom al enfocar. */
.reg-body .form-control,
.reg-body .form-select {
    min-height: 44px;
    font-size: 1rem;
}

.reg-body textarea.form-control {
    min-height: 88px;
}

.reg-req {
    color: var(--ds-danger);
    margin-left: 2px;
}

.reg-hint {
    display: block;
    font-size: .78rem;
    color: var(--ds-gray-500);
    margin-top: 4px;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------
   Opciones (rama, categorias): la etiqueta entera es el area tocable
   --------------------------------------------------------------------- */
.reg-opciones label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius);
    background-color: var(--ds-gv-background);
    font-size: .92rem;
    line-height: 1.35;
    cursor: pointer;
    transition: var(--ds-transition);
}

.reg-opciones label:last-child {
    margin-bottom: 0;
}

.reg-opciones input[type="radio"],
.reg-opciones input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: 1px;
    accent-color: var(--ds-primary);
}

/* RadioButtonList y CheckBoxList de ASP.NET meten una tabla o spans;
   esto los aplana para que el layout de arriba aplique igual. */
.reg-opciones table,
.reg-opciones tbody,
.reg-opciones tr,
.reg-opciones td {
    display: block;
    width: 100%;
}

.reg-opciones label:hover {
    border-color: var(--ds-primary);
    background-color: var(--ds-primary-light);
}

.reg-opciones input:checked + label,
.reg-opciones label:has(input:checked) {
    border-color: var(--ds-primary);
    background-color: var(--ds-primary-light);
    font-weight: 600;
}

/* Fila horizontal, para Rama (dos opciones y nada mas). */
.reg-opciones-fila {
    display: flex;
    gap: 10px;
}

.reg-opciones-fila table,
.reg-opciones-fila tbody,
.reg-opciones-fila tr {
    display: flex;
    width: 100%;
    gap: 10px;
}

.reg-opciones-fila td {
    flex: 1 1 0;
}

.reg-opciones-fila label {
    justify-content: center;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Archivos

   El input nativo se esconde y la etiqueta hace de boton: en telefono
   el input de archivo trunca el nombre y no se ve si ya se eligio algo.
   Se esconde con clip, NO con display:none, para que siga siendo
   enfocable con el teclado y los lectores de pantalla lo anuncien.
   --------------------------------------------------------------------- */
.reg-archivo {
    border: 1px dashed var(--ds-gray-300);
    border-radius: var(--ds-radius);
    background-color: var(--ds-gray-50);
    padding: 14px;
    text-align: center;
}

.reg-archivo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.reg-archivo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--ds-radius);
    background-color: var(--ds-primary);
    color: var(--ds-texto-nav);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ds-transition);
}

.reg-archivo-btn:hover {
    background-color: var(--ds-primary-hover);
}

.reg-archivo input[type="file"]:focus + .reg-archivo-btn {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}

.reg-archivo-nombre {
    display: block;
    font-size: .8rem;
    color: var(--ds-gray-600);
    margin-top: 10px;
    word-break: break-all;
    line-height: 1.4;
}

.reg-archivo.tiene {
    border-style: solid;
    border-color: var(--ds-success-border);
    background-color: var(--ds-success-bg);
}

.reg-archivo.tiene .reg-archivo-nombre {
    color: var(--ds-success);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Ejemplo de foto

   Va arriba del boton de elegir archivo, no debajo: el competidor lo
   tiene que ver ANTES de tomarse la foto, no despues de subirla. El
   ancho se topa para que en un telefono no empuje el boton fuera de
   la pantalla.
   --------------------------------------------------------------------- */
.reg-ejemplo {
    margin-top: 10px;
    text-align: center;
}

.reg-ejemplo img {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius);
    background-color: var(--ds-gv-background);
}

.reg-ejemplo-pie {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-gray-500);
    margin-top: 6px;
}

/* ---------------------------------------------------------------------
   Disciplinas
   --------------------------------------------------------------------- */
.reg-disciplina {
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.reg-disciplina.elegida {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 1px var(--ds-primary);
}

.reg-disciplina-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background-color: var(--ds-gray-50);
    border-bottom: 1px solid var(--ds-gray-200);
}

.reg-disciplina-nombre {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ds-text-title);
}

.reg-disciplina-cuerpo {
    padding: 12px 14px;
}

.reg-badge-equipo {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: var(--ds-accent);
    color: var(--ds-texto-nav);
    white-space: nowrap;
}

.reg-equipo-datos {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--ds-gray-300);
}

/* ---------------------------------------------------------------------
   Responsiva
   --------------------------------------------------------------------- */
.reg-responsiva {
    max-height: 280px;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius);
    background-color: var(--ds-gray-50);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--ds--text-all);
    white-space: pre-line;
}

/* Archivo que comprimir.js quito por pesar de mas: el texto dice por que. */
.reg-archivo.reg-archivo-mal .reg-archivo-nombre {
    color: var(--ds-danger);
    font-weight: 600;
}

.reg-pago {
    padding: 14px;
    border-radius: var(--ds-radius);
    background-color: var(--ds-info-bg);
    border: 1px solid var(--ds-info-border);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--ds-texto-primary);
    white-space: pre-line;
}

/* ---------------------------------------------------------------------
   Barra fija de acciones

   Fija abajo porque en un telefono el boton de continuar tiene que
   estar donde esta el pulgar, no al final de un scroll de doce campos.
   --------------------------------------------------------------------- */
.reg-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background-color: var(--ds-gv-background);
    border-top: 1px solid var(--ds-gray-200);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .08);
}

.reg-barra-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reg-total {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
}

.reg-total-label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-gray-500);
}

.reg-total-monto {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ds-primary);
}

.reg-barra .btng,
.reg-barra .btnPrimario,
.reg-barra .btn {
    min-height: 46px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------- */
.reg-aviso {
    border-radius: var(--ds-radius);
    padding: 12px 14px;
    font-size: .88rem;
    line-height: 1.5;
    margin-top: 16px;
}

.reg-aviso-error {
    background-color: var(--ds-danger-bg);
    border: 1px solid var(--ds-danger-border);
    color: var(--ds-danger);
}

.reg-aviso-info {
    background-color: var(--ds-info-bg);
    border: 1px solid var(--ds-info-border);
    color: var(--ds-info);
}

.reg-aviso-ok {
    background-color: var(--ds-success-bg);
    border: 1px solid var(--ds-success-border);
    color: var(--ds-success);
}

.reg-aviso-warn {
    background-color: var(--ds-warning-bg);
    border: 1px solid var(--ds-warning-border);
    color: var(--ds-warning);
}

/* ---------------------------------------------------------------------
   Pantalla de confirmacion
   --------------------------------------------------------------------- */
/* El icono grande del comprobante. El color base es el verde, pero lo
   pisa el modificador que le pone el code-behind segun el estatus: el
   mismo comprobante sirve para una inscripcion pendiente, confirmada o
   rechazada, y el color es lo primero que se lee. */
.reg-ok-icono {
    font-size: 3.5rem;
    line-height: 1;
    color: var(--ds-success);
}

.reg-ok-icono i.reg-icono-pendiente {
    color: var(--ds-warning);
}

.reg-ok-icono i.reg-icono-validado {
    color: var(--ds-success);
}

.reg-ok-icono i.reg-icono-rechazado {
    color: var(--ds-danger);
}

.reg-folio {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ds-primary);
    word-break: break-all;
}

.reg-resumen {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.reg-resumen th,
.reg-resumen td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--ds-gray-200);
    vertical-align: top;
}

.reg-resumen th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ds-gray-500);
    font-weight: 600;
}

/* La pastilla del estatus: la forma va en la clase base y el color en
   el modificador. Antes el ambar estaba en la base, asi que una
   inscripcion confirmada se seguia pintando como pendiente. */
.reg-estatus {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    background-color: var(--ds-warning-bg);
    border: 1px solid var(--ds-warning-border);
    color: var(--ds-warning);
}

.reg-estatus-pendiente {
    background-color: var(--ds-warning-bg);
    border-color: var(--ds-warning-border);
    color: var(--ds-warning);
}

.reg-estatus-validado {
    background-color: var(--ds-success-bg);
    border-color: var(--ds-success-border);
    color: var(--ds-success);
}

.reg-estatus-rechazado {
    background-color: var(--ds-danger-bg);
    border-color: var(--ds-danger-border);
    color: var(--ds-danger);
}

/* ---------------------------------------------------------------------
   De 576px para arriba: caben las etiquetas de los pasos
   --------------------------------------------------------------------- */
@media (min-width: 576px) {
    .reg-paso-txt {
        display: block;
    }
}

/* ---------------------------------------------------------------------
   De 768px para arriba: ya es una pantalla, no un telefono
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
    .reg-hero {
        padding: 36px 24px 28px 24px;
    }

    .reg-hero h1 {
        font-size: 2rem;
    }

    .reg-card {
        padding: 24px;
    }

    /* Los campos cortos se emparejan de dos en dos. */
    .reg-fila2 {
        display: flex;
        gap: 16px;
    }

    .reg-fila2 > .reg-grupo {
        flex: 1 1 0;
        min-width: 0;
    }

    .reg-responsiva {
        max-height: 340px;
    }
}

/* ---------------------------------------------------------------------
   Impresion: la hoja de confirmacion se imprime y se lleva al evento
   --------------------------------------------------------------------- */
@media print {
    .reg-barra,
    .reg-pasos,
    .reg-noprint {
        display: none !important;
    }

    .reg-body {
        padding-bottom: 0;
        background-color: transparent;
    }

    .reg-card {
        border: 1px solid var(--ds-gray-400);
        break-inside: avoid;
    }
}

/* ---------------------------------------------------------------------
   CURP tecleada (wfRegistroVelocidad)

   Una CURP se escribe en mayusculas. Esto es SOLO como se ve: el
   servidor la sube a mayusculas de todas formas en NormalizarCurp,
   porque text-transform no cambia lo que se manda en el POST.
   --------------------------------------------------------------------- */
.reg-mayusculas {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.reg-mayusculas::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

/* ---------------------------------------------------------------------
   QR de asistencia (wfRegistroOk, solo inscripcion confirmada)
   --------------------------------------------------------------------- */
.reg-qr img {
    display: block;
    width: 220px;
    max-width: 70%;
    height: auto;
    margin: 4px auto 14px auto;
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius);
    image-rendering: pixelated;
}