/* =========================================================
   GRUPO MISOL LATAM
   Tema administrativo para osTicket SCP
   Fase 1 - Login
   ========================================================= */

:root {
    --misol-bg: #061321;
    --misol-panel: rgba(8, 27, 45, 0.88);
    --misol-panel-border: rgba(90, 164, 221, 0.24);
    --misol-blue: #1678c8;
    --misol-blue-light: #31a4f2;
    --misol-yellow: #f4c430;
    --misol-text: #f4f8fc;
    --misol-muted: #a9bdd0;
    --misol-danger: #ff6b6b;
}

/* Fondo general */
html,
body#loginBody {
    min-height: 100%;
}

body#loginBody {
    margin: 0;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    color: var(--misol-text);
    background-color: var(--misol-bg);
}

/* Oscurece ligeramente la fotografía configurada en osTicket */
#brickwall {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(
            115deg,
            rgba(3, 13, 24, 0.82),
            rgba(5, 23, 39, 0.54) 48%,
            rgba(3, 13, 24, 0.76)
        );
    pointer-events: none;
}

/* Tarjeta principal */
#loginBox {
    box-sizing: border-box;
    width: min(440px, calc(100vw - 34px));
    min-height: auto;
    margin: 0;
    padding: 38px 38px 30px;
    position: fixed;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(11, 37, 60, 0.94),
            rgba(5, 20, 34, 0.91)
        );
    border: 1px solid var(--misol-panel-border);
    border-radius: 24px;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* Neutraliza el cuadro borroso original */
#loginBox #blur {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.18;
    pointer-events: none;
}

#loginBox #background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(49, 164, 242, 0.30),
            transparent 42%
        );
}

/* Logo */
#loginBox h1#logo {
    width: 100%;
    height: auto;
    margin: 0 0 22px;
    padding: 0;
    text-align: center;
}

#loginBox h1#logo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
}

#loginBox h1#logo img {
    display: block;
    width: auto;
    max-width: 245px;
    max-height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
}

#loginBox .valign-helper {
    display: none;
}

/* Mensaje principal */
#login-message {
    margin: 0 0 8px;
    padding: 0;
    color: var(--misol-text);
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.3px;
}

#loginBox .banner {
    min-height: 18px;
    margin: 0 0 20px;
    padding: 0;
    color: var(--misol-muted);
    text-align: center;
    line-height: 1.55;
}

#loginBox .banner small {
    font-size: 13px;
}

/* Formulario */
#loginBox form,
#loginBox fieldset {
    width: 100%;
    box-sizing: border-box;
}

#loginBox fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

#loginBox input[type="text"],
#loginBox input[type="password"],
#loginBox input[type="email"],
#loginBox select,
#loginBox textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 52px;
    margin: 0 0 14px;
    padding: 0 17px;

    color: var(--misol-text);
    font-size: 15px;
    font-family: inherit;

    background: rgba(2, 14, 25, 0.72);
    border: 1px solid rgba(127, 177, 216, 0.25);
    border-radius: 12px;
    outline: none;
    box-shadow: none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

#loginBox input::placeholder {
    color: #8fa9bf;
    opacity: 1;
}

#loginBox input:hover {
    border-color: rgba(49, 164, 242, 0.48);
}

#loginBox input:focus {
    background: rgba(3, 19, 33, 0.92);
    border-color: var(--misol-blue-light);
    box-shadow: 0 0 0 4px rgba(49, 164, 242, 0.13);
}

/* Botón principal */
#loginBox button.submit,
#loginBox .button.submit {
    box-sizing: border-box;
    float: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    min-height: 52px;
    margin: 12px 0 0;
    padding: 0 22px;

    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-shadow: none;

    background:
        linear-gradient(
            135deg,
            var(--misol-blue),
            var(--misol-blue-light)
        );
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(17, 117, 194, 0.30);
    cursor: pointer;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        filter 160ms ease;
}

#loginBox button.submit:hover,
#loginBox .button.submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(17, 117, 194, 0.38);
}

#loginBox button.submit:active,
#loginBox .button.submit:active {
    transform: translateY(0);
}

#loginBox button.submit:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

/* Recuperar contraseña */
#loginBox h3[style*="display:inline"] {
    display: block !important;
    margin: 3px 0 0;
    padding: 0;
    text-align: right;
}

#reset-link {
    color: #b8cce0;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

#reset-link:hover {
    color: var(--misol-blue-light);
    text-decoration: none;
}

/* Mensajes y errores */
#loginBox .error,
#loginBox .warning,
#loginBox .notice {
    border-radius: 10px;
}

#login-message:not(:empty) {
    word-break: break-word;
}

/* Verificando */
#loading.dialog {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 18px;
    padding: 13px 15px;

    color: #dcecff;
    text-align: center;

    background: rgba(20, 111, 181, 0.18);
    border: 1px solid rgba(49, 164, 242, 0.28);
    border-radius: 11px;
}

#loading.dialog h1 {
    margin: 0;
    color: inherit;
    font-size: 14px;
}

/* Métodos externos */
#loginBox .or {
    margin: 22px 0;
}

#loginBox .or hr {
    border: 0;
    border-top: 1px solid rgba(160, 197, 225, 0.16);
}

#loginBox .external-auth {
    text-align: center;
}

/* Pie de la tarjeta */
#company {
    position: static;
    width: 100%;
    margin: 25px 0 0;
    padding: 18px 0 0;
    color: #829bb0;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid rgba(160, 197, 225, 0.12);
}

#company .content {
    padding: 0;
}

/* Ocultamos la marca externa en el login corporativo */
#poweredBy {
    display: none;
}

/* Enlace oculto de osTicket */
.hidden {
    display: none !important;
}

/* Responsive */
@media (max-width: 560px) {
    #loginBox {
        width: calc(100vw - 26px);
        padding: 31px 24px 25px;
        border-radius: 19px;
    }

    #loginBox h1#logo img {
        max-width: 215px;
        max-height: 72px;
    }

    #login-message {
        font-size: 21px;
    }
}

@media (max-height: 650px) {
    #loginBox {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 28px auto;
    }

    body#loginBody {
        overflow-y: auto;
    }
}

/* =========================================================
   Ajustes visuales posteriores — Login MISOL
   ========================================================= */

/* Elimina capas claras heredadas del login original */
body#loginBody #loginBox,
body#loginBody #loginBox:before,
body#loginBody #loginBox:after {
    background:
        linear-gradient(
            145deg,
            rgba(10, 32, 52, 0.94),
            rgba(4, 17, 30, 0.94)
        ) !important;
    background-color: rgba(6, 24, 40, 0.94) !important;
}

body#loginBody #loginBox:before,
body#loginBody #loginBox:after {
    opacity: 0 !important;
    box-shadow: none !important;
}

/* Neutraliza por completo el efecto borroso claro de osTicket */
body#loginBody #loginBox #blur {
    display: none !important;
}

body#loginBody #loginBox {
    color: #f4f8fc !important;
    border: 1px solid rgba(77, 166, 229, 0.28) !important;
    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset !important;
}

/* Logo un poco más limpio */
body#loginBody #loginBox h1#logo {
    margin-bottom: 24px !important;
}

body#loginBody #loginBox h1#logo img {
    max-width: 235px !important;
    max-height: 78px !important;
    filter:
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22))
        brightness(1.08) !important;
}

/* Título */
body#loginBody #login-message {
    color: #ffffff !important;
    text-shadow: none !important;
    margin-bottom: 24px !important;
}

/* Campos oscuros */
body#loginBody #loginBox input[type="text"],
body#loginBody #loginBox input[type="password"],
body#loginBody #loginBox input[type="email"] {
    color: #ffffff !important;
    background-color: rgba(2, 13, 23, 0.82) !important;
    background-image: none !important;
    border: 1px solid rgba(130, 184, 224, 0.25) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body#loginBody #loginBox input[type="text"]:focus,
