/*
 * SIGESP - Login moderno inspirado en interfaces administrativas tipo Filament.
 * Compatible con la estructura existente de ExtJS y PHP 5.6.
 */

html,
body {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body.modfondoprincipal {
    position: relative;
    min-height: 100vh;
    overflow: auto;
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif !important;
    /* El fondo lo conserva SIGESP desde sigesp_css_formulario.css */
}

body.modfondoprincipal:before,
body.modfondoprincipal:after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   PANEL PRINCIPAL
   ========================================================= */

.login-panel-modern {
    z-index: 2 !important;
    overflow: visible !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 18px 48px rgba(15, 23, 42, .12) !important;
    color: #0f172a;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif !important;
}

.login-panel-modern .x-panel-bwrap,
.login-panel-modern .x-panel-body {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
}

.login-panel-modern .x-panel-body {
    padding: 0 !important;
}

/* =========================================================
   ENCABEZADO
   ========================================================= */

.login-header {
    position: relative;
    margin: 0;
    padding: 19px 22px 14px;
    border-bottom: 1px solid #eef2f7;
    border-radius: 18px 18px 0 0;
    background: #ffffff;
}

.login-header:before {
    content: "";
    position: absolute;
    top: 0;
    right: 22px;
    left: 22px;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 52%, #f87171 100%);
}

.login-header-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.login-logo-cell {
    width: 54px;
    vertical-align: middle;
}

.login-logo-circle {
    width: 43px;
    height: 43px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: linear-gradient(145deg, #dc2626 0%, #b91c1c 100%);
    box-shadow:
        0 8px 20px rgba(185, 28, 28, .20),
        inset 0 1px 0 rgba(255,255,255,.22);
    color: #ffffff;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 43px;
    text-align: center;
}

.login-header-text {
    vertical-align: middle;
    text-align: left;
}

.login-eyebrow {
    margin: 0 0 3px;
    color: #dc2626;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.35px;
    line-height: 14px;
    text-transform: uppercase;
}

.login-title {
    margin: 0;
    color: #0f172a;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.35px;
    line-height: 27px;
}

.login-subtitle {
    margin-top: 3px;
    color: #64748b;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.login-intro {
    margin: 0;
    padding: 12px 22px 1px;
}

.login-intro-title {
    margin: 0 0 4px;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.login-intro-text {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 17px;
}

/* =========================================================
   FORMULARIO / FIELDSETS
   ========================================================= */

.login-panel-modern .x-fieldset {
    margin: 10px 22px 0 !important;
    padding: 12px 12px 5px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

.login-panel-modern .x-fieldset legend {
    padding: 0 7px !important;
    color: #475569 !important;
    background: #ffffff !important;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .75px;
    text-transform: uppercase;
}

.login-panel-modern .x-fieldset-header-text {
    color: #475569 !important;
}

.login-panel-modern .x-form-item {
    margin-bottom: 8px !important;
}

.login-panel-modern .x-form-item-label {
    padding-top: 7px !important;
    color: #334155 !important;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 17px !important;
}

.login-panel-modern .x-form-element {
    padding-top: 0 !important;
}

/* Los cuatro campos del login usan el mismo ancho definido en JS (anchoCampo).
   Estas reglas evitan que ExtJS recorte el combo o su trigger. */
.login-panel-modern .x-form-field-wrap,
.login-panel-modern .x-form-text {
    max-width: 100% !important;
}

/* =========================================================
   INPUTS
   ========================================================= */

.login-panel-modern input.x-form-text,
.login-panel-modern input.x-form-field {
    box-sizing: border-box !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    outline: none !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
    color: #0f172a !important;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    line-height: 19px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.login-panel-modern input.x-form-text:hover,
.login-panel-modern input.x-form-field:hover {
    border-color: #94a3b8 !important;
}

.login-panel-modern input.x-form-text:focus,
.login-panel-modern input.x-form-field:focus,
.login-panel-modern .x-trigger-wrap-focus .x-form-text {
    border-color: #ef4444 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .10) !important;
}

/* =========================================================
   COMBOS EXTJS ANTIGUOS
   ExtJS administra internamente el ancho del input y del trigger.
   Los combos reciben exactamente el mismo width que Usuario y
   Contraseña para que los cuatro controles terminen alineados.
   ========================================================= */

.login-panel-modern .x-form-field-wrap {
    position: relative !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    vertical-align: top !important;

    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;

    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.login-panel-modern .x-form-field-wrap:hover {
    border-color: #94a3b8 !important;
}

.login-panel-modern .x-trigger-wrap-focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .10) !important;
}

/* El input del combo no dibuja otro borde: el borde pertenece al wrapper. */
.login-panel-modern .x-form-field-wrap .x-form-text,
.login-panel-modern .x-form-field-wrap input.x-form-field {
    box-sizing: border-box !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    padding-right: 8px !important;

    border: 0 !important;
    border-radius: 7px 0 0 7px !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #0f172a !important;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    line-height: 19px !important;
    vertical-align: top !important;
}

.login-panel-modern .x-form-field-wrap .x-form-text:focus,
.login-panel-modern .x-trigger-wrap-focus .x-form-text {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Trigger integrado al mismo control. Se elimina por completo el s.gif de ExtJS. */
.login-panel-modern .x-form-trigger {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;

    display: block !important;
    box-sizing: border-box !important;
    width: 30px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 1px solid #eef2f7 !important;
    border-radius: 0 7px 7px 0 !important;

    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.75 8.25L10 11.5l3.25-3.25' stroke='%2364758b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    cursor: pointer !important;
    opacity: 1 !important;
}

.login-panel-modern .x-form-trigger-over,
.login-panel-modern .x-form-trigger-click {
    border-left-color: #e2e8f0 !important;
    background-color: #f8fafc !important;
    background-position: center center !important;
}

.x-combo-list {
    overflow: hidden !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .16) !important;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
}

.x-combo-list .x-combo-list-inner {
    background: #ffffff !important;
}

.x-combo-list .x-combo-list-item {
    margin: 2px 4px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #334155 !important;
}

.x-combo-list .x-combo-selected,
.x-combo-list .x-combo-list-item:hover {
    border: 0 !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.login-panel-modern .x-form-item,
.login-panel-modern .x-form-element {
    overflow: visible !important;
}

/* =========================================================
   ACCIONES
   ========================================================= */

.login-actions {
    display: flex;
    gap: 10px;
    margin: 14px 26px 0;
    padding: 0 0 6px;
    border: 0;
    background: transparent;
}

.login-action {
    box-sizing: border-box;
    height: 38px;
    margin: 0;
    padding: 0 18px;
    border-radius: 8px;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.login-action:focus {
    outline: none;
}

.login-action:active {
    transform: translateY(1px);
}

.login-action-primary {
    flex: 1 1 auto;
    border: 1px solid #0DABEA;
    background: #0DABEA;
    box-shadow: 0 5px 12px rgba(220, 38, 38, .16);
    color: #ffffff;
}

.login-action-primary:hover {
    border-color: #087FB8;
    background: #087FB8;
    box-shadow: 0 7px 16px rgba(185, 28, 28, .20);
    color: #ffffff;
}

.login-action-secondary {
    flex: 0 0 112px;
    border: 1px solid #dbe3ec;
    background: #ffffff;
    color: #475569;
}

.login-action-secondary:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #1e293b;
}

.login-footer {
    margin: 10px 26px 0;
    padding: 10px 0 16px;
    border-top: 1px solid #f1f5f9;
    color: #94a3b8;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

.login-footer strong {
    color: #64748b;
    font-weight: 600;
}

/* =========================================================
   VALIDACIONES Y VENTANAS EXTJS
   ========================================================= */

.login-panel-modern .x-form-invalid {
    border-color: #ef4444 !important;
    background-image: none !important;
}

.login-panel-modern .x-form-invalid-msg {
    color: #b91c1c !important;
    font-family: "Segoe UI", Inter, Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
}

.x-window {
    border-radius: 10px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .20) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 540px) {
    body.modfondoprincipal {
        overflow-y: auto;
    }

    .login-panel-modern {
        width: calc(100vw - 24px) !important;
        max-width: 480px !important;
    }

    .login-header {
        padding: 26px 22px 20px;
    }

    .login-header:before {
        right: 22px;
        left: 22px;
    }

    .login-logo-cell {
        width: 60px;
    }

    .login-logo-circle {
        width: 48px;
        height: 48px;
        font-size: 21px;
        line-height: 48px;
    }

    .login-title {
        font-size: 23px;
    }

    .login-intro {
        padding-right: 22px;
        padding-left: 22px;
    }

    .login-panel-modern .x-fieldset {
        margin-right: 22px !important;
        margin-left: 22px !important;
    }

    .login-actions {
        margin-right: 22px;
        margin-left: 22px;
    }

    .login-footer {
        margin-right: 22px;
        margin-left: 22px;
    }
}


/* =========================================================
   AJUSTE V6 - CAMPOS A TODO EL ANCHO UTIL DE LA FICHA
   ========================================================= */
.login-panel-modern .x-fieldset {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.login-panel-modern .x-fieldset .x-form-item {
    width: 100% !important;
}

.login-panel-modern .x-fieldset .x-form-element {
    box-sizing: border-box !important;
}

/* El texto seleccionado puede aprovechar todo el espacio hasta el trigger. */
.login-panel-modern .x-form-field-wrap .x-form-text,
.login-panel-modern .x-form-field-wrap input.x-form-field {
    padding-right: 6px !important;
    text-overflow: clip !important;
}

/* Flecha integrada, compacta y alineada con el resto del control. */
.login-panel-modern .x-form-trigger {
    width: 30px !important;
    border-left: 1px solid #e5e7eb !important;
    background-color: #f8fafc !important;
}

.login-panel-modern .x-form-trigger-over,
.login-panel-modern .x-form-trigger-click {
    background-color: #f1f5f9 !important;
}

/* El desplegable puede mostrar nombres largos de empresa con mayor comodidad. */
.x-combo-list .x-combo-list-item {
    white-space: nowrap !important;
}


/* =========================================================
   AJUSTE V8 - LOS 4 CONTROLES CON EL MISMO ANCHO VISUAL
   Base de Datos, Empresa, Usuario y Contraseña comparten el
   mismo width definido en JS. El trigger queda dentro del combo.
   ========================================================= */
.login-panel-modern #cmbbasedatos,
.login-panel-modern #cmbempresa,
.login-panel-modern #txtcodusuario,
.login-panel-modern #txtpasusuario {
    box-sizing: border-box !important;
}

/* Evita que el trigger agregue ancho externo al control. */
.login-panel-modern .x-form-field-wrap {
    box-sizing: border-box !important;
}

.login-panel-modern .x-form-field-wrap .x-form-trigger {
    right: 0 !important;
}

/* ============================================================
   FONDO LOGIN SEMAT - TECNOLOGIA / SEGURIDAD
   ============================================================ */

html,
body {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
}

body {
    margin: 0 !important;

    background-color: #eaf2fb !important;
    background-image: url('/shared/imagebank/semat-login-bg.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}


/* Forzar fondo moderno sobre estilos legacy SIGESP */
html body,
body.modfondo {
    background-color: #eaf2fb !important;
    background-image: url('/shared/imagebank/semat-login-bg.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}



/* ============================================================
   IDENTIDAD VISUAL SEMAT - AZUL INSTITUCIONAL
   ============================================================ */

:root {
    --semat-blue: #0DABEA;
    --semat-blue-dark: #087FB8;
    --semat-blue-hover: #0797D3;
    --semat-blue-light: #EAF8FE;
}


/* TARJETA PRINCIPAL */
.login-panel-modern {
    border-top: 4px solid #0DABEA !important;
}


/* ICONO / LOGO */
.login-logo-circle {
    background: linear-gradient(
        135deg,
        #0DABEA 0%,
        #087FB8 100%
    ) !important;

    border-color: #0DABEA !important;

    box-shadow:
        0 7px 18px rgba(13,171,234,.25) !important;
}


/* TEXTOS PRINCIPALES */
.login-title,
.login-intro-title {
    color: #087FB8 !important;
}

.login-eyebrow {
    color: #0DABEA !important;
}


/* FIELDSETS */
.login-panel-modern fieldset {
    border-color: #BCEAFB !important;
}

.login-panel-modern legend {
    color: #087FB8 !important;
}


/* CAMPOS ACTIVOS */
.login-panel-modern input:focus,
.login-panel-modern .x-form-focus {
    border-color: #0DABEA !important;

    box-shadow:
        0 0 0 2px rgba(13,171,234,.12) !important;
}


/* BOTONES EXTJS */
.login-panel-modern .x-btn {
    background: #0DABEA !important;
    border-color: #0DABEA !important;
}

.login-panel-modern .x-btn button {
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.login-panel-modern .x-btn-over {
    background: #0797D3 !important;
    border-color: #0797D3 !important;
}


/* LINEAS / DETALLES */
.login-panel-modern a {
    color: #087FB8 !important;
}



/* ============================================================
   SEMAT - CORRECCION FINAL AZUL INSTITUCIONAL
   Elimina restos rojos del login
   ============================================================ */


/* BORDE SUPERIOR DE LA TARJETA */
.login-panel-modern {
    border-top-color: #0DABEA !important;
}


/* LINEA DECORATIVA SUPERIOR */
.login-panel-modern:before,
.login-panel-modern::before,
.login-header:before,
.login-header::before {
    background: #0DABEA !important;
    background-image: none !important;
    border-color: #0DABEA !important;
}


/* BOTON PRINCIPAL INGRESAR */
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn,
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn table,
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn tbody,
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn tr,
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn td,
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn em {
    background: #0DABEA !important;
    background-image: none !important;
    border-color: #0DABEA !important;
}


/* TEXTO BOTON INGRESAR */
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn button {
    background: #0DABEA !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
}


/* HOVER BOTON INGRESAR */
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn-over,
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn-over table,
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn-over td,
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn-over em,
.login-panel-modern .x-panel-btns .x-toolbar-cell:first-child .x-btn-over button {
    background: #087FB8 !important;
    background-image: none !important;
    border-color: #087FB8 !important;
    color: #FFFFFF !important;
}


/* BOTON LIMPIAR SE CONSERVA BLANCO */
.login-panel-modern .x-panel-btns .x-toolbar-cell:last-child .x-btn,
.login-panel-modern .x-panel-btns .x-toolbar-cell:last-child .x-btn table,
.login-panel-modern .x-panel-btns .x-toolbar-cell:last-child .x-btn td,
.login-panel-modern .x-panel-btns .x-toolbar-cell:last-child .x-btn em,
.login-panel-modern .x-panel-btns .x-toolbar-cell:last-child .x-btn button {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #334155 !important;
    border-color: #CBD5E1 !important;
}



/* ============================================================
   SEMAT - FORZAR BOTON INGRESAR AZUL
   ============================================================ */

/* Primer botón del área de acciones = INGRESAR */
.login-panel-modern .x-panel-btns td:first-child,
.login-panel-modern .x-panel-btns td:first-child div,
.login-panel-modern .x-panel-btns td:first-child table,
.login-panel-modern .x-panel-btns td:first-child tbody,
.login-panel-modern .x-panel-btns td:first-child tr,
.login-panel-modern .x-panel-btns td:first-child em,
.login-panel-modern .x-panel-btns td:first-child button,
.login-panel-modern .x-panel-btns td:first-child .x-btn,
.login-panel-modern .x-panel-btns td:first-child .x-btn-mc,
.login-panel-modern .x-panel-btns td:first-child .x-btn-ml,
.login-panel-modern .x-panel-btns td:first-child .x-btn-mr {
    background-color: #0DABEA !important;
    background-image: none !important;
    border-color: #0DABEA !important;
    color: #FFFFFF !important;
}


/* Hover INGRESAR */
.login-panel-modern .x-panel-btns td:first-child:hover,
.login-panel-modern .x-panel-btns td:first-child:hover *,
.login-panel-modern .x-panel-btns td:first-child .x-btn-over,
.login-panel-modern .x-panel-btns td:first-child .x-btn-over * {
    background-color: #087FB8 !important;
    background-image: none !important;
    border-color: #087FB8 !important;
    color: #FFFFFF !important;
}


/* Último botón = LIMPIAR */
.login-panel-modern .x-panel-btns td:last-child,
.login-panel-modern .x-panel-btns td:last-child div,
.login-panel-modern .x-panel-btns td:last-child table,
.login-panel-modern .x-panel-btns td:last-child tbody,
.login-panel-modern .x-panel-btns td:last-child tr,
.login-panel-modern .x-panel-btns td:last-child em,
.login-panel-modern .x-panel-btns td:last-child button,
.login-panel-modern .x-panel-btns td:last-child .x-btn {
    background-color: #FFFFFF !important;
    background-image: none !important;
    color: #334155 !important;
}


/* Eliminar cualquier sombra roja */
.login-panel-modern .x-panel-btns td:first-child * {
    box-shadow: none !important;
}



/* ============================================================
   SEMAT - COMBOS / SELECT SEGUN COLOR DEL TEMA
   ============================================================ */


/* ============================================================
   VARIABLES DEL TEMA
   SOLO CAMBIANDO ESTOS VALORES CAMBIA TODO EL LOGIN
   ============================================================ */

:root {
    --semat-primary: #0DABEA;
    --semat-primary-dark: #087FB8;
    --semat-primary-hover: #0797D3;

    --semat-primary-soft: #EAF8FE;

    --semat-border: #CBD5E1;
    --semat-border-light: #E2E8F0;

    --semat-text: #111827;
    --semat-text-secondary: #64748B;

    --semat-white: #FFFFFF;
}


/* ============================================================
   SELECT / COMBO - CAMPO PRINCIPAL
   ============================================================ */

.login-panel-modern .x-form-field-wrap {
    background: var(--semat-white) !important;
}


/* INPUT DEL COMBO */

.login-panel-modern .x-form-field-wrap input.x-form-text {
    background-color: var(--semat-white) !important;

    color: var(--semat-text) !important;

    border-color: var(--semat-border) !important;

    background-image: none !important;
}


/* ============================================================
   SELECT ACTIVO / FOCUS
   ============================================================ */

.login-panel-modern .x-form-field-wrap input.x-form-focus,
.login-panel-modern .x-form-field-wrap input.x-form-text:focus {

    border-color: var(--semat-primary) !important;

    background-color: var(--semat-white) !important;

    outline: none !important;
}


/* ============================================================
   BOTON / FLECHA DEL SELECT
   ============================================================ */

.login-panel-modern .x-form-field-wrap .x-form-trigger {

    border-left: 1px solid var(--semat-border) !important;

    background-color: var(--semat-primary-soft) !important;

    /*
       Flecha neutra para que funcione con
       azul, negro, rojo, verde, etc.
    */

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.75 8.25L10 11.5l3.25-3.25' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        !important;

    background-repeat: no-repeat !important;

    background-position: center center !important;
}


/* HOVER DE LA FLECHA */

.login-panel-modern .x-form-field-wrap .x-form-trigger-over,
.login-panel-modern .x-form-field-wrap .x-form-trigger:hover {

    background-color: var(--semat-primary-soft) !important;

    border-left-color: var(--semat-primary) !important;
}


/* ============================================================
   LISTA DESPLEGABLE EXTJS
   ============================================================ */

.x-combo-list {

    background-color: var(--semat-white) !important;

    border-color: var(--semat-primary) !important;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .15) !important;
}


/* ELEMENTOS DEL SELECT */

.x-combo-list .x-combo-list-item {

    background-color: var(--semat-white) !important;

    color: var(--semat-text) !important;

    border-color: transparent !important;
}


/* ============================================================
   ELEMENTO SELECCIONADO
   AQUI ERA DONDE PODIA SEGUIR APARECIENDO EL ROJO
   ============================================================ */

.x-combo-list .x-combo-selected,
.x-combo-selected {

    background-color: var(--semat-primary) !important;

    background-image: none !important;

    color: var(--semat-white) !important;

    border-color: var(--semat-primary) !important;
}


/* ============================================================
   HOVER SOBRE OPCIONES
   ============================================================ */

.x-combo-list .x-combo-list-item:hover {

    background-color: var(--semat-primary-soft) !important;

    color: var(--semat-text) !important;
}


/* ============================================================
   SELECT ABIERTO / ACTIVO
   ============================================================ */

.login-panel-modern .x-trigger-wrap-focus .x-form-trigger,
.login-panel-modern .x-form-field-wrap.x-trigger-wrap-focus .x-form-trigger {

    border-left-color: var(--semat-primary) !important;
}


/* ============================================================
   BOTON INGRESAR - UTILIZA LA MISMA VARIABLE
   ============================================================ */

.login-action-primary {

    color: var(--semat-white) !important;

    background: var(--semat-primary) !important;

    background-image: none !important;

    border-color: var(--semat-primary) !important;
}


.login-action-primary:hover {

    background: var(--semat-primary-dark) !important;

    background-image: none !important;

    border-color: var(--semat-primary-dark) !important;
}


/* ============================================================
   LINEA SUPERIOR
   ============================================================ */

.login-header::before,
.login-header:before,
.login-panel-modern::before,
.login-panel-modern:before {

    background:
        linear-gradient(
            90deg,
            var(--semat-primary-dark) 0%,
            var(--semat-primary) 55%,
            var(--semat-primary-hover) 100%
        ) !important;
}


/* ============================================================
   ICONO DEL LOGIN
   ============================================================ */

.login-logo-circle {

    background:
        linear-gradient(
            145deg,
            var(--semat-primary) 0%,
            var(--semat-primary-dark) 100%
        ) !important;

    border-color: var(--semat-primary) !important;

    color: var(--semat-white) !important;
}


/* ============================================================
   TITULOS
   ============================================================ */

.login-eyebrow,
.login-title,
.login-intro-title {

    color: var(--semat-primary) !important;
}


/* ============================================================
   FIN TEMA DINAMICO SEMAT
   ============================================================ */



/* ============================================================
   SEMAT_THEME_START
   TEMA VISUAL CENTRALIZADO
   ============================================================ */

/*
   ============================================================
   COLORES DEL TEMA

   PARA CAMBIAR TODO EL LOGIN SOLO MODIFICA ESTOS 4 COLORES.
   ============================================================
*/

:root {

    /* COLOR PRINCIPAL */
    --semat-primary: #0DABEA;

    /* COLOR MAS OSCURO */
    --semat-primary-dark: #087FB8;

    /* COLOR HOVER */
    --semat-primary-hover: #0797D3;

    /* COLOR SUAVE PARA FONDOS */
    --semat-primary-soft: #EAF8FE;


    /* COLORES NEUTROS - NO ES NECESARIO CAMBIARLOS */

    --semat-white: #FFFFFF;

    --semat-text: #111827;

    --semat-text-secondary: #64748B;

    --semat-border: #CBD5E1;

    --semat-border-light: #E2E8F0;
}



/* ============================================================
   TARJETA PRINCIPAL

   ESTE ERA EL BORDE QUE TODAVIA APARECIA AZUL.
   ============================================================ */

.login-panel-modern {

    border-top:
        4px solid var(--semat-primary) !important;

    border-right:
        1px solid var(--semat-border-light) !important;

    border-bottom:
        1px solid var(--semat-border-light) !important;

    border-left:
        1px solid var(--semat-border-light) !important;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, .18) !important;
}



/* ============================================================
   CABECERA
   ============================================================ */

.login-header {

    background-color:
        var(--semat-white) !important;

    border-top-color:
        var(--semat-primary) !important;
}



/* ============================================================
   LINEA DECORATIVA SUPERIOR
   ============================================================ */

.login-header::before,
.login-header:before,
.login-panel-modern::before,
.login-panel-modern:before {

    background:
        linear-gradient(
            90deg,
            var(--semat-primary-dark) 0%,
            var(--semat-primary) 55%,
            var(--semat-primary-hover) 100%
        ) !important;

    border-color:
        var(--semat-primary) !important;
}



/* ============================================================
   LOGO / ICONO "S"
   ============================================================ */

.login-logo-circle {

    color:
        var(--semat-white) !important;

    background:
        linear-gradient(
            145deg,
            var(--semat-primary) 0%,
            var(--semat-primary-dark) 100%
        ) !important;

    border-color:
        var(--semat-primary) !important;

    box-shadow:
        0 7px 18px rgba(15, 23, 42, .20) !important;
}



/* ============================================================
   TITULOS
   ============================================================ */

.login-eyebrow,
.login-title,
.login-intro-title {

    color:
        var(--semat-primary) !important;
}



.login-subtitle,
.login-intro-text {

    color:
        var(--semat-text-secondary) !important;
}



/* ============================================================
   FIELDSETS
   ENTORNO DE TRABAJO / CREDENCIALES
   ============================================================ */

.login-panel-modern fieldset {

    background-color:
        var(--semat-white) !important;

    border-color:
        var(--semat-border-light) !important;
}



.login-panel-modern legend,
.login-panel-modern .x-fieldset-header-text {

    color:
        var(--semat-text) !important;

    font-weight:
        bold !important;
}



/* ============================================================
   LABELS
   ============================================================ */

.login-panel-modern .x-form-item-label {

    color:
        var(--semat-text) !important;

    font-weight:
        600 !important;
}



/* ============================================================
   INPUTS NORMALES
   ============================================================ */

.login-panel-modern input.x-form-text,
.login-panel-modern textarea.x-form-textarea {

    color:
        var(--semat-text) !important;

    background-color:
        var(--semat-white) !important;

    background-image:
        none !important;

    border-color:
        var(--semat-border) !important;
}



/* ============================================================
   INPUT ACTIVO
   ============================================================ */

.login-panel-modern input.x-form-text:focus,
.login-panel-modern input.x-form-focus,
.login-panel-modern .x-form-focus {

    border-color:
        var(--semat-primary) !important;

    background-color:
        var(--semat-white) !important;

    box-shadow:
        0 0 0 2px rgba(15, 23, 42, .10) !important;

    outline:
        none !important;
}



/* ============================================================
   COMBO / SELECT
   ============================================================ */

.login-panel-modern .x-form-field-wrap {

    background-color:
        var(--semat-white) !important;
}



.login-panel-modern .x-form-field-wrap input.x-form-text {

    color:
        var(--semat-text) !important;

    background-color:
        var(--semat-white) !important;

    background-image:
        none !important;

    border-color:
        var(--semat-border) !important;
}



/* ============================================================
   SELECT ACTIVO
   ============================================================ */

.login-panel-modern .x-form-field-wrap input.x-form-focus,
.login-panel-modern .x-form-field-wrap input.x-form-text:focus {

    border-color:
        var(--semat-primary) !important;

    background-color:
        var(--semat-white) !important;
}



/* ============================================================
   FLECHA DEL SELECT
   ============================================================ */

.login-panel-modern .x-form-field-wrap .x-form-trigger {

    border-left:
        1px solid var(--semat-border) !important;

    background-color:
        var(--semat-primary-soft) !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.75 8.25L10 11.5l3.25-3.25' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;
}



/* ============================================================
   HOVER FLECHA
   ============================================================ */

.login-panel-modern .x-form-field-wrap .x-form-trigger-over,
.login-panel-modern .x-form-field-wrap .x-form-trigger:hover {

    background-color:
        var(--semat-primary-soft) !important;

    border-left-color:
        var(--semat-primary) !important;
}



/* ============================================================
   SELECT ABIERTO
   ============================================================ */

.login-panel-modern .x-trigger-wrap-focus .x-form-trigger,
.login-panel-modern
.x-form-field-wrap.x-trigger-wrap-focus
.x-form-trigger {

    border-left-color:
        var(--semat-primary) !important;
}



/* ============================================================
   LISTA DESPLEGABLE EXTJS

   IMPORTANTE:
   EXTJS CREA ESTA LISTA FUERA DEL PANEL DEL LOGIN,
   POR ESO LOS SELECTORES SON GLOBALES.
   ============================================================ */

.x-combo-list {

    background-color:
        var(--semat-white) !important;

    border-color:
        var(--semat-primary) !important;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .15) !important;
}



/* OPCIONES */

.x-combo-list .x-combo-list-item {

    color:
        var(--semat-text) !important;

    background-color:
        var(--semat-white) !important;

    border-color:
        transparent !important;
}



/* ============================================================
   OPCION SELECCIONADA
   ============================================================ */

.x-combo-list .x-combo-selected,
.x-combo-selected {

    color:
        var(--semat-white) !important;

    background-color:
        var(--semat-primary) !important;

    background-image:
        none !important;

    border-color:
        var(--semat-primary) !important;
}



/* ============================================================
   HOVER DE OPCIONES
   ============================================================ */

.x-combo-list .x-combo-list-item:hover {

    color:
        var(--semat-text) !important;

    background-color:
        var(--semat-primary-soft) !important;
}



/* ============================================================
   BOTON INGRESAR
   ============================================================ */

.login-action-primary {

    color:
        var(--semat-white) !important;

    background-color:
        var(--semat-primary) !important;

    background:
        var(--semat-primary) !important;

    background-image:
        none !important;

    border:
        1px solid var(--semat-primary) !important;

    box-shadow:
        0 7px 16px rgba(15, 23, 42, .16) !important;
}



/* ============================================================
   HOVER INGRESAR
   ============================================================ */

.login-action-primary:hover {

    color:
        var(--semat-white) !important;

    background:
        var(--semat-primary-dark) !important;

    background-color:
        var(--semat-primary-dark) !important;

    background-image:
        none !important;

    border-color:
        var(--semat-primary-dark) !important;
}



/* ============================================================
   CLICK INGRESAR
   ============================================================ */

.login-action-primary:active {

    background:
        var(--semat-primary-dark) !important;

    border-color:
        var(--semat-primary-dark) !important;

    transform:
        translateY(1px);
}



/* ============================================================
   BOTON LIMPIAR
   ============================================================ */

.login-action-secondary {

    color:
        var(--semat-text) !important;

    background:
        var(--semat-white) !important;

    background-image:
        none !important;

    border:
        1px solid var(--semat-border) !important;
}



/* ============================================================
   HOVER LIMPIAR
   ============================================================ */

.login-action-secondary:hover {

    color:
        var(--semat-primary-dark) !important;

    background:
        var(--semat-primary-soft) !important;

    border-color:
        var(--semat-primary) !important;
}



/* ============================================================
   AREA DE BOTONES
   ============================================================ */

.login-actions {

    background:
        transparent !important;
}



/* ============================================================
   FOOTER
   ============================================================ */

.login-footer {

    color:
        var(--semat-text-secondary) !important;
}



.login-footer strong,
.login-footer a {

    color:
        var(--semat-primary) !important;
}



/* ============================================================
   SELECCION DE TEXTO
   ============================================================ */

.login-panel-modern ::selection {

    color:
        var(--semat-white);

    background:
        var(--semat-primary);
}



/*
   ============================================================
   NO MODIFICAMOS LOS COLORES DE ERROR.

   LOS ERRORES / VALIDACIONES PUEDEN CONTINUAR EN ROJO.
   ============================================================
*/


/* ============================================================
   SEMAT_THEME_END
   ============================================================ */


/* ============================================================
   SEMAT - FONDO LOGIN FORZADO FINAL
   ============================================================ */
html body.modfondoprincipal {
    background-color: #eaf2fb !important;
    background-image: url('/shared/imagebank/semat-login-bg.png?v=20260901-0052') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}