/* ==========================================================================
   dashforge-solutoria.css
   Identidad de Solutoria sobre DashForge
   --------------------------------------------------------------------------
   REGLA DEL PROYECTO: los archivos de DashForge (dashforge*.css, skin.*.css que
   vienen del template) se mantienen EXACTAMENTE como los entrega el proveedor.
   Toda personalizacion va aqui, en un archivo que se carga DESPUES.

   Por que: el desarrollo anterior edito dashforge.css para meter los colores del
   cliente de turno (el rosado #d43574 en .thead-info, el morado #6b2a78 en la
   columna ordenada y en la paginacion). Eso se pierde en silencio al actualizar
   el template, y no deja ninguna pista de que se cambio ni por que. Ya se
   restauraron esos valores; de aqui en adelante, nada de tocar el template.

   La unica excepcion son los cuatro @import a fonts.googleapis.com que se
   quitaron de dashforge.css, porque un @import no se puede anular desde una hoja
   posterior. Las fuentes se sirven autohospedadas en fuentes-locales.css.

   La paleta sale del logo corporativo: azul #0154A2 del texto y cian #00ADCB del
   simbolo. Este archivo redefine color; no toca tamanos ni estructura, para no
   pelear con el template.
   ========================================================================== */

:root {
    --sol-azul: #0154A2;
    --sol-azul-oscuro: #01417e;
    --sol-cian: #00ADCB;
    --sol-cian-claro: #e6f7fb;
}

/* --- Botones de marca --------------------------------------------------- */

.btn-brand-01 {
    background-color: var(--sol-cian);
    border-color: var(--sol-cian);
    color: #fff;
}

.btn-brand-01:hover,
.btn-brand-01:focus {
    background-color: #0096b0;
    border-color: #0096b0;
    color: #fff;
}

.btn-brand-02 {
    background-color: var(--sol-azul);
    border-color: var(--sol-azul);
    color: #fff;
}

.btn-brand-02:hover,
.btn-brand-02:focus {
    background-color: var(--sol-azul-oscuro);
    border-color: var(--sol-azul-oscuro);
    color: #fff;
}

/* Foco visible tambien para quien navega con teclado. */
.btn-brand-01:focus,
.btn-brand-02:focus {
    box-shadow: 0 0 0 .2rem rgba(1, 84, 162, .25);
}

/* --- Enlaces y foco de formularios -------------------------------------- */

a {
    color: var(--sol-azul);
}

a:hover,
a:focus {
    color: var(--sol-azul-oscuro);
}

.form-control:focus {
    border-color: var(--sol-cian);
    box-shadow: 0 0 0 .2rem rgba(0, 173, 203, .2);
}

/* --- Menu lateral ------------------------------------------------------- */

.nav-aside .nav-link.active {
    color: var(--sol-azul);
}

.nav-aside .nav-link.active::before {
    background-color: var(--sol-cian);
}

.nav-aside .nav-link:hover,
.nav-aside .nav-link:focus {
    color: var(--sol-azul);
}

/* El rotulo de seccion es un separador, no un enlace: se mantiene discreto. */
.nav-aside .nav-label {
    color: #8392a5;
}

/* Los iconos del menu son feather, igual que en el template, asi que DashForge
   ya los dimensiona con ".nav-aside svg". Aqui solo se les da el color de marca
   cuando el item esta activo o con el puntero encima. */
.nav-aside .nav-item.active .nav-link svg,
.nav-aside .nav-link:hover svg,
.nav-aside .nav-link:focus svg {
    color: var(--sol-azul);
}

/* --- Submenu: despliegue suave y linea guia ------------------------------
   DashForge alterna height:0 y height:auto para abrir y cerrar. "auto" no es
   un valor animable en CSS, asi que el submenu aparecia de golpe. Con
   max-height si hay transicion.

   La linea guia es un borde izquierdo del <ul>, alineado bajo el icono del
   padre: hace visible que los items cuelgan de esa seccion, y sirve de riel
   para el segmento que marca donde estas.
   ------------------------------------------------------------------------ */

.nav-aside .nav-item ul {
    height: auto;
    max-height: 0;
    overflow: hidden;
    margin-left: 9px;
    padding-left: 24px;
    border-left: 1px solid #e3e7ed;
    transition: max-height .3s ease,
                opacity .25s ease,
                padding-bottom .3s ease,
                visibility 0s linear .3s;
}

.nav-aside .nav-item.with-sub.show ul {
    max-height: 640px;
    opacity: 1;
    visibility: visible;
    transition: max-height .3s ease,
                opacity .25s ease,
                padding-bottom .3s ease,
                visibility 0s;
}

/* Al cargar la pagina el submenu de la seccion actual se abre ya abierto, sin
   animacion: una animacion que nadie disparo distrae en vez de informar. */
.nav-aside .nav-item ul.sol-sin-transicion {
    transition: none;
}

.nav-aside .nav-item ul li {
    position: relative;
}

/* Segmento sobre la linea guia. Transparente salvo en el item actual. */
.nav-aside .nav-item ul li::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 1px;
    bottom: 1px;
    width: 2px;
    background-color: transparent;
    transition: background-color .15s ease;
}

.nav-aside .nav-item ul li:hover::before {
    background-color: var(--sol-cian);
}

.nav-aside .nav-item ul li.active::before {
    background-color: var(--sol-azul);
}

.nav-aside .nav-item ul li.active a {
    color: var(--sol-azul);
    font-weight: 500;
}

/* --- Correccion del estado activo ---------------------------------------
   Los skin.qa / skin.prod vienen del cliente anterior, que tenia el menu
   lateral oscuro: ahi pintan el item activo de blanco. Sobre el fondo claro
   que usamos, ese texto queda invisible.

   No se vio antes porque nada marcaba .active en el menu; aparecio recien al
   empezar a senalar la pantalla actual.
   ------------------------------------------------------------------------ */

.nav-aside .nav-item.active .nav-link,
.nav-aside .nav-item.with-sub ul li.active a,
.nav-aside .nav-item.with-sub.show .nav-link {
    color: var(--sol-azul);
}

.nav-aside .nav-item.active svg,
.nav-aside .nav-item.with-sub.show .nav-link svg {
    color: var(--sol-azul);
    fill: rgba(1, 84, 162, .12);
}

/* La marca del item activo tambien era blanca. */
.nav-aside .nav-item.active .nav-link::before,
.nav-aside .nav-item.with-sub.show .nav-link::before {
    border-left-color: var(--sol-cian);
    background-color: rgba(1, 84, 162, .05);
}

@media (prefers-reduced-motion: reduce) {
    .nav-aside .nav-item ul,
    .nav-aside .nav-item.with-sub.show ul,
    .nav-aside .nav-item ul li::before {
        transition: none;
    }
}

/* --- Firma "Creado con ♥ por Σ Solutoria" --------------------------------
   Aparece en el pie del layout y en el del login, asi que vive aca y no
   duplicada en cada vista.
   ------------------------------------------------------------------------ */

/* Doble golpe, como un latido real: un pulso simple se ve mecanico. */
.sol-corazon {
    color: #e8384f;
    display: inline-block;
    animation: sol-latido 1.8s ease-in-out infinite;
}