body#loginBody #loginBox input[type="password"]:focus,
body#loginBody #loginBox input[type="email"]:focus {
    border-color: #31a4f2 !important;
    background-color: rgba(3, 18, 31, 0.96) !important;
    box-shadow: 0 0 0 4px rgba(49, 164, 242, 0.14) !important;
}

/* Botón */
body#loginBody #loginBox button.submit {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            #1479c9,
            #2ea9f5
        ) !important;
    border: 0 !important;
    text-shadow: none !important;
}

/* Pie limpio */
body#loginBody #company,
body#loginBody #company .content {
    color: #8ea9be !important;
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

body#loginBody #company {
    border-top: 1px solid rgba(150, 195, 226, 0.13) !important;
}

/* Evita sombras heredadas en textos */
body#loginBody #loginBox h1,
body#loginBody #loginBox h2,
body#loginBody #loginBox h3,
body#loginBody #loginBox small,
body#loginBody #loginBox a {
    text-shadow: none !important;
}

/* =========================================================
   GRUPO MISOL LATAM
   SCP - Panel interno de agentes
   Fase 1
   ========================================================= */

body:not(#loginBody) {
    margin: 0;
    color: #26384a;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    background:
        linear-gradient(
            180deg,
            #eef4f8 0,
            #f5f8fb 220px,
            #f7f9fb 100%
        );
}

