:root {
    /* Rotulo y datos. Si no cargan las de Google, las del sistema. */
    --sol-fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sol-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    /* Marca: los azules del logotipo, no un teal generico. */
    --sol-tinta: #16224b;
    --sol-azul: #2b55a4;
    --sol-azul-oscuro: #1d3d7c;
    --sol-azul-suave: #eaeffa;
    /* Estados. Estos tres colores solo salen cuando hay un estado. */
    --sol-verde: #4e9e3e;
    --sol-verde-oscuro: #2f6b24;
    --sol-verde-suave: #ebf5e7;
    --sol-naranja: #f07c22;
    --sol-naranja-suave: #fef2e6;
    --sol-rojo: #d8102a;
    --sol-rojo-suave: #fdebee;
    /* Superficies y texto */
    --sol-borde: #dde3ee;
    --sol-linea: #eaeef6;
    --sol-fondo: #f1f3f9;
    --sol-texto: #1b2440;
    --sol-tenue: #5c6786;
    /* Formas: documento, no burbuja. */
    --sol-radio: 12px;
    --sol-radio-sm: 8px;
    --sol-radio-pill: 999px;
    /* Profundidad: primero la linea de un pixel, despues la sombra. */
    --sol-sombra: 0 1px 2px rgba(22, 34, 75, .05), 0 8px 20px -12px rgba(22, 34, 75, .18);
    --sol-sombra-md: 0 2px 4px rgba(22, 34, 75, .06), 0 14px 30px -14px rgba(22, 34, 75, .22);
    --sol-sombra-lg: 0 4px 8px rgba(22, 34, 75, .07), 0 30px 60px -26px rgba(22, 34, 75, .32);
    /* Movimiento */
    --sol-ease: cubic-bezier(.16, 1, .3, 1);
    --sol-rapido: 130ms;
    --sol-normal: 220ms;
}

html,
body {
    min-height: 100%;
    background: var(--sol-fondo);
    color: var(--sol-texto);
    font-family: var(--sol-fuente);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sol-fuente);
}


body {
    background-image: linear-gradient(rgba(43, 85, 164, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 85, 164, .055) 1px, transparent 1px), radial-gradient(1100px 520px at 50% -8%, rgba(43, 85, 164, .09), transparent 70%);
    background-size: 34px 34px, 34px 34px, 100% 100%;
    background-attachment: scroll, scroll, fixed;
    -webkit-font-smoothing: antialiased;
}

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

::selection {
    background: rgba(43, 85, 164, .18);
}

/* Foco visible unico para toda la pantalla. */
.sol-barra a:focus-visible,
.sol-shell a:focus-visible,
.sol-shell button:focus-visible,
.sol-shell input:focus-visible,
.sol-shell textarea:focus-visible,
.sol-shell [tabindex]:focus-visible {
    outline: 2px solid var(--sol-azul);
    outline-offset: 2px;
}


/* ============================================================
   1. FRANJA, BARRA DE APLICACION Y CASCARON
   ============================================================ */

/* Franja de marca: una linea de tinta, no un arcoiris. */
.sol-franja {
    height: 4px;
    background: var(--sol-tinta);
}

/* Barra fija: el logotipo y la ayuda siempre a la mano. */
.sol-barra {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, .93);
    border-bottom: 1px solid var(--sol-borde);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    backdrop-filter: saturate(1.6) blur(10px);
    transition: box-shadow var(--sol-normal) ease;
}

    /* js/solicitudes.js la marca al bajar la pagina. */
    .sol-barra.esta-fija {
        box-shadow: 0 1px 0 var(--sol-borde), 0 10px 24px -18px rgba(22, 34, 75, .5);
    }

.sol-barra-marca {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

    .sol-barra-marca img {
        width: 146px;
        max-width: 46vw;
        height: auto;
        display: block;
    }

.sol-barra-rotulo {
    margin: 0;
    padding-left: 14px;
    border-left: 1px solid var(--sol-borde);
    color: var(--sol-tinta);
    font-family: var(--sol-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sol-barra-acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.sol-shell {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px 20px 48px;
}

    /* El listado de solicitudes trae ocho columnas: con 1120 no le caben
       sin apretarse. */
    .sol-shell-ancho {
        max-width: 1320px;
    }


/* ============================================================
   2. TARJETA Y SECCIONES
   El encabezado de tarjeta ya no lleva color de fondo: el
   verde se reserva para el estado "autorizada".
   ============================================================ */

.sol-tarjeta {
    border: 1px solid var(--sol-borde);
    border-radius: var(--sol-radio);
    box-shadow: var(--sol-sombra);
    background: #fff;
}

.sol-tarjeta-encabezado {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--sol-linea);
    color: var(--sol-tinta);
    font-family: var(--sol-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
}

    .sol-tarjeta-encabezado .fa {
        color: var(--sol-azul);
        font-size: 13px;
    }

.sol-tarjeta-cuerpo {
    padding: 24px;
}

    /* AdminLTE dibuja borde y sombra en .box; dentro de la tarjeta sobra. */
    .sol-tarjeta .box {
        border: 0;
        border-top: 0;
        box-shadow: none;
        margin-bottom: 0;
        background: transparent;
    }

/* Separador de bloques: rotulo corto y regla al ancho del bloque. */
.sol-seccion {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 34px 0 18px;
    color: var(--sol-tinta);
    font-family: var(--sol-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
}

    .sol-seccion:first-child {
        margin-top: 0;
    }

    .sol-seccion .fa {
        color: var(--sol-azul);
        font-size: 12px;
    }

    .sol-seccion:after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: var(--sol-borde);
    }


/* ============================================================
   3. BOTONES Y ENLACES
   ============================================================ */

.sol-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--sol-radio-sm);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--sol-rapido) var(--sol-ease), box-shadow var(--sol-normal) var(--sol-ease), background-color var(--sol-normal) ease, color var(--sol-normal) ease, border-color var(--sol-normal) ease;
}

    .sol-boton .fa {
        font-size: 15px;
    }

