/* ============================================================================
   Formulario publico de solicitud de usuario de apuestas online.

   ALCANCE: todo cuelga de .form-solicitud, que existe unicamente en
   Solicitar.cshtml. La vista parcial _datosDetalle.cshtml la comparten el
   formulario publico y la ficha de consulta del staff (modoConsulta), asi que
   sin este scope cualquier regla de aca le cambiaria la cara a la pantalla
   interna tambien. No quitar el scope.

   PROBLEMAS MEDIDOS SOBRE LA VERSION ANTERIOR (viewport de 375px):
     - el documento media 578px: 203px de desborde horizontal, formulario
       inusable en telefono
     - los dos labels de PEP se pisaban entre si por un style="width:450px"
       inline dentro de una columna mas angosta
     - los anchos de campo iban de 75px a 430px sin criterio
     - en 1600px de ancho el contenido vivia en los primeros 600px

   ESTRATEGIA: no se toca el markup de los campos ni los helpers de Razor, asi
   que los names que viajan en el POST quedan intactos. Todo el rediseno es
   layout sobre las clases que ya emite la vista: .dataLine envuelve cada campo,
   .display-label es la etiqueta y .editor-field-* el control.
   ========================================================================== */

/* ============================================================================
   Encabezado de las paginas publicas.

   Aplica a todo lo que usa _LayoutPublico.cshtml, es decir el formulario de
   solicitud, su confirmacion, y las pantallas publicas de Inscripciones y
   Compromisos. No alcanza a las pantallas internas, que usan otro layout.

   El banner es una imagen de tamano fijo dentro de contenedores con margenes y
   padding inline de 1em por lado. Por eso quedaba angosto y descentrado en
   pantallas anchas. Se estira desde aca en lugar de pelear con esos inline.
   ========================================================================== */
.bannerPublico {
    /* Compensa el margin:1em del contenedor mas el padding:1em del interior,
       para que la franja llegue a los dos bordes de la pantalla. */
    margin: 0 -2em;
    text-align: center;
    background-color: #8c1734;
    line-height: 0;
}

.bannerPublico img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* En pantallas angostas el banner es tan apaisado que al escalarlo a lo ancho
   pierde casi toda su altura y el logo queda ilegible. Se recorta por los
   costados, que son textura, en vez de achicar el conjunto. */
@media (max-width: 768px) {
    .bannerPublico img {
        min-height: 5.5rem;
        object-fit: cover;
        object-position: center;
    }
}

.headerPublico {
    text-align: center;
}

.headerPublico .page-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================================
   Ficha del operador (Registros/Details).

   Es la pantalla a la que se entra desde el enlace del correo para evaluar una
   solicitud. Reutiliza .form-solicitud, asi que hereda el layout de filas, el
   tamano de etiqueta y sobre todo la correccion del <label> con alto fijo que
   hacia que las etiquetas largas se pisaran. Ese defecto seguia vivo aca
   justamente porque la correccion original quedo acotada al formulario.

   .vista-operador solo agrega lo propio de una pantalla de lectura.
   ========================================================================== */
.fichaEncabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    max-width: 62rem;
    margin: 1.5rem auto 1.25rem;
    padding: 1.1rem 1.4rem;
    border: 1px solid #e3e3e3;
    border-left: 5px solid #a4123f;
    border-radius: 8px;
    background-color: #fafafa;
}

.fichaEncabezado .fichaNumero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1.25rem;
    border-right: 1px solid #e3e3e3;
    line-height: 1;
}

.fichaEncabezado .fichaNumeroEtiqueta {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #777;
}

.fichaEncabezado .fichaNumeroValor {
    margin-top: 0.2rem;
    font-size: 2.25rem;
    font-weight: 700;
    color: #a4123f;
    font-variant-numeric: tabular-nums;
}

.fichaEncabezado .fichaResumen {
    flex: 1 1 16rem;
    min-width: 0;
}

.fichaEncabezado .fichaNombre {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #222;
}

.fichaEncabezado .fichaDato {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: #666;
}

