/* Client Portal UI - Paso 1: base global + dashboard cliente */

/* Fondo general */
body.customers {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(212, 175, 55, 0.22), transparent 32%),
        radial-gradient(circle at top right, rgba(17, 17, 17, 0.10), transparent 34%),
        linear-gradient(135deg, #eef4ff 0%, #f8fafc 48%, #edf7ff 100%) !important;
    color: #0f172a;
}

/* Barra superior */
body.customers .navbar.header {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    margin-bottom: 0;
}

body.customers .navbar.header .container {
    min-height: 72px;
    display: flex;
    align-items: center;
}

body.customers .navbar-brand.logo {
    height: auto;
    padding: 10px 15px;
}

body.customers .navbar-brand.logo img {
    max-height: 46px;
}

body.customers .navbar-default .navbar-nav > li > a {
    color: #334155 !important;
    font-weight: 650;
    border-radius: 999px;
    margin: 15px 2px;
    padding: 10px 14px;
    transition: all .18s ease;
}

body.customers .navbar-default .navbar-nav > li.active > a,
body.customers .navbar-default .navbar-nav > li > a:hover {
    color: #0f172a !important;
    background: rgba(212, 175, 55, 0.18) !important;
}

/* Contenido */
body.customers #wrapper {
    padding-top: 34px;
}

body.customers #content > .container {
    max-width: 1180px;
}

body.customers .customer-top-submenu {
    margin: 0 0 24px 0;
    padding: 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.customers .customer-top-submenu li a {
    border-radius: 16px;
    color: #334155;
    font-weight: 650;
}

/* Títulos */
body.customers .section-heading,
body.customers .section-text,
body.customers .tickets-summary-heading,
body.customers .projects-summary-heading,
body.customers .invoices-quick-info-heading {
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
}

body.customers #greeting {
    font-size: 34px;
    line-height: 1.15;
    color: #0f172a;
    margin: 4px 0 28px;
    letter-spacing: -0.045em;
}

/* Paneles liquid glass */
body.customers .panel_s {
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.11) !important;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.customers .panel_s > .panel-body {
    padding: 28px !important;
    background: transparent !important;
}

/* Formularios */
body.customers .form-control,
body.customers .bootstrap-select > .dropdown-toggle {
    min-height: 46px;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    background: rgba(255, 255, 255, 0.70) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    color: #0f172a;
}

body.customers .form-control:focus,
body.customers .bootstrap-select.open > .dropdown-toggle {
    border-color: rgba(212, 175, 55, 0.70) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.18) !important;
}

/* Botones */
body.customers .btn.btn-primary {
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%) !important;
    box-shadow: 0 16px 34px rgba(212, 175, 55, 0.34) !important;
    font-weight: 400 !important;
}

body.customers .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 42px rgba(212, 175, 55, 0.42) !important;
}

/* Tablas */
body.customers .table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

body.customers .table > thead > tr > th {
    border: 0 !important;
    color: #1f2933 !important;
    background: linear-gradient(180deg, rgba(255, 251, 239, 0.92), rgba(245, 240, 225, 0.78)) !important;
    font-size: 12px;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .055em;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

body.customers .table > thead > tr > th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

body.customers .table > thead > tr > th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

body.customers .table > tbody > tr {
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

body.customers .table > tbody > tr > td {
    border-top: 0 !important;
    vertical-align: middle;
}

/* Login conserva liquid glass */
body.customers.customers_login #wrapper {
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    padding: 40px 0;
}

body.customers.customers_login .mtop40 {
    margin-top: 0 !important;
}

body.customers.customers_login .login-heading {
    font-size: 32px;
    color: #0f172a;
    letter-spacing: -0.045em;
}

body.customers.customers_login .login-form .panel-body {
    padding: 32px !important;
}

/* Footer */
body.customers .footer {
    margin-top: 45px;
    padding: 24px 0;
    background: transparent;
    color: #64748b;
}

/* Responsive */
@media (max-width: 767px) {
    body.customers .navbar.header .container {
        display: block;
        min-height: auto;
    }

    body.customers #wrapper {
        padding-top: 22px;
    }

    body.customers #greeting {
        font-size: 26px;
    }

    body.customers .panel_s > .panel-body {
        padding: 20px !important;
    }
}