/* --- Principal: tinta de marca, color plano --- */
.sol-boton-principal {
    background: var(--sol-azul);
    border-color: var(--sol-azul);
    color: #fff;
    box-shadow: 0 1px 2px rgba(22, 34, 75, .18), 0 10px 20px -12px rgba(43, 85, 164, .9);
}

    .sol-boton-principal:hover,
    .sol-boton-principal:focus {
        background: var(--sol-azul-oscuro);
        border-color: var(--sol-azul-oscuro);
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(22, 34, 75, .2), 0 16px 26px -14px rgba(43, 85, 164, .95);
    }

    .sol-boton-principal:active {
        transform: translateY(1px);
        transition-duration: 80ms;
        box-shadow: 0 1px 1px rgba(22, 34, 75, .22);
    }

/* --- Discreto: para la barra de aplicacion --- */
.sol-boton-discreto {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
    background: transparent;
    color: var(--sol-tinta);
    border-color: var(--sol-borde);
}

    .sol-boton-discreto:hover,
    .sol-boton-discreto:focus {
        color: var(--sol-azul-oscuro);
        text-decoration: none;
        background: var(--sol-azul-suave);
        border-color: #bfceea;
    }

.sol-boton-bloque {
    display: flex;
    width: 100%;
}

/* Par de botones que van juntos (cargar/procesar, guardar/cancelar). */
.sol-botonera {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Boton que todavia no se puede usar: se ve apagado, no roto. */
.sol-boton:disabled,
.sol-boton[disabled] {
    opacity: .5;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Estado de espera: el postback de WebForms tarda, hay que acusarlo. */
.sol-boton.esta-cargando {
    pointer-events: none;
    transform: none;
}

    .sol-boton.esta-cargando .sol-boton-texto {
        opacity: .8;
    }

    .sol-boton.esta-cargando .fa {
        animation: sol-giro 750ms linear infinite;
    }

    .sol-boton.esta-cargando .fa:before {
        content: "\f110"; /* fa-spinner */
    }

/* Enlace de texto dentro de parrafos. */
.sol-enlace {
    color: var(--sol-azul);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(43, 85, 164, .4);
    transition: color var(--sol-normal) ease, border-color var(--sol-normal) ease;
}

    .sol-enlace:hover,
    .sol-enlace:focus {
        color: var(--sol-azul-oscuro);
        text-decoration: none;
        border-bottom-color: var(--sol-azul-oscuro);
    }


/* ============================================================
   4. INGRESO: EL PASE
   Talon de marca a un lado, el unico dato que se pide al otro,
   y una perforacion troquelada en medio.
   ============================================================ */

.sol-pase {
    position: relative;
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    align-items: stretch;
    max-width: 980px;
    margin: 22px auto 0;
    border-radius: var(--sol-radio);
    background: #fff;
    box-shadow: var(--sol-sombra-lg);
    animation: sol-entra-pase 560ms var(--sol-ease) both;
}

/* --- Talon --- */
.sol-pase-talon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px 44px;
    color: #fff;
    background: var(--sol-tinta);
    border-radius: var(--sol-radio) 0 0 var(--sol-radio);
    overflow: hidden;
}

.sol-pase-talon-contenido {
    position: relative;
    z-index: 1;
    max-width: 42ch;
}

.sol-sello {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--sol-radio-pill);
    color: #c7d4f2;
    font-family: var(--sol-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

    .sol-sello .fa {
        color: #8fb0f0;
        font-size: 11px;
    }

.sol-pase-titular {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.032em;
    color: #fff;
}

.sol-pase-lead {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.6;
    color: #b9c6e8;
}

/* Renglones del talon: lo que se puede pedir aqui. */
.sol-pase-lineas {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

    .sol-pase-lineas li {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 13px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .13);
        font-size: 14.5px;
        font-weight: 500;
        color: #e6ecfb;
    }

    .sol-pase-lineas .fa {
        width: 18px;
        flex: 0 0 18px;
        color: #8fb0f0;
        font-size: 15px;
        text-align: center;
    }

.sol-pase-pie {
    position: relative;
    z-index: 1;
    margin: 26px 0 0;
    color: #8493c4;
    font-family: var(--sol-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* --- Cuerpo --- */
.sol-pase-cuerpo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px 44px;
}

    /* La linea de corte. Va sobre el talon, del lado de la tinta, y se
       traza al cargar: el pase se troquela a la vista. Cuelga del cuerpo
       y no del talon porque ese si recorta lo que se sale. */
    .sol-pase-cuerpo:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -2px;
        z-index: 3;
        width: 2px;
        background-image: linear-gradient(rgba(255, 255, 255, .38) 55%, transparent 0);
        background-size: 2px 11px;
        transform-origin: 50% 0;
        animation: sol-troquel 560ms 300ms var(--sol-ease) both;
    }

/* Las muescas: circulos del color del fondo, centrados en la costura. */
.sol-perf {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    width: 0;
}

    .sol-perf:before,
    .sol-perf:after {
        content: "";
        position: absolute;
        left: -11px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--sol-fondo);
    }

    .sol-perf:before {
        top: -11px;
    }

    .sol-perf:after {
        bottom: -11px;
    }

.sol-pase-titulo {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.022em;
    color: var(--sol-tinta);
}

.sol-pase-ayuda {
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sol-tenue);
}

