/* Importar Quicksand si no está ya en tu header */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');

/* ----- ESTADO BASE (Dark Tech & Glassmorphism) ----- */
:root {
  --font-base: 16px; /* Tamaño base para rem */
  --font-family: 'Quicksand', sans-serif;
  
  --bg-app: #0f172a; /* Fondo oscuro tecnológico */
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  
  --glass-bg: rgba(30, 41, 59, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(12px);
  --btn-primary: #3b82f6;
}

/* ----- MODO ACCESIBILIDAD (Alto Contraste) ----- */
body.modo-accesible {
  --bg-app: #000000; /* Fondo negro puro */
  --text-main: #ffffff; /* Blanco puro para máximo contraste */
  --text-muted: #cccccc;
  
  /* Eliminamos el blur y opacidad para evitar confusión visual */
  --glass-bg: #111111;
  --glass-border: #ffffff; /* Bordes sólidos y claros */
  --glass-blur: none;
  --btn-primary: #ffff00; /* Amarillo sobre negro es el estándar de alto contraste */
  --text-on-primary: #000000;
}

/* ----- APLICACIÓN DE VARIABLES ----- */
html {
  font-size: var(--font-base);
  transition: font-size 0.3s ease;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-app);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
  margin: 0;
}

/* Ejemplo de una tarjeta o módulo de especialista */
.dokter-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 1.5rem;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.dokter-btn {
  background-color: var(--btn-primary);
  color: var(--text-on-primary, #ffffff);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-family: var(--font-family);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Foco para navegación por teclado */
.dokter-btn:focus, 
button:focus, 
a:focus {
  outline: 3px solid #ffff00;
  outline-offset: 2px;
}