/* HOTFIX v104 - corregir submenu superior y dropdown perfil */
body.customers .customer-top-submenu {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.customers .customer-top-submenu > li {
    list-style: none !important;
}

body.customers .customer-top-submenu > li > a {
    padding: 12px 18px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

body.customers .navbar .dropdown-menu {
    z-index: 5000 !important;
}

body.customers .navbar .dropdown-submenu > .dropdown-menu {
    z-index: 5010 !important;
}

/* HOTFIX v105 - avatar perfil + buscadores DataTables */

/* No aplicar estilo de botón del menú al avatar de perfil */
body.customers .navbar-default .navbar-nav > li.customers-nav-item-profile > a,
body.customers .navbar-default .navbar-nav > li.customers-nav-item-profile.open > a,
body.customers .navbar-default .navbar-nav > li.customers-nav-item-profile > a:hover,
body.customers .navbar-default .navbar-nav > li.customers-nav-item-profile > a:focus {
    background: transparent !important;
    box-shadow: none !important;
    margin: 10px 0 10px 8px !important;
    padding: 0 !important;
    border-radius: 999px !important;
}

body.customers .client-profile-image-small {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    object-fit: cover !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
}

/* Corregir buscador de tablas DataTables */
body.customers .dataTables_filter .input-group {
    display: flex !important;
    align-items: stretch !important;
    max-width: 260px !important;
}

body.customers .dataTables_filter .input-group .input-group-addon,
body.customers .dataTables_filter .input-group .input-group-btn > .btn {
    min-height: 42px !important;
    width: 46px !important;
    border-radius: 14px 0 0 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-right: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.customers .dataTables_filter .input-group .form-control {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 0 14px 14px 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
}

body.customers .dataTables_filter input[type="search"],
body.customers .dataTables_filter input[type="text"] {
    width: 190px !important;
}

/* HOTFIX v106 - dropdown perfil siempre por encima de paneles/tablas */
body.customers .navbar.header {
    position: relative !important;
    z-index: 9000 !important;
}

body.customers .navbar.header .container,
body.customers #theme-navbar-collapse,
body.customers .navbar-nav,
body.customers .customers-nav-item-profile {
    position: relative !important;
    z-index: 9010 !important;
}

body.customers .customers-nav-item-profile .dropdown-menu,
body.customers .navbar .dropdown-menu {
    z-index: 9999 !important;
}

body.customers #wrapper,
body.customers #content,
body.customers .panel_s,
body.customers .panel-body,
body.customers .dataTables_wrapper,
body.customers .table-responsive {
    position: relative;
    z-index: 1;
}

/* v109 - Fondo premium glass solo para menú superior */
body.customers .navbar.header {
    background:
        linear-gradient(135deg, rgba(12, 12, 12, 0.88) 0%, rgba(42, 35, 18, 0.84) 45%, rgba(16, 16, 16, 0.88) 100%) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.22) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile) > a {
    color: rgba(255, 255, 255, 0.82) !important;
}

body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile).active > a,
body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile) > a:hover,
body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile) > a:focus {
    color: #111827 !important;
    background: linear-gradient(135deg, #ffe08a 0%, #d4af37 55%, #b8860b 100%) !important;
    box-shadow: 0 10px 24px rgba(212, 175, 55, 0.28) !important;
}

body.customers .navbar.header .navbar-toggle {
    border-color: rgba(212, 175, 55, 0.45) !important;
}

body.customers .navbar.header .navbar-toggle .icon-bar {
    background-color: #d4af37 !important;
}

/* v110 - navbar oro/gris suave + botones glass */
body.customers .navbar.header {
    background:
        linear-gradient(135deg,
            rgba(72, 70, 66, 0.82) 0%,
            rgba(96, 92, 84, 0.78) 38%,
            rgba(58, 57, 54, 0.82) 100%) !important;
    border-bottom: 1px solid rgba(255, 224, 138, 0.18) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
}

body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile) > a {
    color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile) > a:hover,