.fichaEncabezado .fichaAlertaPep {
    flex: 0 0 auto;
    padding: 0.45rem 0.9rem;
    border: 1px solid #f0c8c8;
    border-radius: 999px;
    background-color: #fdf0f0;
    color: #a4123f;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Las imagenes son lo que el operador viene a mirar: se muestran grandes y
   enlazadas a su tamano completo.

   Estas reglas cuelgan de .grupoImagenes y NO de .vista-operador: la seccion
   vive fuera de ese contenedor, porque en monitores anchos el contenedor
   reparte su contenido en columnas y las imagenes necesitan el ancho entero.
   Por lo mismo la seccion repite aca el aspecto de tarjeta que .grupoCampos
   recibe dentro de .form-solicitud. */
.grupoImagenes {
    max-width: 62rem;
    margin: 0 auto 1.75rem;
    padding: 1.25rem 1.25rem 0.75rem;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background-color: #fcfcfc;
    box-sizing: border-box;
}

.grupoImagenes > .grupoTitulo {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #8c1734;
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
}

.grupoImagenes .fichaImagenes {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.grupoImagenes .fichaImagenes figure {
    flex: 1 1 18rem;
    min-width: 0;
    margin: 0;
}

.grupoImagenes .fichaImagenes figcaption {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
}

.grupoImagenes .fichaImagenes img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background-color: #fff;
}

.grupoImagenes .fichaImagenes a:hover img,
.grupoImagenes .fichaImagenes a:focus img {
    border-color: #a4123f;
}

.grupoImagenes .fichaAyudaImagenes {
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    color: #777;
}

/* En modo consulta no hay nada que editar ni que elegir: de un grupo de
   opciones solo interesa la que la persona marco. Mostrar tambien la que
   descarto obliga a leer dos cosas para quedarse con una.

   El helper de radios emite, por opcion, un <div> con el input y el texto
   suelto al lado (no hay <label>), asi que se oculta el <div> entero de las
   no marcadas y, de la marcada, solo su control. Queda el texto. */
.vista-operador .floatLeft > div > div:has(> input[type="radio"]:not(:checked)) {
    display: none;
}

.vista-operador .floatLeft > div > div > input[type="radio"] {
    display: none;
}

/* En el formulario el cursor de mano sobre la etiqueta esta bien, porque
   hacerle clic enfoca el campo. Aca no hay nada que enfocar, y la mano promete
   una accion que no existe.

   Se califica con .vista-operador.form-solicitud y no solo con .vista-operador
   porque .form-solicitud label { cursor: pointer } tiene la misma
   especificidad y aparece mas abajo en este archivo, asi que ganaba por orden.
   Subir la especificidad lo resuelve sin recurrir a !important. */
.vista-operador.form-solicitud label,
.vista-operador.form-solicitud .display-label,
.vista-operador.form-solicitud input[type="radio"] {
    cursor: default;
}

/* La fecha de recepcion ya se muestra en el encabezado de la ficha, junto al
   numero y al nombre. Repetirla mas abajo no agrega nada. Se la reconoce por el
   for del <label>, que es lo unico que distingue esa fila de las demas. */
.vista-operador .dataLine:has(label[for="FechaHora"]) {
    display: none;
}

.declaracionJurada.declaracionFicha {
    background-color: #fbfbfb;
    border-color: #d8d8d8;
    padding: 1rem 1.4rem;
}

.declaracionJurada.declaracionFicha .declaracionTitulo {
    color: #444;
    border-bottom-color: #e3e3e3;
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Se reemplaza el triangulo por defecto para que el estado abierto/cerrado se
   lea igual en Chrome y en Edge. */
.declaracionJurada.declaracionFicha .declaracionTitulo::-webkit-details-marker {
    display: none;
}

.declaracionJurada.declaracionFicha .declaracionTitulo::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 0.55rem;
    transition: transform 0.15s ease;
}

.declaracionJurada.declaracionFicha[open] .declaracionTitulo::before {
    transform: rotate(90deg);
}

.declaracionJurada.declaracionFicha[open] .declaracionTitulo {
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e3e3e3;
}

@media (max-width: 640px) {
    .fichaEncabezado .fichaNumero {
        padding-right: 0;
        border-right: 0;
        align-items: flex-start;
        flex-direction: row;
        gap: 0.6rem;
    }
}

/* --- Monitores anchos ------------------------------------------------------
   El operador evalua una solicitud completa: en una columna de 62rem tiene que
   bajar y volver a subir para comparar, por ejemplo, el documento declarado
   contra la foto de la cedula. A partir de 1600px las secciones se reparten en
   tres columnas para que la ficha entre de una sola mirada.

   Las imagenes ocupan la fila entera a proposito: son lo que hay que mirar de
   cerca y en una columna angosta se verian mas chicas que antes, que seria
   empeorar justo lo que se quiso mejorar. */
@media (min-width: 1600px) {
    .fichaEncabezado,
    .declaracionJurada.declaracionFicha,
    .fichaCuerpo {
        max-width: 100rem;
    }

    /* Datos e imagenes en paralelo. Apilados, el alto era la suma de los dos
       bloques; al lado, es el mayor de los dos, que es lo que de verdad acerca
       la ficha a entrar en una sola pantalla. La franja de imagenes se fija en
       26rem: menos que eso y el escaneo de una cedula deja de leerse. */
    .fichaCuerpo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 26rem;
        gap: 1.25rem;
        align-items: start;
        margin: 0 auto;
    }

    /* Flujo por columnas y no grid. Con grid, la altura de cada fila la manda
       la seccion mas alta y el resto deja hueco: medido, la ficha quedaba en
       2421px. Con columnas las secciones se empaquetan una tras otra y el alto
       total pasa a ser la suma repartida en tres. */
    .vista-operador.form-solicitud {
        max-width: none;
        margin: 0;
        column-count: 3;
        column-gap: 1.25rem;
    }

    /* En su franja propia las dos imagenes van una sobre otra, no lado a lado. */
    .fichaCuerpo .grupoImagenes {
        max-width: none;
        margin: 0;
    }

    .fichaCuerpo .grupoImagenes .fichaImagenes {
        flex-direction: column;
        gap: 0.85rem;
    }

    .fichaCuerpo .grupoImagenes .fichaImagenes figure {
        flex: 0 0 auto;
    }

    .vista-operador.form-solicitud .grupoCampos {
        /* Sin esto una seccion se parte al medio entre dos columnas. */
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        margin: 0 0 1.25rem;
    }

    /* El banner de marca ocupa 152px de alto. En la pantalla publica esta bien;
       en una pantalla interna de trabajo es alto que se le quita a los datos.
       :has() no existe en navegadores viejos, y si no se aplica la pantalla
       sigue funcionando igual, solo mas alta. */
    body:has(.vista-operador) .bannerPublico img {
        max-height: 4.5rem;
        /* contain y no cover: recortando se parte el logo al medio. Con contain
           se ve entero, mas chico, y las bandas laterales quedan del rojo que
           .bannerPublico ya tiene de fondo. */
        object-fit: contain;
    }

    body:has(.vista-operador) .headerPublico .page-title {
        margin-top: 0.35rem;
        margin-bottom: 0.35rem;
        font-size: 1.15rem;
    }

    /* Las imagenes se acotan en alto para que entren junto al resto. El enlace
       a tamano completo sigue estando para cuando haya que mirarlas de cerca. */
    .grupoImagenes .fichaImagenes img {
        max-height: 14rem;
        object-fit: contain;
    }

    /* --- Ajuste de espacios ------------------------------------------------
       En una pantalla de trabajo el aire de mas es scroll de mas. Se aprieta el
       relleno de las tarjetas y el alto de fila, sin bajar de 15px de texto ni
       amontonar las etiquetas. */
    .vista-operador.form-solicitud .grupoCampos,
    .fichaCuerpo .grupoImagenes {
        padding: 0.75rem 0.9rem 0.5rem;
    }

    .vista-operador.form-solicitud .grupoCampos {
        margin: 0 0 0.75rem;
    }

    body:has(.vista-operador) .bannerPublico img {
        max-height: 3.5rem;
    }

    .vista-operador.form-solicitud .grupoTitulo,
    .fichaCuerpo .grupoImagenes > .grupoTitulo {
        margin-bottom: 0.6rem;
        padding-bottom: 0.35rem;
        font-size: 0.95rem;
    }

    .fichaEncabezado {
        padding: 0.75rem 1.2rem;
        margin-bottom: 0.9rem;
    }

    .fichaCuerpo .grupoImagenes .fichaAyudaImagenes {
        margin-top: 0.5rem;
    }

    .declaracionJurada.declaracionFicha {
        margin-top: 0.9rem;
    }

    /* Etiqueta y valor en el mismo renglon, no uno debajo del otro. Apilados,
       cada campo gastaba dos renglones.

       Cada seccion (.grupoCampos) es un grid de dos columnas: la primera (auto)
       se ajusta a la etiqueta mas larga DE ESA SECCION, no a la mas larga de
       toda la ficha. Asi "Contacto" ("Mail", "Celular") o "Domicilio" no
       arrastran el ancho de "Tipo Documento", y el hueco muerto a la izquierda
       de los rotulos cortos desaparece dentro de cada bloque. Antes la etiqueta
       tenia ancho fijo global y en "Contacto" quedaban ~100px vacios por fila.

       Las .dataLine hacen display:contents para que sus dos hijos (etiqueta y
       valor) caigan directo en las columnas del grid de la seccion.

       Estas reglas TIENEN que vivir en el tramo de 1600px: estuvieron un rato
       dentro del de 2100px por un corte mal puesto al agregar ese bloque, y a
       1905px no aplicaban aunque el archivo pareciera correcto. */
    .vista-operador.form-solicitud .grupoCampos {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        column-gap: 0.5rem;
        /* ~5px entre filas: denso, de pantalla de trabajo, sin que se toquen. */
        row-gap: 0.32rem;
    }

    /* El titulo de la seccion ocupa las dos columnas. */
    .vista-operador.form-solicitud .grupoCampos > .grupoTitulo {
        grid-column: 1 / -1;
    }

    /* La fila deja de ser caja propia: sus hijos pasan a ser celdas del grid de
       la seccion. Cada .dataLine aporta exactamente dos (etiqueta y valor); el
       separador de floats del layout viejo se saca para no descolocar el flujo. */
    .vista-operador.form-solicitud .dataLine {
        display: contents;
    }
    .vista-operador.form-solicitud .dataLine > .clear-both {
        display: none;
    }

    /* Etiqueta: primera columna, pegada a su valor (alineada a la derecha). La
       columna 'auto' ya la dimensiona la etiqueta mas larga de la seccion, asi
       que no hay ancho fijo ni hueco muerto que recortar. */
    .vista-operador.form-solicitud .display-label {
        text-align: right;
        padding-right: 0;
    }

    .vista-operador.form-solicitud [class^="editor-field"],
    .vista-operador.form-solicitud [class*=" editor-field"] {
        max-width: none;
    }

    /* Las preguntas de PEP, las dos aceptaciones y Aclaraciones son frases o
       texto libre, no rotulos: se llevan las dos columnas para no partirse en
       tiras. Se las reconoce por su markup (PEP trae style inline en la
       etiqueta; las aceptaciones un <b>; Aclaraciones por label[for]), no por
       .floatLeft, que tambien usa Sexo y debe quedarse en linea. */
    .vista-operador.form-solicitud .dataLine:has(> .display-label[style]) > .display-label,
    .vista-operador.form-solicitud .dataLine:has(> .display-label[style]) > .floatLeft,
    .vista-operador.form-solicitud .dataLine:has(> .display-label > b) > .display-label,
    .vista-operador.form-solicitud .dataLine:has(> .display-label > b) > .floatLeft,
    .vista-operador.form-solicitud .dataLine:has(label[for="Observaciones"]) > .display-label,
    .vista-operador.form-solicitud .dataLine:has(label[for="Observaciones"]) > [class^="editor-field"] {
        grid-column: 1 / -1;
    }

    /* Y a la izquierda: alinear a la derecha un parrafo o un texto largo lo deja
       flotando lejos de su contenido. */
    .vista-operador.form-solicitud .dataLine:has(> .display-label[style]) > .display-label,
    .vista-operador.form-solicitud .dataLine:has(> .display-label > b) > .display-label,
    .vista-operador.form-solicitud .dataLine:has(label[for="Observaciones"]) > .display-label {
        text-align: left;
    }
}

