/* ============================================================
   PINTURERÍAS HELPDESK - PANEL DE AGENTES /SCP/
   osTicket 1.18.4
   Personalización corporativa - versión comentada y corregida

   OBJETIVO DE ESTE ARCHIVO
   ------------------------------------------------------------
   Este CSS modifica únicamente la APARIENCIA visual del panel
   de agentes de osTicket. No cambia la lógica, permisos, tickets,
   usuarios ni base de datos.

   IMPORTANTE
   ------------------------------------------------------------
   Para que los estilos con "body.pinturerias-agente" funcionen,
   la etiqueta <body> del panel de agentes debe tener la clase:

       <body class="pinturerias-agente">

   Si el <body> ya tiene otras clases, simplemente agrega esta:

       <body class="clase-existente pinturerias-agente">

   RECOMENDACIÓN
   ------------------------------------------------------------
   Conserva siempre una copia del archivo original, por ejemplo:

       pinturerias_agente.css.bak

   ============================================================ */


/* ============================================================
   01. VARIABLES DE COLOR
   ============================================================
   Estas variables permiten cambiar la paleta general desde un
   solo lugar.

   EJEMPLOS:
   Azul principal:
       --ph-azul: #0877b9;

   Si quisieras un azul más oscuro:
       --ph-azul: #005b8f;

   Si quisieras un turquesa más claro:
       --ph-turquesa: #20c6ba;
   ============================================================ */

:root {
    --ph-azul: #0877b9;
    --ph-azul-oscuro: #0a4f78;
    --ph-turquesa: #13a59b;

    --ph-blanco: #ffffff;
    --ph-gris-claro: #f2f2f2;
    --ph-gris-azulado: #dfeef3;

    --ph-texto-oscuro: #173f56;
    --ph-borde: #d9e8ef;

    --ph-sombra:
        0 18px 48px rgba(10, 42, 60, .26);
}


/* ============================================================
   02. FONDO GENERAL DEL PANEL DE AGENTES
   ============================================================
   Controla el fondo visible detrás del contenedor principal.

   background-color:
       Color de respaldo si la imagen no carga.

   background-image:
       Combina una capa oscura semitransparente y una imagen.

   La imagen actual es:
       ../images/fondo_agente.jpg

   EJEMPLOS:

   Fondo solamente azul:
       background-image: none;
       background-color: #0a4f78;

   Fondo con otra imagen:
       url('../images/mi_fondo.jpg');

   background-size:
       cover   = llena toda la pantalla.
       contain = intenta mostrar la imagen completa.

   background-position:
       center center = centra la imagen.
       top center    = la alinea arriba.
   ============================================================ */

body.pinturerias-agente {
    min-height: 100vh;

    background-color: var(--ph-gris-azulado);

    background-image:
        linear-gradient(
            rgba(4, 35, 54, .20),
            rgba(4, 35, 54, .20)
        ),
        url('../images/fondo_agente.jpg');

    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}


/* ============================================================
   03. CONTENEDOR PRINCIPAL
   ============================================================
   Es la caja grande donde aparece todo el panel.

   background:
       rgba(255,255,255,.93)
       = blanco con un poco de transparencia.

   border-radius:
       18px = esquinas redondeadas.

   EJEMPLOS:
       border-radius: 0;    -> sin esquinas redondeadas.
       border-radius: 10px; -> redondeo discreto.
       border-radius: 24px; -> redondeo más marcado.

   box-shadow:
       Controla la sombra exterior.
   ============================================================ */

body.pinturerias-agente #container {
    background: rgba(255, 255, 255, .93);
    border-radius: 18px;
    box-shadow: var(--ph-sombra);
    overflow: hidden;
}


/* ============================================================
   04. ENCABEZADO / HEADER
   ============================================================
   Esta zona contiene el logotipo y la parte superior del panel.

   background:
       blanco ligeramente transparente.

   border-bottom:
       línea inferior suave.

   EJEMPLO:
       background: #ffffff;
       para dejarlo completamente blanco.
   ============================================================ */

body.pinturerias-agente #header {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #e2e9ed;
}