body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile) > a:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 224, 138, 0.16) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile).active > a,
body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile).active > a:hover,
body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile).active > a:focus {
    color: #2f2a1f !important;
    background:
        linear-gradient(135deg,
            rgba(255, 236, 179, 0.92) 0%,
            rgba(224, 193, 94, 0.88) 55%,
            rgba(201, 158, 45, 0.90) 100%) !important;
    border: 1px solid rgba(255, 240, 200, 0.42) !important;
    box-shadow: 0 10px 24px rgba(201, 158, 45, 0.16) !important;
}

body.customers .navbar.header .navbar-brand.logo img {
    filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.14));
}

/* v113 - borde fino oro apple/liquid glass SOLO botones inactivos del menú */
body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile):not(.active) > a {
    border: 1px solid rgba(226, 194, 101, 0.38) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)) padding-box !important;
    color: rgba(255,255,255,0.92) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.13),
        inset 0 -1px 0 rgba(212,175,55,0.08),
        0 8px 18px rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
}

body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile):not(.active) > a:hover,
body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile):not(.active) > a:focus {
    border-color: rgba(255, 224, 138, 0.62) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.055)) padding-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(212,175,55,0.12),
        0 10px 22px rgba(0,0,0,0.10) !important;
}

/* v114 - Login cliente premium responsive */
body.customers.customers_login {
    background:
        radial-gradient(circle at 18% 24%, rgba(212,175,55,0.18), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,0.55), transparent 28%),
        radial-gradient(circle at 76% 82%, rgba(90,86,76,0.14), transparent 32%),
        linear-gradient(135deg, #f5f2ea 0%, #eef3f7 46%, #f8fafc 100%) !important;
}

body.customers.customers_login #wrapper {
    min-height: calc(100vh - 78px) !important;
    display: flex !important;
    align-items: center !important;
    padding: 54px 0 !important;
}

body.customers.customers_login #content {
    width: 100% !important;
}

body.customers.customers_login #content > .container {
    position: relative;
    max-width: 1120px !important;
}

body.customers.customers_login #content > .container:before {
    content: "Área privada de clientes";
    position: absolute;
    right: 56px;
    top: 52px;
    width: 390px;
    min-height: 260px;
    padding: 42px;
    border-radius: 34px;
    color: rgba(17,24,39,0.74);
    font-size: 34px;
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.055em;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.46), rgba(255,255,255,0.18)),
        radial-gradient(circle at 22% 18%, rgba(255,224,138,0.34), transparent 32%),
        radial-gradient(circle at 80% 78%, rgba(47,42,31,0.12), transparent 36%);
    border: 1px solid rgba(255,255,255,0.52);
    box-shadow: 0 30px 90px rgba(15,23,42,0.10);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    pointer-events: none;
}

body.customers.customers_login #content > .container:after {
    content: "Gestiona tus proyectos, facturas, contratos y soporte desde un espacio seguro.";
    position: absolute;
    right: 98px;
    top: 172px;
    width: 300px;
    color: rgba(71,85,105,0.82);
    font-size: 15px;
    line-height: 1.55;
    pointer-events: none;
}

body.customers.customers_login .mtop40 {
    margin-top: 0 !important;
}

body.customers.customers_login .login-heading {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px !important;
    text-align: left;
    font-size: 34px !important;
    color: #111827 !important;
    letter-spacing: -0.055em !important;
}

body.customers.customers_login .login-form .panel_s {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 30px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.70), rgba(255,255,255,0.42)) !important;
    border: 1px solid rgba(255,255,255,0.62) !important;
    box-shadow:
        0 34px 90px rgba(15,23,42,0.12),
        inset 0 1px 0 rgba(255,255,255,0.58) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

body.customers.customers_login .login-form .panel-body {
    padding: 34px !important;
}

body.customers.customers_login .form-group {
    margin-bottom: 18px !important;
}

body.customers.customers_login .form-group label,
body.customers.customers_login .checkbox label {
    color: rgba(51,65,85,0.92) !important;
    font-weight: 750 !important;
    font-size: 13px !important;
}

body.customers.customers_login .form-control,
body.customers.customers_login .bootstrap-select > .dropdown-toggle {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.54) !important;
    border: 1px solid rgba(148,163,184,0.38) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.50),
        0 8px 22px rgba(15,23,42,0.035) !important;
}