/* Por encima de 2100px entra una cuarta columna, que baja otro escalon el alto
   del bloque de datos. */
@media (min-width: 2100px) {
    .fichaEncabezado,
    .declaracionJurada.declaracionFicha,
    .fichaCuerpo {
        max-width: 128rem;
    }

    .vista-operador.form-solicitud {
        column-count: 4;
    }
}

/* ============================================================================
   Pantalla de confirmacion.
   El numero de solicitud es el unico dato que la persona necesita llevarse de
   esta pantalla, y venia como un <b> en medio de un parrafo. Se lo saca del
   texto y se lo pone en una tarjeta centrada.
   ========================================================================== */
.confirmacionSolicitud {
    max-width: 28rem;
    margin: 2.5rem auto 1.5rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
    border: 1px solid #e3e3e3;
    border-top: 4px solid #a4123f;
    border-radius: 10px;
    background-color: #fcfcfc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.confirmacionSolicitud .confirmacionTitulo {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1c6b2e;
}

.confirmacionSolicitud .confirmacionEtiqueta {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
}

.confirmacionSolicitud .confirmacionNumero {
    margin: 0.15rem 0 0;
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: #a4123f;
    /* Tabular para que el numero no baile de ancho segun los digitos. */
    font-variant-numeric: tabular-nums;
}