/* Contenedor principal */
body:not(#loginBody) #container {
    box-sizing: border-box;
    width: min(1480px, calc(100% - 34px));
    min-width: 980px;
    margin: 18px auto 35px;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Encabezado */
body:not(#loginBody) #header {
    box-sizing: border-box;
    position: relative;
    height: 92px;
    padding: 0 28px;
    overflow: visible;

    background:
        radial-gradient(
            circle at 10% 0,
            rgba(48, 160, 237, 0.20),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #071b2d,
            #092a45 56%,
            #061827
        );
    border: 1px solid rgba(58, 137, 193, 0.26);
    border-radius: 18px 18px 0 0;
    box-shadow:
        0 18px 45px rgba(15, 43, 68, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Logo */
body:not(#loginBody) #header #logo {
    display: inline-flex;
    align-items: center;
    height: 92px;
    margin: 0;
    padding: 0;
}

body:not(#loginBody) #header #logo img {
    display: block;
    width: auto;
    max-width: 235px;
    max-height: 67px;
    object-fit: contain;
    filter:
        brightness(1.22)
        contrast(1.04)
        drop-shadow(0 8px 15px rgba(0, 0, 0, 0.22));
}

body:not(#loginBody) #header .valign-helper {
    display: none;
}

/* Información del usuario */
body:not(#loginBody) #header #info {
    position: absolute;
    top: 19px;
    right: 27px;
    margin: 0;
    padding: 10px 15px;

    color: #b7c9d8;
    font-size: 12px;
    line-height: 1.7;

    background: rgba(1, 13, 23, 0.33);
    border: 1px solid rgba(132, 184, 221, 0.14);
    border-radius: 11px;
}

body:not(#loginBody) #header #info strong {
    color: #ffffff;
    font-weight: 700;
}

body:not(#loginBody) #header #info a {
    color: #c7d9e7;
    text-decoration: none;
}

body:not(#loginBody) #header #info a:hover {
    color: #42aff4;
}

/* Navegación principal */
body:not(#loginBody) ul#nav {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: 59px;
    margin: 0;
    padding: 8px 17px;

    list-style: none;
    background: #ffffff;
    border-right: 1px solid #dbe5ed;
    border-left: 1px solid #dbe5ed;
    border-bottom: 1px solid #dbe5ed;
}

body:not(#loginBody) ul#nav > li {
    position: relative;
    float: none;
    display: flex;
    align-items: stretch;
    margin: 0 4px;
    padding: 0;
    background: transparent;
    border: 0;
}

body:not(#loginBody) ul#nav > li > a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;

    color: #4b6275;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;

    background: transparent;
    border: 0;
    border-radius: 10px;

    transition:
        color 150ms ease,
        background-color 150ms ease,
        transform 150ms ease;
}

body:not(#loginBody) ul#nav > li > a:hover {
    color: #126eae;
    background: #eef7fd;
    transform: translateY(-1px);
}

body:not(#loginBody) ul#nav > li.active > a {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #116fb8,
            #28a1eb
        );
    box-shadow: 0 8px 18px rgba(24, 130, 202, 0.22);
}

/* Submenús desplegables */
body:not(#loginBody) ul#nav li ul {
    z-index: 1000;
    min-width: 210px;
    padding: 7px;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #dbe5ed;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(27, 56, 78, 0.18);
}

body:not(#loginBody) ul#nav li ul li {
    margin: 0;
}

body:not(#loginBody) ul#nav li ul li a {
    box-sizing: border-box;
    display: block;
    padding: 10px 12px;

    color: #425b70;
    font-size: 13px;
    text-decoration: none;

    border-radius: 8px;
}

body:not(#loginBody) ul#nav li ul li a:hover {
    color: #116fae;
    background: #edf7fd;
}

/* Navegación secundaria */
body:not(#loginBody) nav {
    box-sizing: border-box;
}

body:not(#loginBody) ul#sub_nav {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: 55px;
    margin: 0;
    padding: 8px 20px;

    list-style: none;
    background: #f8fafc;
    border-right: 1px solid #dbe5ed;
    border-bottom: 1px solid #dbe5ed;
    border-left: 1px solid #dbe5ed;
}

body:not(#loginBody) ul#sub_nav li {
    float: none;
    margin: 0;
    padding: 0;
}

body:not(#loginBody) ul#sub_nav li a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 37px;
    padding: 0 13px;

    color: #5a6f82;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-shadow: none;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
}

body:not(#loginBody) ul#sub_nav li a:hover {
    color: #126fae;
    background: #ffffff;
    border-color: #d9e5ed;
}

body:not(#loginBody) ul#sub_nav li a.active {
    color: #126fae;
    background: #eaf5fc;
    border-color: #cfe7f7;
}

/* Área de contenido */
body:not(#loginBody) #content {
    box-sizing: border-box;
    min-height: 560px;
    padding: 28px 28px 35px;

    background: #ffffff;
    border-right: 1px solid #dbe5ed;
    border-bottom: 1px solid #dbe5ed;
    border-left: 1px solid #dbe5ed;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 18px 45px rgba(31, 65, 89, 0.10);
}

/* Títulos */
body:not(#loginBody) #content h1,
body:not(#loginBody) #content h2,
body:not(#loginBody) #content h3 {
    color: #17354d;
    font-family: inherit;
    text-shadow: none;
}

body:not(#loginBody) #content h2 {
    margin-top: 0;
    font-size: 23px;
    letter-spacing: -0.25px;
}

/* Enlaces */
body:not(#loginBody) #content a {
    color: #1477b9;
}

body:not(#loginBody) #content a:hover {
    color: #0b5e96;
}

/* Botones */
body:not(#loginBody) .button,
body:not(#loginBody) button,
body:not(#loginBody) input[type="submit"],
body:not(#loginBody) input[type="button"] {
    box-sizing: border-box;
    min-height: 36px;
    padding: 8px 14px;

    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-shadow: none;

    background:
        linear-gradient(
            135deg,
            #1579bd,
            #2b9ee5
        );
    border: 0;
    border-radius: 8px;
    box-shadow: 0 7px 16px rgba(22, 119, 184, 0.19);
    cursor: pointer;

    transition:
        filter 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
}

body:not(#loginBody) .button:hover,
body:not(#loginBody) button:hover,
body:not(#loginBody) input[type="submit"]:hover,
body:not(#loginBody) input[type="button"]:hover {
    color: #ffffff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 21px rgba(22, 119, 184, 0.24);
}

body:not(#loginBody) .button.green,
body:not(#loginBody) .green.button {
    background:
        linear-gradient(
            135deg,
            #178657,
            #28b37a
        );
    box-shadow: 0 7px 16px rgba(24, 137, 89, 0.19);
}

body:not(#loginBody) .button.red,
body:not(#loginBody) .red.button,
body:not(#loginBody) .danger .button {
    background:
        linear-gradient(
            135deg,
            #ca3f4e,
            #e25a67
        );
}

/* Botones secundarios */
body:not(#loginBody) .action-button {
    color: #415b70;
    background: #ffffff;
    border: 1px solid #d3e0e9;
    box-shadow: 0 5px 13px rgba(30, 62, 84, 0.08);
}

body:not(#loginBody) .action-button:hover {
    color: #126fae;
    background: #f5fbff;
}

/* Formularios */
body:not(#loginBody) input[type="text"],
body:not(#loginBody) input[type="password"],
body:not(#loginBody) input[type="email"],
body:not(#loginBody) input[type="search"],
body:not(#loginBody) select,
body:not(#loginBody) textarea {
    box-sizing: border-box;
    color: #2b4052;
    font-family: inherit;
    background: #ffffff;
    border: 1px solid #cad8e2;
    border-radius: 7px;
    box-shadow: none;
    outline: none;
}

body:not(#loginBody) input[type="text"],
body:not(#loginBody) input[type="password"],
body:not(#loginBody) input[type="email"],
body:not(#loginBody) input[type="search"],
body:not(#loginBody) select {
    min-height: 36px;
    padding: 7px 10px;
}

body:not(#loginBody) textarea {
    padding: 10px;
}

body:not(#loginBody) input:focus,
body:not(#loginBody) select:focus,
body:not(#loginBody) textarea:focus {
    border-color: #2a9be0;
    box-shadow: 0 0 0 3px rgba(42, 155, 224, 0.12);
}

/* Tablas generales */
body:not(#loginBody) table.list {
    width: 100% !important;
    margin-top: 17px;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #dce6ed;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    box-shadow: 0 9px 26px rgba(29, 62, 84, 0.07);
}

body:not(#loginBody) table.list thead th,
body:not(#loginBody) table.list thead td {
    box-sizing: border-box;
    padding: 13px 11px;

    color: #52697b;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.35px;
    text-transform: uppercase;

    background:
        linear-gradient(
            180deg,
            #f9fbfc,
            #eef4f7
        );
    border: 0;
    border-bottom: 1px solid #dbe5ec;
    text-shadow: none;
}

body:not(#loginBody) table.list tbody td {
    box-sizing: border-box;
    padding: 12px 11px;

    color: #344b5e;
    font-size: 12px;

    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #e7edf2;
}

body:not(#loginBody) table.list tbody tr:last-child td {
    border-bottom: 0;
}

body:not(#loginBody) table.list tbody tr:hover td {
    background: #f2f9fd;
}

body:not(#loginBody) table.list tbody tr:nth-child(even) td {
    background: #fbfcfd;
}

body:not(#loginBody) table.list tbody tr:nth-child(even):hover td {
    background: #f2f9fd;
}

/* Cajas, formularios y pestañas */
body:not(#loginBody) .form_table,
body:not(#loginBody) .configuration,
body:not(#loginBody) .ticket_info,
body:not(#loginBody) .ticket-detail,
body:not(#loginBody) .thread-entry {
    border-radius: 10px;
}

/* Mensajes */
body:not(#loginBody) #error_bar,
body:not(#loginBody) #warning_bar,
body:not(#loginBody) #notice_bar,
body:not(#loginBody) #msg_error,
body:not(#loginBody) #msg_warning,
body:not(#loginBody) #msg_notice,
body:not(#loginBody) .error-banner,
body:not(#loginBody) .warning-banner,
body:not(#loginBody) .notice-banner {
    box-sizing: border-box;
    margin: 0 0 18px;
    padding: 13px 15px;
    border-radius: 9px;
    text-shadow: none;
}

body:not(#loginBody) #msg_notice,
body:not(#loginBody) .notice-banner {
    color: #16653d;
    background: #eaf8f0;
    border: 1px solid #bee7cf;
}

body:not(#loginBody) #msg_warning,
body:not(#loginBody) .warning-banner {
    color: #76580b;
    background: #fff8dc;
    border: 1px solid #f0dda0;
}

body:not(#loginBody) #msg_error,
body:not(#loginBody) .error-banner {
    color: #8d2e39;
    background: #fff0f2;
    border: 1px solid #efc5ca;
}

/* Dropdown de acciones */
body:not(#loginBody) .action-dropdown {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7e3eb;
    border-radius: 10px;
    box-shadow: 0 16px 35px rgba(31, 62, 83, 0.17);
}

body:not(#loginBody) .action-dropdown ul {
    padding: 6px;
}

body:not(#loginBody) .action-dropdown li a {
    padding: 9px 11px;
    color: #425a6d;
    border-radius: 7px;
}

body:not(#loginBody) .action-dropdown li a:hover {
    color: #116eac;
    background: #edf7fd;
}

/* Selección de texto */
body:not(#loginBody) ::selection {
    color: #ffffff;
    background: #228dcc;
}

/* Responsive básico */
@media (max-width: 1100px) {
    body:not(#loginBody) #container {
        width: calc(100% - 20px);
        min-width: 960px;
        margin-top: 10px;
    }

    body:not(#loginBody) #content {
        padding: 22px 20px 30px;
    }

    body:not(#loginBody) ul#nav > li > a {
        padding-right: 11px;
        padding-left: 11px;
    }
}

/* =========================================================
   Ajustes SCP MISOL — lista de tickets
   ========================================================= */

/* Logo más visible sobre el encabezado oscuro */
body:not(#loginBody) #header #logo img {
    max-width: 245px !important;
    max-height: 72px !important;
    filter:
        brightness(1.65)
        contrast(1.12)
        saturate(1.08)
        drop-shadow(0 8px 17px rgba(0, 0, 0, 0.26)) !important;
}

/* El submenú debe ocupar todo el ancho */
body:not(#loginBody) nav,
body:not(#loginBody) nav#subnav,
body:not(#loginBody) nav[id] {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body:not(#loginBody) ul#sub_nav {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* Elimina sprites, flechas y fondos antiguos */
body:not(#loginBody) ul#sub_nav li,
body:not(#loginBody) ul#sub_nav li a,
body:not(#loginBody) ul#nav li,
body:not(#loginBody) ul#nav li a {
    background-image: none !important;
}

body:not(#loginBody) ul#sub_nav li a {
    position: relative;
    padding: 0 15px !important;
    background-color: transparent !important;
}

body:not(#loginBody) ul#sub_nav li a::before,
body:not(#loginBody) ul#sub_nav li a::after {
    display: none !important;
    content: none !important;
}

body:not(#loginBody) ul#sub_nav li a:hover {
    color: #126fae !important;
    background-color: #ffffff !important;
}

body:not(#loginBody) ul#sub_nav li a.active {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, #1377bd, #279de5) !important;
    border-color: transparent !important;
    box-shadow: 0 7px 16px rgba(20, 121, 188, 0.20);
}

/* Área de contenido sin separación extraña */
body:not(#loginBody) #content {
    clear: both !important;
    width: auto !important;
}

/* Barra superior de búsqueda */
body:not(#loginBody) #content form {
    box-sizing: border-box;
}

body:not(#loginBody) #content .search {
    box-sizing: border-box;
}

body:not(#loginBody) #content input[type="search"],
body:not(#loginBody) #content input[name="query"],
body:not(#loginBody) #content input[name="q"] {
    min-height: 38px !important;
    border-radius: 8px 0 0 8px !important;
}

/* Botón de búsqueda unido al campo */
body:not(#loginBody) #content .attached.button,
body:not(#loginBody) #content button.attached {
    min-height: 38px !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Línea divisoria bajo el buscador */
body:not(#loginBody) #content hr {
    border: 0 !important;
    border-top: 1px solid #dfe8ee !important;
}

/* Título de la cola */
body:not(#loginBody) #content h2 {
    color: #126fae !important;
    font-size: 23px !important;
    font-weight: 750 !important;
}


/* Botón de eliminar */
body:not(#loginBody) #content .action-button.red,
body:not(#loginBody) #content .red.action-button,
body:not(#loginBody) #content a.red.button {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, #cf3f50, #e75b69) !important;
    border-color: transparent !important;
}

/* Encabezado de tabla más limpio */
body:not(#loginBody) table.list thead th,
body:not(#loginBody) table.list thead td {
    height: 44px;
    vertical-align: middle;
}

/* Filas más fáciles de leer */
body:not(#loginBody) table.list tbody td {
    height: 45px;
    vertical-align: middle;
}

/* Mantener colores de prioridad, pero más suaves */
body:not(#loginBody) table.list td[style*="background"],
body:not(#loginBody) table.list td[bgcolor] {
    background-clip: padding-box !important;
}

/* Pie de la tabla */
body:not(#loginBody) #content .pagination,
body:not(#loginBody) #content .page-links {
    margin-top: 10px;
    color: #637789;
}

/* Mejor comportamiento en pantallas grandes */
@media (min-width: 1400px) {
    body:not(#loginBody) #container {
        width: calc(100% - 38px) !important;
        max-width: 1580px !important;
    }
}

/* =========================================================
   Corrección definitiva del menú principal activo
   Diseño seleccionado: opción 1
   ========================================================= */

body:not(#loginBody) ul#nav {
    display: flex !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 9px 24px !important;
}

body:not(#loginBody) ul#nav > li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    margin: 0 7px !important;
    padding: 0 !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:not(#loginBody) ul#nav > li > a {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    float: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    width: auto !important;
    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    color: #425a70 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 46px !important;
    text-decoration: none !important;
    text-shadow: none !important;

    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    box-shadow: none !important;

    transform: none !important;
}

body:not(#loginBody) ul#nav > li > a:hover {
    color: #0875bb !important;
    background: #edf7fd !important;
    border-color: #d8ebf7 !important;
    transform: none !important;
}

/* Elemento activo */
body:not(#loginBody) ul#nav > li.active,
body:not(#loginBody) ul#nav > li.active:hover {
    height: 46px !important;

    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:not(#loginBody) ul#nav > li.active > a,
body:not(#loginBody) ul#nav > li.active > a:hover,
body:not(#loginBody) ul#nav > li.active > a:focus,
body:not(#loginBody) ul#nav > li.active > a:active {
    top: auto !important;
    left: auto !important;

    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 19px !important;

    color: #ffffff !important;
    line-height: 46px !important;

    background:
        linear-gradient(
            135deg,
            #0873bd 0%,
            #1999e5 100%
        ) !important;
    background-color: #0873bd !important;
    background-image:
        linear-gradient(
            135deg,
            #0873bd 0%,
            #1999e5 100%
        ) !important;

    border: 1px solid rgba(8, 115, 189, 0.30) !important;
    border-radius: 11px !important;

    box-shadow:
        0 8px 18px rgba(8, 115, 189, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* Elimina adornos antiguos */
body:not(#loginBody) ul#nav > li::before,
body:not(#loginBody) ul#nav > li::after,
body:not(#loginBody) ul#nav > li > a::before,
body:not(#loginBody) ul#nav > li > a::after {
    display: none !important;
    content: none !important;
}

/* Mantiene los desplegables debajo del botón */
body:not(#loginBody) ul#nav > li > ul {
    top: 48px !important;
}

    border-radius: 12px !important;
}


/* Contenedor de botones de acciones */
#content .pull-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

/* Evita que los botones crezcan */
#content .pull-right > * {
    flex: 0 0 auto !important;
}


/* =========================================================
   GRUPO MISOL LATAM
   SCP - Vista del Ticket
   Fase 2.1
   ========================================================= */

body:not(#loginBody) .ticket_info{
    width:100% !important;
    margin:18px 0;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
    border:1px solid #dbe5ef;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(15,23,42,.05);
}

body:not(#loginBody) .ticket_info td{
    padding:8px 12px;
    vertical-align:top;
}

body:not(#loginBody) .ticket_info table{
    width:100%;
}

body:not(#loginBody) .ticket_info table th{
    width:130px;
    padding:10px 12px;
    color:#64748b;
    font-weight:600;
    text-align:left;
    border-bottom:1px solid #edf2f7;
    background:#f8fafc;
}

body:not(#loginBody) .ticket_info table td{
    padding:10px 12px;
    border-bottom:1px solid #edf2f7;
    background:#fff;
}

body:not(#loginBody) .ticket_info table tr:last-child th,
body:not(#loginBody) .ticket_info table tr:last-child td{
    border-bottom:none;
}
/* =========================================================
   Cabecera moderna del Ticket
   ========================================================= */

body:not(#loginBody) .sticky.bar{
    background:#ffffff;
    border:1px solid #dbe5ef;
    border-radius:14px;
    margin-bottom:18px;
    padding:14px 18px;
    box-shadow:0 2px 10px rgba(15,23,42,.05);
}

body:not(#loginBody) .sticky.bar h2{
    margin:0;
    font-size:18px;
    font-weight:700;
}

body:not(#loginBody) .sticky.bar h2 a{
    color:#0b6fc2;
    text-decoration:none;
}

body:not(#loginBody) .tixTitle{
    border:none;
    margin-top:10px;
    margin-bottom:18px;
}

body:not(#loginBody) .tixTitle h3{
    font-size:34px;
    font-weight:300;
    color:#26374d;
    margin:0;
}

/* =========================================================
   GRUPO MISOL LATAM
   SCP - Hilo del Ticket
   Fase 2.2
   ========================================================= */

/* Barra de pestañas: Hilo del Ticket / Tareas */
body:not(#loginBody) #ticketThread > .tabs,
body:not(#loginBody) .ticket-thread > .tabs,
body:not(#loginBody) ul.tabs {
    min-height:44px;
    padding:0 14px;
    margin:20px 0;
    background:#f1f6fa;
    border:1px solid #dbe5ef;
    border-radius:12px;
    box-sizing:border-box;
}

body:not(#loginBody) ul.tabs li {
    margin:5px 5px 5px 0;
}

body:not(#loginBody) ul.tabs li a {
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 16px;
    color:#51677c;
    font-weight:600;
    text-decoration:none;
    background:transparent;
    border:0;
    border-radius:8px;
    box-shadow:none;
}

body:not(#loginBody) ul.tabs li.active a,
body:not(#loginBody) ul.tabs li a.active {
    color:#087abd;
    background:#ffffff;
    box-shadow:0 2px 8px rgba(15,23,42,.08);
}

/* Tarjetas de mensajes */
body:not(#loginBody) .thread-entry {
    position:relative;
    margin:18px 48px 22px 0;
    overflow:visible;
    background:#ffffff;
    border:1px solid #d7e3ed;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(15,23,42,.06);
}

body:not(#loginBody) .thread-entry::before,
body:not(#loginBody) .thread-entry::after {
    display:none;
}

body:not(#loginBody) .thread-entry .header {
    min-height:38px;
    padding:10px 14px;
    color:#263b50;
    font-weight:500;
    background:#edf6fc;
    border:0;
    border-bottom:1px solid #d7e3ed;
    border-radius:11px 11px 0 0;
    box-sizing:border-box;
}

body:not(#loginBody) .thread-entry .header b,
body:not(#loginBody) .thread-entry .header strong {
    color:#173c5c;
    font-weight:700;
}

body:not(#loginBody) .thread-entry .thread-body,
body:not(#loginBody) .thread-entry .body {
    padding:16px 18px;
    color:#34495e;
    line-height:1.65;
    background:#ffffff;
    border-radius:0 0 11px 11px;
}

/* Notas internas */
body:not(#loginBody) .thread-entry.note {
    border-color:#eadb9c;
    background:#fffdf5;
}

body:not(#loginBody) .thread-entry.note .header {
    color:#6f580c;
    background:#fff5cf;
    border-bottom-color:#eadb9c;
}

body:not(#loginBody) .thread-entry.note .thread-body,
body:not(#loginBody) .thread-entry.note .body {
    background:#fffdf5;
}

/* Respuestas publicadas por agentes */
body:not(#loginBody) .thread-entry.response {
    margin-left:48px;
    margin-right:0;
    border-color:#bcdced;
}

body:not(#loginBody) .thread-entry.response .header {
    background:#e8f6fd;
}

/* Eventos del historial */
body:not(#loginBody) .thread-event {
    color:#7b8794;
    line-height:1.5;
}

body:not(#loginBody) .thread-event strong,
body:not(#loginBody) .thread-event b {
    color:#435466;
}

/* Aviso de vencimiento */
body:not(#loginBody) #ticketThread + .warning-banner,
body:not(#loginBody) .thread-entry + .warning-banner {
    border-radius:10px;
}

/* =========================================================
   GRUPO MISOL LATAM
   SCP - Formulario de respuesta
   Fase 2.3
   ========================================================= */

body:not(#loginBody) #response_options,
body:not(#loginBody) #post-reply,
body:not(#loginBody) #post-note {
    scroll-margin-top:120px;
}

body:not(#loginBody) form#reply,
body:not(#loginBody) form#note {
    background:#ffffff;
    border:1px solid #d7e3ed;
    border-radius:14px;
    box-shadow:0 3px 14px rgba(15,23,42,.06);
    overflow:hidden;
}

body:not(#loginBody) form#reply > table,
body:not(#loginBody) form#note > table {
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}

body:not(#loginBody) form#reply td,
body:not(#loginBody) form#note td {
    padding:8px 10px;
    vertical-align:top;
}

body:not(#loginBody) form#reply th,
body:not(#loginBody) form#note th {
    width:125px;
    padding:10px;
    color:#30465a;
    font-weight:700;
    text-align:left;
    vertical-align:top;
}

body:not(#loginBody) form#reply select,
body:not(#loginBody) form#note select,
body:not(#loginBody) form#reply input[type="text"],
body:not(#loginBody) form#note input[type="text"] {
    min-height:40px;
    padding:7px 12px;
    color:#34495e;
    background:#ffffff;
    border:1px solid #cad9e5;
    border-radius:8px;
    box-sizing:border-box;
    box-shadow:none;
}

body:not(#loginBody) form#reply select:focus,
body:not(#loginBody) form#note select:focus,
body:not(#loginBody) form#reply input[type="text"]:focus,
body:not(#loginBody) form#note input[type="text"]:focus {
    border-color:#2497d0;
    outline:none;
    box-shadow:0 0 0 3px rgba(36,151,208,.12);
}

body:not(#loginBody) form#reply .redactor-box,
body:not(#loginBody) form#note .redactor-box {
    margin-top:8px;
    border:1px solid #d7e3ed;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 9px rgba(15,23,42,.05);
}

body:not(#loginBody) form#reply .redactor-toolbar,
body:not(#loginBody) form#note .redactor-toolbar {
    padding:8px 10px;
    background:#f8fafc;
    border-bottom:1px solid #e5edf3;
    box-shadow:none;
}

body:not(#loginBody) form#reply .redactor-editor,
body:not(#loginBody) form#note .redactor-editor {
    min-height:190px;
    padding:18px;
    color:#34495e;
    background:#ffffff;
    line-height:1.6;
}

body:not(#loginBody) form#reply .filedrop,
body:not(#loginBody) form#note .filedrop {
    margin-top:0;
    padding:10px 12px;
    color:#788897;
    background:#f8fafc;
    border:1px dashed #bdcad5;
    border-radius:0 0 9px 9px;
}

body:not(#loginBody) form#reply input[type="submit"],
body:not(#loginBody) form#note input[type="submit"],
body:not(#loginBody) form#reply button[type="submit"],
body:not(#loginBody) form#note button[type="submit"] {
    min-height:42px;
    padding:0 20px;
    color:#ffffff;
    font-weight:700;
    background:#168dcc;
    border:1px solid #168dcc;
    border-radius:9px;
    box-shadow:0 4px 10px rgba(22,141,204,.20);
    cursor:pointer;
}

body:not(#loginBody) form#reply input[type="submit"]:hover,
body:not(#loginBody) form#note input[type="submit"]:hover,
body:not(#loginBody) form#reply button[type="submit"]:hover,
body:not(#loginBody) form#note button[type="submit"]:hover {
    background:#0f78b1;
    border-color:#0f78b1;
}

body:not(#loginBody) form#reply input[type="reset"],
body:not(#loginBody) form#note input[type="reset"],
body:not(#loginBody) form#reply button[type="reset"],
body:not(#loginBody) form#note button[type="reset"] {
    min-height:40px;
    padding:0 16px;
    color:#5e6f7e;
    background:#ffffff;
    border:1px solid #cbd7e1;
    border-radius:8px;
    cursor:pointer;
}

/* =========================================================
   GRUPO MISOL LATAM
   SCP - Ajuste compacto del formulario
   Fase 2.4
   ========================================================= */

body:not(#loginBody) form#reply > table,
body:not(#loginBody) form#note > table {
    margin:0;
}

body:not(#loginBody) form#reply th,
body:not(#loginBody) form#note th,
body:not(#loginBody) form#reply td,
body:not(#loginBody) form#note td {
    padding-top:6px;
    padding-bottom:6px;
}

body:not(#loginBody) form#reply .redactor-box,
body:not(#loginBody) form#note .redactor-box {
    margin-top:4px;
}

body:not(#loginBody) form#reply .redactor-editor,
body:not(#loginBody) form#note .redactor-editor {
    min-height:160px;
}

body:not(#loginBody) form#reply .filedrop,
body:not(#loginBody) form#note .filedrop {
    padding:8px 12px;
}

body:not(#loginBody) form#reply input[type="submit"],
body:not(#loginBody) form#note input[type="submit"],
body:not(#loginBody) form#reply button[type="submit"],
body:not(#loginBody) form#note button[type="submit"] {
    min-height:40px;
}

body:not(#loginBody) form#reply input[type="reset"],
body:not(#loginBody) form#note input[type="reset"],
body:not(#loginBody) form#reply button[type="reset"],
body:not(#loginBody) form#note button[type="reset"] {
    min-height:38px;
}


/* =========================================================
   GRUPO MISOL LATAM
   SCP - Navegación secundaria de Tickets
   ========================================================= */

body:not(#loginBody) ul#subnav {
    min-height:58px;
    padding:0 30px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#f7fafc;
    border-bottom:1px solid #d9e4ed;
    box-sizing:border-box;
}

body:not(#loginBody) ul#subnav > li {
    height:auto;
    margin:0;
}

body:not(#loginBody) ul#subnav > li > a {
    display:flex;
    align-items:center;
    min-height:38px;
    padding:0 16px;
    color:#526a80;
    font-size:15px;
    font-weight:600;
    line-height:1;
    text-decoration:none;
    border-radius:9px;
    box-sizing:border-box;
    transition:background-color .18s ease, color .18s ease;
}

body:not(#loginBody) ul#subnav > li > a:hover {
    color:#087fc2;
    background:#eaf5fb;
}

body:not(#loginBody) ul#subnav > li.active > a,
body:not(#loginBody) ul#subnav > li.child.active > a {
    color:#087fc2;
    background:#ffffff;
    box-shadow:0 2px 9px rgba(15,23,42,.08);
}

body:not(#loginBody) ul#subnav > li > a i {
    margin-right:6px;
    font-size:11px;
}


/* =========================================================
   GRUPO MISOL LATAM
   SCP - Tipografía de tablas
   ========================================================= */

body:not(#loginBody) table.list thead th,
body:not(#loginBody) table.list thead th a {
    font-size:13px;
    font-weight:700;
    letter-spacing:.025em;
}

body:not(#loginBody) table.list tbody td {
    font-size:14px;
    line-height:1.45;
}

body:not(#loginBody) table.list tbody td a {
    font-size:14px;
}

body:not(#loginBody) table.list tbody tr {
    height:49px;
}

/* =========================================================
   GRUPO MISOL LATAM
   SCP - Menús desplegables de colas
   ========================================================= */

body:not(#loginBody) ul#subnav li.top-queue {
    position:relative;
}

body:not(#loginBody) ul#subnav .customQ-dropdown {
    min-width:260px;
    padding:8px;
    margin-top:8px;
    background:#ffffff;
    border:1px solid #d6e2ec;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(15,23,42,.16);
    overflow:hidden;
}

body:not(#loginBody) ul#subnav .customQ-dropdown ul {
    margin:0;
    padding:0;
    background:#ffffff;
    border:0;
}

body:not(#loginBody) ul#subnav .customQ-dropdown li {
    margin:0 0 4px;
    padding:0;
    background:transparent;
    border:0;
}

body:not(#loginBody) ul#subnav .customQ-dropdown li:last-child {
    margin-bottom:0;
}

body:not(#loginBody) ul#subnav .customQ-dropdown li a {
    display:flex;
    align-items:center;
    min-height:42px;
    padding:0 14px;
    color:#40576c;
    font-size:14px;
    font-weight:600;
    line-height:1.25;
    text-decoration:none;
    background:#ffffff;
    border:0;
    border-radius:8px;
    box-sizing:border-box;
    transition:background-color .18s ease, color .18s ease;
}

body:not(#loginBody) ul#subnav .customQ-dropdown li a:hover {
    color:#087fc2;
    background:#eaf5fb;
}

body:not(#loginBody) ul#subnav .customQ-dropdown li a.active,
body:not(#loginBody) ul#subnav .customQ-dropdown li.active > a {
    color:#ffffff;
    background:#148dcc;
    box-shadow:0 4px 10px rgba(20,141,204,.22);
}

body:not(#loginBody) ul#subnav .customQ-dropdown .queue-count,
body:not(#loginBody) ul#subnav .customQ-dropdown .newItemQ {
    min-width:28px;
    height:28px;
    margin:7px 8px 0 0;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#087fc2;
    font-size:13px;
    font-weight:700;
    background:#edf7fc;
    border-radius:20px;
    box-sizing:border-box;
}

body:not(#loginBody) ul#subnav .customQ-dropdown li.active .queue-count,
body:not(#loginBody) ul#subnav .customQ-dropdown li.active .newItemQ {
    color:#ffffff;
    background:rgba(255,255,255,.20);
}

body:not(#loginBody) ul#subnav .customQ-dropdown .add-queue {
    margin:8px -8px -8px;
    padding:8px;
    background:#f7fafc;
    border-top:1px solid #e3ebf1;
}

body:not(#loginBody) ul#subnav .customQ-dropdown .add-queue a {
    min-height:38px;
    color:#526a80;
    font-size:13px;
    font-weight:600;
    background:transparent;
}

body:not(#loginBody) ul#subnav .customQ-dropdown .add-queue a:hover {
    color:#087fc2;
    background:#eaf5fb;
}

body:not(#loginBody) ul#subnav .customQ-dropdown .personalQ {
    height:1px;
    margin:7px 4px;
    background:#e3ebf1;
}

/* =========================================================
   GRUPO MISOL LATAM
   SCP - Corrección real del menú de colas
   ========================================================= */

body:not(#loginBody) #customQ_nav ul li.item div.customQ-dropdown {
    min-width:250px !important;
    top:42px !important;
    left:0 !important;
    padding:8px !important;
    background:#ffffff !important;
    border:1px solid #d6e2ec !important;
    border-radius:12px !important;
    box-shadow:0 14px 34px rgba(15,23,42,.18) !important;
    overflow:visible !important;
    font-size:14px !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown ul.scroll-height {
    max-height:360px !important;
    padding:0 !important;
    margin:0 !important;
    background:#ffffff !important;
    border:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown ul li {
    position:relative !important;
    min-height:42px !important;
    margin:0 0 4px !important;
    padding:0 !important;
    color:#40576c !important;
    background:#ffffff !important;
    border:0 !important;
    border-radius:8px !important;
    list-style:none !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown ul li:last-child {
    margin-bottom:0 !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown ul li > a {
    display:flex !important;
    align-items:center !important;
    min-height:42px !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 48px 0 14px !important;
    color:#40576c !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.25 !important;
    text-decoration:none !important;
    background:transparent !important;
    border:0 !important;
    border-radius:8px !important;
    box-sizing:border-box !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown ul li:not(.personalQ):hover {
    color:#087fc2 !important;
    background:#eaf5fb !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown ul li:hover > a {
    color:#087fc2 !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown ul li > a.active,
body:not(#loginBody) #customQ_nav .customQ-dropdown ul li.active > a {
    color:#ffffff !important;
    background:#148dcc !important;
    box-shadow:0 4px 10px rgba(20,141,204,.22) !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown ul li > span,
body:not(#loginBody) #customQ_nav .customQ-dropdown ul li > span.newItemQ {
    position:absolute !important;
    top:7px !important;
    right:8px !important;
    min-width:28px !important;
    height:28px !important;
    margin:0 !important;
    padding:0 7px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#087fc2 !important;
    font-size:13px !important;
    font-weight:700 !important;
    background:#edf7fc !important;
    border-radius:20px !important;
    box-sizing:border-box !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown ul li:hover > span {
    color:#087fc2 !important;
    background:#dff1fa !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown li.personalQ {
    height:1px !important;
    min-height:1px !important;
    margin:7px 4px !important;
    background:#e3ebf1 !important;
    border:0 !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown .add-queue {
    margin:8px -8px -8px !important;
    padding:8px !important;
    background:#f7fafc !important;
    border-top:1px solid #e3ebf1 !important;
    border-radius:0 0 11px 11px !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown .add-queue a {
    display:flex !important;
    align-items:center !important;
    min-height:38px !important;
    padding:0 12px !important;
    color:#526a80 !important;
    font-size:13px !important;
    font-weight:600 !important;
    background:transparent !important;
    border-radius:8px !important;
}

body:not(#loginBody) #customQ_nav .customQ-dropdown .add-queue a:hover {
    color:#087fc2 !important;
    background:#eaf5fb !important;
}

/* =========================================================
   GRUPO MISOL LATAM
   SCP - Corrección de estabilidad del menú de colas
   ========================================================= */

body:not(#loginBody) #customQ_nav ul li.item {
    position:relative !important;
    padding-bottom:10px !important;
    margin-bottom:-10px !important;
}

body:not(#loginBody) #customQ_nav ul li.item div.customQ-dropdown {
    top:36px !important;
    margin-top:0 !important;
}

body:not(#loginBody) #customQ_nav ul li.item div.customQ-dropdown::before {
    content:"";
    position:absolute;
    top:-12px;
    left:0;
    width:100%;
    height:14px;
    background:transparent;
}

/* ===== MISOL - Barra de submenús ===== */

body:not(#loginBody) ul#subnav > li > a{
    font-size:17px;
    font-weight:600;
    color:#4b627a;
    padding:12px 18px;
    transition:.2s;
}

body:not(#loginBody) ul#subnav > li > a:hover{
    color:#0b84d8;
}

body:not(#loginBody) ul#subnav > li.active > a{
    font-size:17px;
    font-weight:700;
}

/* =========================================================
   MISOL - Tipografía real del menú secundario de Tickets
   ========================================================= */

body:not(#loginBody) #customQ_nav > ul > li.item > a.Ticket,
body:not(#loginBody) #customQ_nav > ul > li > a {
    display:flex !important;
    align-items:center !important;
    min-height:48px !important;
    padding:0 20px !important;
    color:#4b6278 !important;
    font-size:17px !important;
    font-weight:600 !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
    text-decoration:none !important;
    box-sizing:border-box !important;
}

body:not(#loginBody) #customQ_nav > ul > li.item:hover > a.Ticket,
body:not(#loginBody) #customQ_nav > ul > li > a:hover {
    color:#087fc2 !important;
}

body:not(#loginBody) #customQ_nav > ul > li.item.active > a.Ticket,
body:not(#loginBody) #customQ_nav > ul > li.item.child.active > a.Ticket {
    color:#087fc2 !important;
    font-weight:700 !important;
}

/* Mantener el desplegable en un tamaño normal */
body:not(#loginBody) #customQ_nav .customQ-dropdown ul li > a {
    font-size:14px !important;
    font-weight:600 !important;
}

/* =========================================================
   MISOL - Eliminar efecto de botón doble en submenú
   ========================================================= */

body:not(#loginBody) #customQ_nav > ul > li.item {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
}

body:not(#loginBody) #customQ_nav > ul > li.item > a.Ticket {
    border:1px solid transparent !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:10px !important;
}

body:not(#loginBody) #customQ_nav > ul > li.item.active > a.Ticket,
body:not(#loginBody) #customQ_nav > ul > li.item.child.active > a.Ticket {
    border-color:#c7d7e4 !important;
    background:#ffffff !important;
    box-shadow:0 3px 10px rgba(15,23,42,.08) !important;
}

body:not(#loginBody) #customQ_nav > ul > li.item:hover > a.Ticket {
    border-color:#d8e5ee !important;
    background:#f8fbfd !important;
}

/* =========================================================
   GRUPO MISOL LATAM
   SCP - Dashboard moderno
   Fase 1
   ========================================================= */

body:not(#loginBody) .misol-dashboard {
    width:100%;
}

body:not(#loginBody) .misol-dashboard-hero {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 0 18px;
    padding:24px 28px;
    color:#ffffff;
    background:linear-gradient(135deg,#075f95 0%,#0c83c6 100%);
    border-radius:16px;
    box-shadow:0 10px 28px rgba(7,95,149,.20);
}

body:not(#loginBody) .misol-dashboard-kicker {
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.82;
}

body:not(#loginBody) .misol-dashboard-hero h1 {
    margin:0 0 6px;
    color:#ffffff;
    font-size:30px;
    line-height:1.15;
    font-weight:700;
}

body:not(#loginBody) .misol-dashboard-hero p {
    margin:0;
    color:rgba(255,255,255,.86);
    font-size:15px;
}

body:not(#loginBody) .misol-dashboard-filters {
    margin:0 0 22px;
    padding:16px 18px;
    background:#ffffff;
    border:1px solid #dbe5ef;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(15,23,42,.05);
}

body:not(#loginBody) .misol-dashboard-filters > div {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 18px;
}

body:not(#loginBody) .misol-dashboard-filters label {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0;
    color:#43586b;
    font-size:14px;
    font-weight:600;
}

body:not(#loginBody) .misol-dashboard-filters input,
body:not(#loginBody) .misol-dashboard-filters select {
    min-height:40px;
    padding:7px 12px;
    color:#34495e;
    background:#ffffff;
    border:1px solid #cbd9e4;
    border-radius:8px;
    box-sizing:border-box;
}

body:not(#loginBody) .misol-dashboard-filters button {
    min-height:40px;
    padding:0 18px;
    color:#ffffff !important;
    font-weight:700;
    background:#168dcc !important;
    border:1px solid #168dcc !important;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(22,141,204,.18);
}

body:not(#loginBody) .misol-dashboard-section-title {
    margin:0 0 12px;
}

body:not(#loginBody) .misol-dashboard-section-title h2,
body:not(#loginBody) .misol-dashboard-stats-header h2 {
    margin:0;
    color:#263b50;
    font-size:22px;
    font-weight:700;
}

body:not(#loginBody) .misol-dashboard-chart-card {
    position:relative;
    margin-bottom:24px;
    padding:18px;
    background:#ffffff;
    border:1px solid #dbe5ef;
    border-radius:14px;
    box-shadow:0 4px 16px rgba(15,23,42,.06);
}

body:not(#loginBody) .misol-dashboard-stats-header {
    margin:8px 0 14px;
}

body:not(#loginBody) .misol-dashboard-stats-header p {
    margin:6px 0 0;
    color:#718096;
    font-size:14px;
}

/* =========================================================
   GRUPO MISOL LATAM
   Dashboard - Tarjetas KPI
   ========================================================= */

body:not(#loginBody) .misol-dashboard-kpis {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:16px;
    margin:0 0 20px;
}

body:not(#loginBody) .misol-kpi-card {
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
    min-height:112px;
    padding:18px;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #dbe5ef;
    border-radius:14px;
    box-shadow:0 4px 16px rgba(15,23,42,.06);
    transition:transform .18s ease, box-shadow .18s ease;
}

body:not(#loginBody) .misol-kpi-card:hover {
    transform:translateY(-2px);
    box-shadow:0 9px 24px rgba(15,23,42,.10);
}

body:not(#loginBody) .misol-kpi-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:5px;
    height:100%;
    background:#168dcc;
}

body:not(#loginBody) .misol-kpi-icon {
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    font-size:21px;
    border-radius:13px;
}

body:not(#loginBody) .misol-kpi-content {
    min-width:0;
}

body:not(#loginBody) .misol-kpi-content span {
    display:block;
    margin-bottom:3px;
    color:#64788b;
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
}

body:not(#loginBody) .misol-kpi-content strong {
    display:block;
    margin-bottom:3px;
    color:#20384f;
    font-size:30px;
    line-height:1;
    font-weight:800;
}

body:not(#loginBody) .misol-kpi-content small {
    display:block;
    color:#8797a7;
    font-size:12px;
    line-height:1.35;
}

/* Abiertos */

body:not(#loginBody) .misol-kpi-opened::before {
    background:#168dcc;
}

body:not(#loginBody) .misol-kpi-opened .misol-kpi-icon {
    color:#168dcc;
    background:#e8f5fc;
}

/* Asignados */

body:not(#loginBody) .misol-kpi-assigned::before {
    background:#7758c8;
}

body:not(#loginBody) .misol-kpi-assigned .misol-kpi-icon {
    color:#7758c8;
    background:#f0ecfb;
}

/* Atrasados */

body:not(#loginBody) .misol-kpi-overdue::before {
    background:#e39a16;
}

body:not(#loginBody) .misol-kpi-overdue .misol-kpi-icon {
    color:#d88c08;
    background:#fff5df;
}

/* Cerrados */

body:not(#loginBody) .misol-kpi-closed::before {
    background:#26a269;
}

body:not(#loginBody) .misol-kpi-closed .misol-kpi-icon {
    color:#228c5d;
    background:#e9f8f1;
}

@media (max-width:1100px) {
    body:not(#loginBody) .misol-dashboard-kpis {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:650px) {
    body:not(#loginBody) .misol-dashboard-kpis {
        grid-template-columns:1fr;
    }
}

/* =========================================================
   GRUPO MISOL LATAM
   Dashboard - Gráfica moderna
   ========================================================= */

body:not(#loginBody) .misol-chart-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin:26px 0 12px;
}

body:not(#loginBody) .misol-section-kicker {
    display:block;
    margin-bottom:5px;
    color:#168dcc;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

body:not(#loginBody) .misol-chart-heading h2 {
    margin:0;
    color:#1d6f9f;
    font-size:25px;
    line-height:1.15;
    font-weight:800;
}

body:not(#loginBody) .misol-chart-heading p {
    margin:6px 0 0;
    color:#7b8ea1;
    font-size:14px;
}

body:not(#loginBody) .misol-dashboard-chart-card {
    padding:0;
    overflow:hidden;
    border-radius:16px;
}

body:not(#loginBody) .misol-chart-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 20px 14px;
    background:#ffffff;
    border-bottom:1px solid #e5edf4;
}

body:not(#loginBody) .misol-chart-toolbar > div:first-child {
    min-width:180px;
}

body:not(#loginBody) .misol-chart-toolbar strong {
    display:block;
    margin-bottom:3px;
    color:#2b4055;
    font-size:15px;
    font-weight:800;
}

body:not(#loginBody) .misol-chart-toolbar span {
    display:block;
    color:#8494a4;
    font-size:12px;
}

body:not(#loginBody) .misol-chart-canvas {
    padding:12px 16px 14px;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}

body:not(#loginBody) #line-chart-here {
    min-height:300px;
    border:0 !important;
    background:transparent !important;
}

body:not(#loginBody) #line-chart-here svg {
    overflow:visible;
}

body:not(#loginBody) #line-chart-legend {
    position:static !important;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:7px;
    max-width:70%;
}

body:not(#loginBody) #line-chart-legend > div,
body:not(#loginBody) #line-chart-legend span,
body:not(#loginBody) #line-chart-legend a {
    float:none !important;
}

body:not(#loginBody) #line-chart-legend div {
    display:inline-flex !important;
    align-items:center;
    min-height:26px;
    padding:4px 9px !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-transform:capitalize;
    border:0 !important;
    border-radius:999px !important;
    box-shadow:none !important;
}

body:not(#loginBody) #line-chart-legend div:nth-child(1)::first-letter,
body:not(#loginBody) #line-chart-legend div:nth-child(2)::first-letter,
body:not(#loginBody) #line-chart-legend div:nth-child(3)::first-letter,
body:not(#loginBody) #line-chart-legend div:nth-child(4)::first-letter,
body:not(#loginBody) #line-chart-legend div:nth-child(5)::first-letter,
body:not(#loginBody) #line-chart-legend div:nth-child(6)::first-letter,
body:not(#loginBody) #line-chart-legend div:nth-child(7)::first-letter {
    text-transform:uppercase;
}

body:not(#loginBody) #line-chart-here text {
    font-family:Arial, sans-serif !important;
    fill:#718096 !important;
    font-size:11px !important;
}

@media (max-width:900px) {
    body:not(#loginBody) .misol-chart-toolbar {
        align-items:flex-start;
        flex-direction:column;
    }

    body:not(#loginBody) #line-chart-legend {
        justify-content:flex-start;
        max-width:100%;
    }
}

/* =========================================================
   GRUPO MISOL LATAM
   Dashboard - Estadísticas modernas
   ========================================================= */

body:not(#loginBody) .misol-dashboard-stats-card {
    margin:24px 0 10px;
    padding:22px;
    background:#ffffff;
    border:1px solid #dbe5ef;
    border-radius:16px;
    box-shadow:0 4px 16px rgba(15,23,42,.06);
}

body:not(#loginBody) .misol-dashboard-stats-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin:0 0 16px;
}

body:not(#loginBody) .misol-dashboard-stats-header h2 {
    margin:0;
    color:#1d6f9f;
    font-size:25px;
    font-weight:800;
}

body:not(#loginBody) .misol-dashboard-stats-header p {
    margin:6px 0 0;
    color:#7b8ea1;
    font-size:14px;
}

body:not(#loginBody) .misol-dashboard-range {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 18px;
    padding:13px 15px;
    background:#f6faff;
    border:1px solid #dce9f3;
    border-radius:11px;
}

body:not(#loginBody) .misol-dashboard-range > i {
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    color:#168dcc;
    font-size:17px;
    background:#e5f4fc;
    border-radius:10px;
}

body:not(#loginBody) .misol-dashboard-range span {
    display:block;
    margin-bottom:2px;
    color:#7a8ea1;
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

body:not(#loginBody) .misol-dashboard-range strong {
    display:block;
    color:#2d4257;
    font-size:14px;
    font-weight:700;
}

body:not(#loginBody) .misol-dashboard-range strong b {
    display:none;
}

/* Pestañas */

body:not(#loginBody) .misol-stats-tabs {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 18px !important;
    padding:6px !important;
    background:#eef5fa;
    border:1px solid #d9e6ef;
    border-radius:12px;
}

body:not(#loginBody) .misol-stats-tabs li {
    float:none !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
}

body:not(#loginBody) .misol-stats-tabs li a {
    display:block;
    min-width:130px;
    padding:10px 18px !important;
    color:#61778a !important;
    font-size:14px;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    background:transparent !important;
    border:0 !important;
    border-radius:9px;
    transition:all .18s ease;
}

body:not(#loginBody) .misol-stats-tabs li a:hover {
    color:#168dcc !important;
    background:#ffffff !important;
}

body:not(#loginBody) .misol-stats-tabs li.active a {
    color:#ffffff !important;
    background:linear-gradient(135deg,#0877b7,#169bd6) !important;
    box-shadow:0 4px 10px rgba(22,141,204,.22);
}

/* Tabla */

body:not(#loginBody) .misol-dashboard-stats-card .tab_content {
    overflow-x:auto;
}

body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats {
    width:100%;
    margin:0;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #dce6ee;
    border-collapse:separate;
    border-spacing:0;
    border-radius:12px;
}

body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats thead,
body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tbody:first-child {
    background:#0f6f9f;
}

body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tr:first-child th {
    padding:13px 12px;
    color:#ffffff !important;
    font-size:12px;
    font-weight:800;
    text-align:center;
    white-space:nowrap;
    background:#0f6f9f !important;
    border:0 !important;
}

body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tr:first-child th:first-child {
    text-align:left;
    border-top-left-radius:11px;
}

body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tr:first-child th:last-child {
    border-top-right-radius:11px;
}

body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tbody:last-child th,
body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tbody:last-child td {
    padding:13px 12px;
    color:#34495e;
    font-size:13px;
    text-align:center;
    background:#ffffff;
    border-top:1px solid #e6edf3;
    border-right:0;
    border-left:0;
}

body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tbody:last-child th {
    color:#2f465b;
    font-weight:800;
    text-align:left;
    background:#f7fbfd;
}

body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tbody:last-child tr:nth-child(even) th,
body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tbody:last-child tr:nth-child(even) td {
    background:#fbfdff;
}

body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tbody:last-child tr:hover th,
body:not(#loginBody) .misol-dashboard-stats-card table.dashboard-stats tbody:last-child tr:hover td {
    background:#edf7fc;
}

/* Botón exportar */

body:not(#loginBody) .misol-dashboard-stats-card .tab_content > div:last-child {
    margin-top:14px !important;
}

body:not(#loginBody) .misol-dashboard-stats-card button[name="export"] {
    min-height:40px;
    padding:0 16px;
    color:#ffffff !important;
    font-weight:800;
    background:#168dcc !important;
    border:1px solid #168dcc !important;
    border-radius:9px;
    box-shadow:0 4px 10px rgba(22,141,204,.18);
}

body:not(#loginBody) .misol-dashboard-stats-card button[name="export"]:hover {
    background:#0e78b0 !important;
    border-color:#0e78b0 !important;
}

@media (max-width:750px) {
    body:not(#loginBody) .misol-stats-tabs {
        align-items:stretch;
        flex-direction:column;
    }

    body:not(#loginBody) .misol-stats-tabs li a {
        min-width:0;
    }
}

/* =========================================================
   GRUPO MISOL LATAM
   Dashboard - Ajustes Chart.js
   ========================================================= */

body:not(#loginBody) .misol-chartjs-wrapper {
    position:relative;
    height:360px;
    padding:20px 22px 18px;
}

body:not(#loginBody) #misol-ticket-activity-chart {
    width:100% !important;
    height:100% !important;
}

@media (max-width:900px) {
    body:not(#loginBody) .misol-chartjs-wrapper {
        height:320px;
        padding:16px 12px;
    }
}