body.customers.customers_login .form-control:focus,
body.customers.customers_login .bootstrap-select.open > .dropdown-toggle {
    border-color: rgba(212,175,55,0.58) !important;
    background: rgba(255,255,255,0.78) !important;
    box-shadow:
        0 0 0 4px rgba(212,175,55,0.14),
        0 12px 26px rgba(15,23,42,0.06) !important;
}

body.customers.customers_login .btn.btn-primary {
    height: 48px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #e3bd42 0%, #c89812 55%, #a97705 100%) !important;
    box-shadow: 0 18px 34px rgba(201,158,45,0.26) !important;
}

body.customers.customers_login .btn.btn-primary:hover {
    background: linear-gradient(135deg, #f0cf65 0%, #c99b16 55%, #946706 100%) !important;
}

body.customers.customers_login .text-muted {
    color: rgba(100,116,139,0.92) !important;
    font-weight: 650;
}

body.customers.customers_login .text-muted:hover {
    color: #9a6f08 !important;
}

/* Login responsive */
@media (max-width: 991px) {
    body.customers.customers_login #content > .container:before,
    body.customers.customers_login #content > .container:after {
        display: none !important;
    }

    body.customers.customers_login .login-heading,
    body.customers.customers_login .login-form .panel_s {
        width: 100%;
        max-width: 390px;
    }
}

@media (max-width: 767px) {
    body.customers.customers_login #wrapper {
        min-height: calc(100vh - 70px) !important;
        align-items: flex-start !important;
        padding: 28px 0 !important;
    }

    body.customers.customers_login .login-heading {
        font-size: 28px !important;
        text-align: center;
    }

    body.customers.customers_login .login-form .panel-body {
        padding: 24px !important;
    }
}

/* v115 - Fix login premium limpio y responsive sin solapes */
body.customers.customers_login #content > .container:before,
body.customers.customers_login #content > .container:after {
    display: none !important;
    content: none !important;
}

body.customers.customers_login {
    background:
        radial-gradient(circle at 20% 18%, rgba(212,175,55,0.16), transparent 26%),
        radial-gradient(circle at 80% 22%, rgba(255,255,255,0.68), transparent 30%),
        radial-gradient(circle at 50% 92%, rgba(80,76,68,0.10), transparent 34%),
        linear-gradient(135deg, #f6f3ea 0%, #eef4f7 48%, #f9fafb 100%) !important;
}

body.customers.customers_login #wrapper {
    min-height: calc(100vh - 78px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 44px 0 !important;
}

body.customers.customers_login #content {
    width: 100% !important;
}

body.customers.customers_login #content > .container {
    max-width: 460px !important;
    width: 100% !important;
}

body.customers.customers_login .mtop40 {
    margin-top: 0 !important;
}

body.customers.customers_login .col-md-4,
body.customers.customers_login .col-sm-8 {
    width: 100% !important;
    max-width: 420px !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.customers.customers_login .login-heading {
    width: 100% !important;
    max-width: 420px !important;
    text-align: center !important;
    margin: 0 auto 24px auto !important;
    font-size: 32px !important;
    line-height: 1.12 !important;
    color: #111827 !important;
    letter-spacing: -0.055em !important;
}

body.customers.customers_login .login-form .panel_s {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    border-radius: 30px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.44)) !important;
    border: 1px solid rgba(255,255,255,0.68) !important;
    box-shadow:
        0 34px 90px rgba(15,23,42,0.13),
        inset 0 1px 0 rgba(255,255,255,0.62) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

body.customers.customers_login .login-form .panel-body {
    padding: 34px !important;
}

body.customers.customers_login .btn.btn-primary {
    background: linear-gradient(135deg, #e5bf45 0%, #c99b16 58%, #a97705 100%) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 36px rgba(201,158,45,0.28) !important;
}

@media (max-width: 767px) {
    body.customers.customers_login #wrapper {
        min-height: calc(100vh - 70px) !important;
        align-items: flex-start !important;
        padding: 28px 14px !important;
    }

    body.customers.customers_login #content > .container {
        max-width: 100% !important;
    }

    body.customers.customers_login .login-heading {
        font-size: 26px !important;
        margin-top: 8px !important;
        margin-bottom: 18px !important;
    }

    body.customers.customers_login .login-form .panel_s {
        max-width: 100% !important;
        border-radius: 24px !important;
    }

    body.customers.customers_login .login-form .panel-body {
        padding: 24px !important;
    }
}