@keyframes sol-latido {
    0%, 28%, 100% { transform: scale(1); }
    10%           { transform: scale(1.28); }
    19%           { transform: scale(1.12); }
}

/* Quien pidio menos animacion en su sistema no la recibe. */
@media (prefers-reduced-motion: reduce) {
    .sol-corazon {
        animation: none;
    }
}

.sol-firma {
    color: var(--sol-azul);
    font-weight: 600;
}

/* --- Tablas de datos -----------------------------------------------------
   Las vistas usan .thead-info. DashForge la pinta de un celeste saturado y el
   desarrollo anterior la habia reemplazado por el rosado del cliente, editando
   el archivo del template (eso se perderia al actualizarlo; ya se restauro).

   Aca se deja clara a proposito: en una tabla de diez columnas con badges de
   estado, una cabecera saturada compite con los badges, que son lo que de
   verdad hay que mirar. La cabecera tiene que ordenar, no llamar la atencion.
   ------------------------------------------------------------------------ */

.thead-info,
.thead-info th {
    background-color: #f4f6fa;
    color: #4a5c78;
}

.thead-info th {
    font-weight: 600;
    border-bottom: 1px solid #dde3ec;
    vertical-align: middle;
}

/* Altura de fila estable.
   El alto lo tiene que fijar la tabla, no la celda con mas texto: si una
   respuesta larga estira su fila, la vista pierde el ritmo al recorrer la
   columna. Las celdas se centran verticalmente y el contenido largo se corta
   con puntos suspensivos, con el texto completo en el title. */
.table td {
    vertical-align: middle;
}

/* Columnas que identifican el registro: nunca se parten en dos lineas. */
.table td.sol-nowrap,
.table th.sol-nowrap {
    white-space: nowrap;
}

/* Celdas de texto libre: una linea, con corte limpio. */
.table td.sol-truncar {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Barra de pasos ------------------------------------------------------
   Los pasos de la atencion van arriba, a lo ancho, como una franja y no como
   una tarjeta: informan en que punto del flujo esta la persona, y una tarjeta
   los pondria al mismo nivel jerarquico que el contenido.

   Se apoya en el componente .steps de DashForge; aca solo se ajusta el
   contenedor y el color de marca.
   ------------------------------------------------------------------------ */

.sol-pasos {
    background-color: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 6px;
    padding: 18px 24px 14px;
    margin-bottom: 16px;
}

.sol-pasos .step-title {
    font-size: 13px;
}

/* Encabezados de tarjeta con el alto del template: 52px.
   Antes median 74px porque el del flujo alojaba el boton "Buscar otro RUT" y el
   del historial tenia que igualarlo para que las lineas divisorias de ambas
   tarjetas coincidieran. Ese boton se movio junto a las demas acciones del paso,
   asi que el encabezado vuelve a la medida del diseno. El padding vertical lo
   pone la altura minima, no el relleno, para que la medida sea exacta. */
:root {
    --sol-alto-encabezado: 52px;
}

.sol-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--sol-alto-encabezado);
    padding-top: 0;
    padding-bottom: 0;
}

/* Sin esto el margen inferior del h6 suma alto y descuadra la cuenta. */
.sol-encabezado h6 {
    margin-bottom: 0;
}

/* Historial: cada ticket ocupa el ancho de la tarjeta y se lee en dos lineas,
   el numero y la fecha arriba y la materia abajo. Antes iba todo en una sola
   ("Ticket: 7 | Revision de cuenta medica - 15/09/26"), con el mismo peso para
   el numero, la materia y la fecha, que es lo que obliga a leer la linea entera
   para encontrar cualquiera de los tres.

   Se apoya en .alert del template para el color; aqui solo se ajusta el alto,
   porque el padding de una alerta esta pensado para un aviso suelto y no para
   siete seguidas en una columna angosta. */
.sol-historial {
    display: block;
    margin-bottom: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    text-decoration: none;
}

.sol-historial:last-child {
    margin-bottom: 0;
}

/* El display:block de arriba le gana al display:none que el navegador aplica a
   [hidden], asi que sin esta regla los tickets de las otras paginas seguirian
   a la vista. */
.sol-historial[hidden] {
    display: none;
}

.sol-historial:hover,
.sol-historial:focus {
    text-decoration: none;
    opacity: 0.85;
}

.sol-historial-linea {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sol-historial-ticket {
    font-size: 13px;
    font-weight: 600;
}

.sol-historial-fecha {
    font-size: 11.5px;
    opacity: 0.8;
    white-space: nowrap;
}

/* Los iconos heredan el color de la alerta, que ya es el del estado: darles uno
   propio pondria dos colores distintos dentro de la misma pastilla. */
.sol-historial-ticket i,
.sol-historial-fecha i {
    margin-right: 5px;
    opacity: 0.75;
}

.sol-historial-materia {
    display: block;
    margin-top: 1px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}

/* Extracto de la descripcion: mas tenue y mas chico que la materia, para que la
   pastilla siga leyendose de arriba hacia abajo por importancia (numero,
   materia, de que se trataba) y no como tres lineas del mismo peso. */
.sol-historial-extracto {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.4;
    opacity: 0.75;
}

.sol-historial-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.sol-historial-pagina {
    font-size: 12px;
    color: #8392a5;
    white-space: nowrap;
}

/* Paso actual: azul de marca, en negrita, porque es lo unico que hay que mirar. */
.sol-pasos .step-item.active .step-number {
    background-color: var(--sol-azul);
    border-color: var(--sol-azul);
    color: #fff;
}

.sol-pasos .step-item.active .step-title {
    color: var(--sol-azul);
    font-weight: 600;
}

/* Pasos ya cumplidos: verde, discretos. Ya no requieren atencion. */
.sol-pasos .step-item.complete .step-number {
    background-color: #10b759;
    border-color: #10b759;
    color: #fff;
}

.sol-pasos .step-item.complete .step-title {
    color: #596882;
}

/* Pendientes: apagados, sin sugerir que se pueda hacer clic. */
.sol-pasos .step-item.disabled .step-title {
    color: #a5b0c1;
}

.sol-pasos .step-item.disabled .step-link {
    cursor: default;
}

/* En pantallas chicas los cuatro titulos no caben en una linea. */
@media (max-width: 767px) {
    .sol-pasos {
        padding: 14px 16px 10px;
    }
    .sol-pasos .step-title {
        font-size: 11px;
    }
}

/* --- Columnas de Bootstrap usadas sin fila --------------------------------
   En 44 vistas el contenido de una tarjeta esta envuelto en una columna suelta:

       <div class="card-body">
         <div class="col-sm-12 pd-t-20">   <-- sin un .row alrededor

   Una columna de Bootstrap trae padding lateral de 15px, pensado para que el
   .row lo cancele con sus margenes negativos. Sin la fila, ese padding se suma
   al de .card-body (15px mas) y la tabla pierde 60px de ancho, lo que adelanta
   la aparicion de la barra horizontal.

   Se anula el padding solo cuando la columna es hija directa de .card-body, que
   es justamente el caso mal armado: una columna dentro de un .row no se toca.
   ------------------------------------------------------------------------ */
.card-body > [class^="col-"],
.card-body > [class*=" col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* --- Badges de estado ----------------------------------------------------
   Con texto blanco, dos de los fondos no alcanzan el contraste minimo de WCAG
   AA (4.5:1 para texto chico):

       warning #ffc107   blanco 1.63:1   oscuro 9.46:1
       success #10b759   blanco 2.64:1   oscuro 5.83:1
       danger  #dc3545   blanco 4.53:1   (blanco esta bien)
       primary #0168fa   blanco 4.81:1   (blanco esta bien)

   Los dos que fallan pasan a texto oscuro. No se cambian los colores de fondo
   porque son los del template y se usan en botones y alertas.
   ------------------------------------------------------------------------ */
.badge-warning,
.badge-success {
    color: #1b2e4b;
}

/* Boton de ver detalle. */
.sol-ver {
    color: var(--sol-azul);
    display: inline-block;
    padding: 2px 4px;
    line-height: 1;
}

.sol-ver:hover,
.sol-ver:focus {
    color: var(--sol-cian);
}

/* Resaltar la fila bajo el puntero ayuda a no perder el renglon en tablas
   anchas, que es justo donde se equivoca la vista al leer de izquierda a
   derecha. */
.table-striped tbody tr:hover > td {
    background-color: rgba(0, 173, 203, .08);
}

/* La cabecera la pinta una regla mas especifica de DashForge
   (table.dataTable thead th), asi que hay que igualarla para que gane la
   version clara. */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead .thead-info th {
    background-color: #f4f6fa;
    color: #4a5c78;
}

/* La columna por la que esta ordenada la tabla lleva un tinte de marca: tiene
   que distinguirse de las demas sin gritar. DashForge usaba un gris que, con la
   cabecera ya clara, no se notaba. */
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-color: #e2f3f8;
    color: var(--sol-azul);
}

/* Paginacion de DataTables con el color de marca. Lleva !important solo en
   color porque DataTables tambien lo usa; el gradiente se anula redefiniendo
   la propiedad background completa. */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:focus {
    color: #fff !important;
    background: var(--sol-azul);
    border: 1px solid var(--sol-azul);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--sol-azul) !important;
    background: rgba(1, 84, 162, .08);
    border: 1px solid transparent;
}