/* El aire bajo el campo no se hereda de Bootstrap: se declara aqui. */
.sol-pase-cuerpo .form-group {
    margin-bottom: 18px;
}

.sol-pase-nota {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--sol-linea);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--sol-tenue);
}

/* Entrada escalonada del contenido del pase. */
.sol-pase [data-sol-paso] {
    animation: sol-sube 500ms var(--sol-ease) both;
}

.sol-pase [data-sol-paso="1"] { animation-delay: 180ms; }
.sol-pase [data-sol-paso="2"] { animation-delay: 250ms; }
.sol-pase [data-sol-paso="3"] { animation-delay: 320ms; }
.sol-pase [data-sol-paso="4"] { animation-delay: 390ms; }
.sol-pase [data-sol-paso="5"] { animation-delay: 460ms; }
.sol-pase [data-sol-paso="6"] { animation-delay: 530ms; }

/* Campo con icono: el icono vive dentro del control, no al lado.
   La caja envuelve solo al input para que centre bien. */
.sol-campo-icono {
    position: relative;
    display: block;
}

    .sol-campo-icono > .fa {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #93a0bd;
        font-size: 15px;
        pointer-events: none;
        z-index: 2;
        transition: color var(--sol-normal) ease;
    }

    .sol-campo-icono .form-control {
        height: 52px;
        padding-left: 42px;
        font-size: 15px;
        border-radius: var(--sol-radio-sm);
    }

    .sol-campo-icono:focus-within > .fa {
        color: var(--sol-azul);
    }


/* ============================================================
   5. LISTADO
   ============================================================ */

.sol-lista-encabezado {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.sol-lista-titulo {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.024em;
    color: var(--sol-tinta);
}

.sol-lista-sub {
    margin: 0;
    font-size: 13px;
    color: var(--sol-tenue);
}

    .sol-lista-sub strong {
        color: var(--sol-texto);
        font-family: var(--sol-mono);
        font-size: 12.5px;
        font-weight: 500;
    }

.sol-contador {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 9px;
    border: 1px solid var(--sol-borde);
    border-radius: var(--sol-radio-sm);
    background: #fff;
    color: var(--sol-tenue);
    font-family: var(--sol-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sol-lista-encabezado .sol-boton {
    margin-left: auto;
}

.sol-tabla {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--sol-borde);
    border-radius: var(--sol-radio-sm);
    background: #fff;
}

    /* DevExpress cuelga el sufijo del tema en cada clase: dxgvTable_Office365. */
    .sol-tabla [class*="dxgvControl"],
    .sol-tabla [class*="dxgvTable"] {
        min-width: 820px;
    }

.sol-tabla [class*="dxgvControl"] {
    border: 0 !important;
    background: transparent !important;
    font-family: var(--sol-fuente) !important;
}

/* Celdas de datos primero: el encabezado va despues para ganarles. */
.sol-tabla tr[class*="dxgvDataRow"] > td {
    padding: 15px 14px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sol-linea) !important;
    color: var(--sol-texto);
    font-size: 13.5px;
    line-height: 1.45;
    vertical-align: middle;
}

    /* El dato completo, aunque baje de renglon: el tema lo recortaba con
       puntos suspensivos y de nada sirve un local o una descripcion a medias. */
    .sol-tabla tr[class*="dxgvDataRow"] > td,
    .sol-tabla tr[class*="dxgvDataRow"] > td > div {
        white-space: normal !important;
        text-overflow: clip !important;
    }

.sol-tabla [class*="dxgvHeader"] {
    padding: 12px 14px !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--sol-borde) !important;
    background: #fbfcfe !important;
    color: var(--sol-tenue) !important;
    font-family: var(--sol-mono) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .sol-tabla [class*="dxgvHeader"]:hover {
        background: #f4f6fb !important;
    }

.sol-tabla tr[class*="dxgvDataRow"] {
    transition: background-color var(--sol-rapido) ease;
    /* Entrada escalonada: la lista se arma a la vista. */
    animation: sol-entra-fila 420ms var(--sol-ease) both;
}

    .sol-tabla tr[class*="dxgvDataRow"]:hover td[class*="dxgv"] {
        background-color: #f7f9fd !important;
    }

    /* El tope son 10 filas, que es el tamano de pagina. */
    .sol-tabla tr[class*="dxgvDataRow"]:nth-child(1) { animation-delay: 20ms; }
    .sol-tabla tr[class*="dxgvDataRow"]:nth-child(2) { animation-delay: 45ms; }
    .sol-tabla tr[class*="dxgvDataRow"]:nth-child(3) { animation-delay: 70ms; }
    .sol-tabla tr[class*="dxgvDataRow"]:nth-child(4) { animation-delay: 95ms; }
    .sol-tabla tr[class*="dxgvDataRow"]:nth-child(5) { animation-delay: 120ms; }
    .sol-tabla tr[class*="dxgvDataRow"]:nth-child(6) { animation-delay: 145ms; }
    .sol-tabla tr[class*="dxgvDataRow"]:nth-child(7) { animation-delay: 170ms; }
    .sol-tabla tr[class*="dxgvDataRow"]:nth-child(n+8) { animation-delay: 190ms; }

/* Columna de la casilla: pegada a la orilla se veia apretada. */
.sol-tabla [class*="dxgvCommandColumn"] {
    padding-left: 14px !important;
    padding-right: 6px !important;
}

.sol-tabla tr[class*="dxgvSelectedRow"] td,
.sol-tabla tr[class*="dxgvFocusedRow"] td {
    background-color: var(--sol-azul-suave) !important;
    color: var(--sol-texto) !important;
}

/* --- Barra de busqueda y filtros ---
   El buscador salio de adentro de la rejilla: ahora es un ASPxTextBox propio,
   amarrado con SettingsSearchPanel CustomEditorID, para que quepa en la misma
   barra que los filtros. Es el mismo amarre que usa Project/Seguridad/Usuarios. */
.sol-buscador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px;
    border: 1px solid var(--sol-borde);
    border-radius: var(--sol-radio-sm);
    background: #f7f9fd;
}

