/* ============================================================
   GUÍA RÁPIDA DE PERSONALIZACIÓN
   ============================================================
   Este archivo personaliza la apariencia de osTicket 1.18.4.

   QUÉ PUEDES CAMBIAR CON SEGURIDAD:

   1) COLORES PRINCIPALES
      Están definidos dentro de :root.
      Ejemplo:
          --ph-azul: #0877b9;
      Puedes sustituir el código hexadecimal por otro color.

   2) FONDO GENERAL
      Busca:
          body.pinturerias-portal
      La propiedad:
          url('../images/fondo_usuario.jpg')
      define la imagen de fondo.

      Ejemplos:
          background-size: cover;   -> llena toda la pantalla.
          background-size: contain; -> intenta mostrar la imagen completa.
          background-position: center center; -> centra la imagen.

   3) CONTENEDOR PRINCIPAL
      Busca:
          #container
      Ejemplos:
          border-radius: 22px; -> esquinas más redondeadas.
          border-radius: 8px;  -> esquinas más discretas.
          box-shadow: ...;     -> intensidad de la sombra.

   4) BARRA SUPERIOR
      Busca:
          #nav
      La propiedad "background" controla el degradado.
      Ejemplo de un solo color:
          background: #0877b9;

   5) LETRAS DEL MENÚ
      Al FINAL del archivo está el bloque:
          "MENÚ SUPERIOR DEL PANEL - CORRECCIÓN DE CONTRASTE"
      Ahí se controla específicamente el color de:
      Panel de Control / Usuarios / Tareas / Tickets / etc.

   6) BOTONES
      El bloque "Botones generales del portal" modifica botones,
      inputs submit y elementos con clases .button, .btn, etc.

      Ejemplo:
          border-radius: 999px; -> botón tipo píldora.
          border-radius: 8px;   -> botón rectangular redondeado.

   7) FORMULARIOS
      El bloque "Formularios" controla cajas de texto, contraseña,
      correo, textarea y select.

   8) TABLAS
      El bloque "Tablas" modifica ticketTable, ticketInfo y custom-data.

   9) MENSAJES
      #msg_notice, #msg_warning y #msg_error controlan las barras de
      avisos, advertencias y errores.

   10) DISEÑO MÓVIL
       El bloque @media (max-width: 760px) aplica estilos cuando la
       pantalla es angosta, por ejemplo teléfonos o tablets.

   RECOMENDACIÓN:
   Antes de cambiar valores conserva una copia del archivo original.
   ============================================================ */

/* ============================================================
   PINTURERÍAS HELPDESK - PORTAL DE USUARIO
   osTicket 1.18.4 - Personalización corporativa v1.2
   ============================================================ */

:root {
    --ph-azul: #0877b9;
    --ph-azul-oscuro: #0a4f78;
    --ph-turquesa: #13a59b;
    --ph-verde: #2f9e76;
    --ph-amarillo: #e3a72f;
    --ph-rojo: #c83d4b;
    --ph-gris: #667085;
    --ph-borde: #dce5ec;
    --ph-sombra: 0 16px 42px rgba(15, 42, 60, .20);
}

body.pinturerias-portal {
    min-height: 100vh;
    background-color: #e9f4f8;
    background-image:
        linear-gradient(rgba(9, 38, 58, .14), rgba(9, 38, 58, .14)),
        url('../images/fondo_usuario.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

body.pinturerias-portal #container {
    width: min(1120px, calc(100% - 32px));
    margin: 18px auto;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 22px;
    box-shadow: var(--ph-sombra);
    overflow: hidden;
    backdrop-filter: blur(6px);
}

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

body.pinturerias-portal #header #logo img {
    max-height: 62px;
}

body.pinturerias-portal #nav {
    height: auto;
    min-height: 28px;
    margin: 0;
    padding: 7px 14px;
    background: linear-gradient(100deg, var(--ph-azul-oscuro), var(--ph-azul), var(--ph-turquesa));
    border: 0;
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(9, 72, 106, .18);
}

body.pinturerias-portal #nav li a {
    min-height: 22px;
    height: auto;
    line-height: 22px;
    color: #fff;
    border-radius: 999px;
    padding-top: 4px;
    padding-bottom: 4px;
    transition: background .18s ease, transform .18s ease;
}