/* --- Marca en el encabezado --------------------------------------------- */

.aside-logo img,
.navbar-brand img {
    max-height: 34px;
    width: auto;
}

/* ==========================================================================
   Ficha de ticket
   ========================================================================== */

/* Acciones del encabezado. Con varios botones no caben en una linea en
   pantallas chicas, asi que envuelven y el encabezado crece: la altura de 52px
   es un minimo, no un tope. */
.sol-acciones-encabezado {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* Los cuatro datos de cabecera: estado y vencimientos. Van en cajas y no en
   filas de texto porque son lo primero que se mira al abrir un ticket. */
.sol-tile {
    height: 100%;
    padding: 12px 14px;
    background-color: #f7f9fc;
    border: 1px solid #e5e9f2;
    /* El borde izquierdo mide 3px tambien sin acento de color: si solo lo
       engrosaran las variantes, las cajas con estado quedarian 2px corridas
       respecto a las de fecha y la fila perderia la linea. */
    border-left: 3px solid #e5e9f2;
    border-radius: 6px;
}

/* El acento va en el borde izquierdo y no en el fondo de la caja: el color
   dice cual es el estado sin convertir la franja superior en un semaforo de
   cuatro bloques. El fondo se mantiene neutro en todas para que las cuatro se
   lean como una misma fila. */
.sol-tile-warning {
    border-left: 3px solid #ffc107;
}

.sol-tile-danger {
    border-left: 3px solid #dc3545;
}

.sol-tile-success {
    border-left: 3px solid #10b759;
}

.sol-tile-primary {
    border-left: 3px solid var(--sol-azul);
}

.sol-tile-secondary {
    border-left: 3px solid #b9c2d0;
}

.sol-tile-rotulo {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8392a5;
}

.sol-tile-rotulo i {
    margin-right: 6px;
    color: #b9c2d0;
}

/* El icono toma el color del acento: repite la señal en el lado donde esta
   mirando el ojo cuando lee el rotulo, sin agregar un elemento mas. */
.sol-tile-warning .sol-tile-rotulo i {
    color: #fd7e14;
}

.sol-tile-danger .sol-tile-rotulo i {
    color: #dc3545;
}

.sol-tile-success .sol-tile-rotulo i {
    color: #10b759;
}

.sol-tile-primary .sol-tile-rotulo i {
    color: var(--sol-azul);
}

/* Cuanto falta para vencer. Va bajo la fecha y en el color de la urgencia: es
   la lectura que uno hace de cabeza al ver una fecha, resuelta de antemano. */
.sol-tile-nota {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 500;
    color: #8392a5;
}

.sol-tile-valor {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #1b2e4b;
}

/* Titulo de seccion dentro de la ficha.
   La linea divisoria lleva un tramo corto del azul de marca a la izquierda, no
   el ancho completo: tres lineas azules enteras cortan la pantalla en franjas y
   compiten entre si. El tramo marca donde empieza la seccion y deja el resto
   neutro, que es lo que hace que el ojo lo lea como un titulo y no como una
   division. El icono acompaña al rotulo, tambien en azul: da el punto de color
   donde la vista lo necesita y hace la seccion reconocible de un vistazo. */
.sol-seccion {
    position: relative;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e5e9f2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--sol-azul);
}

.sol-seccion::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 32px;
    height: 2px;
    background-color: var(--sol-azul);
}

.sol-seccion i {
    margin-right: 7px;
    color: var(--sol-cian);
}

/* Rotulo arriba y chico, dato abajo y legible. El formato anterior era
   "<b>Etiqueta:</b> valor<br>", que mezcla las dos cosas en una linea y obliga
   a leerlas enteras para encontrar un dato. */
.sol-datos {
    margin-bottom: 0;
}

.sol-datos dt {
    font-size: 11px;
    font-weight: 400;
    color: #8392a5;
}

.sol-datos dd {
    margin-bottom: 12px;
    font-size: 14px;
    color: #1b2e4b;
}

/* Correos y direcciones largas: se parten en vez de estirar la columna. */
.sol-dato-largo {
    word-break: break-word;
}

.sol-bloque {
    padding: 16px 18px;
    background-color: #f7f9fc;
    border: 1px solid #e5e9f2;
    border-radius: 6px;
    font-size: 14px;
    color: #4a5568;
}

/* Las acciones del ticket, separadas del contenido por una linea. */
.sol-barra-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #e5e9f2;
}

/* Tabla de la bitacora. La anterior usaba table-striped con letra de 10px y una
   cabecera de color: se leia como un volcado de depuracion. Aqui la cabecera es
   un rotulo tenue, las filas respiran y el color queda solo en los badges. */
.sol-tabla thead th {
    padding: 12px 20px;
    border-top: 0;
    border-bottom: 1px solid #e5e9f2;
    background-color: #f7f9fc;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8392a5;
    white-space: nowrap;
}

.sol-tabla tbody td {
    padding: 14px 20px;
    border-top: 1px solid #f0f2f7;
    font-size: 13px;
    vertical-align: middle;
}