.confirmacionSolicitud .confirmacionNota {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #ececec;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #666;
}

.confirmacionDetalle {
    max-width: 34rem;
    margin: 0 auto 2.5rem;
    text-align: center;
    line-height: 1.6;
    color: #444;
}

.confirmacionDetalle strong {
    color: #222;
    word-break: break-word;
}

.form-solicitud {
    --sol-ancho-etiqueta: 15.5rem;
    --sol-ancho-campo: 26rem;
    --sol-gap: 1.25rem;
    --sol-borde: #ccc;
    --sol-borde-foco: #8c1734;
    --sol-texto-tenue: #666;

    max-width: 62rem;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.form-solicitud *,
.form-solicitud *::before,
.form-solicitud *::after {
    box-sizing: border-box;
}

/* --- Secciones -----------------------------------------------------------
   Los 28 campos venian como una lista plana sin jerarquia. El agrupado lo emite
   _datosDetalle.cshtml solo cuando ViewBag.AgruparSecciones esta encendido, que
   es unicamente en esta pantalla; la ficha del staff sigue sin secciones. */
.form-solicitud .grupoCampos {
    margin: 0 0 1.75rem;
    padding: 1.25rem 1.25rem 0.75rem;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background-color: #fcfcfc;
}

.form-solicitud .grupoTitulo {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--sol-borde-foco);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #333;
}

