/* ==========================================================================
   NOXIMED MEDICAL SYSTEM - DESIGN TOKENS & CLINICAL SYSTEM
   Domain: noximed.com
   Standard: ISO 9241-210 / HIPAA-compliant Visual Cleanliness & Accessibility
   Corporate Medical & Pharmaceutical Grade UI
   ========================================================================== */

:root {
  /* --- PALETA OFICIAL NOXIMED MEDICAL SYSTEM (Diseño sin título 1.svg) --- */
  --noxi-navy-deep: #071526;          /* Azul marino profundo de fondo de escudo */
  --noxi-navy-primary: #0D2238;       /* Azul marino institucional de alta jerarquía */
  --noxi-navy-secondary: #0F2D59;     /* Azul clínico corporativo */
  --noxi-navy-accent: #173D73;        /* Azul de enfoque y precisión médica */
  
  /* --- CIAN & PULSO ECG (Línea de Ritmo Cardíaco del Logo) --- */
  --noxi-cyan-primary: #0284C7;       /* Cian médico de contraste */
  --noxi-cyan-bright: #38BDF8;        /* Resplandor cian ECG brillante */
  --noxi-cyan-electric: #00D2FF;      /* Cian eléctrico de pulso en tiempo real */
  --noxi-cyan-subtle: #E0F2FE;        /* Fondo azul/cian aséptico */
  --noxi-cyan-glow: rgba(56, 189, 248, 0.4); /* Halo de resplandor médico */

  /* --- DEGRADADOS DE ALTA GAMA (Vignette de Diseño sin título 1.svg) --- */
  --noxi-bg-vignette: radial-gradient(ellipse at 50% 35%, #EBF1F8 0%, #D5E1EE 40%, #AEC4D9 75%, #88A3BC 100%);
  --noxi-bg-slate-light: linear-gradient(135deg, #F8FAFC 0%, #EEF4F9 50%, #E2EAF2 100%);
  --noxi-bg-dark-executive: linear-gradient(135deg, #071526 0%, #0D2238 50%, #173859 100%);
  --noxi-bg-steel-metallic: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 50%, #CBD5E1 100%);
  --noxi-bg-btn-primary: linear-gradient(135deg, #0284C7 0%, #0D2238 100%);
  --noxi-bg-btn-hover: linear-gradient(135deg, #0369A1 0%, #071526 100%);

  /* --- METÁLICOS / PLATINO & TEXTOS DE ALTO CONTRASTE --- */
  --noxi-slate-900: #071526;          /* Texto principal */
  --noxi-slate-800: #0F2338;          /* Títulos y subtítulos */
  --noxi-slate-700: #1E293B;          /* Texto estándar */
  --noxi-slate-600: #334155;          /* Texto secundario */
  --noxi-slate-500: #64748B;          /* Metadatos y etiquetas */
  --noxi-slate-400: #94A3B8;          /* Bordes secundarios */
  --noxi-slate-300: #CBD5E1;          /* Líneas metálicas de platino */
  --noxi-slate-200: #E2E8F0;          /* Platino neutro institucional */
  --noxi-slate-100: #F1F5F9;          /* Superficie neutra médica */
  --noxi-slate-50: #F8FAFC;           /* Fondo general aséptico */
  --noxi-white: #FFFFFF;              /* Blanco puro */

  /* --- ESTADOS CLÍNICOS NORMATIVOS --- */
  --noxi-status-success: #059669;
  --noxi-status-success-bg: #ECFDF5;
  --noxi-status-warning: #D97706;
  --noxi-status-warning-bg: #FFFBEB;
  --noxi-status-critical: #DC2626;
  --noxi-status-critical-bg: #FEF2F2;
  --noxi-status-info: #0284C7;
  --noxi-status-info-bg: #F0F9FF;

  /* --- TIPOGRAFÍA CLÍNICA --- */
  --noxi-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --noxi-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* --- ESCALA TIPOGRÁFICA MODULAR --- */
  --noxi-text-xs: 0.75rem;
  --noxi-text-sm: 0.875rem;
  --noxi-text-base: 1rem;
  --noxi-text-lg: 1.125rem;
  --noxi-text-xl: 1.25rem;
  --noxi-text-2xl: 1.5rem;
  --noxi-text-3xl: 1.875rem;

  /* --- ELEVACIONES Y SOMBRAS ASÉPTICAS --- */
  --noxi-shadow-sm: 0 2px 6px rgba(7, 21, 38, 0.05);
  --noxi-shadow-md: 0 6px 16px -2px rgba(7, 21, 38, 0.08), 0 2px 6px rgba(7, 21, 38, 0.04);
  --noxi-shadow-lg: 0 16px 36px -4px rgba(7, 21, 38, 0.12), 0 0 20px rgba(56, 189, 248, 0.1);
  --noxi-shadow-pulse: 0 12px 35px rgba(7, 21, 38, 0.2), 0 0 25px rgba(56, 189, 248, 0.35);

  /* --- RADIOS ESTRUCTURALES REDONDEADOS --- */
  --noxi-radius-sm: 8px;
  --noxi-radius-md: 14px;
  --noxi-radius-lg: 20px;
  --noxi-radius-xl: 28px;
  --noxi-radius-pill: 9999px;

  /* --- TRANSICIONES Y MICROANIMACIONES --- */
  --noxi-transition-fast: 75ms ease-out;
  --noxi-transition-smooth: 120ms cubic-bezier(0, 0, 0.2, 1);
}

/* ==========================================================================
   RESET ASÉPTICO & BASE CORPORATIVA (ULTRA-ALTO RENDIMIENTO)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--noxi-font-family);
  background-color: var(--noxi-slate-50);
  color: var(--noxi-slate-900);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.noxi-btn-interactive,
button,
.noxi-left-btn,
input,
select,
textarea {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

table {
  contain: layout style;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #E6EDF5 0%, #D8E3EE 30%, #CAD7E5 65%, #BACAD9 100%);
  color: var(--noxi-slate-700);
  overflow-x: hidden;
}

/* Scrollbar Aséptica */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--noxi-slate-100);
}

::-webkit-scrollbar-thumb {
  background: var(--noxi-slate-300);
  border-radius: var(--noxi-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--noxi-slate-400);
}

/* ==========================================================================
   FRAMEWORK ESTRUCTURAL (LAYOUT GENERAL MÉDICO)
   ========================================================================== */
.noxi-app-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100vw;
  background-color: var(--noxi-slate-50);
}

/* Barra Lateral Institucional */
.noxi-sidebar {
  width: 270px;
  background-color: var(--noxi-blue-primary);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  color: var(--noxi-white);
  transition: width var(--noxi-transition-smooth), transform var(--noxi-transition-smooth);
  z-index: 100;
}

/* Cabecera / Identificador Institucional */
.noxi-brand-header {
  height: 72px;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(10, 25, 47, 0.98);
}

.noxi-brand-logo-img {
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--noxi-radius-sm);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  transition: transform var(--noxi-transition-fast);
}

.noxi-brand-logo-img:hover {
  transform: scale(1.02);
}

.noxi-brand-logo-vertical {
  max-height: 180px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(15, 23, 42, 0.12));
}