body.pinturerias-portal #nav li a:hover,
body.pinturerias-portal #nav li a.active {
    background-color: rgba(255,255,255,.20);
    color: #fff;
    transform: translateY(-1px);
}

body.pinturerias-portal #content {
    padding: 24px 0 30px;
}

body.pinturerias-portal h1,
body.pinturerias-portal h2,
body.pinturerias-portal h3 {
    color: #173f56;
}

/* Botones generales del portal */
body.pinturerias-portal .button,
body.pinturerias-portal .btn,
body.pinturerias-portal .action-button,
body.pinturerias-portal .btn-helpdesk,
body.pinturerias-portal input[type="submit"],
body.pinturerias-portal input[type="button"],
body.pinturerias-portal input[type="reset"],
body.pinturerias-portal button {
    box-sizing: border-box;
    min-height: 34px;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    background: linear-gradient(135deg, var(--ph-azul), var(--ph-turquesa));
    color: #fff !important;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    text-shadow: none;
    box-shadow: 0 5px 13px rgba(6, 86, 125, .22);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

body.pinturerias-portal .button:hover,
body.pinturerias-portal .btn:hover,
body.pinturerias-portal .action-button:hover,
body.pinturerias-portal .btn-helpdesk:hover,
body.pinturerias-portal input[type="submit"]:hover,
body.pinturerias-portal input[type="button"]:hover,
body.pinturerias-portal input[type="reset"]:hover,
body.pinturerias-portal button:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 9px 18px rgba(6, 86, 125, .28);
    text-decoration: none;
}

body.pinturerias-portal .btn-cerrar-ticket,
body.pinturerias-portal .btn-cancelar {
    background: linear-gradient(135deg, #5f6b75, #39444d) !important;
}

body.pinturerias-portal .btn-restablecer {
    background: linear-gradient(135deg, #7c8791, #606b74) !important;
}

body.pinturerias-portal .btn-publicar,
body.pinturerias-portal .btn-crear-solicitud {
    background: linear-gradient(135deg, var(--ph-azul), var(--ph-turquesa)) !important;
}

/* Formularios */
body.pinturerias-portal input[type="text"],
body.pinturerias-portal input[type="password"],
body.pinturerias-portal input[type="email"],
body.pinturerias-portal textarea,
body.pinturerias-portal select {
    box-sizing: border-box;
    border: 1px solid #c9d7e0 !important;
    border-radius: 10px !important;
    background: #fff;
    padding: 8px 10px !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.pinturerias-portal input:focus,
body.pinturerias-portal textarea:focus,
body.pinturerias-portal select:focus {
    outline: none;
    border-color: var(--ph-azul) !important;
    box-shadow: 0 0 0 3px rgba(8,119,185,.12);
}

body.pinturerias-portal .search.well,
body.pinturerias-portal #reply,
body.pinturerias-portal .pinturerias-form-card {
    border: 1px solid var(--ph-borde);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 22px rgba(33, 62, 82, .08);
}

body.pinturerias-portal .pinturerias-form-card {
    padding: 18px;
}

body.pinturerias-portal .solicitud-hero {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(8,119,185,.10), rgba(19,165,155,.10));
    border: 1px solid rgba(8,119,185,.12);
}

body.pinturerias-portal .solicitud-hero__icono {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--ph-azul), var(--ph-turquesa));
    color: #fff;
    font-size: 26px;
    box-shadow: 0 8px 18px rgba(8,119,185,.20);
}

body.pinturerias-portal .solicitud-hero h1,
body.pinturerias-portal .solicitud-hero p {
    margin: 0;
}
body.pinturerias-portal .solicitud-hero p { margin-top: 4px; color: #5d6e7a; }

/* Tablas */
body.pinturerias-portal #ticketTable,
body.pinturerias-portal #ticketInfo,
body.pinturerias-portal table.custom-data {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #dce5eb;
    border-radius: 14px;
    box-shadow: 0 7px 20px rgba(29, 58, 77, .07);
}

body.pinturerias-portal #ticketTable caption {
    padding: 10px 12px;
    background: #f4f8fb;
    border: 0;
    color: #40586a;
}