/* Las imagenes de ejemplo y sus epigrafes son hermanos de las filas, no van
   dentro de una .dataLine, asi que se alinean a mano con la columna de campos
   para que no queden pegados al borde de la seccion. */
.form-solicitud .grupoCampos > p,
.form-solicitud .grupoCampos > img {
    margin-left: 0;
}

.form-solicitud .grupoCampos > img {
    max-width: min(100%, 30rem);
}

/* --- Una fila = una etiqueta + un control ---------------------------------
   .dataLine usaba floats con un .clear-both al final de cada fila. Flex hace
   el mismo trabajo sin el elemento auxiliar, y ademas permite que la fila se
   parta sola cuando no hay ancho. */
.form-solicitud .dataLine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem var(--sol-gap);
    padding: 0.45rem 0;
    min-height: 2.75rem;
}

/* El .clear-both existe para cerrar los floats. Con flex sobra, y si se deja
   visible mete un salto de linea dentro de la fila. */
.form-solicitud .dataLine > .clear-both {
    display: none;
}

.form-solicitud .display-label {
    flex: 0 0 var(--sol-ancho-etiqueta);
    /* !important porque los dos bloques de PEP traen style="width:450px" inline
       en el markup, y un ancho inline solo lo gana una declaracion de autor
       marcada !important. */
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    padding-right: 0.5rem;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
}

