/* Componentes reutilizables para vistas index - ANDERSON DANILO BETANCOURT - 2026-08-25 */

.siag-index-header {
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(31, 45, 61, .06);
    margin: 10px 0 14px;
    padding: 14px 14px 6px;
}

.siag-index-actions-bar {
    margin-bottom: 0;
    padding-bottom: 12px;
}

.siag-index-kpis {
    clear: both;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 0;
    padding-top: 0;
}

.siag-index-header .siag-index-kpis {
    padding-top: 4px;
}

.siag-index-kpis-compact {
    gap: 10px;
    margin-bottom: 0;
    padding-top: 0;
}

.siag-index-kpi {
    align-items: center;
    background: #fff;
    border: 1px solid currentColor;
    border-left-width: 4px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(31, 45, 61, .06);
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    min-height: 67px;
    padding: 10px 12px;
    transition: box-shadow .15s, transform .15s;
}

.siag-index-kpi:hover {
    box-shadow: 0 5px 14px rgba(31, 45, 61, .12);
    transform: translateY(-1px);
}

.siag-index-kpi-icon {
    align-items: center;
    display: flex;
    flex: 0 0 38px;
    font-weight: normal;
    height: 38px;
    justify-content: center;
    padding: 0;
    width: 38px !important;
}

.siag-index-kpi-icon:before {
    color: currentColor;
    font-size: 26px;
    font-weight: normal;
    width: auto;
}

.siag-index-kpi strong {
    display: block;
    font-size: 22px;
    line-height: 1.1;
}

.siag-index-kpi div {
    color: inherit;
}