/* El campo de texto manda: se lleva el espacio que sobra. */
.sol-buscador-campo {
    flex: 1 1 300px;
    min-width: 0;
}

.sol-buscador-filtro {
    flex: 0 1 170px;
    min-width: 0;
}

/* Rango de fechas: dos editores que se leen como un solo control. */
.sol-buscador-fechas {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 280px;
    min-width: 0;
}

    .sol-buscador-fechas > div {
        flex: 1 1 0;
        min-width: 0;
    }

.sol-buscador-guion {
    flex: 0 0 auto;
    color: var(--sol-tenue);
}

/* Los editores llevan CssClass="form-control": el alto, el borde, el boton
   del combo y el foco los pone css/formularios.css. Aqui solo va el reparto,
   la lupa y el relleno que esa hoja no resetea para el ASPxTextBox. */
.sol-buscador table[class*="dxeTextBox"].form-control {
    padding: 0;
}

.sol-buscador .form-control [class*="dxeEditArea"] {
    font-size: 13px;
}

    .sol-buscador .form-control [class*="dxeEditArea"]::placeholder {
        color: var(--fm-placeholder);
        opacity: 1;
    }

/* La lupa va de fondo del propio input: asi no se descoloca si el tema le
   cambia el relleno al editor. */
.sol-buscador-campo .form-control [class*="dxeEditArea"] {
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2393a0bd' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.4'/%3E%3Cpath d='M13.2 13.2 17 17'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px 50%;
    background-size: 15px 15px;
}

.sol-buscador-campo .form-control[class*="dxeFocused"] [class*="dxeEditArea"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232b55a4' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.4'/%3E%3Cpath d='M13.2 13.2 17 17'/%3E%3C/svg%3E");
}

/* Boton de la orilla: limpia lo que se haya escrito y escogido. */
.sol-buscador-icono {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #cddcf7;
    border-radius: var(--fm-radius);
    background: var(--sol-azul-suave);
    color: var(--sol-azul-oscuro);
    font-size: 14px;
    text-decoration: none;
    transition: background-color var(--sol-rapido) ease, border-color var(--sol-rapido) ease;
}

    .sol-buscador-icono:hover,
    .sol-buscador-icono:focus {
        background: #dde8fb;
        border-color: #b4cbf3;
        color: var(--sol-azul-oscuro);
        text-decoration: none;
    }


/* --- Ventanas desplegables de DevExpress ---
   Las listas de los combos y los calendarios se dibujan al final del <body>,
   fuera de la tarjeta y sin la clase form-control: por eso salian con el
   cromado crudo del tema. Los selectores no cuelgan de nada de la pagina
   porque el contenedor del popup cambia de clase segun el editor; estas
   cuatro pantallas son las unicas que cargan esta hoja. */
[class*="dxpc-mainDiv"] {
    border: 1px solid var(--sol-borde) !important;
    border-radius: var(--sol-radio-sm) !important;
    box-shadow: var(--sol-sombra-md) !important;
    overflow: hidden;
}