.sol-tabla tbody tr:first-child td {
    border-top: 0;
}

.sol-tabla tbody tr:hover {
    background-color: #fafbfd;
}

/* ==========================================================================
   Menu lateral
   ========================================================================== */

/* El aside y la barra superior son los dos blancos, asi que sin una linea que
   los separe se leen como una sola superficie y el boton de menu queda flotando
   en tierra de nadie.

   El template si trae ese borde (dashforge.css se lo pone a .aside-header y a
   .aside-body); lo que lo borro fue el skin, que dejo border-right-color en
   transparent. Eso tenia sentido cuando el aside era oscuro y el contraste lo
   daba el fondo: sobre blanco, no queda nada. Aqui se repone el color del
   propio template. */
.aside-header,
.aside-body {
    border-right-color: rgba(72, 94, 144, 0.16);
}

/* Por lo mismo, el skin dejo el boton de menu en blanco a media opacidad:
   invisible sobre el aside claro. Vuelve al gris del template, que oscurece al
   pasar el mouse. */
.aside-header .burger-menu {
    color: #8392a5;
}

.aside-header .burger-menu:hover,
.aside-header .burger-menu:focus {
    color: #1b2e4b;
}

/* Aviso de ticket duplicado
   --------------------------------------------------------------------------
   Va bajo el campo que lo provoca. Era un modal a pantalla completa con fondo
   estatico para decir algo que no impide seguir: tapaba el formulario y
   obligaba a responder antes de poder mirar lo que se estaba escribiendo. */
.sol-aviso-duplicado {
    margin-top: -6px;
    margin-bottom: 20px;
}

/* El display del .alert le gana al display:none de [hidden], igual que en las
   pastillas del historial. */
.sol-aviso-duplicado[hidden] {
    display: none;
}

.sol-aviso-duplicado-texto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
}

.sol-aviso-duplicado-texto > i {
    margin-top: 2px;
    font-size: 15px;
}

.sol-aviso-duplicado-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* ==========================================================================
   Formulario de ticket
   --------------------------------------------------------------------------
   El paso 3 de la atencion venia del desarrollo anterior y era el ultimo tramo
   que no hablaba el idioma del resto: rotulos en negrita seguidos de un asterisco
   rojo puesto como segundo <label>, radios nativos apilados en vertical, cada
   campo en su propia fila a lo ancho de la tarjeta, y la tabla de adjuntos con la
   cabecera cian a todo color.

   Aqui el formulario se organiza igual que la ficha de la solicitud: secciones
   con .sol-seccion, rotulo chico arriba y control abajo, y el color reservado
   para lo que informa. La referencia es la pantalla de Respuesta Detalle.
   ========================================================================== */

/* Rotulo de campo. Mismo peso y color que .sol-datos dt: en la ficha el dato va
   bajo su rotulo, y aqui el control ocupa el lugar del dato. */
.sol-rotulo {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #8392a5;
}

/* El asterisco de obligatorio. Antes era un <label class="text-danger"> con el
   asterisco dentro, o sea un segundo rotulo asociado al mismo campo: los
   lectores de pantalla lo leian como otra etiqueta. Aqui es un span dentro del
   rotulo, y el rojo se baja a un tono que no compite con los mensajes de error
   reales, que son los unicos que deben alarmar. */
.sol-requerido {
    margin-left: 2px;
    color: #dc3545;
    font-weight: 600;
}

/* Separacion entre secciones del formulario. Mas aire que entre campos: agrupa
   sin necesidad de dibujar cajas dentro de la tarjeta. */
.sol-form-seccion {
    margin-bottom: 26px;
}

/* --- Selector de categoria ----------------------------------------------
   Tres opciones excluyentes que se eligen siempre, una sola vez y al principio:
   son el primer filtro del ticket y definen que areas y tipos se ofrecen mas
   abajo. Como radios apilados ocupaban tres lineas para decir tres palabras y
   no se distinguian del resto del formulario.

   Van como tarjetas en fila: se ve de un golpe cual esta elegida y cuales son
   las alternativas, que es justo lo que uno necesita saber de un campo
   excluyente. El input sigue siendo un radio de verdad (no un div con un
   click): conserva el teclado, el grupo por name y los handlers que ya existen.
   ------------------------------------------------------------------------ */

.sol-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sol-opcion {
    position: relative;
    flex: 1 1 140px;
    min-width: 140px;
}

/* El radio no se esconde con display:none ni visibility:hidden: eso lo saca del
   orden de tabulacion y deja el grupo inalcanzable con el teclado. Se deja
   transparente y encima de su tarjeta. */