/* v116 - subtítulo comercial login */
body.customers.customers_login .login-heading:after {
    content: "Accede a tu espacio privado para consultar facturas, revisar presupuestos, seguir el avance de tus proyectos y comunicarte con nuestro equipo mediante soporte y chat en tiempo real.";
    display: block;
    max-width: 420px;
    margin: 14px auto 0;
    color: rgba(71, 85, 105, 0.86);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0;
}

/* v121 - Login Premier liquid glass con logo y mensaje compacto */
body.customers.customers_login .navbar.header {
    display: none !important;
}

body.customers.customers_login #wrapper {
    min-height: 100vh !important;
    padding: 42px 16px !important;
}

body.customers.customers_login .mtop40 {
    margin-top: 0 !important;
}

body.customers.customers_login .mtop40:before {
    content: "";
    display: block;
    width: 380px;
    height: 112px;
    max-width: 92vw;
    margin: 0 auto 24px;
    background-image: url("https://crm.premiernegocios.com/uploads/company/c2fe60c7f87a1a404a08445bc37c58e4.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 18px 38px rgba(15, 23, 42, 0.12));
}

body.customers.customers_login .login-heading {
    color: transparent !important;
    background: linear-gradient(135deg, #171717 0%, #8b6b18 42%, #d4af37 60%, #232323 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-size: 34px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.055em !important;
    text-shadow: none !important;
    margin-bottom: 22px !important;
}

body.customers.customers_login .login-heading:after {
    content: "Todo tu proyecto, en un solo lugar.\A Facturas, presupuestos, soporte y chat en tiempo real.";
    display: block !important;
    white-space: pre-line !important;
    max-width: 520px !important;
    margin: 18px auto 0 !important;
    padding: 16px 22px !important;
    color: rgba(51, 65, 85, 0.88) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.50), rgba(255,255,255,0.24)) padding-box,
        linear-gradient(135deg, rgba(255,244,205,0.85), rgba(212,175,55,0.46), rgba(255,255,255,0.36)) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 18px 48px rgba(15,23,42,0.08) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.9 !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}

body.customers.customers_login .login-form .panel_s {
    margin-top: 10px !important;
}

@media (max-width: 767px) {
    body.customers.customers_login #wrapper {
        padding: 28px 14px !important;
    }

    body.customers.customers_login .mtop40:before {
        width: 300px !important;
        height: 88px !important;
        margin-bottom: 18px !important;
    }

    body.customers.customers_login .login-heading {
        font-size: 28px !important;
        margin-bottom: 18px !important;
    }

    body.customers.customers_login .login-heading:after {
        max-width: 330px !important;
        padding: 13px 16px !important;
        border-radius: 18px !important;
        font-size: 13.5px !important;
        line-height: 1.75 !important;
    }
}

/* v123 - Recuperar contraseña Premier liquid glass */
body.customers:has(.forgot-password-premier) .navbar.header {
    display: none !important;
}