/* CAUSA REAL DEL PISADO DE LAS ETIQUETAS DE PEP.

   No era el width:450px inline del contenedor: era el propio <label>, al que
   el CSS del sitio le fija height:30px, width:150px y float:left. Medido en el
   navegador, el label de PEP necesita 90px (tres lineas) pero su caja queda
   clavada en 30px, asi que el texto se derrama fuera y se dibuja encima de la
   fila siguiente. Al ser un desborde de pintado, y no un elemento mas alto, el
   contenedor no crece y el problema es invisible para cualquier medicion que
   solo mire la altura de las cajas.

   Soltar height y width y sacar el float deja que la etiqueta ocupe lo que
   realmente necesita. Aplica a todas las etiquetas largas del formulario, no
   solo a las dos de PEP. */
.form-solicitud .display-label,
.form-solicitud .display-label label {
    /* El sitio dejaba las etiquetas en 12px mientras el valor que describen se
       escribe en 16px: la etiqueta quedaba al 75% del tamano de su propio dato.
       15px la deja legible sin taparle jerarquia al contenido del campo. */
    font-size: 0.9375rem;
}

.form-solicitud .display-label label {
    display: inline-block;
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    font-weight: 600;
    line-height: 1.35;
    color: #2b2b2b;
}

/* Los sufijos de ancho (-xlarge, -medium, -small...) venian de un layout de
   ancho fijo. Se neutralizan y el control pasa a ser fluido con un tope. */
.form-solicitud [class^="editor-field"],
.form-solicitud [class*=" editor-field"] {
    flex: 1 1 var(--sol-ancho-campo);
    min-width: 0;
    max-width: var(--sol-ancho-campo);
}

.form-solicitud .editor-field-check {
    flex: 0 0 auto;
    max-width: none;
}

/* --- Controles ------------------------------------------------------------ */
.form-solicitud input[type="text"],
.form-solicitud input[type="email"],
.form-solicitud input[type="tel"],
.form-solicitud input[type="password"],
.form-solicitud input[type="file"],
.form-solicitud select,
.form-solicitud textarea {
    width: 100%;
    max-width: 100%;
    /* 1rem evita el zoom automatico de iOS al enfocar un campo. Por debajo de
       16px Safari hace zoom y descuadra la pagina. */
    font-size: 1rem;
    line-height: 1.4;
    padding: 0.5rem 0.65rem;
    /* 2.75rem es el minimo comodo para tocar con el dedo. */
    min-height: 2.75rem;
    border: 1px solid var(--sol-borde);
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-solicitud input[type="file"] {
    padding: 0.4rem 0.5rem;
}

.form-solicitud input[type="text"]:focus,
.form-solicitud select:focus,
.form-solicitud textarea:focus,
.form-solicitud input[type="file"]:focus {
    outline: none;
    border-color: var(--sol-borde-foco);
    box-shadow: 0 0 0 3px rgba(140, 23, 52, 0.15);
}

/* El foco visible por teclado no se elimina en ningun caso: es un requisito de
   accesibilidad, no un detalle estetico. */
.form-solicitud :focus-visible {
    outline: 2px solid var(--sol-borde-foco);
    outline-offset: 2px;
}

/* --- Grupos de radio (Sexo, PEP, Familiar de PEP) -------------------------
   Venian apilados en vertical y ocupaban dos renglones para dos opciones. */
.form-solicitud .editor-field > div,
.form-solicitud .floatLeft > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
}

.form-solicitud input[type="radio"],
.form-solicitud input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
    accent-color: var(--sol-borde-foco);
    flex: 0 0 auto;
}

.form-solicitud label {
    cursor: pointer;
}

/* --- Imagenes de ejemplo (cedula y selfie) --------------------------------
   Se servian a tamano natural y eran las que mas empujaban el ancho. */
.form-solicitud img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 0.5rem;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
}

/* --- Aceptaciones y declaracion jurada ------------------------------------ */
.form-solicitud .dataLine .editor-field-check + .floatLeft {
    flex: 1 1 18rem;
    max-width: none;
}