.sol-opcion-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.sol-opcion-marco {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    margin-bottom: 0;
    padding: 12px 14px;
    background-color: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.sol-opcion-marco i {
    font-size: 15px;
    color: #b9c2d0;
    transition: color .15s ease;
}

.sol-opcion-input:hover + .sol-opcion-marco {
    border-color: var(--sol-cian);
}

/* La elegida se pinta con el azul de marca: fondo muy claro, borde y texto
   azules. Es el unico estado que lleva color, asi que no hay que compararlas
   entre si para saber cual esta activa. */
.sol-opcion-input:checked + .sol-opcion-marco {
    background-color: #f2f8fd;
    border-color: var(--sol-azul);
    color: var(--sol-azul);
    font-weight: 600;
}

.sol-opcion-input:checked + .sol-opcion-marco i {
    color: var(--sol-azul);
}

/* Foco de teclado. Va en la tarjeta porque el input es invisible: sin esto,
   quien tabula no sabe donde esta parado. */
.sol-opcion-input:focus + .sol-opcion-marco {
    border-color: var(--sol-azul);
    box-shadow: 0 0 0 .2rem rgba(1, 84, 162, .2);
}

/* --- Adjuntos ------------------------------------------------------------
   La zona de archivos va sobre fondo tenue, como .sol-bloque: es un paso
   opcional dentro del formulario, y el fondo lo separa de los campos
   obligatorios sin tener que rotularlo como "opcional" en cada linea.
   ------------------------------------------------------------------------ */

.sol-adjuntos {
    padding: 16px 18px;
    background-color: #f7f9fc;
    border: 1px solid #e5e9f2;
    border-radius: 6px;
}

.sol-adjuntos .custom-file-label {
    border-color: #e5e9f2;
    color: #8392a5;
    font-size: 13.5px;
    cursor: pointer;
}

/* El texto del boton lo pone el pseudoelemento, no el HTML: Bootstrap trae
   "Browse" en ingles. La vista lo resolvia con una regla #file_text::after
   escrita en un <style> dentro del propio archivo; vive aqui, que es donde va
   la personalizacion. */
.sol-adjuntos .custom-file-label::after {
    content: "Seleccionar";
    background-color: #fff;
    border-left: 1px solid #e5e9f2;
    color: #4a5568;
    cursor: pointer;
}

/* La tabla de adjuntos usa .sol-tabla, igual que la bitacora del ticket. Aqui
   solo se le saca el margen de mas y se le pone el fondo blanco, porque va
   dentro del bloque tenue. */
.sol-adjuntos-tabla {
    margin-top: 14px;
    margin-bottom: 0;
    background-color: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 6px;
    overflow: hidden;
}

.sol-adjuntos-tabla th:last-child,
.sol-adjuntos-tabla td:last-child:not([colspan]) {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Estado vacio. Antes decia "No se han subido archivos" en una fila centrada
   con el mismo peso que tendria un archivo real, asi que a primera vista
   parecia que habia uno. */
.sol-vacio {
    color: #8392a5;
    font-size: 13px;
    text-align: center;
}

.sol-vacio i {
    margin-right: 6px;
    color: #b9c2d0;
}

/* Contador de caracteres de la descripcion. */
.sol-contador {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: #8392a5;
    text-align: right;
}

/* ==========================================================================
   Avisos (toast)
   --------------------------------------------------------------------------
   Los dibuja solutoResponse() con el componente toast de Bootstrap, que es el
   que trae DashForge. Antes los hacia SweetAlert, una libreria de dialogos
   modales puesta a hacer de toast: llegaba con su tipografia, su circulo de
   icono y su paleta, asi que el aviso no se parecia a ninguna otra cosa de la
   aplicacion.

   El acento del estado va en el borde izquierdo, igual que en .sol-tile: es la
   misma idea (una caja neutra con una señal de color al costado) aplicada al
   aviso, de modo que verde, rojo y amarillo digan aqui lo mismo que dicen en la
   ficha del ticket.
   ========================================================================== */

/* El ancho es fijo, no ajustado al contenido.
   Con solo max-width la zona se encogia al texto de cada aviso, asi que
   "Archivo cargado" salia angosto y "Adjunto eliminado correctamente" ancho:
   dos avisos seguidos se veian como dos componentes distintos, y el que llegaba
   despues movia el borde de sitio. Con un ancho unico todos ocupan la misma
   caja y solo cambia el alto, que es lo que de verdad depende del mensaje. */
.sol-toast-zona {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 360px;
    /* En una ventana angosta 360px se sale de la pantalla: ahi manda el ancho
       util. */
    max-width: calc(100vw - 40px);
}

/* En un telefono el aviso ocupa el ancho util: a 380px fijos se sale de la
   pantalla y el texto queda cortado. */
@media (max-width: 480px) {
    .sol-toast-zona {
        top: 66px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}

.sol-toast.toast {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    border: 1px solid #e5e9f2;
    border-left: 3px solid #b9c2d0;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(27, 46, 75, .13);
}

.sol-toast-cabecera {
    align-items: center;
    padding: 9px 12px;
    background-color: transparent;
    border-bottom: 1px solid #f0f2f7;
}

.sol-toast-icono {
    margin-right: 8px;
    font-size: 14px;
    color: #b9c2d0;
}

.sol-toast-titulo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8392a5;
}

.sol-toast-cuerpo {
    padding: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4a5568;
}

/* El acento del estado: borde izquierdo, icono y rotulo. El fondo se mantiene
   blanco en los cuatro casos para que un aviso de exito no grite mas que uno
   de error solo por tener mas superficie de color. */
.sol-toast.sol-toast-success {
    border-left-color: #10b759;
}

.sol-toast-success .sol-toast-icono,
.sol-toast-success .sol-toast-titulo {
    color: #0b8c44;
}

.sol-toast.sol-toast-error {
    border-left-color: #dc3545;
}

.sol-toast-error .sol-toast-icono,
.sol-toast-error .sol-toast-titulo {
    color: #c62232;
}

.sol-toast.sol-toast-warning {
    border-left-color: #ffc107;
}

.sol-toast-warning .sol-toast-icono,
.sol-toast-warning .sol-toast-titulo {
    color: #b07d00;
}

.sol-toast.sol-toast-info {
    border-left-color: var(--sol-azul);
}

.sol-toast-info .sol-toast-icono,
.sol-toast-info .sol-toast-titulo {
    color: var(--sol-azul);
}

.sol-toast .close {
    font-size: 18px;
    /* 400 y no 300: el grosor Light no se usa en ninguna otra parte, y pedirlo
       solo para el aspa obliga a descargar una cara completa de IBM Plex la
       primera vez que aparece un aviso. */
    font-weight: 400;
    color: #97a3b9;
    opacity: 1;
}

.sol-toast .close:hover {
    color: #4a5568;
}

/* --- Documentos en la ficha del ticket -----------------------------------
   Los adjuntos pasaron a ser la cuarta ficha de la fila de datos. Antes eran
   una caja aparte, abajo y al costado de la descripcion; ahi quedaban lejos del
   resto de los datos del ticket y obligaban a la descripcion a leerse en dos
   tercios del ancho.
   ------------------------------------------------------------------------ */

.sol-documentos-grupo {
    margin-bottom: 12px;
}

/* "De termino" distingue los adjuntos del cierre de los del ingreso. Es un
   subrotulo dentro de la ficha, no otra seccion: por eso no lleva la linea ni
   el tramo azul de .sol-seccion. */
.sol-documentos-rotulo {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #8392a5;
}

/* Las acciones se apilan: en una columna de un cuarto del ancho, dos botones
   en linea se parten a la mitad de la palabra. */
.sol-documentos-acciones {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
}

/* ==========================================================================
   Dialogos de SweetAlert
   --------------------------------------------------------------------------
   SweetAlert si es la herramienta adecuada para un dialogo modal: pide una
   decision y no deja seguir hasta obtenerla. Lo que se ajusta es el aspecto,
   que venia con la tipografia, los tamanos y la paleta de la libreria.

   Las reglas van sobre las clases propias de SweetAlert y no sobre una clase
   nuestra, a proposito: en la aplicacion hay 26 llamadas sueltas a Swal.fire,
   escritas cada una por su lado, y ninguna iba a recibir el estilo si dependia
   de que alguien se acordara de agregar una clase. Asi todas lo heredan.

   El cambio mas visible es el icono: era un circulo de 80px, mas grande que la
   pregunta que lo acompanaba. Una confirmacion no es una alarma; el icono
   acompana, no encabeza.
   ========================================================================== */

.swal2-popup {
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 26px 28px 22px;
    border: 1px solid #e5e9f2;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(27, 46, 75, .18);
    font-family: inherit;
}

/* Un dialogo que pide una decision va al centro. Doce llamadas traen
   position: 'top-end', que es una posicion de aviso: en la esquina, el dialogo
   competia con los toasts, que salen justo ahi, y ademas quedaba lejos de lo
   que uno estaba mirando. El !important es para ganarle a la clase que
   SweetAlert le pone al contenedor segun esa opcion. */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top,
.swal2-container.swal2-bottom-end,
.swal2-container.swal2-bottom-start,
.swal2-container.swal2-bottom {
    align-items: center !important;
    justify-content: center !important;
}

.swal2-popup .swal2-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border-width: 2px;
}

.swal2-popup .swal2-icon .swal2-icon-content {
    font-size: 26px;
}

/* El ambar de la libreria (#f8bb86) no es el de la paleta. Se usa el mismo
   amarillo que marca "atencion" en las cajas de la ficha y en los avisos, para
   que la señal sea una sola en toda la aplicacion. */
.swal2-popup .swal2-icon.swal2-warning {
    border-color: #ffc107;
    color: #ffc107;
}

.swal2-popup .swal2-icon.swal2-error {
    border-color: #dc3545;
    color: #dc3545;
}

.swal2-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: #dc3545;
}