/* ============================================================
   05. BARRA PRINCIPAL DE NAVEGACIÓN
   ============================================================
   Corresponde al menú donde aparecen opciones como:

       Panel de Control
       Usuarios
       Tareas
       Tickets
       Base de conocimientos
       etc.

   El degradado actual va de:
       azul oscuro -> azul -> turquesa.

   EJEMPLO DE FONDO SÓLIDO:
       background: #0877b9;

   EJEMPLO DE OTRO DEGRADADO:
       background: linear-gradient(
           90deg,
           #004d73,
           #008ca8
       );
   ============================================================ */

body.pinturerias-agente #nav {
    background:
        linear-gradient(
            100deg,
            var(--ph-azul-oscuro),
            var(--ph-azul),
            var(--ph-turquesa)
        );

    border: 0;

    box-shadow:
        0 7px 18px rgba(9, 72, 106, .18);
}


/* ============================================================
   06. TEXTO DEL MENÚ SUPERIOR - CONTRASTE NORMAL
   ============================================================
   ESTE ES UNO DE LOS BLOQUES QUE DEBES CAMBIAR si quieres
   modificar el color de:
       Panel de Control / Usuarios / Tareas / Tickets /
       Base de conocimientos

   La idea es NO usar blanco puro. Se usa un gris azulado claro
   y un contorno/sombra azul para que las letras se distingan
   sobre la barra azul/turquesa.

   OPCIONES DE COLOR PARA "color":
       #d8e6ed  -> gris azulado claro (RECOMENDADO)
       #c9dbe5  -> gris azulado un poco más oscuro
       #b8cfdd  -> gris medio azulado
       #e2edf3  -> gris muy claro

   OPCIONES PARA EL CONTORNO:
       text-shadow: 0 1px 0 #0a4f78;
           -> contorno/sombra azul discreta.

       text-shadow:
           -1px 0 #0a4f78,
            1px 0 #0a4f78,
            0 -1px #0a4f78,
            0  1px #0a4f78;
           -> contorno azul más marcado.

   IMPORTANTE:
   Hay otro bloque al FINAL del archivo ("25. FORZADO FINAL")
   que también define estos colores. Deben coincidir ambos.
   ============================================================ */

html body.pinturerias-agente #container #nav > li > a,
html body.pinturerias-agente #container #nav > li > a:link,
html body.pinturerias-agente #container #nav > li > a:visited {
    /* Color normal de las letras del menú */
    color: #d8e6ed !important;

    /* Grosor de la letra. Opciones: 600 / 700 / 800 */
    font-weight: 700 !important;

    /* Contorno azul suave para evitar que la letra "se pierda" */
    text-shadow:
        -1px 0 rgba(10, 79, 120, .85),
         1px 0 rgba(10, 79, 120, .85),
         0 -1px rgba(10, 79, 120, .85),
         0  1px rgba(10, 79, 120, .85);

    opacity: 1 !important;
    border-radius: 999px;

    /* Suaviza el cambio al pasar el mouse */
    transition:
        color .16s ease,
        background .16s ease,
        text-shadow .16s ease,
        transform .16s ease;
}


/* ============================================================
   07. MENÚ - EFECTO AL PASAR EL MOUSE
   ============================================================
   Actual:
       - Texto azul oscuro.
       - Fondo blanco/transparente para resaltarlo.
       - Sin texto blanco.

   OPCIONES DE COLOR PARA HOVER:
       #0a4f78 -> azul oscuro (RECOMENDADO)
       #0877b9 -> azul corporativo medio
       #173f56 -> azul grisáceo oscuro
       #455a64 -> gris azulado oscuro

   OPCIONES DE FONDO PARA HOVER:
       rgba(255,255,255,.82) -> claro y muy visible
       rgba(255,255,255,.65) -> más transparente
       #eaf4f8                -> sólido gris-azulado claro

   Si no quieres movimiento, cambia:
       transform: translateY(-1px);
   por:
       transform: none;
   ============================================================ */

html body.pinturerias-agente #container #nav > li > a:hover {
    /* Color de la letra AL PASAR EL MOUSE */
    color: #0a4f78 !important;

    /* Fondo claro que resalta la opción seleccionada */
    background: rgba(255, 255, 255, .82) !important;

    /* Contorno muy sutil; evita el efecto de letras lavadas */
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .85),
        0 0 1px rgba(10, 79, 120, .30) !important;

    transform: translateY(-1px);
}


