/*
 * IGoldmann · osTicket Custom CSS — v2026-05-24j (consolidación UI/UX comprehensiva)
 *
 * Aplicado vía FTPS a /helpdesk/css/igoldmann-custom.css
 * Link inyectado en /include/client/header.inc.php + /include/staff/header.inc.php
 *
 * Sigue estrictamente Brand Guidelines v1.0 (ver templates/branding/igoldmann-brand-tokens.md).
 * Tokens core: #1F3A5F navy primario, #C9A34A oro acento, #FAFAF8 hueso fondo,
 *               #2B2B2B grafito texto, Montserrat principal, JetBrains Mono metadatos.
 *
 * Marker: AUDIT_OSTICKET_IGOLDMANN_BRANDING_2026_05_24
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
 * 1. RESET TIPOGRÁFICO + BODY
 * ============================================================ */
body,
.thread-body, .thread-entry, .tabular,
input, textarea, select, button,
#main, #header, #footer,
.tip, .notice, .warning, .error, .success {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #2B2B2B;
}
code, pre, .tabular tt, .ticket-number {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important;
}
body {
  background: #FAFAF8 !important;
  font-size: 13px !important;
}

/* ============================================================
 * 2. HEADINGS (escala compacta Brand Guidelines)
 * ============================================================ */
#main h1, h1.pull-left, .pageheader h1, h2.pageheader, h1 {
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 28px !important;
  color: #1F3A5F !important;
  letter-spacing: -0.01em !important;
  margin: 8px 0 !important;
}
h2 { font-weight: 600 !important; font-size: 16px !important; line-height: 22px !important; color: #1F3A5F !important; margin: 6px 0 !important; }
h3 { font-weight: 500 !important; font-size: 14px !important; line-height: 20px !important; color: #1F3A5F !important; }
h4 { font-weight: 500 !important; font-size: 13px !important; line-height: 18px !important; color: #1F3A5F !important; }

/* Section titles con border oro */
.form-section-title, .section-header, .dashboard h2 {
  color: #1F3A5F !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #C9A34A !important;
  padding-bottom: 6px !important;
  margin-bottom: 16px !important;
}

/* ============================================================
 * 3. LAYOUT — limitar ancho contenido en pantallas grandes
 * ============================================================ */
#main, #container, .container-main, .main-content, #content {
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
 * 4. HEADER (#header) + área bienvenida (#info)
 * ============================================================ */
#header, #header.row, .scp-banner, #pjax-container > #header {
  background: #1F3A5F !important;
  color: #FAFAF8 !important;
  border-bottom: 2px solid #C9A34A !important;
  box-shadow: 0 2px 8px rgba(31, 58, 95, 0.12);
}
#header a, #header h1, #header h2, .scp-banner * {
  color: #FAFAF8 !important;
}
#header #info,
p#info,
p#info.pull-right,
#info.pull-right.no-pjax,
p.pull-right.no-pjax {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(250, 250, 248, 0.85) !important;
  font-size: 12px !important;
  letter-spacing: 0.2px;
  padding: 8px 14px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#header #info strong, p#info strong {
  color: #FAFAF8 !important;
  font-weight: 600;
}
#header #info a,
p#info a,
p.pull-right.no-pjax a {
  color: #C9A34A !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border-bottom: none !important;
  background: transparent !important;
}
#header #info a:hover,
p#info a:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

/* ============================================================
 * 5+6. MENÚ PRINCIPAL (#nav) Y SUBMENÚ (#sub_nav) — fix completo 2026-05-24o
 * ============================================================
 * Resuelve 4 problemas:
 *   1. Dropdown mal posicionado (padding del <a> vs altura del <li>)
 *   2. Dropdown bg claro + texto claro = invisible
 *   3. Iconos del #sub_nav superpuestos al texto
 *   4. Active poco diferenciado del inactive
 */

/* RESET del osTicket scp.css que pinta bg blanco al li.active */
#nav, #nav li, #nav li.active, #nav li.inactive, #nav li.inactive:hover {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
#nav {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: #1F3A5F !important;
}

#nav > li {
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
  padding: 0 !important;
}

#nav > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  height: 100% !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FAFAF8 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
  border-bottom: 3px solid transparent !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}

#nav > li > a:hover,
#nav > li:hover > a {
  background: rgba(255, 255, 255, 0.1) !important;
  border-bottom-color: #C9A34A !important;
}

#nav > li.active > a {
  background: rgba(255, 255, 255, 0.12) !important;
  border-bottom-color: #C9A34A !important;
  font-weight: 700 !important;
}