.swal2-popup .swal2-icon.swal2-success {
    border-color: #10b759;
    color: #10b759;
}

.swal2-popup .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #10b759;
}

.swal2-popup .swal2-icon.swal2-success [class^="swal2-success-ring"] {
    border-color: rgba(16, 183, 89, .3);
}

.swal2-popup .swal2-icon.swal2-info,
.swal2-popup .swal2-icon.swal2-question {
    border-color: var(--sol-azul);
    color: var(--sol-azul);
}

.swal2-popup .swal2-title,
.swal2-popup .sol-dialogo-titulo {
    padding: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: #1b2e4b;
}

.swal2-popup .swal2-html-container,
.swal2-popup .sol-dialogo-texto {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #8392a5;
}

/* Las acciones se separan del texto con una linea, igual que
   .sol-barra-acciones en la ficha del ticket. */
.swal2-popup .swal2-actions,
.swal2-popup .sol-dialogo-acciones {
    gap: 8px;
    width: 100%;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid #e5e9f2;
}

/* SweetAlert le pone margenes propios a cada boton; con buttonsStyling apagado
   siguen ahi y descuadran la separacion que ya da el gap. */
.swal2-popup .swal2-actions .btn,
.swal2-popup .sol-dialogo-acciones .btn {
    margin: 0;
}

/* --- Botones de las llamadas sueltas -------------------------------------
   solutoConfirm() apaga buttonsStyling y usa los botones del template, asi que
   no pasa por aqui. Las llamadas sueltas si: llegan con .swal2-styled y, seis
   de ellas, con un color puesto en confirmButtonColor, que SweetAlert escribe
   como estilo en linea. Por eso el !important: es la unica forma de ganarle a
   un estilo en linea sin editar las 26 llamadas una por una.
   ------------------------------------------------------------------------ */

.swal2-popup .swal2-styled {
    margin: 0;
    padding: .375rem .75rem;
    border-radius: .25rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: none;
}

.swal2-popup .swal2-styled:focus {
    box-shadow: 0 0 0 .2rem rgba(1, 84, 162, .25);
}

.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--sol-azul) !important;
    border: 1px solid var(--sol-azul) !important;
    color: #fff !important;
}

.swal2-popup .swal2-styled.swal2-confirm:hover {
    background-color: var(--sol-azul-oscuro) !important;
    border-color: var(--sol-azul-oscuro) !important;
}

/* Cancelar es la salida segura, no una accion destructiva: va neutro. En rojo
   —como lo dejaban cancelButtonColor: '#d33'— la señal de peligro apuntaba
   justo al boton que no hace nada. */
.swal2-popup .swal2-styled.swal2-cancel {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    color: #4a5568 !important;
}

.swal2-popup .swal2-styled.swal2-cancel:hover {
    background-color: #f7f9fc !important;
    color: #1b2e4b !important;
}

/* ==========================================================================
   Velo de carga
   --------------------------------------------------------------------------
   Lo dibuja bloqueoPantalla() en soluto.js, que explica el porque del contador
   y del retardo. Aqui va solo el aspecto.

   El simbolo es el sigma del logo, en SVG y animado con CSS. El anterior era un
   GIF de 300px: una peticion HTTP mas justo en el momento en que se esta
   esperando al servidor, un mapa de bits que se pixela al escalar, y una
   animacion que se congela cuando el hilo principal esta ocupado. El arco gira
   con transform, que corre en el compositor y sigue moviendose aunque el hilo
   este trabajando.
   ========================================================================== */

.sol-velo {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(27, 46, 75, .55);
    opacity: 0;
    transition: opacity .18s ease;
}

/* El desenfoque separa el velo del contenido sin tener que oscurecerlo tanto.
   El fondo anterior era #222 al 80%: casi opaco, y la pantalla desaparecia
   entera en vez de quedar atenuada. */
@supports (backdrop-filter: blur(2px)) {
    .sol-velo {
        backdrop-filter: blur(2px);
    }
}

.sol-velo.visible {
    opacity: 1;
}

.sol-velo[hidden] {
    display: none;
}

/* Mientras el velo esta arriba no se desplaza el fondo. Va en una clase y no en
   un estilo en linea sobre body: el codigo anterior devolvia overflow-y a
   "unset" al cerrar, pisando cualquier valor que la pagina tuviera puesto. */
body.sol-velo-abierto {
    overflow: hidden;
}

.sol-velo-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.sol-velo-texto {
    margin: 0;
    max-width: 280px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .3px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
}

.sol-velo-texto[hidden] {
    display: none;
}

/* --- El simbolo ---------------------------------------------------------- */

.sol-sigma {
    width: 76px;
    height: 76px;
}

/* Aro de fondo: marca el recorrido completo para que el arco se lea como algo
   que avanza sobre una pista y no como una raya suelta. */
.sol-sigma-aro {
    fill: none;
    stroke: rgba(255, 255, 255, .22);
    stroke-width: 5;
}

.sol-sigma-arco {
    fill: none;
    stroke: var(--sol-cian);
    stroke-width: 5;
    stroke-linecap: round;
    /* 60 de trazo sobre una circunferencia de ~214: algo menos de un tercio. */
    stroke-dasharray: 60 160;
    transform-origin: 50% 50%;
    animation: sol-sigma-girar 1.1s linear infinite;
}

/* El glifo se dibuja, se sostiene un momento y se borra. El ciclo es mas largo
   que el del arco a proposito: dos ritmos distintos se leen como una sola pieza
   con vida, y dos iguales se leen como un parpadeo. */
.sol-sigma-glifo {
    fill: none;
    stroke: #fff;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 96;
    stroke-dashoffset: 96;
    animation: sol-sigma-trazar 2s ease-in-out infinite;
}

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

@keyframes sol-sigma-trazar {
    0% {
        stroke-dashoffset: 96;
    }
    45%, 62% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -96;
    }
}

/* Quien pidio menos animacion en su sistema recibe el simbolo quieto y
   completo: el velo sigue diciendo que hay que esperar, sin movimiento. */
@media (prefers-reduced-motion: reduce) {
    .sol-sigma-arco {
        animation: none;
        stroke-dasharray: 214;
    }

    .sol-sigma-glifo {
        animation: none;
        stroke-dashoffset: 0;
    }

    .sol-velo {
        transition: none;
    }
}

/* --- Lista de documentos del ticket --------------------------------------
   Cada archivo es una fila con su nombre a la izquierda y el tacho a la
   derecha, en vez de la cadena "clip | tacho | nombre" separada por barras
   verticales que se leia como un volcado y ponia las acciones antes del dato.
   ------------------------------------------------------------------------ */

.sol-doc {
    padding: 4px 0;
    border-bottom: 1px solid #f0f2f7;
}

.sol-doc:last-child {
    border-bottom: 0;
}