.siag-index-kpi div span {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Tonos de KPI.
   El color de una tarjeta es informacion, no decoracion: una de alerta va en rojo
   solo cuando su valor es mayor que cero y se apaga a gris cuando es cero, para no
   gritar en un dia sin incidencias. El tono lo decide el backend junto al valor,
   para que el repintado por AJAX lo traiga. */
.siag-index-kpi-marca { color: var(--siag-brand, #4888be); }
.siag-index-kpi-alerta { color: #c1373f; }
.siag-index-kpi-aviso { color: #b07d1a; }
.siag-index-kpi-apagado { color: #c9d2dd; }

.siag-index-kpi-apagado .siag-index-kpi-icon:before,
.siag-index-kpi-apagado strong {
    color: #adb6c2;
}

.siag-index-kpi-marca strong,
.siag-index-kpi-alerta strong,
.siag-index-kpi-aviso strong {
    color: currentColor;
}

/* Las tarjetas comparten alto aunque una lleve barra o un dato de mas: el grid las
   estira y el contenido se centra. */
.siag-index-kpis-igualadas {
    align-items: stretch;
}

.siag-index-kpis-igualadas .siag-index-kpi {
    align-items: center;
}

.siag-index-kpi-cuerpo {
    min-width: 0;
    width: 100%;
}

.siag-index-kpi-cuerpo strong {
    white-space: nowrap;
}

.siag-index-kpi-cuerpo strong small {
    color: #adb6c2;
    font-size: 14px;
    font-weight: 600;
}

/* Barra de avance para el KPI que expresa una razon (atendidos / total). */
.siag-index-kpi-barra {
    background: #edf0f4;
    border-radius: 3px;
    height: 5px;
    margin-top: 6px;
    overflow: hidden;
}

.siag-index-kpi-barra > div {
    background: currentColor;
    border-radius: 3px;
    height: 5px;
    transition: width .25s;
}

/* KPI accionable: la tarjeta lleva al listado filtrado. El chevron avisa de que
   se puede pulsar. */
.siag-index-kpi-accionable {
    cursor: pointer;
}

.siag-index-kpi-accionable:hover,
.siag-index-kpi-accionable:focus {
    box-shadow: 0 5px 14px rgba(31, 45, 61, .16);
    outline: none;
    transform: translateY(-1px);
}

.siag-index-kpi-ir {
    color: currentColor;
    flex: 0 0 auto;
    margin-left: auto;
    opacity: .4;
    padding-left: 6px;
    top: 0;
    transition: opacity .15s;
}

.siag-index-kpi-accionable:hover .siag-index-kpi-ir,
.siag-index-kpi-accionable:focus .siag-index-kpi-ir {
    opacity: 1;
}

.siag-index-toolbar {
    align-items: end;
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 10px 12px;
}

.siag-index-toolbar-main {
    align-items: end;
    display: grid;
    grid-template-columns: 150px 130px 155px minmax(190px, 240px) 92px;
    gap: 10px;
    min-width: 0;
}

.siag-index-toolbar-title {
    align-items: center;
    align-self: center;
    border-right: 1px solid #e5ebf1;
    display: flex;
    gap: 10px;
    margin-right: 2px;
    padding-right: 12px;
}

.siag-index-toolbar-title > div {
    min-width: 0;
}

.siag-index-filter-icon {
    align-items: center;
    align-self: center;
    display: flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    padding: 0;
    width: 28px !important;
}

.siag-index-filter-icon:before {
    font-size: 18px;
    width: auto;
}

.siag-index-toolbar-title strong,
.siag-index-toolbar-title > div > span,
.siag-index-toolbar-field label,
.siag-index-toolbar-search label {
    display: block;
}

.siag-index-toolbar-title strong {
    font-size: 14px;
    line-height: 1.2;
}

.siag-index-toolbar-title > div > span {
    font-size: 11px;
    margin-top: 2px;
}

.siag-index-toolbar-field label,
.siag-index-toolbar-search label {
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 4px;
}

.siag-index-toolbar-field .form-control,
.siag-index-toolbar-search .form-control,
.siag-index-toolbar-field .select2-container .select2-choice,
.siag-index-toolbar-field .select2-container-multi .select2-choices {
    border-color: #cfd8e3;
    border-radius: 0;
    box-shadow: none;
    min-height: 34px;
}

.siag-index-toolbar-field .form-control,
.siag-index-toolbar-search .form-control {
    height: 34px;
}

.siag-index-toolbar-field .select2-container {
    width: 100% !important;
}

.siag-index-select {
    width: 100%;
}

.siag-index-toolbar-field .select2-container-multi .select2-choices {
    padding: 2px 6px;
}

.siag-index-toolbar-field .select2-container .select2-choice {
    line-height: 32px;
}

.siag-index-toolbar-field .select2-container-multi .select2-choices .select2-search-choice {
    margin-top: 2px;
}

.siag-index-toolbar-field .select2-container-multi .select2-choices .select2-search-field input {
    padding-top: 3px;
}

.siag-index-clear-filters {
    border-radius: 0;
    height: 34px;
    margin-left: 2px;
    width: 100%;
}

.siag-index .siag-index-clear-filters.siag-index-clear-filters-icon {
    justify-self: start;
    min-width: 30px;
    padding: 0;
    width: 30px !important;
}

.siag-index-toolbar-search {
    min-width: 0;
}

.siag-index-toolbar-search .input-group-addon {
    background: #f7f9fb;
    border-color: #cfd8e3;
    border-radius: 0;
    font-size: 13px;
    line-height: 1;
    padding: 0 10px;
    width: 34px;
}

.siag-index-toolbar-search .input-group-addon .glyphicon:before {
    font-size: 16px;
    width: auto;
}

.siag-index-state {
    border-radius: 12px;
    display: inline-block;
    font-size: 11px;
    min-width: 84px;
    padding: 6px 12px;
}

.siag-index-actions-cell {
    max-width: 240px;
    min-width: 230px;
    width: 230px;
}

.siag-index-actions-head {
    max-width: 240px;
    width: 230px !important;
}

.siag-index-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    max-width: 220px;
}

.siag-index .dataTables_filter {
    display: none;
}

/* Acciones en iconos sueltos.
   Los modelos concatenan los <a> sin separador, asi que los iconos salen pegados
   y se parten en dos lineas. La separacion se da aqui y no con espacios en el
   HTML: un nodo de texto no sobrevive a los redibujados de DataTables. */
.siag-index table.table > tbody > tr > td:last-child {
    white-space: nowrap;
}

.siag-index table.table > tbody > tr > td:last-child > a {
    display: inline-block;
    margin-right: 4px;
}

.siag-index table.table > tbody > tr > td:last-child > a:last-child {
    margin-right: 0;
}

/* El area de clic de un glyphicon suelto es minuscula; esto la sube sin
   convertirlo en boton. */
.siag-index table.table > tbody > tr > td:last-child > a .glyphicon,
.siag-index table.table > tbody > tr > td:last-child > a .fa {
    line-height: 20px;
    min-width: 14px;
    text-align: center;
}

.siag-index-table th,
.siag-index-table td {
    vertical-align: middle;
}

.siag-index-plan-name {
    display: block;
    line-height: 1.35;
}

.siag-index-plan-responsible {
    font-size: 11px;
    line-height: 1.25;
    margin-top: 4px;
}

.siag-index-plan-responsible .glyphicon {
    margin-right: 4px;
    width: auto !important;
}

.siag-index-plan-responsible .glyphicon:before {
    font-size: 11px;
    width: auto;
}

.siag-index-summary-cell {
    min-width: 170px;
}

.siag-index-summary-loading,
.siag-index-summary-error {
    font-size: 11px;
    font-style: italic;
}

.siag-index-summary-error {
    font-weight: bold;
}

.siag-index-row-summary {
    min-width: 160px;
}

.siag-index-row-summary-head {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 4px;
}

.siag-index-row-summary-head strong {
    font-size: 13px;
}

.siag-index-row-summary-head span,
.siag-index-row-summary small {
    display: block;
    font-size: 10px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.siag-index-row-summary-head span {
    min-width: 0;
}

.siag-index-row-progress {
    border-radius: 10px;
    height: 6px;
    margin-bottom: 0;
    overflow: hidden;
}

.siag-index-action-btn {
    min-width: 26px;
    padding-left: 7px;
    padding-right: 7px;
}

.siag-index-action-btn .glyphicon,
.siag-index-action-btn .fa {
    font-size: 16px;
}

@media (max-width: 1100px) {
    .siag-index .glyphicon,
    .siag-index .fa {
        width: auto !important;
    }

    .siag-index .glyphicon:before,
    .siag-index .fa:before {
        font-size: 14px;
        width: auto;
    }

    .siag-index .siag-index-kpi-icon {
        width: 38px !important;
    }

    .siag-index .siag-index-kpi-icon:before {
        font-size: 26px;
    }

    .siag-index .siag-index-filter-icon {
        width: 28px !important;
    }

    .siag-index .siag-index-toolbar-search .input-group-addon .glyphicon:before {
        font-size: 16px;
    }

}

@media (max-width: 1199px) {
    .siag-index-toolbar {
        grid-template-columns: 1fr;
    }

    .siag-index-toolbar-main {
        grid-template-columns: 150px 130px 155px minmax(190px, 1fr) 92px;
    }
}

@media (max-width: 767px) {
    .siag-index-header {
        padding: 12px 10px 4px;
    }

    .siag-index-actions-bar .btn {
        margin-bottom: 8px;
        width: 100%;
    }

    .siag-index-action-btn {
        height: 28px;
        width: 28px;
    }

    .siag-index-summary-cell {
        min-width: 118px;
    }

    .siag-index-row-summary {
        min-width: 110px;
    }

    .siag-index-row-summary-head {
        display: block;
    }

    .siag-index-toolbar-main {
        align-items: stretch;
        grid-template-columns: 1fr 1fr;
    }

    .siag-index-toolbar-title {
        border-right: 0;
        border-bottom: 1px solid #e5ebf1;
        grid-column: 1 / -1;
        padding-bottom: 8px;
        padding-right: 0;
    }

    .siag-index-toolbar-wide,
    .siag-index-clear-filters {
        grid-column: 1 / -1;
    }

    .siag-index-clear-filters-icon {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .siag-index-kpis {
        grid-template-columns: 1fr;
    }

    .siag-index-kpi {
        min-height: 60px;
        padding: 9px 10px;
    }

    .siag-index .siag-index-kpi-icon {
        flex-basis: 34px;
        height: 34px;
        width: 34px !important;
    }

    .siag-index .siag-index-kpi-icon:before {
        font-size: 23px;
    }

    .siag-index-kpi strong {
        font-size: 20px;
    }

    .siag-index-toolbar-main {
        grid-template-columns: 1fr;
    }

    .siag-index-toolbar-title,
    .siag-index-toolbar-wide,
    .siag-index-clear-filters {
        grid-column: auto;
    }
}

/* ---------------------------------------------------------------------------
   Control de periodo (daterangepicker) con los colores de la marca blanca.

   El plugin trae azules fijos (#357ebd el dia elegido, #08c el preset activo,
   #ebf4f8 el rango). Se sobreescriben con las variables que emite
   estiloMarcaTemplate(), para que el calendario no desentone con el dominio.

   La clase va repetida (.daterangepicker.daterangepicker) a proposito: esta hoja
   se carga en el <head> del tema ANTES que el CSS del plugin, que entra por
   put_headers_css(); a igual especificidad ganaria el plugin por ir despues.
   Duplicar la clase sube la especificidad sin recurrir a !important.

   Vive aqui y no en el CSS de un modulo porque el mismo control lo usan los
   dashboards, soporte_tecnico y los index con filtro de periodo.
   --------------------------------------------------------------------------- */

.daterangepicker.daterangepicker td.active,
.daterangepicker.daterangepicker td.active:hover,
.daterangepicker.daterangepicker .ranges li.active {
    background-color: var(--siag-brand, #4888be);
    color: var(--siag-brand-contraste, #fff);
}

/* Los dias entre el inicio y el fin: el mismo tono, muy rebajado. */
.daterangepicker.daterangepicker td.in-range {
    background-color: rgba(var(--siag-brand-rgb, 72, 136, 190), .12);
    color: #4d4d4d;
}

/* El dia elegido manda sobre el rango cuando es a la vez extremo e interior. */
.daterangepicker.daterangepicker td.in-range.active {
    background-color: var(--siag-brand, #4888be);
    color: var(--siag-brand-contraste, #fff);
}

.daterangepicker.daterangepicker td.available:hover,
.daterangepicker.daterangepicker th.available:hover {
    background-color: rgba(var(--siag-brand-rgb, 72, 136, 190), .18);
}

.daterangepicker.daterangepicker .ranges li:hover {
    background-color: rgba(var(--siag-brand-rgb, 72, 136, 190), .10);
}

/* Las flechas de mes son bordes, no texto: llevan border-color, no color. */
.daterangepicker.daterangepicker .calendar-table .next span,
.daterangepicker.daterangepicker .calendar-table .prev span {
    border-color: var(--siag-brand, #4888be);
}

.daterangepicker.daterangepicker .drp-buttons .btn.btn-primary,
.daterangepicker.daterangepicker .drp-buttons .applyBtn {
    background-color: var(--siag-brand, #4888be);
    border-color: var(--siag-brand, #4888be);
    color: var(--siag-brand-contraste, #fff);
}

.daterangepicker.daterangepicker .drp-buttons .btn.btn-primary:hover,
.daterangepicker.daterangepicker .drp-buttons .applyBtn:hover {
    background-color: var(--siag-brand-dark-2, #3d74a3);
    border-color: var(--siag-brand-dark-2, #3d74a3);
}

/* El rango elegido, que el plugin escribe en el pie del panel. */
.daterangepicker.daterangepicker .drp-selected {
    color: #4d4d4d;
}

/* =====================================================================
   Desplegable "Mas filtros"
   =====================================================================
   La barra de filtros no pasa de una linea: los filtros de uso ocasional
   bajan a este panel, que se ancla al boton y se abre sobre la barra para
   no robarle una fila al listado.

   Vive aqui y no en el CSS de cada modulo porque es del patron. La primera
   implementacion -pesv/vehiculo_mantenimiento- todavia lleva su copia local
   con prefijo `vm-`; migrarla a estas clases es trabajo pendiente, y hasta
   entonces hay dos copias de lo mismo. No hacer una tercera.

   Ojo: `.siag-index-toolbar` lleva overflow:hidden y recorta el panel. El
   modulo tiene que reponer `overflow: visible` en SU clase de toolbar.
   ===================================================================== */

.siag-index-mas-filtros-campo {
    position: relative;
}

.siag-index-mas-filtros-btn {
    border-color: #cfd8e3;
    border-radius: 0;
    height: 34px;
    padding: 0 10px;
    position: relative;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.siag-index-mas-filtros-btn .glyphicon {
    margin-right: 5px;
}

.siag-index-mas-filtros-btn.siag-index-mas-filtros-activo {
    border-color: var(--siag-brand, #4888be);
    color: var(--siag-brand, #4888be);
    font-weight: 600;
}

/* Un filtro escondido nunca debe explicar en silencio una tabla vacia. */
.siag-index-mas-filtros-badge {
    background: var(--siag-brand, #4888be);
    border-radius: 9px;
    color: var(--siag-brand-contraste, #fff);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    margin-left: 5px;
    min-width: 16px;
    padding: 0 5px;
    text-align: center;
}

.siag-index-mas-filtros-panel {
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(31, 45, 61, .13);
    display: none;
    left: 0;
    padding: 14px;
    position: absolute;
    top: calc(100% + 6px);
    width: 310px;
    z-index: 1055;
}

.siag-index-mas-filtros-panel.siag-index-mas-filtros-abierto {
    display: block;
}

.siag-index-mas-filtros-head {
    align-items: center;
    border-bottom: 1px solid #edf1f5;
    display: flex;
    margin-bottom: 13px;
    padding-bottom: 11px;
}

.siag-index-mas-filtros-head strong {
    color: #4d4d4d;
    font-size: 13px;
}

.siag-index-mas-filtros-head a {
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
}

.siag-index-mas-filtros-panel .siag-index-mas-filtros-item + .siag-index-mas-filtros-item {
    margin-top: 12px;
}

.siag-index-mas-filtros-panel label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.siag-index-mas-filtros-panel .form-control,
.siag-index-mas-filtros-panel .select2-container .select2-choice,
.siag-index-mas-filtros-panel .select2-container-multi .select2-choices {
    border-color: #cfd8e3;
    border-radius: 0;
    box-shadow: none;
    min-height: 34px;
}

.siag-index-mas-filtros-panel .select2-container {
    width: 100% !important;
}

/* La ayuda de cada filtro: dice para que sirve sin obligar a probarlo. */
.siag-index-mas-filtros-ayuda {
    color: #909aa6;
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

/* =====================================================================
   Select2 con los colores de la marca blanca
   =====================================================================
   Select2 3.x trae dos azules fijos que no son de nadie: #5897fb en el borde
   del campo enfocado y #3875d7 en la opcion resaltada del desplegable. En una
   instalacion con marca propia eso pinta de azul el unico momento en que el
   control llama la atencion.

   Va global -no acotado a `.siag-index`- porque el desplegable (`.select2-drop`)
   lo inyecta el plugin al final del `<body>`, fuera de cualquier contenedor de
   la vista: no hay ancestro por el que acotarlo. Es la misma razon por la que el
   daterangepicker se pinta aqui. Ver agents/marca_blanca/AGENTS.md.

   La clase repetida (`.select2-drop.select2-drop`) sube la especificidad sin
   `!important`: el CSS del plugin se carga despues de esta hoja y con un solo
   nombre de clase ganaria el suyo.
   ===================================================================== */

/* El campo enfocado: el borde es lo que dice "estas escribiendo aqui". */
.select2-container.select2-container-active .select2-choice,
.select2-container.select2-container-active .select2-choices,
.select2-container-multi.select2-container-active .select2-choices {
    border-color: var(--siag-brand, #4888be);
}

/* El panel abierto, que se dibuja pegado al campo. */
.select2-drop.select2-drop-active {
    border-color: var(--siag-brand, #4888be);
}

/* La opcion bajo el cursor. El fondo ya lo pinta el tema; aqui se asegura el
   texto, que el plugin deja en blanco fijo y desaparece sobre una marca clara. */
.select2-results .select2-highlighted,
.select2-drop.select2-drop .select2-results .select2-highlighted {
    background: var(--siag-brand, #4888be);
    color: var(--siag-brand-contraste, #fff);
}

/* Cada valor elegido de un multiselect. En gris no se distingue de un campo
   deshabilitado; con un tinte de marca se lee como "esto lo escogiste tu". */
.select2-container-multi .select2-choices .select2-search-choice {
    background: rgba(var(--siag-brand-rgb, 72, 136, 190), .10);
    border-color: rgba(var(--siag-brand-rgb, 72, 136, 190), .35);
    color: var(--siag-brand-dark-2, #3d74a3);
}

/* La X de cada valor elegido, que hereda el gris del tema. */
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
    opacity: 1;
}

/* =====================================================================
   Listas ordenables (nestable) con los colores de la marca blanca
   =====================================================================
   `assets/css/nestable.css` trae tres azules fijos que no son de nadie:
   #2ea8e5 en el hover y en la fila que se esta agarrando, y #f2fbff en el
   hueco que deja al moverse. En una instalacion con marca propia, el unico
   momento en que la lista responde al usuario se pinta de otro color.

   Va aqui y no en el CSS de un modulo porque el arrastre es del patron:
   lo usan el menu del sistema, archivo_sgsst, actividad_evaluacion,
   matriz_riesgo y plan_mantenimiento.

   La especificidad extra (`.dd` delante) no es adorno: nestable.css se carga
   DESPUES que esta hoja en el header, asi que a igual especificidad ganaria
   el suyo. Ver agents/marca_blanca/AGENTS.md.
   ===================================================================== */

/* El renglon bajo el cursor: dice cual se va a mover. */
.dd .dd-handle:hover,
.dd .dd3-content:hover {
    color: var(--siag-brand, #4888be);
}

/* La fila agarrada, mientras se arrastra. Lleva !important porque el del
   plugin tambien lo lleva y sin el no habria forma de ganarle. */
.dd .dd-hover > .dd-handle {
    background: var(--siag-brand, #4888be) !important;
    color: var(--siag-brand-contraste, #fff) !important;
}

/* El hueco que la fila deja atras: marca donde va a caer. */
.dd .dd-placeholder,
.dd .dd-empty {
    background: rgba(var(--siag-brand-rgb, 72, 136, 190), .07);
    border-color: rgba(var(--siag-brand-rgb, 72, 136, 190), .45);
}

/* El asa. En gris plano no se lee como algo que se agarra; con un tinte de la
   marca se distingue del resto del renglon sin gritar. */
.dd .dd3-handle {
    background: rgba(var(--siag-brand-rgb, 72, 136, 190), .12);
    border-color: rgba(var(--siag-brand-rgb, 72, 136, 190), .30);
}

.dd .dd3-handle:hover {
    background: rgba(var(--siag-brand-rgb, 72, 136, 190), .22);
}

/* Las tres rayas del asa, que el plugin pinta en blanco y sobre un fondo claro
   desaparecen. */
.dd .dd3-handle:before {
    color: var(--siag-brand, #4888be);
}

/* El campo enfocado de la barra de filtros. Bootstrap pone su azul #66afe9 en el
   borde y en el halo; acotado al index para no repintar el foco de todos los
   formularios del sistema de una sola vez. */
.siag-index .form-control:focus,
.siag-index-mas-filtros-panel .form-control:focus {
    border-color: var(--siag-brand, #4888be);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
                0 0 8px rgba(var(--siag-brand-rgb, 72, 136, 190), .55);
}