/* ============================================================
   08. MENÚ - PESTAÑA ACTIVA
   ============================================================
   La pestaña activa en osTicket normalmente usa un fondo claro.

   Por eso aquí usamos texto azul oscuro para conservar contraste.

   EJEMPLO:
       Si la pestaña activa tiene fondo azul, puedes usar:
       color: #ffffff !important;

   Si tiene fondo blanco, deja:
       color: #16506b !important;
   ============================================================ */

html body.pinturerias-agente #container #nav > li.active > a,
html body.pinturerias-agente #container #nav > li.active > a:link,
html body.pinturerias-agente #container #nav > li.active > a:visited,
html body.pinturerias-agente #container #nav > li.active > a:hover {
    color: #16506b !important;
    text-shadow: none !important;
}


/* Algunas versiones de osTicket ponen la clase "active"
   directamente en el enlace <a>. Esta regla lo cubre. */

html body.pinturerias-agente #container #nav > li > a.active,
html body.pinturerias-agente #container #nav > li > a.active:hover {
    color: #16506b !important;
    text-shadow: none !important;
}


/* ============================================================
   09. ÁREA PRINCIPAL DE CONTENIDO
   ============================================================
   Es la zona donde se muestran dashboard, tickets, usuarios,
   búsquedas, tareas, etc.

   EJEMPLO:
       background: #ffffff;
       = blanco sólido.

       background: rgba(255,255,255,.90);
       = blanco ligeramente transparente.
   ============================================================ */

body.pinturerias-agente #content {
    background: rgba(255, 255, 255, .96);
}


/* ============================================================
   10. BOTONES GENERALES
   ============================================================
   Aplica esquinas redondeadas a:

       .button
       <button>
       input submit
       input button
       .action-button

   border-radius: 999px
       crea botones estilo "píldora".

   EJEMPLOS:
       border-radius: 8px  -> rectangular moderno.
       border-radius: 0    -> esquinas rectas.
   ============================================================ */

body.pinturerias-agente .button,
body.pinturerias-agente button,
body.pinturerias-agente input[type="submit"],
body.pinturerias-agente input[type="button"],
body.pinturerias-agente .action-button {
    border-radius: 999px !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


/* ============================================================
   11. BOTONES - EFECTO HOVER
   ============================================================
   Cuando el cursor pasa sobre el botón:

   transform:
       lo mueve ligeramente hacia arriba.

   box-shadow:
       aumenta la sensación de profundidad.

   Para desactivar el movimiento:
       transform: none;
   ============================================================ */

body.pinturerias-agente .button:hover,
body.pinturerias-agente button:hover,
body.pinturerias-agente input[type="submit"]:hover,
body.pinturerias-agente input[type="button"]:hover,
body.pinturerias-agente .action-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 6px 13px rgba(20, 60, 82, .16);
}


/* ============================================================
   12. TABLAS Y BARRAS ADHESIVAS
   ============================================================
   Aplica esquinas redondeadas a:

       table.list
       table.dashboard-stats
       .sticky.bar

   EJEMPLO:
       border-radius: 4px;
       para un diseño más cuadrado.
   ============================================================ */

body.pinturerias-agente table.list,
body.pinturerias-agente table.dashboard-stats,
body.pinturerias-agente .sticky.bar {
    border-radius: 10px;
}


/* ============================================================
   13. CAMPOS DE FORMULARIO
   ============================================================
   Afecta:
       cajas de texto
       contraseñas
       áreas de texto
       listas desplegables

   EJEMPLO:
       border-radius: 12px;
       para hacerlos más redondeados.

       border-radius: 0;
       para diseño completamente cuadrado.
   ============================================================ */

body.pinturerias-agente input[type="text"],
body.pinturerias-agente input[type="password"],
body.pinturerias-agente textarea,
body.pinturerias-agente select {
    border-radius: 8px;
}


/* ============================================================
   14. LOGIN DE AGENTES
   ============================================================
   Este bloque corresponde a la pantalla de acceso /scp/.

   IMPORTANTE:
   Solo funciona si el elemento tiene:

       id="loginBody"
       class="pinturerias-login-agente"

   Fondo actual:
       ../images/login_background.jpg

   EJEMPLO:
       Para dejar un color liso:
       background-image: none !important;
   ============================================================ */