.sol-doc-fila {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sol-doc-nombre {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
    font-size: 13px;
    color: #4a5568;
}

.sol-doc-nombre i {
    flex-shrink: 0;
    font-size: 12px;
    color: #b9c2d0;
}

/* El nombre lleva fecha y hora por delante, asi que se corta por el final y no
   estira la columna. */
.sol-doc-nombre span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sol-doc-nombre:hover {
    color: var(--sol-azul);
}

.sol-doc-nombre:hover i {
    color: var(--sol-cian);
}

/* El tacho se mantiene tenue hasta que se apunta la fila: es la accion
   destructiva de una lista, no lo que uno viene a hacer aqui. */
.sol-doc-borrar {
    flex-shrink: 0;
    padding: 4px 6px;
    background: none;
    border: 0;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    color: #b9c2d0;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.sol-doc-fila:hover .sol-doc-borrar {
    color: #8392a5;
}

.sol-doc-borrar:hover,
.sol-doc-borrar:focus {
    background-color: #fdecee;
    color: #dc3545;
    outline: none;
}

.sol-doc-borrar:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
}

/* --- Confirmacion en linea -----------------------------------------------
   Reemplaza al dialogo modal que se usaba para confirmar el borrado. Un modal
   centrado tapaba la lista donde estaba el archivo: preguntaba por "este
   adjunto" justo cuando "este" habia dejado de verse. Aqui la pregunta sale
   pegada al archivo y lo nombra.
   ------------------------------------------------------------------------ */

.sol-doc.confirmando {
    background-color: #fffdf5;
    border-bottom-color: transparent;
}

.sol-doc-confirmar {
    margin: 6px 0 4px;
    padding: 11px 13px;
    background-color: #fff9e6;
    border: 1px solid #ffe8a3;
    border-left: 3px solid #ffc107;
    border-radius: 6px;
}

.sol-doc-confirmar-texto {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b5518;
}

.sol-doc-confirmar-texto > i {
    margin-top: 2px;
    flex-shrink: 0;
    color: #b07d00;
}

/* El nombre del archivo puede ser largo; se parte en vez de estirar la caja. */
.sol-doc-confirmar-nombre {
    word-break: break-all;
    color: #4a3b0c;
}

.sol-doc-confirmar-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* Separador entre bloques de una misma tarjeta. El <hr> de Bootstrap trae un
   margen de 1rem arriba y abajo y el gris del template; aqui se le da el mismo
   color de linea que usan .sol-tile y .sol-seccion, para que todas las
   divisiones de la ficha sean la misma linea. */
.sol-divisor {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid #e5e9f2;
}

/* --- Subida de adjuntos en linea -----------------------------------------
   Reemplaza al modal de "Subir archivos". Un dialogo a pantalla completa para
   elegir un archivo y apretar un boton tapaba la lista de adjuntos, que es
   justo contra lo que uno mira para saber si el archivo ya estaba.
   ------------------------------------------------------------------------ */

.sol-subir {
    width: 100%;
    padding: 12px;
    background-color: #f7f9fc;
    border: 1px solid #e5e9f2;
    border-radius: 6px;
}

.sol-subir[hidden] {
    display: none;
}

.sol-subir .custom-file-label {
    border-color: #e5e9f2;
    font-size: 12.5px;
    color: #8392a5;
    cursor: pointer;
    /* Un nombre de archivo largo no puede estirar la columna. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 90px;
}

.sol-subir .custom-file-label::after {
    content: "Elegir";
    background-color: #fff;
    border-left: 1px solid #e5e9f2;
    color: #4a5568;
    cursor: pointer;
}

.sol-subir-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* El atributo hidden no alcanza a ocultar un boton: Bootstrap le pone
   display:inline-block a .btn, y una regla de autor le gana a la del navegador.
   Se repone aqui, que es lo que hace cualquiera al leer hidden en el marcado. */
.btn[hidden] {
    display: none;
}

/* --- Boton de copiar un dato ---------------------------------------------
   Va pegado al valor en la ficha. En reposo es solo el icono y muy tenue: hay
   uno por cada dato, y cinco botones con texto al lado de cinco valores
   competirian con los valores mismos. La palabra aparece al apuntarlo, que es
   cuando hace falta saber que hace.
   ------------------------------------------------------------------------ */

.sol-copiar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    padding: 2px 5px;
    vertical-align: middle;
    background: none;
    border: 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: #c5cdd9;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.sol-copiar i {
    font-size: 12px;
}

/* La palabra solo cuando se apunta o se llega por teclado. */
.sol-copiar-texto {
    display: none;
}

.sol-copiar:hover,
.sol-copiar:focus {
    background-color: #eef3f9;
    color: var(--sol-azul);
    outline: none;
}

.sol-copiar:hover .sol-copiar-texto,
.sol-copiar:focus .sol-copiar-texto,
.sol-copiar.copiado .sol-copiar-texto {
    display: inline;
}

.sol-copiar:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(1, 84, 162, .2);
}

/* Confirmacion: el boton mismo dice que ya esta. La señal aparece donde estaba
   mirando la persona, que es el dato que acaba de copiar, y no en una esquina
   de la pantalla. */
.sol-copiar.copiado,
.sol-copiar.copiado:hover,
.sol-copiar.copiado:focus {
    background-color: #e6f7ee;
    color: #0b8c44;
}

.sol-copiar.copiado i::before {
    /* fa-check */
    content: "\f00c";
    font-weight: 900;
}

/* En un dato que ocupa varias lineas (un correo largo, una direccion) el boton
   no debe quedar solo en un renglon propio. */
.sol-datos dd {
    position: relative;
}

/* ==========================================================================
   Modales
   --------------------------------------------------------------------------
   Mismo lenguaje que las tarjetas de la ficha: encabezado de 52px con el
   titulo en azul de marca, cuerpo con aire, y las acciones separadas por una
   linea al pie.

   Va sobre las clases de Bootstrap y no sobre una clase nuestra porque en la
   aplicacion hay 42 modales escritos en momentos distintos. Con una clase
   propia habria que visitarlos uno por uno y el proximo que alguien escriba
   volveria a quedar fuera.
   ========================================================================== */

.modal-content {
    border: 1px solid #e5e9f2;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(27, 46, 75, .18);
}

.modal-header {
    align-items: center;
    min-height: var(--sol-alto-encabezado);
    padding: 0 20px;
    border-bottom: 1px solid #e5e9f2;
}

/* El titulo del modal es el mismo h6 azul que encabeza una tarjeta. Venia como
   h4, que en el template mide 21px: mas grande que cualquier titulo de la
   pantalla que lo abrio. */
.modal-title {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sol-azul);
}

.modal-title i {
    margin-right: 7px;
    font-size: 14px;
    color: var(--sol-cian);
}

.modal-header .close {
    padding: 0;
    margin: 0 0 0 auto;
    font-size: 22px;
    /* Ver la nota de .sol-toast .close: el 300 costaba una fuente entera. */
    font-weight: 400;
    line-height: 1;
    color: #97a3b9;
    opacity: 1;
}

.modal-header .close:hover {
    color: #4a5568;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid #e5e9f2;
}

/* Bootstrap le pone margen a cada boton del pie; con el gap puesto, se suman. */
.modal-footer > .btn {
    margin: 0;
}

/* Nota de ayuda bajo un rotulo. Antes eran <h6 class="text-danger">: rojo para
   una indicacion que no es un error ni una advertencia, solo explica que
   escribir. El rojo se reserva para lo que de verdad va mal. */
