/* ISSA Recibos — identidad de https://clinicaissa.com/es/.
   Azul #0097C3, azul oscuro #005C77 y acento naranja #F36438.
   Tonos derivados para mantener el contraste en controles compactos. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/montserrat-regular.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/montserrat-semibold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-bold.ttf") format("truetype");
}

:root {
  --issa-brand-950: #00465b;
  --issa-brand-900: #005c77;
  --issa-brand-800: #007b9f;
  --issa-brand-700: #0097c3;
  --issa-brand-100: #e2f3f8;
  --issa-brand-050: #f0f9fc;
  --issa-bg: #f4f7f9;
  --issa-surface: #ffffff;
  --issa-surface-soft: #f7fafb;
  --issa-border: #d7e5eb;
  --issa-border-strong: #b7cdd7;
  --issa-text: #223943;
  --issa-muted: #647b85;
  --issa-accent: #f36438;
  --issa-accent-soft: #fff0e9;
  --issa-danger: #a93232;
  --issa-shadow: 0 1px 3px rgba(0, 92, 119, .08);
  --issa-radius: 8px;
  --issa-font: "Montserrat", "Segoe UI", Tahoma, Arial, sans-serif;
}

html,
body,
.x-body,
.x-panel,
.x-window,
.x-form-field,
.x-form-item-label,
.x-grid-cell,
.x-column-header,
.x-tab {
  font-family: var(--issa-font) !important;
}

/* UniGUI asigna una fuente explícita a cada etiqueta y checkbox. */
.issa-login .x-component,
.issa-login .x-form-cb-label,
.issa-app .x-component,
.issa-app .x-form-cb-label {
  font-family: var(--issa-font) !important;
}

.x-btn-inner,
.x-menu-item-text,
.x-treelist-item-text {
  font-family: var(--issa-font) !important;
}

body.issa-app,
body.issa-app .x-viewport,
body.issa-app .x-body {
  background: var(--issa-bg) !important;
  color: var(--issa-text) !important;
}