/* Dropdown anclado al <li> (no al <a>) — top:100% del li */
#nav > li > ul {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 200px !important;
  width: auto !important;
  background: #1F3A5F !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  z-index: 500 !important;
  list-style: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: visibility 0s linear 0.1s, opacity 0.1s linear !important;
}

#nav > li:hover > ul {
  visibility: visible !important;
  opacity: 1 !important;
  transition-delay: 0s !important;
}

#nav > li > ul > li {
  display: block !important;
  padding: 0 !important;
}

#nav > li > ul > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #FAFAF8 !important;
  background: transparent !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-left: 3px solid transparent !important;
  transition: background 100ms ease, border-color 100ms ease !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
  padding-left: 38px !important;
}

#nav > li > ul > li > a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-left-color: #C9A34A !important;
  color: #FAFAF8 !important;
}

/* === Sub-nav === */

#sub_nav, .jb-overflowmenu-menu-primary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  padding: 0 8px !important;
  margin: 0 !important;
  list-style: none !important;
  background: #172E4A !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  height: 40px !important;
  min-height: 40px !important;
  overflow: visible !important;
}

#sub_nav > li {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: stretch !important;
  position: relative !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sub_nav > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  height: 40px !important;
  line-height: 1 !important;
  padding: 0 14px 0 36px !important;  /* L:36 para icon, R:14 normal */
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(250, 250, 248, 0.8) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
  background-repeat: no-repeat !important;
  background-position: 12px 50% !important;  /* 12px desde left, centrado vertical */
  background-size: 16px 16px !important;
  transition: color 100ms ease, border-color 100ms ease !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

#sub_nav > li > a:hover {
  color: #FAFAF8 !important;
  border-bottom-color: rgba(201, 163, 74, 0.6) !important;
}

#sub_nav > li > a.active,
#sub_nav > li.active > a {
  color: #FAFAF8 !important;
  border-bottom-color: #C9A34A !important;
  font-weight: 600 !important;
}

/* NOTA: NO usar excepción :not([style]) — osTicket aplica iconos vía CSS class
   (#sub_nav .open, .answered, .mine, .closed, .search, .new, etc.) y la excepción
   matchea todos los items dejando el icono sobre el texto. Padding 36px universal. */

/* ============================================================
 * 7. TABS INTERNOS DE PÁGINA (ul.tabs) — scoping estricto
 * ============================================================
 * IMPORTANTE: NO aplicar a #nav ni #sub_nav (la nav principal) — esos tienen
 * styling propio en sec 5-6. Aquí solo capturamos los ul.tabs internos de
 * páginas (configuraciones internas, etc.) — typical Bootstrap-style tabs.
 */