[class*="dxpc-contentWrapper"],
[class*="dxeDropDownWindow"],
table[class*="dxeListBox"] {
    border: 0 !important;
}

td[class*="dxeListBoxItem"] {
    padding: 9px 13px !important;
    border: 0 !important;
    color: var(--sol-texto) !important;
    font-family: var(--sol-fuente) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Encabezado de las listas de varias columnas (el buscador de cliente). */
td[class*="dxeListBoxHeader"] {
    padding: 10px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sol-borde) !important;
    background: #fbfcfe !important;
    color: var(--sol-tenue) !important;
    font-family: var(--sol-mono) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Estos dos van despues: el selector del item tambien los alcanza. */
td[class*="dxeListBoxItemHover"] {
    background: var(--sol-azul-suave) !important;
    color: var(--sol-azul-oscuro) !important;
}

td[class*="dxeListBoxItemSelected"] {
    background: var(--sol-azul) !important;
    color: #fff !important;
}

/* Calendario: solo la tipografia y el dia escogido; la rejilla de dias la
   arma el tema y no conviene moverla. */
[class*="dxeCalendar"] {
    font-family: var(--sol-fuente) !important;
    font-size: 12.5px !important;
}

td[class*="dxeCalendarSelected"] {
    background: var(--sol-azul) !important;
    color: #fff !important;
}

/* Pie de paginacion. */
.sol-tabla [class*="dxgvPagerBottomPanel"],
.sol-tabla [class*="dxgvPagerTopPanel"] {
    padding: 10px 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--sol-linea) !important;
    background: #fbfcfe !important;
}

.sol-tabla [class*="dxpButton"],
.sol-tabla [class*="dxp-button"],
.sol-tabla [class*="dxp-num"] {
    border-radius: 6px !important;
    color: var(--sol-tenue) !important;
    font-family: var(--sol-mono) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: background-color var(--sol-rapido) ease, color var(--sol-rapido) ease;
}

    .sol-tabla [class*="dxp-num"]:hover,
    .sol-tabla [class*="dxp-button"]:hover {
        background: var(--sol-azul-suave) !important;
        color: var(--sol-azul-oscuro) !important;
    }

.sol-tabla [class*="dxp-current"] {
    background: var(--sol-azul) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Pie de totales: el resumen se lee como dato, no como barra de color. */
.sol-tabla [class*="dxgvFooter"] {
    padding: 13px 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--sol-borde) !important;
    background: #fbfcfe !important;
    color: var(--sol-tinta) !important;
    font-family: var(--sol-mono) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: .06em;
    white-space: nowrap;
}

/* Columnas de dinero: alineadas a la derecha y con cifras de ancho fijo,
   para poder comparar los montos de un vistazo. */