#loginBody.pinturerias-login-agente {
    background-color: #123b52 !important;

    background-image:
        linear-gradient(
            rgba(6, 30, 46, .25),
            rgba(6, 30, 46, .25)
        ),
        url('../images/login_background.jpg') !important;

    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}


/* ============================================================
   15. CAJA DEL LOGIN
   ============================================================
   Modifica el recuadro donde aparecen usuario y contraseña.

   border-radius:
       controla el redondeo.

   box-shadow:
       controla la sombra.

   EJEMPLO:
       border-radius: 10px;
       para un aspecto menos redondeado.
   ============================================================ */

#loginBody.pinturerias-login-agente #loginBox {
    border-radius: 22px;
    overflow: hidden;

    box-shadow:
        0 20px 55px rgba(4, 25, 38, .36);
}


/* ============================================================
   16. CAMPOS DEL LOGIN
   ============================================================
   Redondea los inputs de usuario y contraseña.
   ============================================================ */

#loginBody.pinturerias-login-agente #loginBox input {
    border-radius: 10px;
}


/* ============================================================
   17. BOTÓN DEL LOGIN
   ============================================================
   Da estilo al botón para iniciar sesión.

   El degradado actual:
       azul -> turquesa.

   EJEMPLO DE BOTÓN SÓLIDO:
       background: #0877b9;
   ============================================================ */

#loginBody.pinturerias-login-agente #loginBox .button {
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--ph-azul),
            var(--ph-turquesa)
        );

    border: 0;
}


/* ============================================================
   18. BUSCADOR DEL DASHBOARD
   ============================================================
   #basic_search suele corresponder al bloque de búsqueda rápida
   dentro del panel del agente.

   background:
       color del recuadro.

   border:
       borde exterior.

   box-shadow:
       sombra suave.

   EJEMPLO:
       background: #ffffff;
       para blanco sólido.
   ============================================================ */

body.pinturerias-agente #basic_search {
    background: rgba(248, 252, 254, .96);

    border:
        1px solid var(--ph-borde);

    border-radius: 14px;

    padding: 12px 14px;

    box-shadow:
        0 5px 16px rgba(20, 72, 98, .08);
}


/* ============================================================
   19. ÁREA DE GRÁFICAS DEL DASHBOARD
   ============================================================
   #line-chart-here es el contenedor donde osTicket muestra
   ciertas gráficas o estadísticas.

   box-sizing: border-box;
       hace que padding y bordes se calculen dentro del ancho.

   EJEMPLO:
       border-radius: 8px;
       para esquinas menos redondeadas.
   ============================================================ */

body.pinturerias-agente #line-chart-here {
    background: rgba(255, 255, 255, .84);

    border:
        1px solid #e0ebf0;

    border-radius: 16px;

    padding: 10px;

    box-sizing: border-box;
}


/* ============================================================
   20. PESTAÑAS INTERNAS DEL DASHBOARD
   ============================================================
   ul.tabs corresponde a pestañas secundarias internas.

   Solo se redondean las esquinas superiores.

   EJEMPLO:
       border-radius: 0;
       si no quieres redondeo.
   ============================================================ */

body.pinturerias-agente ul.tabs {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}


/* ============================================================
   21. TABLA DE ESTADÍSTICAS DEL DASHBOARD
   ============================================================
   table.dashboard-stats contiene estadísticas generales.

   width: 100%
       ocupa todo el ancho disponible.

   border-collapse: separate
   border-spacing: 0
       ayudan a conservar bordes redondeados.

   EJEMPLO:
       background: #ffffff;
       para fondo blanco totalmente sólido.
   ============================================================ */

body.pinturerias-agente table.dashboard-stats {
    width: 100%;

    background: rgba(255, 255, 255, .98);

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    box-shadow:
        0 7px 22px rgba(20, 72, 98, .10);
}


/* ============================================================
   22. CELDAS DE ESTADÍSTICAS
   ============================================================
   th = encabezados.
   td = celdas normales.

   padding:
       controla el espacio interior.

   EJEMPLOS:
       padding: 6px 8px;
       = tabla más compacta.

       padding: 12px 14px;
       = tabla más espaciosa.
   ============================================================ */