body.customers:has(.forgot-password-premier) {
    min-height: 100vh !important;
    background:
        radial-gradient(circle at 20% 18%, rgba(212,175,55,0.16), transparent 28%),
        radial-gradient(circle at 78% 26%, rgba(255,255,255,0.72), transparent 30%),
        radial-gradient(circle at 50% 96%, rgba(88,84,74,0.10), transparent 34%),
        linear-gradient(135deg, #f7f3e9 0%, #eef4f7 48%, #f8fafc 100%) !important;
}

body.customers .forgot-password-premier {
    margin-top: 0 !important;
    padding: 42px 16px !important;
}

body.customers .forgot-password-logo-wrap {
    text-align: center;
    margin-bottom: 26px;
}

body.customers .forgot-password-logo-link {
    display: inline-block;
}

body.customers .forgot-password-logo-link img {
    width: 380px;
    max-width: 92vw;
    height: auto;
    filter: drop-shadow(0 18px 38px rgba(15, 23, 42, 0.12));
}

body.customers .forgot-password-premier .col-md-4 {
    float: none !important;
    width: 100% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.customers .forgot-password-heading h1 {
    color: transparent !important;
    background: linear-gradient(135deg, #171717 0%, #8b6b18 42%, #d4af37 60%, #232323 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-size: 32px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.045em !important;
    margin-bottom: 10px !important;
}

body.customers .forgot-password-subtitle {
    max-width: 420px;
    margin: 0 auto 24px;
    padding: 14px 18px;
    color: rgba(71, 85, 105, 0.88);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.65;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.50), rgba(255,255,255,0.24)) padding-box,
        linear-gradient(135deg, rgba(255,244,205,0.85), rgba(212,175,55,0.42), rgba(255,255,255,0.36)) border-box !important;
    border: 1px solid transparent;
    border-radius: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 18px 48px rgba(15,23,42,0.08);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

body.customers .forgot-password-premier .panel_s {
    max-width: 420px !important;
    margin: 0 auto !important;
    border-radius: 30px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.44)) !important;
    border: 1px solid rgba(255,255,255,0.68) !important;
    box-shadow:
        0 34px 90px rgba(15,23,42,0.13),
        inset 0 1px 0 rgba(255,255,255,0.62) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

body.customers .forgot-password-premier .panel-body {
    padding: 34px !important;
}

body.customers .forgot-password-back-login {
    margin-top: 14px;
}

body.customers .forgot-password-back-login .text-muted {
    color: rgba(71,85,105,0.92) !important;
    font-weight: 700 !important;
}

body.customers .forgot-password-back-login .text-muted:hover {
    color: #9a6f08 !important;
}

@media (max-width: 767px) {
    body.customers .forgot-password-premier {
        padding: 28px 14px !important;
    }

    body.customers .forgot-password-logo-link img {
        width: 300px;
    }

    body.customers .forgot-password-heading h1 {
        font-size: 27px !important;
    }

    body.customers .forgot-password-subtitle {
        font-size: 13.5px;
        padding: 13px 16px;
        border-radius: 18px;
    }

    body.customers .forgot-password-premier .panel-body {
        padding: 24px !important;
    }
}

/* v128 - Responsive real portal cliente: navbar + submenu superior */
@media (max-width: 1199px) {
    body.customers .navbar.header .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    body.customers .navbar-default .navbar-nav {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    body.customers .navbar-default .navbar-nav > li:not(.customers-nav-item-profile) > a {
        margin: 5px 0 !important;
        padding: 9px 12px !important;
        line-height: 1.15 !important;
        font-size: 13.5px !important;
        white-space: nowrap !important;
    }

    body.customers .customer-top-submenu {
        float: none !important;
        clear: both !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 9px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 22px auto !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.customers .customer-top-submenu > li {
        float: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    body.customers .customer-top-submenu > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding: 9px 14px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    body.customers .customer-top-submenu > li > a svg,
    body.customers .customer-top-submenu > li > a img {
        flex: 0 0 auto !important;
        width: 16px !important;
        height: 16px !important;
        margin-right: 5px !important;
    }
}

@media (max-width: 767px) {
    body.customers .navbar.header {
        border-radius: 0 0 22px 22px !important;
    }

    body.customers .navbar.header .container {
        display: block !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.customers .navbar.header .navbar-header {
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        float: none !important;
        width: 100% !important;
    }

    body.customers .navbar-brand.logo {
        float: none !important;
        padding: 10px 0 !important;
        margin: 0 !important;
    }

    body.customers .navbar-brand.logo img {
        max-height: 40px !important;
        margin-left: 0 !important;
    }

    body.customers .navbar.header .navbar-toggle {
        float: none !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.08) !important;
        border: 1px solid rgba(226,194,101,0.38) !important;
    }

    body.customers #theme-navbar-collapse {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 0 14px 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    body.customers #theme-navbar-collapse .navbar-nav {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.customers #theme-navbar-collapse .navbar-nav > li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
    }

    body.customers #theme-navbar-collapse .navbar-nav > li:not(.customers-nav-item-profile) > a {
        display: flex !important;
        width: 100% !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 11px 14px !important;
        border-radius: 16px !important;
        line-height: 1.2 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.customers #theme-navbar-collapse .customers-nav-item-profile {
        text-align: center !important;
        margin-top: 6px !important;
    }

    body.customers #theme-navbar-collapse .customers-nav-item-profile > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 4px auto !important;
    }

    body.customers #theme-navbar-collapse .customers-nav-item-profile .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 0 !important;
        padding: 10px !important;
        border: 1px solid rgba(226,232,240,0.35) !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,0.96) !important;
        box-shadow: 0 14px 34px rgba(15,23,42,0.16) !important;
        text-align: left !important;
    }

    body.customers #theme-navbar-collapse .customers-nav-item-profile .dropdown-menu > li > a {
        border-radius: 12px !important;
        padding: 10px 12px !important;
        color: #334155 !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    body.customers .customer-top-submenu {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 4px 2px 12px 2px !important;
        margin: 0 0 18px 0 !important;
    }

    body.customers .customer-top-submenu::-webkit-scrollbar {
        display: none !important;
    }

    body.customers .customer-top-submenu > li {
        flex: 0 0 auto !important;
    }

    body.customers .customer-top-submenu > li > a {
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 13.5px !important;
        box-shadow: 0 8px 18px rgba(15,23,42,0.08) !important;
    }
}