/* Contenedor Principal de Trabajo */
.noxi-main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--noxi-slate-50);
}

/* Barra Superior Médica */
.noxi-topbar {
  height: 72px;
  background-color: var(--noxi-white);
  border-bottom: 1px solid var(--noxi-slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  box-shadow: var(--noxi-shadow-sm);
  z-index: 90;
}

.noxi-topbar-title {
  font-size: var(--noxi-text-sm);
  font-weight: 600;
  color: var(--noxi-slate-800);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.noxi-security-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  background-color: var(--noxi-teal-light);
  border: 1px solid rgba(14, 116, 144, 0.2);
  border-radius: var(--noxi-radius-sm);
  font-size: var(--noxi-text-xs);
  font-family: var(--noxi-font-mono);
  font-weight: 500;
  color: var(--noxi-teal-clinical);
}

.noxi-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--noxi-status-success);
  display: inline-block;
}

/* Área de Trabajo / Lienzo Clínico */
.noxi-workspace {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

/* Tarjeta / Contenedor Aséptico con Degradado Suave Plata/Plomo con Blanco Clínico */
.noxi-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 50%, #EEF4F9 100%);
  border: 1.5px solid var(--noxi-slate-300);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(7, 21, 38, 0.06), 0 0 15px rgba(56, 189, 248, 0.06);
  padding: 1.75rem;
  transition: box-shadow var(--noxi-transition-smooth), border-color var(--noxi-transition-smooth), transform var(--noxi-transition-smooth);
}

.noxi-card:hover {
  box-shadow: 0 12px 32px rgba(7, 21, 38, 0.1), 0 0 20px rgba(56, 189, 248, 0.12);
  border-color: var(--noxi-cyan-bright);
}

/* Pie de Página Global Oficial (Compacto y Centrado en Todo el Sistema) */
.noxi-global-admin-footer {
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #E2EBF4 0%, #D6E3F0 50%, #CAD8E6 100%);
  border-top: 1px solid var(--noxi-platinum-border, #CBD5E1);
  padding: 0 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  z-index: 40;
}

.noxi-footer-author-text {
  font-size: 0.82rem;
  color: #334155;
  font-weight: 400;
  line-height: 1;
}

.noxi-footer-author-name {
  font-weight: 600;
  color: #0F2338;
}

/* Credencial de Administrador en Extremo Superior Derecho de Cabecera */
.noxi-admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.noxi-admin-user-profile {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.noxi-admin-user-name {
  font-size: 1rem;
  font-weight: 600;
  color: #0F2338;
  letter-spacing: 0.1px;
}

.noxi-admin-user-role {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0284C7;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.noxi-role-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38BDF8;
  box-shadow: 0 0 6px #38BDF8;
}

/* ==========================================================================
   TIPOGRAFÍA Y UTILIDADES CLÍNICAS CORPORATIVAS
   ========================================================================== */
.noxi-title-primary {
  font-size: var(--noxi-text-2xl);
  font-weight: 600;
  color: var(--noxi-slate-900);
  line-height: 1.25;
  margin-bottom: 0.5rem;
  letter-spacing: -0.2px;
}

.noxi-lead-text {
  font-size: var(--noxi-text-sm);
  color: var(--noxi-slate-600);
  line-height: 1.6;
}

.noxi-divider {
  height: 1.5px;
  background-color: var(--noxi-slate-300);
  margin: 1.5rem 0;
  border: none;
}

/* ==========================================================================
   BANNER OFICIAL DE ALTA GAMA (NOXIMED)
   ========================================================================== */
.noxi-luxury-banner-container {
  width: 100%;
  padding: 1.25rem 1.5rem 0.5rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  box-sizing: border-box;
}

.noxi-luxury-banner-frame {
  width: 100%;
  background: linear-gradient(135deg, rgba(235, 241, 248, 0.9) 0%, rgba(213, 225, 238, 0.9) 100%);
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 20px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(7, 21, 38, 0.06), 0 0 10px rgba(56, 189, 248, 0.08);
  transform: none !important;
  filter: none !important;
}

.noxi-luxury-banner-img {
  width: 100%;
  max-width: 780px;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
  border-radius: var(--noxi-radius-lg);
  transform: none !important;
  filter: none !important;
}

@keyframes noxiPing {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  75%, 100% {
    transform: scale(2.3);
    opacity: 0;
  }
}