body.pinturerias-agente table.dashboard-stats th,
body.pinturerias-agente table.dashboard-stats td {
    padding: 9px 10px;
    border-color: #e2ebef;
}


/* ============================================================
   23. ENCABEZADOS DE LA TABLA DE ESTADÍSTICAS
   ============================================================
   Cambia el fondo del encabezado a degradado azul.

   color: #fff
       deja el texto blanco para buen contraste.

   EJEMPLO:
       background: #0a4f78;
       para quitar el degradado.
   ============================================================ */

body.pinturerias-agente table.dashboard-stats thead th,
body.pinturerias-agente table.dashboard-stats tbody:first-child th {
    background:
        linear-gradient(
            100deg,
            var(--ph-azul-oscuro),
            var(--ph-azul)
        );

    color: var(--ph-blanco);

    font-weight: 600;
}


/* ============================================================
   24. AJUSTES RESPONSIVOS / PANTALLAS PEQUEÑAS
   ============================================================
   Este bloque ayuda cuando el panel se visualiza en pantallas
   más angostas.

   max-width: 760px
       significa que se activa en pantallas de 760 px o menos.

   Si no deseas estos cambios, puedes comentar todo este bloque.
   ============================================================ */

@media (max-width: 760px) {

    body.pinturerias-agente #container {
        border-radius: 12px;
    }

    body.pinturerias-agente #nav {
        white-space: normal;
    }

    body.pinturerias-agente #nav > li > a {
        margin: 2px;
    }

    body.pinturerias-agente table.list,
    body.pinturerias-agente table.dashboard-stats {
        display: block;
        overflow-x: auto;
    }
}


/* ============================================================
   25. FORZADO FINAL PARA CONTRASTE DEL MENÚ
   ============================================================
   MUY IMPORTANTE:
   Este bloque está AL FINAL y por eso puede SOBRESCRIBIR los
   bloques 06 y 07 anteriores.

   AQUÍ TAMBIÉN DEBES CAMBIAR EL COLOR si haces pruebas.

   Configuración actual:
       NORMAL = gris azulado claro con contorno azul.
       HOVER  = azul oscuro sobre fondo claro.
       ACTIVA = azul oscuro.

   EJEMPLOS RÁPIDOS:

   Opción A - Gris azulado:
       color: #d8e6ed !important;

   Opción B - Gris un poco más oscuro:
       color: #c9dbe5 !important;

   Opción C - Azul muy claro:
       color: #b9d8e8 !important;

   HOVER recomendado:
       color: #0a4f78 !important;
       background: rgba(255,255,255,.82) !important;

   Si después de esto no cambia:
   1) confirma que este CSS se carga en /scp/
   2) confirma que <body> tiene class="pinturerias-agente"
   3) limpia caché con Ctrl+F5
   4) revisa en Chrome DevTools si otro CSS carga después.
   ============================================================ */

body.pinturerias-agente #nav li a,
body.pinturerias-agente #nav li a:link,
body.pinturerias-agente #nav li a:visited {
    /* Texto normal: NO blanco puro */
    color: #d8e6ed !important;
    font-weight: 700 !important;

    /* Contorno azul visible */
    text-shadow:
        -1px 0 rgba(10, 79, 120, .85),
         1px 0 rgba(10, 79, 120, .85),
         0 -1px rgba(10, 79, 120, .85),
         0  1px rgba(10, 79, 120, .85) !important;
}


/* HOVER: azul oscuro + fondo claro; evita letras blancas */

body.pinturerias-agente #nav li a:hover {
    color: #0a4f78 !important;
    background: rgba(255, 255, 255, .82) !important;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, .85),
        0 0 1px rgba(10, 79, 120, .30) !important;
}


/* ACTIVA: texto azul oscuro porque normalmente tiene fondo claro */

body.pinturerias-agente #nav li.active > a,
body.pinturerias-agente #nav li.active > a:hover {
    color: #16506b !important;
    text-shadow: none !important;
}


/* ============================================================
   FIN DEL ARCHIVO
   ============================================================ */