body.pinturerias-portal #ticketTable th {
    background: linear-gradient(90deg, #e8f4fa, #eef9f7);
    border-color: #d7e4eb;
    font-weight: 600;
}

body.pinturerias-portal #ticketTable td {
    border-color: #e5ebef;
    padding-top: 8px;
    padding-bottom: 8px;
}

body.pinturerias-portal #ticketTable tbody tr:hover td {
    background: #f3fbfd;
}

body.pinturerias-portal .infoTable {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e9ed;
    background: #fbfdfe;
}

body.pinturerias-portal .infoTable .headline,
body.pinturerias-portal table.custom-data .headline {
    background: linear-gradient(90deg, #edf7fb, #f0faf8);
    color: #2d556c;
}

body.pinturerias-portal #msg_notice,
body.pinturerias-portal #msg_warning,
body.pinturerias-portal #msg_error,
body.pinturerias-portal .notice_bar,
body.pinturerias-portal .warning_bar,
body.pinturerias-portal .error_bar {
    height: auto;
    min-height: 20px;
    border-radius: 10px;
}

body.pinturerias-portal #footer {
    padding: 12px 0 18px;
    color: #536672;
}

@media (max-width: 760px) {
    body.pinturerias-portal #container { width: calc(100% - 14px); margin: 7px auto; border-radius: 14px; }
    body.pinturerias-portal #content { margin: 0 12px; }
    body.pinturerias-portal #header { height: auto; min-height: 72px; }
    body.pinturerias-portal #header .pull-right { float: none; text-align: right; }
    body.pinturerias-portal #nav { white-space: normal; }
    body.pinturerias-portal #nav li a { margin: 2px; padding-left: 30px; }
    body.pinturerias-portal #ticketTable { display: block; overflow-x: auto; }
    body.pinturerias-portal #ticketInfo { display: table; }
    body.pinturerias-portal textarea { max-width: 100% !important; }
}


/* ============================================================
   11. MENÚ SUPERIOR DEL PANEL - CORRECCIÓN DE CONTRASTE
   ============================================================
   OBJETIVO:
   Hacer visibles las opciones principales del menú de osTicket:
   "Panel de Control", "Usuarios", "Tareas", "Tickets", etc.

   IMPORTANTE:
   Este bloque se coloca AL FINAL del archivo para que tenga prioridad
   sobre los estilos originales de osTicket (scp.css / main.css).

   COLORES RECOMENDADOS:
   #ffffff = blanco
   #f2f2f2 = gris muy claro
   #e6edf2 = gris azulado claro
   #173f56 = azul oscuro

   EJEMPLO:
   Si quieres texto gris claro en lugar de blanco cambia:
       color: #ffffff !important;
   por:
       color: #e6edf2 !important;
   ============================================================ */

/* Texto de las pestañas NO activas.
   Se usa un selector más específico para ganar prioridad frente
   a los estilos nativos de osTicket. */
html body #container #nav > li > a,
html body #container #nav > li > a:link,
html body #container #nav > li > a:visited {
    color: #ffffff !important;   /* CAMBIAR AQUÍ el color normal del menú */
    font-weight: 600;            /* 400 = normal | 600 = seminegrita | 700 = negrita */
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

/* Al pasar el mouse sobre una pestaña.
   Puedes cambiar el blanco por otro color, por ejemplo #dff8ff. */
html body #container #nav > li > a:hover {
    color: #ffffff !important;
}

/* Pestaña activa.
   En osTicket normalmente la pestaña seleccionada tiene fondo claro,
   por eso aquí conviene usar texto oscuro para conservar contraste. */
html body #container #nav > li.active > a,
html body #container #nav > li.active > a:link,
html body #container #nav > li.active > a:visited,
html body #container #nav > li.active > a:hover {
    color: #16506b !important;   /* CAMBIAR AQUÍ el color de la pestaña activa */
    text-shadow: none;
}

/* Si tu versión de osTicket marca la pestaña activa con la clase
   directamente en el enlace (<a class="active">), esta regla la cubre. */
html body #container #nav > li > a.active,
html body #container #nav > li > a.active:hover {
    color: #16506b !important;
    text-shadow: none;
}

/* ============================================================
   FIN - MENÚ SUPERIOR DEL PANEL
   ============================================================ */