.form-solicitud .seccionEstandar > div:last-child {
    /* Ancho de lectura: un parrafo largo a 62rem cansa la vista. */
    max-width: 46rem;
    line-height: 1.6;
    color: var(--sol-texto-tenue);
    font-size: 0.95rem;
}

/* --- Errores de validacion ------------------------------------------------ */
.form-solicitud .field-validation-error,
.form-solicitud .error_mf {
    color: #a11;
    font-size: 0.875rem;
}

/* --- Declaracion jurada ---------------------------------------------------
   Era un muro de texto suelto al pie, indistinguible del resto. Es el bloque
   con mayor peso legal del formulario, asi que se enmarca en rojo y se pide una
   confirmacion explicita. */
.declaracionJurada {
    max-width: 62rem;
    margin: 2rem auto 0;
    border: 2px solid #a4123f;
    border-radius: 8px;
    background-color: #fdf6f8;
    padding: 1.25rem 1.5rem;
}

.declaracionJurada .declaracionTitulo {
    margin: 0 0 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e2b9c6;
    color: #a4123f;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.declaracionJurada ul {
    margin: 0;
    padding-left: 1.4rem;
    line-height: 1.6;
}

.declaracionJurada li {
    margin-bottom: 0.45rem;
}

.declaracionJurada .declaracionAcepto {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2b9c6;
    font-weight: 700;
    color: #7d0e30;
    cursor: pointer;
}

.declaracionJurada .declaracionAcepto input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1rem 0 0;
    accent-color: #a4123f;
    flex: 0 0 auto;
}

/* --- Boton de envio ------------------------------------------------------- */
.form-solicitud .botonera,
.botonera.botonera-solicitud {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    max-width: 62rem;
    margin: 1.75rem auto 0;
    padding: 1.25rem 1rem;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background-color: #fafafa;
}

.botonera.botonera-solicitud .botonBotonera,
.botonera.botonera-solicitud .botonBotonera.btn.btn-primary {
    min-height: 3rem;
    min-width: 16rem;
    padding: 0 2.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 6px;
    background: #a4123f;
    border: 1px solid #7d0e30;
    color: #fff;
    text-shadow: none;
    box-shadow: none;
}

.botonera.botonera-solicitud .botonBotonera.btn.btn-primary:hover,
.botonera.botonera-solicitud .botonBotonera.btn.btn-primary:focus {
    background: #7d0e30;
    border-color: #620a26;
    color: #fff;
}

/* --- Campos obligatorios sin completar ------------------------------------
   El boton siempre esta habilitado. Al intentar enviar, lo que falta se marca
   en el campo mismo y se lleva a la persona al primero, que es donde puede
   resolverlo. Avisar al pie lo que falta obliga a ir y volver. */
.form-solicitud .dataLine.campoFaltante input[type="text"],
.form-solicitud .dataLine.campoFaltante input[type="file"],
.form-solicitud .dataLine.campoFaltante select,
.form-solicitud .dataLine.campoFaltante textarea {
    border-color: #c62828;
    background-color: #fff8f8;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

.form-solicitud .dataLine.campoFaltante .display-label label,
.form-solicitud .dataLine.campoFaltante .display-label {
    color: #c62828;
}

/* Sexo y los dos bloques de PEP son grupos de radios: no hay un borde de campo
   que pintar, asi que se marca el area de opciones. */
.form-solicitud .dataLine.campoFaltante .floatLeft > div {
    border-left: 3px solid #c62828;
    padding-left: 0.6rem;
}

.declaracionJurada.campoFaltante {
    border-color: #c62828;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

.declaracionJurada.campoFaltante .declaracionAcepto {
    color: #c62828;
}

.botonera.botonera-solicitud .avisoEnvio {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #c62828;
    text-align: center;
}

.botonera.botonera-solicitud .avisoEnvio:empty {
    display: none;
}

/* --- Dialogo de confirmacion ---------------------------------------------
   El modal es compartido (_modalConfirmation.cshtml, ids fijos myModal /
   myModalTitle / myModalContent / myModalAcepta) y lo usan tambien las
   pantallas de Inscripciones y Compromisos. No se toca ese markup: esta
   pagina le agrega la clase modal-solicitud al abrirlo, y todo lo de abajo
   cuelga de ella. Las demas pantallas siguen viendo el modal de siempre. */
/* El contenedor del modal viene con ancho fijo de 560px y margen negativo, al
   estilo Bootstrap 2, ademas de position:fixed y top:60% inline en el markup.
   Con eso el dialogo quedaba abajo y corrido fuera de la pantalla. Se lo lleva
   a ocupar el viewport completo para que el centrado normal de Bootstrap 3
   funcione. Medido: sin esto el contenedor arrancaba en x = -280. */
#myModal.modal-solicitud {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    overflow-y: auto;
    /* El CSS del sitio le pone fondo blanco al contenedor. Con el ancho fijo de
       560px quedaba tapado por el propio dialogo y no se notaba; al ocupar la
       pantalla completa tapaba el backdrop y se perdia de vista la pagina. */
    background-color: transparent !important;
}

#myModal.modal-solicitud .modal-dialog {
    max-width: 34rem;
    width: auto;
    margin: 8vh auto;
}