.sol-tabla td.sol-numero {
    font-family: var(--sol-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Sin resultados. */
.sol-tabla [class*="dxgvEmptyDataRow"] {
    padding: 52px 24px !important;
    color: var(--sol-tenue) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

/* Detalle plegado en telefono. */
.sol-tabla [class*="dxgvAdaptiveDetailCell"] {
    background: #fbfcfe !important;
    padding: 4px 14px 12px !important;
}

.sol-tabla [class*="dxgvAdaptiveDetail"] td {
    border: 0 !important;
    padding: 6px 0 !important;
    font-size: 13.5px;
}

/* --- Numero de solicitud: es un folio, se lee como folio --- */
.sol-folio,
.sol-tabla td.sol-folio {
    color: var(--sol-tinta);
    font-family: var(--sol-mono);
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* --- Estatus como etiqueta. Las clases las emite Solicitudes.aspx.cs --- */
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border-radius: var(--sol-radio-pill);
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

    .etiqueta:before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        flex: 0 0 7px;
    }

.etiqueta-ok {
    background: var(--sol-verde-suave);
    border-color: #c4e2b9;
    color: var(--sol-verde-oscuro);
}

.etiqueta-espera {
    background: var(--sol-naranja-suave);
    border-color: #f8d5b1;
    color: #8a4708;
}

    /* Late mientras el estatus sigue moviendose. */
    .etiqueta-espera:before {
        animation: sol-latido 1900ms ease-in-out infinite;
    }

.etiqueta-no {
    background: var(--sol-rojo-suave);
    border-color: #f5c6cc;
    color: #a50f22;
}

.etiqueta-neutra {
    background: #f2f4f9;
    border-color: var(--sol-borde);
    color: #4f5a78;
}

/* --- Descarga de la autorizacion (la emite Solicitudes.aspx.cs) --- */
.enlace-descarga {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--sol-borde);
    border-radius: var(--sol-radio-sm);
    background: #fff;
    color: var(--sol-azul-oscuro);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--sol-normal) ease, border-color var(--sol-normal) ease, transform var(--sol-rapido) var(--sol-ease);
}

    .enlace-descarga:hover,
    .enlace-descarga:focus {
        color: var(--sol-azul-oscuro);
        text-decoration: none;
        background: var(--sol-azul-suave);
        border-color: #bfceea;
        transform: translateY(-1px);
    }

    .enlace-descarga:active {
        transform: translateY(0);
    }

    .enlace-descarga .fa {
        font-size: 12px;
        opacity: .75;
    }


/* ============================================================
   6. FORMULARIO DE SOLICITUD
   ============================================================ */

.sol-forma {
    max-width: 960px;
    margin: 0 auto;
}

/* Rejilla propia: Bootstrap 3 flota columnas de alturas distintas
   y las encaja en la columna equivocada al saltar de fila. */
.sol-campos {
    display: grid;
    gap: 0 20px;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}

.sol-campos-2 {
    grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
}

/* Textareas: dos columnas como maximo. Con tres, la cuarta caja
   se queda sola en un renglon y las listas quedan muy angostas. */
.sol-campos-anchos {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.sol-campo {
    min-width: 0;
    margin-bottom: 18px;
}

/* Es de cara al cliente: etiqueta legible, no de sistema. */
.sol-forma .sol-campo > label,
.sol-forma .form-group > label,
.sol-pase-cuerpo .form-group > label {
    display: block;
    margin-bottom: 7px;
    color: var(--sol-tinta);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
}

/* Campos mas altos que el estandar del sistema: aqui se llenan desde el telefono. */
.sol-forma .form-control,
.sol-pase-cuerpo .form-control {
    height: 44px;
    font-size: 14px;
    border-radius: var(--sol-radio-sm);
}

.sol-forma textarea.form-control {
    height: auto;
    min-height: 116px;
    line-height: 1.55;
}

.sol-forma .form-control [class*="dxeEditArea"] {
    font-size: 14px;
}

.sol-forma .form-control:focus,
.sol-forma .form-control[class*="dxeFocused"],
.sol-forma table[class*="dxeButtonEdit"].form-control:focus-within,
.sol-pase-cuerpo .form-control:focus,
.sol-pase-cuerpo .form-control[class*="dxeFocused"] {
    border-color: var(--sol-azul);
    box-shadow: 0 0 0 3px rgba(43, 85, 164, .14);
}

/* Ayuda bajo un campo. */
.sol-pista {
    display: block;
    margin-top: 7px;
    color: var(--sol-tenue);
    font-size: 12px;
    line-height: 1.45;
}

/* Aviso de la solicitud: es una condicion, no un adorno. */
.sol-aviso {
    display: flex;
    gap: 13px;
    margin: 0 0 28px;
    padding: 15px 17px;
    border: 1px solid #f8d5b1;
    border-left: 3px solid var(--sol-naranja);
    border-radius: var(--sol-radio-sm);
    background: var(--sol-naranja-suave);
    color: #7a4108;
    line-height: 1.6;
    font-size: 13px;
    font-weight: 500;
}

    .sol-aviso:before {
        content: "\f071"; /* fa-exclamation-triangle */
        font-family: FontAwesome;
        font-size: 15px;
        line-height: 1.45;
        color: var(--sol-naranja);
        flex: 0 0 auto;
    }

    .sol-aviso label {
        margin: 0;
        font-weight: 500 !important;
    }

/* Bloques que se revelan al desplazar. El estado oculto lo pone
   js/solicitudes.js, no esta hoja: si el script no llega a cargar,
   el formulario se ve completo en vez de quedar en blanco. */
.sol-revelable {
    transition: opacity 460ms var(--sol-ease), transform 460ms var(--sol-ease);
}

    .sol-revelable.esta-oculto {
        opacity: 0;
        transform: translateY(14px);
    }

/* El resto del estilo DevExpress lo pone css/formularios.css sobre
   los controles que llevan CssClass="form-control". */
.sol-forma .dxeButtonEditSys,
.sol-forma .dxeTextBoxSys,
.sol-pase-cuerpo .dxeTextBoxSys {
    width: 100% !important;
}

.dropDownWindow .listBox {
    width: 100% !important;
}


/* ============================================================
   7. PLANOS Y BARRA DE ACCIONES
   ============================================================ */

.sol-planos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 14px;
}

    .sol-planos figure {
        margin: 0;
    }

    .sol-planos figcaption {
        margin-bottom: 7px;
        color: var(--sol-tenue);
        font-family: var(--sol-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .sol-planos img {
        width: 100%;
        height: auto;
        display: block;
        border: 1px solid var(--sol-borde);
        border-radius: var(--sol-radio-sm);
        background: #fff;
        transition: transform var(--sol-normal) var(--sol-ease), box-shadow var(--sol-normal) var(--sol-ease), border-color var(--sol-normal) ease;
    }

        .sol-planos img:hover {
            transform: translateY(-3px);
            border-color: #bfceea;
            box-shadow: var(--sol-sombra-md);
        }

.sol-acciones {
    margin-top: 26px;
    padding-top: 4px;
    text-align: center;
}


/* ============================================================
   8. MOVIMIENTO
   ============================================================ */

@keyframes sol-entra-pase {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.99);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* El troquel: la linea de corte se traza de arriba a abajo. */
@keyframes sol-troquel {
    from {
        transform: scaleY(0);
        opacity: 0;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* La misma linea, pero cortando a lo ancho (pantallas angostas). */
@keyframes sol-troquel-h {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes sol-sube {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sol-entra-fila {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sol-latido {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.82);
    }
}

@keyframes sol-giro {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   9. RESPONSIVO
   ============================================================ */

@media (min-width: 1200px) {
    .sol-shell {
        padding-left: 24px;
        padding-right: 24px;
    }

    .sol-tarjeta-cuerpo {
        padding: 28px;
    }
}

@media (max-width: 991px) {
    .sol-shell {
        padding: 20px 14px 36px;
    }

    .sol-tarjeta-cuerpo {
        padding: 18px;
    }

    /* El pase se desdobla: el talon arriba, el cuerpo abajo. */
    .sol-pase {
        grid-template-columns: 1fr;
        margin-top: 14px;
    }

    .sol-pase-talon {
        padding: 32px 26px;
        border-radius: var(--sol-radio) var(--sol-radio) 0 0;
    }

    .sol-pase-titular {
        font-size: 27px;
    }

    .sol-pase-cuerpo {
        padding: 32px 26px;
    }

    /* La perforacion gira: ahora corta a lo ancho. */
    .sol-pase-cuerpo:before {
        top: -2px;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 2px;
        background-image: linear-gradient(90deg, rgba(255, 255, 255, .38) 55%, transparent 0);
        background-size: 11px 2px;
        transform-origin: 0 50%;
        animation-name: sol-troquel-h;
    }

    .sol-perf {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 0;
    }

        .sol-perf:before,
        .sol-perf:after {
            top: -11px;
            left: auto;
        }

        .sol-perf:before {
            left: -11px;
        }

        .sol-perf:after {
            right: -11px;
        }

    .sol-planos {
        grid-template-columns: 1fr;
    }

    /* Formulario largo: la barra de acciones se queda a la vista. */
    .sol-acciones {
        position: sticky;
        bottom: 0;
        z-index: 30;
        margin-top: 22px;
        padding: 8px 0 calc(6px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 34%);
    }

        .sol-acciones .barra-acciones {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
}

@media (max-width: 767px) {
    .sol-barra {
        padding: 9px 14px;
        gap: 10px;
    }

        .sol-barra-marca img {
            width: 126px;
        }

    /* El rotulo estorba en telefono: manda el logotipo. */
    .sol-barra-rotulo {
        display: none;
    }

    .sol-shell {
        padding: 16px 12px 30px;
    }

    .sol-tarjeta {
        border-radius: 11px;
    }

    .sol-tarjeta-encabezado {
        padding: 13px 15px;
    }

    .sol-tarjeta-cuerpo {
        padding: 15px;
    }

    .sol-pase {
        border-radius: 11px;
    }

    .sol-pase-talon {
        padding: 26px 20px;
        border-radius: 11px 11px 0 0;
    }

    .sol-pase-titular {
        font-size: 24px;
    }

    .sol-pase-lead {
        margin-bottom: 22px;
        font-size: 14.5px;
    }

    .sol-pase-cuerpo {
        padding: 26px 20px;
    }

    .sol-pase-pie {
        margin-top: 22px;
    }

    /* Dedo, no puntero: la accion principal ocupa el ancho. */
    .sol-lista-encabezado {
        gap: 12px;
    }

        .sol-lista-encabezado .sol-boton {
            margin-left: 0;
            width: 100%;
        }

    /* Los botones de un par se reparten el renglon en vez de encogerse. */
    .sol-botonera .sol-boton {
        flex: 1 1 140px;
    }

    .sol-seccion {
        margin: 28px 0 16px;
    }

    .sol-campos,
    .sol-campos-2,
    .sol-campos-anchos {
        grid-template-columns: 1fr;
    }

    .sol-campo {
        margin-bottom: 16px;
    }

    /* La barra de busqueda se apila: cada control ocupa el renglon. */
    .sol-buscador-campo,
    .sol-buscador-filtro,
    .sol-buscador-fechas {
        flex-basis: 100%;
    }

    /* 16px evita el zoom de iOS al enfocar. */
    .sol-buscador .form-control [class*="dxeEditArea"] {
        font-size: 16px;
    }

    /* 16px evita que iOS haga zoom al enfocar el campo. */
    .sol-forma .form-control,
    .sol-pase-cuerpo .form-control {
        height: 46px;
        font-size: 16px;
    }

    .sol-forma .form-control [class*="dxeEditArea"] {
        font-size: 16px;
    }

    .sol-forma textarea.form-control {
        min-height: 124px;
    }

    .sol-tabla {
        border-radius: 8px;
    }

        /* Sin ancho minimo la rejilla pliega columnas (SettingsAdaptivity)
           en lugar de obligar a barrer de lado. */
        .sol-tabla [class*="dxgvControl"],
        .sol-tabla [class*="dxgvTable"] {
            min-width: 0;
        }

        .sol-tabla tr[class*="dxgvDataRow"] > td {
            padding: 13px 11px !important;
        }
}

@media (max-width: 420px) {
    .sol-tarjeta-cuerpo {
        padding: 13px;
    }

    .sol-pase-titular {
        font-size: 22px;
    }

    .sol-pase-talon,
    .sol-pase-cuerpo {
        padding: 22px 17px;
    }

    /* Solo el icono: el rotulo del boton no cabe. */
    .sol-boton-discreto .sol-boton-texto {
        display: none;
    }

    .sol-boton-discreto {
        padding: 0 12px;
    }
}


/* ============================================================
   10. REDUCIR ANIMACIONES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .sol-pase,
    .sol-pase [data-sol-paso],
    .sol-perf,
    .etiqueta-espera:before,
    .sol-tabla tr[class*="dxgvDataRow"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .sol-revelable,
    .sol-revelable.esta-oculto {
        opacity: 1;
        transform: none;
    }

    .sol-boton,
    .sol-boton-principal:hover,
    .enlace-descarga:hover,
    .sol-planos img:hover {
        transform: none !important;
    }

    .sol-boton,
    .sol-enlace,
    .enlace-descarga,
    .sol-planos img,
    .sol-revelable,
    .sol-tabla tr[class*="dxgvDataRow"] {
        transition: none !important;
    }
}


/* ============================================================
   11. LAS OTRAS PANTALLAS DEL PORTAL
   Lista_Solicitudes.aspx, Carga_correos_solicitudes.aspx y
   KioskoInformacion.aspx comparten este mismo sistema visual.
   Las cuatro comparten la misma barra .sol-barra; aqui van solo las piezas
   que ellas usan y Solicitudes.aspx no: la rejilla de Bootstrap y los modales.
   ============================================================ */

/* Alias para css/kiosko.css, que esta escrito contra los tokens --cn-*.
   Redefinirlos aqui es lo que lleva al kiosko a la paleta nueva. */
:root {
    --cn-primary: var(--sol-azul);
    --cn-primary-dark: var(--sol-azul-oscuro);
    --cn-primary-soft: var(--sol-azul-suave);
    --cn-success: var(--sol-verde);
    --cn-success-dark: var(--sol-verde-oscuro);
    --cn-success-soft: var(--sol-verde-suave);
    --cn-naranja: var(--sol-naranja);
    --cn-naranja-soft: var(--sol-naranja-suave);
    --cn-rojo: var(--sol-rojo);
    --cn-rojo-soft: var(--sol-rojo-suave);
    --cn-border: var(--sol-borde);
    --cn-linea: var(--sol-linea);
    --cn-bg: var(--sol-fondo);
    --cn-text: var(--sol-texto);
    --cn-muted: var(--sol-tenue);
    --cn-radius: var(--sol-radio);
    --cn-radius-sm: var(--sol-radio-sm);
    --cn-radius-pill: var(--sol-radio-pill);
    --cn-shadow: var(--sol-sombra);
    --cn-shadow-md: var(--sol-sombra-md);
    --cn-shadow-lg: var(--sol-sombra-lg);
    --cn-ease: var(--sol-ease);
    --cn-rapido: var(--sol-rapido);
    --cn-normal: var(--sol-normal);
}

/* Rejilla de Bootstrap 3: flex en vez de floats, porque con alturas
   distintas encajaba los campos en la columna equivocada. */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

    .form-row > [class*="col-"] {
        float: none;
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 16px;
    }

.location-section {
    margin-top: 8px;
}

/* El kiosko cuelga una nota a la derecha del rotulo de seccion y arma
   ese reparto con space-between, asi que ahi sobra la regla. */
.sol-seccion.kiosko-seccion:after {
    display: none;
}

.kiosko-seccion-nota {
    font-family: var(--sol-fuente);
    letter-spacing: normal;
    text-transform: none;
}

/* Cuando el icono va dentro del <span> del rotulo, el gap del flex no
   lo alcanza: la separacion se la da el propio icono. */
.sol-seccion > span > .fa {
    margin-right: 8px;
}

/* Modales de autorizar y rechazar. */
.modal-cn .modal-content {
    border: 0;
    border-radius: var(--sol-radio);
    box-shadow: var(--sol-sombra-lg);
    overflow: hidden;
}

/* AdminLTE pinta TODAS las cabeceras de modal de azul con !important
   (.modal-header{background-color:#3c8dbc!important}), asi que hay que
   ganarle con la misma arma para volver al blanco del sistema. */
.modal-cn .modal-header {
    padding: 16px 18px;
    background: #fff !important;
    color: var(--sol-tinta) !important;
    border-bottom: 1px solid var(--sol-linea) !important;
}

    .modal-cn .modal-header .close {
        color: var(--sol-tenue);
        opacity: .7;
        text-shadow: none;
    }

        .modal-cn .modal-header .close:hover,
        .modal-cn .modal-header .close:focus {
            color: var(--sol-tinta);
            opacity: 1;
        }

.modal-cn .modal-titulo {
    color: var(--sol-tinta);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.015em;
}

    .modal-cn .modal-titulo .fa {
        margin-right: 8px;
        color: var(--sol-azul);
    }

.modal-cn .modal-body {
    padding: 18px;
    color: var(--sol-texto);
    font-size: 14px;
    line-height: 1.6;
}

.modal-cn .modal-footer {
    padding: 13px 18px;
    border-top: 1px solid var(--sol-linea);
}

@media (max-width: 767px) {
    .form-row > [class*="col-"] {
        margin-bottom: 14px;
    }
}