ul.tabs:not(#nav):not(#sub_nav):not(.jb-overflowmenu-menu-primary) li.active,
ul.tabs.clean:not(#nav):not(#sub_nav) li.active {
  background-color: #FAFAF8 !important;
  border: 1px solid #C9A34A !important;
  border-bottom: 3px solid #C9A34A !important;
  border-radius: 4px 4px 0 0 !important;
}
ul.tabs:not(#nav):not(#sub_nav):not(.jb-overflowmenu-menu-primary) li.active a {
  color: #1F3A5F !important;
  font-weight: 600 !important;
}

/* ============================================================
 * 8. BOTONES
 * ============================================================ */
/* Primary — altura uniforme 38px para todos los buttons del workspace */
button, input[type="submit"], input[type="button"],
.btn, .button, a.button, a.action-button,
.btn.btn-primary, .button.blue {
  background: #1F3A5F !important;
  color: #FAFAF8 !important;
  border: 1px solid #1F3A5F !important;
  border-radius: 4px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  padding: 0 16px !important;
  height: 38px !important;
  min-height: 38px !important;
  line-height: 36px !important;  /* 38 - 2px border */
  text-transform: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  box-shadow: 0 1px 2px rgba(31, 58, 95, 0.06);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.btn:hover, .button:hover, a.button:hover, a.action-button:hover,
.btn.btn-primary:hover, .button.blue:hover {
  background: #2A4E7A !important;
  border-color: #2A4E7A !important;
  box-shadow: 0 4px 12px rgba(31, 58, 95, 0.16);
  transform: translateY(-1px);
}

/* Secondary / cancel / reset */
button.secondary, .btn.secondary, .button.secondary,
.btn.btn-default, button.cancel, .button.cancel, input[type="reset"] {
  background: transparent !important;
  color: #1F3A5F !important;
  border: 1.5px solid #1F3A5F !important;
  font-weight: 500 !important;
}
button.secondary:hover, .btn.secondary:hover, .button.secondary:hover,
.btn.btn-default:hover, button.cancel:hover {
  background: #1F3A5F !important;
  color: #FAFAF8 !important;
  border-color: #1F3A5F !important;
}

/* Toolbar action-buttons (icon-only en barra de tickets) — altura 38px uniforme con primary */
.action-button, a.action-button, button.action-button,
.action-button.muted, .action-button.popup-button, .popup-button,
.action-button.muted.popup-button, a.action-button.muted, a.popup-button {
  background: #1F3A5F !important;
  color: #FAFAF8 !important;
  border: 1px solid #1F3A5F !important;
  padding: 0 12px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(31, 58, 95, 0.08);
}
.action-button:hover, a.action-button:hover, .popup-button:hover {
  background: #2A4E7A !important;
  border-color: #2A4E7A !important;
}
.action-button i, .action-button > i, .popup-button i {
  color: #FAFAF8 !important;
}
.action-button .icon-caret-down, .action-button .icon-down-dir, .action-button .icon-caret {
  font-size: 12px !important;
  margin-left: 4px !important;
}

/* Refuerzo final - botones dropdown que escapan al estilo primario */
a[class*="action"]:not(.secondary),
a[href].muted,
.popup-button:not(.secondary) {
  background: #1F3A5F !important;
  color: #FAFAF8 !important;
  border: 1px solid #1F3A5F !important;
  border-radius: 4px !important;
}

/* ============================================================
 * 8b. DROPDOWNS / POPUPS — aislar del styling agresivo del toolbar
 * ============================================================
 * Cuando un action-button con caret se clickea, osTicket abre .tip_content
 * (popup blanco con .tip_menu adentro). Mis reglas del toolbar (color blanco,
 * height 38px, display inline-flex) leakeaban acá y rompían la visibilidad.
 * Acá reseteamos a un dropdown clean estilo IGoldmann.
 */
.tip_content,
.action-dropdown,
.popup,
.dropdown-menu,
.action-content {
  background: #FFFFFF !important;
  border: 1px solid #1F3A5F !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(31, 58, 95, 0.18) !important;
  padding: 6px 0 !important;
  z-index: 1000;
  min-width: 200px;
  color: #2B2B2B !important;
  font-size: 13px !important;
}
.tip_content > *,
.tip_menu,
.tip_menu li,
.dropdown-menu li,
.action-dropdown li,
.action-content li {
  background: transparent !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.tip_content a,
.tip_menu li a,
.action-dropdown a,
.action-dropdown li a,
.dropdown-menu a,
.action-content a {
  display: block !important;
  padding: 8px 14px !important;
  color: #1F3A5F !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  float: none !important;
  text-align: left !important;
}
.tip_content a:hover,
.tip_menu li a:hover,
.action-dropdown a:hover,
.dropdown-menu a:hover,
.action-content a:hover {
  background: rgba(31, 58, 95, 0.08) !important;
  color: #1F3A5F !important;
  border-bottom: none !important;
  transform: none !important;
}
.tip_content i,
.tip_menu i,
.dropdown-menu i,
.action-dropdown i,
.action-content i {
  color: #1F3A5F !important;
  margin-right: 6px;
  background: transparent !important;
}
.tip_content hr,
.dropdown-menu hr,
.action-dropdown hr {
  border: none !important;
  border-top: 1px solid #E8EBF0 !important;
  margin: 4px 0 !important;
}
.tip_content form,
.tip_content textarea,
.tip_content select {
  color: #2B2B2B !important;
}

/* CTA secundario portal cliente (Ver Status) */
.button.green {
  background: transparent !important;
  color: #1F3A5F !important;
  border: 2px solid #1F3A5F !important;
}
.button.green:hover {
  background: #1F3A5F !important;
  color: #FAFAF8 !important;
}

/* ============================================================
 * 9. FORMULARIOS — inputs, labels, required indicators
 * ============================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], textarea, select {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px;
  color: #2B2B2B;
  background: #FFFFFF;
  border: 1.5px solid #B8C5D6 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: #1F3A5F !important;
  box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12) !important;
}

label, .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #2B2B2B;
  margin-bottom: 4px;
  display: block;
}

/* Indicador de campo requerido — dorado en lugar de rojo
   IMPORTANTE: NO incluir `.required` plano — osTicket lo usa en <td class="required">
   para las labels enteras de campos requeridos (no solo en el asterisco). Si incluís
   `.required` aquí, todas las labels de form se pintan oro. */
span.required, .required-indicator, label .req,
label .error, font.error, i.required {
  color: #C9A34A !important;
  font-weight: 700;
}

/* ============================================================
 * 10. TABLAS — listado de tickets
 * ============================================================ */
.tabular, table.list, table.padded {
  background: #FFFFFF;
  border: 1px solid #E5E9EE;
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
/* Header de tabla — default: hueso (texto normal legible), centrado */
.tabular th, table.list th, table thead th {
  background: #1F3A5F !important;
  color: #FAFAF8 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-size: 11px !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid #C9A34A !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.tabular th a, table.list th a, table thead th a {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.tabular th a, table.list th a, table thead th a {
  color: #FAFAF8 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Header activo (columna con sort actual) — destacado en oro */
.tabular th.asc, .tabular th.desc, .tabular th.sorted, .tabular th.active,
table.list th.asc, table.list th.desc, table.list th.sorted, table.list th.active,
table thead th.asc, table thead th.desc, table thead th.sorted, table thead th.active,
.tabular th[class*="sort"].active,
.tabular th.headerSortDown, .tabular th.headerSortUp {
  background: rgba(201, 163, 74, 0.18) !important;  /* highlight oro translúcido sobre navy */
  color: #C9A34A !important;
  border-bottom: 2px solid #C9A34A !important;
}
.tabular th.asc a, .tabular th.desc a, .tabular th.sorted a, .tabular th.active a,
table thead th.asc a, table thead th.desc a {
  color: #C9A34A !important;
}
.tabular td, table.list td, table tbody td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #E8EBF0 !important;
  color: #2B2B2B;
  text-align: left !important;  /* TD a la izquierda — el TH queda center */
  vertical-align: middle !important;
}
/* Excepciones — celdas con badges, status, prioridad, fechas → centrar */
.tabular td.status, .tabular td.priority, .tabular td.center,
.tabular td.date, .tabular td.assignee,
table.list td.status, table.list td.priority, table.list td.center,
table tbody td:has(> .label),
table tbody td:has(> .badge),
table tbody td:has(> .status-open),
table tbody td:has(> .status-closed) {
  text-align: center !important;
}
/* Checkbox columns (first child) — mantener centrado pero compacto */
.tabular td:has(input[type="checkbox"]),
table.list td:has(input[type="checkbox"]) {
  width: 30px;
}
table tbody tr {
  transition: background 0.15s ease;
}
table tbody tr:nth-child(even) {
  background: #F5F6F8;
}
.tabular tr:hover td, table tbody tr:hover {
  background: #EEF2F8 !important;
}
table tbody td a {
  color: #1F3A5F;
  font-weight: 600;
}
table tbody td a:hover {
  color: #C9A34A;
}

/* ============================================================
 * 11. STATUS BADGES
 * ============================================================ */
.status-open, .label.open, .badge.open {
  background: #C9A34A !important;
  color: #1F3A5F !important;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}
.status-closed, .label.closed, .badge.closed {
  background: #8FA3BD !important;
  color: #FAFAF8 !important;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}
.status-overdue, .label.overdue, .badge.overdue {
  background: #B23A48 !important;
  color: #FAFAF8 !important;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}
.priority-badge, td.priority {
  background: transparent !important;
  color: #555;
  font-size: 12px;
}

/* ============================================================
 * 12. LINKS
 * ============================================================ */
a {
  color: #1F3A5F;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
a:hover {
  color: #2F4F6F;
  border-bottom-color: #C9A34A;
}
.content a, .thread-body a {
  color: #0088CC;
}

/* ============================================================
 * 13. THREAD ENTRIES — vista del ticket (cliente vs staff)
 * ============================================================ */
/* Mensaje del usuario / cliente */
.thread-entry.client .thread-body,
.message.client {
  background: #F0F4FA !important;
  border-left: 3px solid #1F3A5F !important;
  border-radius: 0 6px 6px 0 !important;
}
/* Mensaje del agente / staff */
.thread-entry.staff .thread-body,
.message.staff {
  background: #FDF9EE !important;
  border-left: 3px solid #C9A34A !important;
  border-radius: 0 6px 6px 0 !important;
}
.thread-entry .thread-header, .message-header {
  background: rgba(31, 58, 95, 0.07) !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1F3A5F !important;
  border-bottom: 1px solid rgba(31, 58, 95, 0.1) !important;
}
.thread-entry .author, .message-author {
  font-weight: 700;
  color: #1F3A5F;
}

/* ============================================================
 * 14. ALERTS — error / warning / info / success
 * ============================================================ */
.error:empty, .alert-danger:empty {
  display: none !important;
}
.error:not(:empty), .alert-danger:not(:empty), .alert.alert-danger, .error-notice {
  background: #FDF0EE !important;
  color: #7B241C !important;
  border-left: 4px solid #C0392B !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
  font-size: 13px;
}
.warning, .alert.alert-warning, .overdue-notice {
  background: #FDF6E3 !important;
  color: #7D6608 !important;
  border-left: 4px solid #C9A34A !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
}
.notice, .alert.alert-info {
  background: #EEF3F9 !important;
  color: #1F3A5F !important;
  border-left: 4px solid #1F3A5F !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
}
.success, .ok, .alert.alert-success {
  background: #EEF7F2 !important;
  color: #1E6B3A !important;
  border-left: 4px solid #27AE60 !important;
  padding: 10px 14px !important;
  border-radius: 4px !important;
}

/* ============================================================
 * 15. DASHBOARD — filtros, refresh, gráfico
 * ============================================================ */
.dashboard-filters, .report-range {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #E0E6EF;
  border-radius: 6px;
  margin-bottom: 20px;
}
.btn-refresh, #dashboard-refresh {
  background: #1F3A5F !important;
  color: #FAFAF8 !important;
  padding: 7px 16px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ============================================================
 * 16. CARDS / PANELES
 * ============================================================ */
.panel, .panel-default, .box, .thread-entry {
  background: #FFFFFF !important;
  border: 1px solid #E5E9EE !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(31, 58, 95, 0.04);
}
.panel-heading {
  background: #FAFAF8 !important;
  color: #1F3A5F !important;
  border-bottom: 1px solid #E5E9EE !important;
  font-weight: 600;
}

/* ============================================================
 * 17. FOOTER
 * ============================================================ */
#footer, footer {
  background: #172E4A !important;
  color: rgba(250, 250, 248, 0.7) !important;
  border-top: 2px solid #C9A34A !important;
  padding: 16px !important;
  font-size: 12px;
  text-align: center;
}
#footer a, footer a {
  color: #C9A34A !important;
  border-bottom-color: #C9A34A;
}

/* ============================================================
 * 18. LOGIN
 * ============================================================ */
#loginBox, .login {
  background: #FFFFFF !important;
  border: 1px solid #E5E9EE !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(31, 58, 95, 0.12) !important;
  padding: 32px !important;
}

/* ============================================================
 * 19. LOGO container (header) — compacto para no sobresalir del header
 * ============================================================ */
a#logo, #logo, .logo {
  padding: 6px 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  max-height: 56px !important;
  line-height: 1 !important;
}
a#logo .valign-helper, #logo .valign-helper {
  display: none !important;
}
a#logo img, #logo img, .logo img {
  max-height: 44px !important;
  width: auto !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* ============================================================
 * 22. ICONOS .Icon (spans vacíos con background-image) — 2026-05-24y
 * ============================================================
 * osTicket usa <span class="Icon overdueTicket"></span> (vacío) para mostrar
 * iconos por background-image. Sin display/min-height el span queda con altura 0
 * y el icono no se ve, o pisa al texto vecino.
 */
.Icon,
span.Icon,
.Icon.Ticket, .Icon.webTicket, .Icon.emailTicket, .Icon.phoneTicket,
.Icon.apiTicket, .Icon.otherTicket,
.Icon.overdueTicket, .Icon.assignedTicket, .Icon.lockedTicket,
.Icon.editTicket, .Icon.staffAssigned,
.Icon.newstaff, .Icon.newteam {
  display: inline-block !important;
  min-height: 16px !important;
  min-width: 20px !important;
  height: 16px !important;
  vertical-align: middle !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

/* Pull-left / pull-right — float utility classes Bootstrap-style.
   Defensivo: asegurar que mi CSS no los pisó accidentalmente. */
.pull-left { float: left !important; }
.pull-right { float: right !important; }

/* Truncate utility — para subjects largos en lista de tickets */
.truncate {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Spacing entre icon-left y subject text en filas de tickets */
.tabular td .pull-left + .truncate,
.tabular td .pull-left + .pull-right + .truncate {
  margin-left: 6px;
}

/* ============================================================
 * 21. FORM TABLES (form_table, settings_table) — settings pages — 2026-05-24s
 * ============================================================
 * Páginas de Admin Panel (settings-emails, settings-system, etc.) usan
 * <table class="form_table settings_table"> con estructura:
 *   - <thead><th colspan="2"><em>Note...</em></th></thead>   ← banner navy
 *   - <tbody><tr><th colspan=2><em><strong>Section name</strong></em></th></tr>
 *   - <tbody><tr><td class="required">Label:</td><td><input/select></td></tr>
 *
 * Sin overrides explícitos: scp.css pinta los <em> en gris #666 (invisible sobre
 * navy) y las <td class="required"> heredaban oro de nuestra regla genérica.
 */
table.form_table, table.settings_table {
  background: transparent !important;
  border: none !important;
}

/* Banner notice arriba (th colspan en thead) */
table.form_table thead th[colspan],
table.form_table thead th,
table.settings_table thead th {
  background: #1F3A5F !important;
  color: #FAFAF8 !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  text-align: center !important;
  border-bottom: 2px solid #C9A34A !important;
}
table.form_table thead th em, table.form_table thead th strong,
table.form_table th em, table.form_table th strong,
table.settings_table thead th em, table.settings_table th em {
  color: #FAFAF8 !important;
  font-weight: 500 !important;
}

/* Section headers (Incoming/Outgoing Emails, etc.) — th colspan en tbody */
table.form_table tbody tr th[colspan],
table.settings_table tbody tr th[colspan] {
  background: #2F4F6F !important;
  color: #FAFAF8 !important;
  padding: 10px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(201, 163, 74, 0.3) !important;
}

/* Labels (td.required = nombre del campo, NO el asterisco) — mega specificity con html body */
html body table.form_table td,
html body table.form_table tr td,
html body table.settings_table td,
html body table.settings_table tr td,
html body table[class*="form"] td,
html body table[class*="settings"] td {
  color: #2B2B2B !important;
  background-color: transparent !important;
  background: transparent !important;
  text-align: left !important;
  padding: 8px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #E8EBF0 !important;
}
html body table.form_table td.required,
html body table.form_table tr td.required,
html body table.settings_table td.required,
html body table.settings_table tr td.required {
  font-weight: 600 !important;
  color: #2B2B2B !important;
  background: transparent !important;
}

/* GLOBAL SELECT FIX — cualquier <select> debe ser legible (navy sobre blanco)
   + tamaño cómodo (font-size 14px) + altura uniforme 36px. */
html body select,
html body select:not([multiple]),
html body table.form_table select,
html body table.settings_table select {
  color: #2B2B2B !important;
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  -webkit-text-fill-color: #2B2B2B !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 6px 28px 6px 10px !important;  /* right padding extra para el caret */
  height: 36px !important;
  min-height: 36px !important;
  line-height: 1.4 !important;
  border: 1.5px solid #B8C5D6 !important;
  border-radius: 4px !important;
  vertical-align: middle !important;
  cursor: pointer;
  appearance: auto;
}
html body select option,
html body table.form_table select option,
html body table.settings_table select option {
  color: #2B2B2B !important;
  background-color: #FFFFFF !important;
  font-size: 14px !important;
  font-family: 'Montserrat', sans-serif !important;
  padding: 6px 10px !important;
}
html body table.form_table input,
html body table.form_table textarea,
html body table.settings_table input,
html body table.settings_table textarea {
  color: #2B2B2B !important;
  background-color: #FFFFFF !important;
  font-size: 14px !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* font.error de osTicket (asterisco rojo) → dorado en nuestra paleta */
table.form_table font.error,
table.form_table .error,
font.error {
  color: #C9A34A !important;
  font-weight: 700;
  background: transparent !important;
  border: none !important;
}

/* Help-tip icon en form fields */
table.form_table i.help-tip,
table.settings_table i.help-tip {
  color: #8FA3BD;
  margin-left: 4px;
}

/* ============================================================
 * 20. PORTAL CLIENTE — nav + CTAs + welcome
 * ============================================================ */
.client-nav, #client-tabs, .tabs-nav {
  background: #172E4A !important;
  border-bottom: 2px solid #C9A34A !important;
  display: flex;
}
.client-nav a {
  color: rgba(250, 250, 248, 0.75) !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s ease;
}
.client-nav a.active,
.client-nav a:hover {
  color: #FAFAF8 !important;
  border-bottom: 3px solid #C9A34A !important;
}
.welcome-section {
  padding: 32px 0;
}
.welcome-section h1 {
  color: #1F3A5F !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}