/* El blanco del dialogo lo aportaba el contenedor #myModal, no .modal-content,
   que en este tema esta transparente. Al volver transparente el contenedor para
   dejar ver el backdrop hay que declarar el fondo aca, o el texto queda sobre
   la pagina atenuada y no se lee. */
#myModal.modal-solicitud .modal-content {
    background-color: #fff;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

#myModal.modal-solicitud .modal-header {
    background: #8c1734;
    border-bottom: 0;
    padding: 1.1rem 1.5rem;
}

#myModal.modal-solicitud .modal-title {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

#myModal.modal-solicitud .modal-body {
    padding: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

#myModal.modal-solicitud .modal-body .destinoMail {
    display: block;
    margin-top: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid #8c1734;
    background: #f7f7f7;
    font-size: 0.92rem;
    color: #555;
    word-break: break-all;
}

#myModal.modal-solicitud .modal-body .destinoMail strong {
    color: #222;
}

#myModal.modal-solicitud .modal-footer {
    padding: 1rem 1.5rem 1.35rem;
    border-top: 1px solid #ececec;
    display: flex;
    flex-direction: row-reverse;
    gap: 0.75rem;
}

#myModal.modal-solicitud .modal-footer .btn {
    margin: 0;
    min-height: 2.75rem;
    padding: 0 1.6rem;
    border-radius: 6px;
    font-weight: 700;
}

#myModal.modal-solicitud #myModalAcepta {
    background: #a4123f;
    border-color: #7d0e30;
    color: #fff;
}

#myModal.modal-solicitud #myModalAcepta:hover,
#myModal.modal-solicitud #myModalAcepta:focus {
    background: #7d0e30;
    border-color: #620a26;
}

@media (max-width: 520px) {
    #myModal.modal-solicitud .modal-dialog {
        margin: 4vh 0.75rem;
    }

    #myModal.modal-solicitud .modal-footer {
        flex-direction: column-reverse;
    }

    #myModal.modal-solicitud .modal-footer .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Una sola columna por debajo de 768px.
   La etiqueta pasa a ocupar el ancho completo y el control debajo, que es lo
   unico que entra comodo en un telefono sin desbordar.
   ========================================================================== */
@media (max-width: 768px) {
    .form-solicitud {
        --sol-ancho-campo: 100%;
        padding: 0 0.85rem;
    }

    .form-solicitud .dataLine {
        gap: 0.3rem;
        padding: 0.5rem 0;
    }

    .form-solicitud .display-label {
        flex: 1 1 100%;
        padding-right: 0;
    }

    .form-solicitud [class^="editor-field"],
    .form-solicitud [class*=" editor-field"] {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* La casilla de aceptacion y su texto tienen que seguir en la misma linea:
       partirlos deja la casilla huerfana arriba del enlace legal. */
    .form-solicitud .editor-field-check {
        flex: 0 0 auto;
    }

    .form-solicitud .editor-field-check + .floatLeft {
        flex: 1 1 0;
        min-width: 0;
    }

    .botonera.botonera-solicitud .botonBotonera {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .form-solicitud {
        padding: 0 0.65rem;
    }
}