/* v129 - ajuste fino móvil: hamburguesa derecha + submenu compacto */
@media (max-width: 767px) {
    body.customers .navbar.header .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    body.customers .navbar.header .navbar-toggle {
        order: 2 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    body.customers .navbar-brand.logo {
        order: 1 !important;
        margin-right: auto !important;
    }

    body.customers .customer-top-submenu {
        gap: 6px !important;
        padding: 4px 0 12px 0 !important;
    }

    body.customers .customer-top-submenu > li > a {
        min-height: 36px !important;
        padding: 7px 10px !important;
        font-size: 12.5px !important;
        line-height: 1.05 !important;
    }

    body.customers .customer-top-submenu > li > a svg,
    body.customers .customer-top-submenu > li > a img {
        width: 14px !important;
        height: 14px !important;
        margin-right: 4px !important;
    }
}

/* v130 - centrado real móvil: logo centrado + submenu en 3 columnas */
@media (max-width: 767px) {
    body.customers .navbar.header .navbar-header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        min-height: 64px !important;
    }

    body.customers .navbar-brand.logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        z-index: 1 !important;
    }

    body.customers .navbar-brand.logo img {
        max-height: 38px !important;
        width: auto !important;
        margin: 0 !important;
    }

    body.customers .navbar.header .navbar-toggle {
        position: relative !important;
        z-index: 2 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        flex: 0 0 auto !important;
    }

    body.customers .customer-top-submenu {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 18px auto !important;
        padding: 4px 0 12px 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.customers .customer-top-submenu > li {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    body.customers .customer-top-submenu > li > a {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 7px 6px !important;
        font-size: 12px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        box-sizing: border-box !important;
    }

    body.customers .customer-top-submenu > li > a svg,
    body.customers .customer-top-submenu > li > a img {
        width: 13px !important;
        height: 13px !important;
        margin-right: 4px !important;
    }
}


/* v134 - móvil archivos: tabla con scroll limpio + controles en vertical */
@media (max-width: 767px) {
    body.customers .premier-customer-files-page .premier-files-client-box {
        overflow: visible !important;
    }

    body.customers .premier-customer-files-page .dataTables_wrapper > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.customers .premier-customer-files-page .dataTables_wrapper > .row > [class*="col-"] {
        float: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 9px !important;
    }

    body.customers .premier-customer-files-page .dataTables_length,
    body.customers .premier-customer-files-page .dataTables_filter {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        margin-bottom: 9px !important;
    }

    body.customers .premier-customer-files-page .dataTables_length label,
    body.customers .premier-customer-files-page .dataTables_filter label {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.customers .premier-customer-files-page .dataTables_length select {
        display: block !important;
        width: 100% !important;
        height: 42px !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }

    body.customers .premier-customer-files-page .dataTables_filter .input-group {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.customers .premier-customer-files-page .dataTables_filter .input-group-addon {
        width: 42px !important;
        border-radius: 16px 0 0 16px !important;
    }

    body.customers .premier-customer-files-page .dataTables_filter input[type="search"],
    body.customers .premier-customer-files-page .dataTables_filter input[type="text"] {
        width: 100% !important;
        max-width: none !important;
        height: 42px !important;
        border-radius: 0 16px 16px 0 !important;
    }

    body.customers .premier-customer-files-page .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border: 1px solid rgba(226,232,240,0.95) !important;
        border-radius: 16px !important;
        margin-top: 8px !important;
    }

    body.customers .premier-customer-files-page table.table-files {
        display: table !important;
        width: 100% !important;
        min-width: 560px !important;
        table-layout: fixed !important;
        margin-top: 0 !important;
    }

    body.customers .premier-customer-files-page table.table-files thead {
        display: table-header-group !important;
    }

    body.customers .premier-customer-files-page table.table-files tbody {
        display: table-row-group !important;
    }

    body.customers .premier-customer-files-page table.table-files tr {
        display: table-row !important;
    }

    body.customers .premier-customer-files-page table.table-files th,
    body.customers .premier-customer-files-page table.table-files td {
        display: table-cell !important;
        padding: 10px 9px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        vertical-align: middle !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    body.customers .premier-customer-files-page table.table-files th:nth-child(1),
    body.customers .premier-customer-files-page table.table-files td:nth-child(1) {
        width: 42% !important;
    }

    body.customers .premier-customer-files-page table.table-files th:nth-child(2),
    body.customers .premier-customer-files-page table.table-files td:nth-child(2) {
        width: 24% !important;
    }

    body.customers .premier-customer-files-page table.table-files th:nth-child(3),
    body.customers .premier-customer-files-page table.table-files td:nth-child(3) {
        width: 34% !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    body.customers .premier-customer-files-page table.table-files td:nth-child(3) .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 3px 3px !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    body.customers .premier-customer-files-page table.table-files td:nth-child(3) .btn i {
        margin-right: 4px !important;
        font-size: 11px !important;
        flex: 0 0 auto !important;
    }

    body.customers .premier-customer-files-page .dataTables_info,
    body.customers .premier-customer-files-page .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
    }
}


/* v136 - móvil archivos: controles DataTables en filas separadas */
@media (max-width: 767px) {
    body.customers .premier-customer-files-page .dataTables_wrapper > .row {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.customers .premier-customer-files-page .dataTables_wrapper > .row > .col-md-6,
    body.customers .premier-customer-files-page .dataTables_wrapper > .row > .col-sm-6,
    body.customers .premier-customer-files-page .dataTables_wrapper > .row > .col-xs-6 {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        clear: both !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 0 10px 0 !important;
    }

    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_length,
    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_filter {
        float: none !important;
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        clear: both !important;
        text-align: left !important;
        margin: 0 0 10px 0 !important;
    }

    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_length label,
    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_filter label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        margin: 0 !important;
    }

    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_length select {
        display: block !important;
        float: none !important;
        width: 82px !important;
        min-width: 82px !important;
        max-width: 82px !important;
        height: 40px !important;
        margin: 0 !important;
        border-radius: 15px !important;
    }

    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_filter .input-group {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_filter .input-group-addon {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_filter input {
        flex: 1 1 auto !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 40px !important;
        margin-left: 0 !important;
    }
}

/* v137 - móvil archivos: buscador DataTables con bordes uniformes */
@media (max-width: 767px) {
    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_filter .input-group {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
        margin: 0 !important;
        border: 1px solid rgba(148, 163, 184, 0.38) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: rgba(255,255,255,0.94) !important;
        box-shadow: 0 8px 20px rgba(15,23,42,0.06) !important;
    }

    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_filter .input-group-addon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(248,250,252,0.96) !important;
        color: #64748b !important;
    }

    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_filter input[type="search"],
    body.customers .premier-customer-files-page div.dataTables_wrapper div.dataTables_filter input[type="text"] {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 13px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
}