/* Estructura principal. */
.issa-topbar,
.issa-topbar > .x-panel-bodyWrap,
.issa-topbar > .x-panel-bodyWrap > .x-panel-body {
  background: var(--issa-brand-900) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.issa-app .issa-topbar .x-btn {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

.issa-app .issa-topbar .x-btn-over {
  background: rgba(255, 255, 255, .16) !important;
}

.issa-topbar .x-btn-inner,
.issa-topbar .x-btn-icon-el,
.issa-title {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Los pictogramas de UniGUI usan su propia fuente; no deben heredar Segoe UI. */
.issa-app .x-btn-icon-el.x-fa4,
.issa-app .x-treelist-item-icon.x-fa4 {
  font-family: FontAwesome !important;
}

/* El expansor de TUniTreeMenu usa el glifo f0da. Con una fuente de texto
   se muestra como un recuadro; debe conservar la fuente de iconos. */
.issa-sidebar .x-treelist-item-expander::after {
  font-family: FontAwesome !important;
}

/* Los grupos contienen expansor e icono. El margen estándar reserva sólo
   uno y el pictograma termina sobre el título. */
.issa-sidebar .x-treelist-item-with-icon > .x-treelist-row > .x-treelist-item-wrap > .x-treelist-item-text {
  margin-left: 52px !important;
}

.issa-title {
  font-size: 18px !important;
  letter-spacing: -.01em;
}

.issa-sidebar,
.issa-sidebar .x-panel-body,
.issa-sidebar .x-treelist,
.issa-sidebar .x-treelist-container {
  background: #ffffff !important;
  border: 0 !important;
  border-right: 1px solid var(--issa-border) !important;
}

/* El árbol debe conservar su propia altura y desplazarse de forma
   independiente cuando se abren todos los grupos, especialmente en móvil. */
.issa-sidebar .x-treelist {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.issa-sidebar .x-treelist-item-text {
  color: #365661 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.issa-sidebar .x-treelist-row-over > .x-treelist-item-wrap {
  background: #eef8fc !important;
}

.issa-sidebar .x-treelist-item-selected > .x-treelist-row > .x-treelist-item-wrap {
  background: #e2f3f8 !important;
  border-left: 4px solid var(--issa-brand-700) !important;
}

.issa-sidebar .x-treelist-item-selected .x-treelist-item-text {
  color: var(--issa-brand-950) !important;
  font-weight: 700 !important;
}

.issa-content,
.issa-content .x-panel-body {
  background: var(--issa-bg) !important;
  border: 0 !important;
}

.issa-page,
.issa-page > .x-window-bodyWrap > .x-window-body,
.issa-page > .x-panel-bodyWrap > .x-panel-body {
  background: var(--issa-bg) !important;
  border: 0 !important;
}

/* Formularios y paneles: aspecto de aplicación de escritorio. */
.issa-app .x-window-default,
.issa-app .x-panel-default,
.issa-app .x-tabpanel,
.issa-app .x-fieldset {
  background: var(--issa-surface) !important;
  border-color: var(--issa-border) !important;
  box-shadow: none !important;
}

.issa-app .x-panel-body-default,
.issa-app .x-window-body-default,
.issa-app .x-tabpanel-child {
  background: var(--issa-surface) !important;
  border-color: var(--issa-border) !important;
}

.issa-app .x-panel-header-default,
.issa-app .x-window-header-default {
  background: var(--issa-brand-050) !important;
  border-color: var(--issa-border) !important;
}

.issa-app .x-panel-header-title-default,
.issa-app .x-window-header-title-default,
.issa-app .x-fieldset-header-text {
  color: var(--issa-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.issa-app .issa-card,
.issa-app .issa-card > .x-panel-bodyWrap > .x-panel-body {
  background: var(--issa-surface) !important;
  border-color: var(--issa-border) !important;
  box-shadow: var(--issa-shadow) !important;
}

/* Acciones: azul ISSA con un tono más oscuro para texto blanco legible. */
.issa-app .x-btn-default-small,
.issa-app .x-btn-default-medium,
.issa-login .x-btn-default-small,
.issa-login .x-btn-default-medium {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--issa-border-strong) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

.issa-app .x-btn-default-small-over,
.issa-app .x-btn-default-medium-over,
.issa-login .x-btn-default-small-over,
.issa-login .x-btn-default-medium-over {
  background: var(--issa-brand-050) !important;
  border-color: var(--issa-brand-700) !important;
}

.issa-app .x-btn-inner,
.issa-login .x-btn-inner {
  color: var(--issa-text) !important;
  font-weight: 600 !important;
}

.issa-app .issa-primary.x-btn,
.issa-app .btn-primary.x-btn,
.issa-login .issa-primary.x-btn,
.issa-login .btn-primary.x-btn {
  background: var(--issa-brand-800) !important;
  background-image: none !important;
  border-color: var(--issa-brand-800) !important;
}

.issa-app .issa-primary .x-btn-inner,
.issa-app .btn-primary .x-btn-inner,
.issa-login .issa-primary .x-btn-inner,
.issa-login .btn-primary .x-btn-inner {
  color: #ffffff !important;
}

.issa-app .issa-danger.x-btn {
  border-color: #d9adad !important;
}

.issa-app .issa-danger .x-btn-inner {
  color: var(--issa-danger) !important;
}

/* Campos: altura contenida y foco visible. */
.issa-app .x-form-text,
.issa-app .x-form-trigger-wrap,
.issa-login .x-form-text,
.issa-login .x-form-trigger-wrap {
  background: #ffffff !important;
  background-image: none !important;
  border-color: var(--issa-border-strong) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--issa-text) !important;
}

.issa-app .x-form-text-wrap-focus,
.issa-app .x-form-trigger-wrap-focus,
.issa-login .x-form-text-wrap-focus,
.issa-login .x-form-trigger-wrap-focus {
  border-color: var(--issa-brand-700) !important;
  box-shadow: 0 0 0 2px rgba(0, 151, 195, .18) !important;
}

.issa-app .x-form-item-label-text,
.issa-app .x-form-cb-label,
.issa-app .x-label,
.issa-login .x-form-item-label-text,
.issa-login .x-form-cb-label {
  color: var(--issa-text) !important;
}

/* Pestañas similares a las de una aplicación Win32 actualizada. */
.issa-app .x-tab-bar-default {
  background: var(--issa-surface-soft) !important;
  border-color: var(--issa-border) !important;
}

.issa-app .x-tab-default {
  background: #edf4f7 !important;
  background-image: none !important;
  border-color: var(--issa-border) !important;
  box-shadow: none !important;
}

.issa-app .x-tab-default-active {
  background: #ffffff !important;
  border-top: 3px solid var(--issa-brand-700) !important;
}

.issa-app .x-tab-inner-default {
  color: #365661 !important;
  font-weight: 600 !important;
}

/* Rejillas compactas, claras y con selección inequívoca. */
.issa-app .x-grid,
.issa-app .x-grid-view,
.issa-app .x-grid-body {
  background: #ffffff !important;
  border-color: var(--issa-border) !important;
}

.issa-app .x-grid-header-ct,
.issa-app .x-column-header {
  background: #edf7fb !important;
  background-image: none !important;
  border-color: var(--issa-border) !important;
}

.issa-app .x-column-header-text {
  color: #005c77 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.issa-app .x-grid-cell {
  border-color: #e9f0f4 !important;
  color: var(--issa-text) !important;
  font-size: 11px !important;
}

.issa-app .x-grid-cell-inner {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.issa-app .x-grid-item-over .x-grid-cell {
  background: #f0f9fc !important;
}

.issa-app .x-grid-item-selected .x-grid-cell {
  background: #d9f0f8 !important;
  color: var(--issa-brand-950) !important;
}

.issa-app .x-toolbar-default {
  background: var(--issa-surface-soft) !important;
  background-image: none !important;
  border-color: var(--issa-border) !important;
}

/* Login: superficies claras y acentos corporativos. */
html.issa-login-body,
body.issa-login-body,
body.issa-login-body .x-viewport {
  background: linear-gradient(135deg, #e2f3f8 0%, #f6fafc 60%, #d5edf6 100%) !important;
  min-height: 100vh;
}

.issa-login.x-window,
.issa-login.x-panel {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-top: 4px solid var(--issa-brand-700) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 55px rgba(0, 92, 119, .18) !important;
  overflow: hidden !important;
}

.issa-login .x-window-body,
.issa-login .x-panel-body,
.issa-login .x-tabpanel,
.issa-login .x-tabpanel-body {
  background: #ffffff !important;
  border: 0 !important;
}

/* Los diálogos mantienen contraste independientemente del formulario activo. */
.x-message-box .x-window-header,
.x-message-box .x-toolbar {
  background: var(--issa-brand-050) !important;
  border-color: var(--issa-border) !important;
}

.x-message-box .x-btn {
  background: #ffffff !important;
  border: 1px solid var(--issa-border-strong) !important;
  border-radius: 5px !important;
}

.x-message-box .x-btn-inner {
  color: var(--issa-text) !important;
  font-weight: 600 !important;
}


/* Cabecera blanca, franja azul y navegación clara como en la web de ISSA.
   Estas reglas siguen a las genéricas para que los estados no pierdan contraste. */
.issa-app .issa-topbar,
.issa-app .issa-topbar > .x-panel-bodyWrap,
.issa-app .issa-topbar > .x-panel-bodyWrap > .x-panel-body {
  background: var(--issa-surface) !important;
}
.issa-app .issa-topbar {
  border-bottom: 3px solid var(--issa-brand-700) !important;
}
.issa-app .issa-topbar .x-btn {
  background: var(--issa-brand-050) !important;
  border-color: var(--issa-border) !important;
}
.issa-app .issa-topbar .x-btn-over {
  background: var(--issa-brand-100) !important;
  border-color: var(--issa-brand-700) !important;
}
.issa-app .issa-topbar .x-btn-inner,
.issa-app .issa-topbar .x-btn-icon-el,
.issa-app .issa-topbar .issa-title {
  color: var(--issa-brand-900) !important;
}
.issa-app .issa-title {
  font-weight: 700 !important;
}
.issa-app .issa-sidebar .x-treelist-item-icon,
.issa-app .issa-sidebar .x-treelist-item-expander {
  color: var(--issa-brand-800) !important;
}
.issa-app .issa-sidebar .x-treelist-item-selected .x-treelist-item-icon {
  color: var(--issa-brand-900) !important;
}
.issa-app .x-btn-icon-el,
.issa-app .x-menu-item-icon,
.issa-login .x-btn-icon-el,
.issa-app .x-tab-icon-el {
  color: var(--issa-brand-800) !important;
}
/* Los iconos basados en fuentes se tiñen directamente; los bitmaps del
   navegador de registros conservan su forma y transparencia. */
.issa-app .x-tbar-page-first,
.issa-app .x-tbar-page-prev,
.issa-app .x-tbar-page-next,
.issa-app .x-tbar-page-last,
.issa-app .x-tbar-page-refresh,
.issa-app .x-tbar-add,
.issa-app .x-tbar-delete,
.issa-app .x-tbar-save {
  filter: grayscale(1) sepia(1) saturate(5) hue-rotate(150deg);
}
.issa-app .issa-primary .x-btn-icon-el,
.issa-app .btn-primary .x-btn-icon-el,
.issa-login .issa-primary .x-btn-icon-el,
.issa-login .btn-primary .x-btn-icon-el {
  color: #ffffff !important;
}
.issa-app .issa-danger .x-btn-icon-el {
  color: var(--issa-danger) !important;
}
.issa-app .issa-primary.x-btn-over,
.issa-app .btn-primary.x-btn-over,
.issa-login .issa-primary.x-btn-over,
.issa-login .btn-primary.x-btn-over {
  background: var(--issa-brand-900) !important;
  border-color: var(--issa-brand-900) !important;
}
.issa-app .issa-card {
  border-top: 2px solid var(--issa-brand-100) !important;
}
.issa-app .x-tab-default-active .x-tab-inner,
.issa-app .x-tab-default-active .x-tab-icon-el {
  color: var(--issa-brand-900) !important;
}
.issa-app .x-grid-row-alt .x-grid-cell {
  background: #f8fbfd !important;
}
/* Selección y hover prevalecen también sobre las filas alternas. */
.issa-app .x-grid-item-over .x-grid-cell {
  background: var(--issa-brand-050) !important;
}
.issa-app .x-grid-item-selected .x-grid-cell {
  background: #d9f0f8 !important;
}
.issa-app .x-grid-item-focused .x-grid-cell-inner::before {
  border-color: var(--issa-brand-800) !important;
}
.issa-app .x-form-cb-checked .x-form-checkbox,
.issa-app .x-form-cb-checked .x-form-radio {
  color: var(--issa-brand-800) !important;
}
.issa-app .x-btn-focus,
.issa-login .x-btn-focus {
  outline: 2px solid var(--issa-brand-700) !important;
  outline-offset: 2px;
}
.issa-app .x-btn-disabled,
.issa-login .x-btn-disabled {
  opacity: .5 !important;
}
.issa-login .issa-login-heading {
  color: var(--issa-brand-900) !important;
  font-weight: 700 !important;
  border-bottom: 3px solid var(--issa-accent);
  padding-bottom: 5px;
}
/* Marca del checkbox sin depender de fuentes de iconos. */
.issa-login .x-form-checkbox-default::before {
  content: "" !important;
}
.issa-login .x-form-cb-checked .x-form-checkbox-default::before {
  content: "" !important;
  display: block;
  position: absolute;
  box-sizing: content-box;
  width: 4px;
  height: 8px;
  left: 5px;
  top: 1px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.issa-login .issa-login-link {
  color: var(--issa-brand-800) !important;
  font-weight: 500 !important;
}
.issa-login .issa-login-link:hover {
  color: var(--issa-brand-900) !important;
  text-decoration: underline;
}