.sol-nota {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #8392a5;
}

.sol-nota > i {
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--sol-cian);
}

/* --- Badges de estado ----------------------------------------------------
   El verde lleno con texto oscuro cumple el minimo de WCAG (5,2:1) pero se lee
   mal igual: a 11px y en negrita, un azul muy oscuro sobre un verde saturado
   tiene poca separacion perceptual, las dos superficies "pesan" parecido y las
   letras se empastan. El numero pasaba; leerlo costaba.

   Aqui el estado va como pastilla de tinte claro con el texto en el mismo tono
   pero oscuro. El contraste sube a 7,2:1 y, sobre todo, el texto deja de pelear
   con el fondo. Es el mismo tratamiento que ya tienen los avisos y el boton de
   copiar, asi que el verde de "terminado" se ve igual en toda la aplicacion.

   Solo afecta a los estados, que llevan su propia clase desde getEstadoTarea().
   Los badges sueltos no se tocan: el "Urgente" del encabezado es un badge-danger
   lleno y ahi el rojo fuerte es lo correcto, porque es una alarma y no un
   estado que se repite en cada fila.
   ------------------------------------------------------------------------ */

.badge.sol-badge-success,
.badge.sol-badge-warning,
.badge.sol-badge-danger,
.badge.sol-badge-primary,
.badge.sol-badge-secondary,
.badge.sol-badge-info,
.badge.sol-badge-light {
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

.badge.sol-badge-success {
    background-color: #e6f7ee;
    color: #0a5c2e;
}

.badge.sol-badge-warning {
    background-color: #fff4d6;
    color: #6b4e00;
}

.badge.sol-badge-danger {
    background-color: #fdecee;
    color: #a5182a;
}

.badge.sol-badge-primary {
    background-color: #e8f1fb;
    color: #0a4380;
}

.badge.sol-badge-secondary {
    background-color: #eef1f6;
    color: #4a5568;
}

/* El cian del template con texto blanco daba 2,38:1, peor todavia que el verde:
   lo usan los avisos de correo de la bitacora, que son la mayoria de las filas. */
.badge.sol-badge-info {
    background-color: #e0f6fa;
    color: #075c6b;
}

.badge.sol-badge-light {
    background-color: #f4f5f8;
    color: #1c273c;
}

/* --- Select con icono ----------------------------------------------------
   El icono va en un recuadro pegado al select, no dentro del <option>.

   Un <option> no admite marcado, asi que quien quiere un icono ahi termina
   metiendo el caracter suelto: era lo que habia, y esos simbolos no estan en
   ningun subconjunto de la tipografia, de modo que abrir el modal obligaba a
   descargar la fuente completa. El retraso y el parpadeo que eso producia se
   leian como una falla de la pantalla.
   ------------------------------------------------------------------------ */

.sol-select-icono .input-group-text {
    padding: 0 12px;
    background-color: #f7f9fc;
    border-color: #ced4da;
    border-right: 0;
}

.sol-select-icono .input-group-text i {
    font-size: 14px;
    /* El ancho fijo evita que el select salte al cambiar de icono: el triangulo
       de aviso es mas ancho que el circulo de informacion. */
    width: 16px;
    text-align: center;
}

.sol-select-icono .form-control {
    border-left: 0;
}

/* Al enfocar el select, el recuadro del icono acompaña: si no, el borde se
   ilumina a medias y el conjunto se parte en dos. */
.sol-select-icono .form-control:focus {
    border-color: var(--sol-cian);
    box-shadow: none;
}

.sol-select-icono:focus-within .input-group-text {
    border-color: var(--sol-cian);
}

.sol-select-icono:focus-within {
    border-radius: .25rem;
    box-shadow: 0 0 0 .2rem rgba(0, 173, 203, .2);
}

/* --- Grupo de acciones sobre los documentos -------------------------------
   Los botones van pegados, como un solo conjunto: las tres cosas que se pueden
   hacer con los archivos del ticket. Sueltos y uno bajo el otro se leian como
   tres funciones sin relacion entre si.

   El grupo se envuelve si la columna es angosta, que es lo habitual: la ficha
   le da un cuarto del ancho. Bootstrap no deja envolver un .btn-group sin
   perder los bordes compartidos, asi que se redondean a mano las esquinas de
   los extremos de cada linea.
   ------------------------------------------------------------------------ */

.sol-grupo-documentos {
    flex-wrap: wrap;
}

.sol-grupo-documentos > .btn {
    flex: 0 1 auto;
}

/* Un boton oculto no debe dejar su hueco ni su borde en el grupo. */
.sol-grupo-documentos > .btn[hidden] {
    display: none;
}

/* Al envolver, el primero y el ultimo de cada linea recuperan su esquina. */
.sol-grupo-documentos > .btn:first-child {
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem;
}

.sol-grupo-documentos > .btn:last-child {
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
}

/* --- Requisitos del sistema ----------------------------------------------
   El resumen va arriba y con color: lo que uno viene a saber al abrir esta
   pantalla es si falta algo, no la lista completa.
   ------------------------------------------------------------------------ */

.sol-requisitos-resumen {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid #e5e9f2;
    border-left: 3px solid #b9c2d0;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4a5568;
}

.sol-requisitos-resumen > i {
    margin-top: 2px;
    font-size: 18px;
}

.sol-requisitos-resumen strong {
    display: block;
    margin-bottom: 2px;
    color: #1b2e4b;
}

.sol-requisitos-resumen-ok {
    background-color: #f4fbf7;
    border-left-color: #10b759;
}

.sol-requisitos-resumen-ok > i {
    color: #0b8c44;
}

.sol-requisitos-resumen-error {
    background-color: #fdf5f6;
    border-left-color: #dc3545;
}

.sol-requisitos-resumen-error > i {
    color: #c62232;
}

/* La fila de un requisito obligatorio que falta se distingue del resto: es lo
   unico accionable de la tabla. */
.sol-requisito-falta td {
    background-color: #fdf5f6;
}

.sol-requisito-nombre {
    font-size: 13.5px;
    font-weight: 600;
    color: #1b2e4b;
}

/* La version, la ruta o el motivo: bajo el nombre y mas tenue, porque sirve
   para diagnosticar y no para identificar. */
.sol-requisito-detalle {
    margin-top: 2px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #8392a5;
    word-break: break-all;
}

/* ==========================================================================
   Contraste del menu lateral
   ==========================================================================
   Los skins que carga el layout (skin.qa / skin.prod) pintan los enlaces del
   menu con #8392a5 sobre el fondo blanco de .aside-body. Eso da 3.17:1, bajo
   el minimo de 4.5:1 que pide WCAG AA para texto normal.

   #64748b sobre blanco da 4.76:1 y se mantiene dentro de la misma familia de
   grises azulados del template, asi que el menu no cambia de caracter.

   Va aca y no en el skin porque los archivos del template se dejan tal como
   vienen; este hoja se carga despues y es la que lleva lo nuestro. */
.aside-body .aside-menu-link {
    color: #64748b;
}

.aside-body .aside-menu-link:hover,
.aside-body .aside-menu-link:focus {
    color: #1b2e4b;
}