/* ===================================================================
   Tema y homologación visual — infomedex

   Paleta única de la aplicación:
     --brand   #0AA5D8  azul (mismo del sidebar): acciones principales
     --accent  #F97316  naranja: resto de acciones (resolver, exportar...)

   Además: tamaño único de botones y campos, radios poco redondeados y
   badges/tags sin color (estado, tipo, especialidad, prioridad, acciones).
   Todo se resuelve desde acá, sin depender de las clases de cada vista.
   =================================================================== */

:root {
  --brand: #0AA5D8;
  --brand-hover: #0994C2;
  --accent: #F97316;
  --accent-hover: #EA6A0A;

  /* Escala de radios unificada (antes 8/12/16/20px) */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 5px;
  --radius-2xl: 6px;
  --radius-control: 6px; /* botones y campos que venían con rounded-full */

  /* Tamaño único de botones y campos.
     Referencia: botón "Nuevo Registro" de Lista de Espera:
     2rem de alto con la raíz en 17px = 34px. */
  --control-h: 2rem;
  --control-px: 1rem;
  --control-py: 0.375rem;
  --control-fs: 0.75rem;

  /* Badges / tags: un único estilo neutro para todo el proyecto */
  --chip-bg: #F1F5F9;
  --chip-text: #475569;
  --chip-border: #E2E8F0;
}

/* ===================================================================
   1. Radios menos redondeados
   =================================================================== */
[class~="rounded"],
[class*="rounded-sm"] { border-radius: var(--radius-sm) !important; }

[class*="rounded-md"],
[class*="rounded-lg"] { border-radius: var(--radius-md) !important; }

[class*="rounded-xl"] { border-radius: var(--radius-xl) !important; }

[class*="rounded-2xl"],
[class*="rounded-3xl"] { border-radius: var(--radius-2xl) !important; }

/* Esquinas sueltas (rounded-t-*, rounded-b-*) */
[class*="rounded-t-lg"], [class*="rounded-t-xl"] {
  border-top-left-radius: var(--radius-md) !important;
  border-top-right-radius: var(--radius-md) !important;
}
[class*="rounded-b-lg"], [class*="rounded-b-xl"] {
  border-bottom-left-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}
[class*="rounded-l-lg"], [class*="rounded-l-xl"] {
  border-top-left-radius: var(--radius-md) !important;
  border-bottom-left-radius: var(--radius-md) !important;
}
[class*="rounded-r-lg"], [class*="rounded-r-xl"] {
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}

/* Botones y campos de formulario: se les quita la forma de píldora.
   Los avatares, badges y puntos conservan rounded-full para seguir siendo
   círculos. */
button[class*="rounded-full"],
input[class*="rounded-full"],
select[class*="rounded-full"],
textarea[class*="rounded-full"] {
  border-radius: var(--radius-control) !important;
}

/* ===================================================================
   2. Tamaño único de botones y campos
   =================================================================== */
#mainContent button,
#mainContent a[class*="px-"] {
  min-height: var(--control-h);
  padding: var(--control-py) var(--control-px);
  font-size: var(--control-fs);
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: var(--radius-lg);
}

/* Botones de icono dentro de tablas: misma altura, ancho compacto para que no
   ensanchen las columnas de acciones. */
#mainContent td button,
#mainContent th button,
#mainContent td a[class*="px-"],
#mainContent th a[class*="px-"] {
  min-height: var(--control-h);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Iconos dentro de botones: mismo tamaño en todos, para que la altura del
   botón no dependa del icono que lleve. */
#mainContent button .material-symbols-outlined,
#mainContent a[class*="px-"] .material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Campos de formulario y filtros con la misma altura y tipografía */
#mainContent input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#mainContent select {
  height: var(--control-h);
  min-height: var(--control-h);
  font-size: var(--control-fs);
  border-radius: var(--radius-lg);
}
#mainContent textarea {
  font-size: var(--control-fs);
  border-radius: var(--radius-lg);
}

/* Etiquetas de los filtros: mismo tamaño, para que las tarjetas se vean parejas */
#mainContent label {
  font-size: var(--control-fs);
}

/* ===================================================================
   3. Refuerzo de la paleta (azul de marca + naranja)
   =================================================================== */
.bg-primary { background-color: var(--brand) !important; }
.hover\:bg-primary\/90:hover { background-color: var(--brand-hover) !important; }
.bg-accent { background-color: var(--accent) !important; }
.hover\:bg-accent:hover { background-color: var(--accent-hover) !important; }
.bg-accent\/10 { background-color: rgba(249, 115, 22, 0.10) !important; }
.hover\:bg-accent\/10:hover { background-color: rgba(249, 115, 22, 0.12) !important; }
.text-accent { color: var(--accent) !important; }
.hover\:text-accent:hover { color: var(--accent) !important; }

/* ===================================================================
   4. Estado / tipo / especialidad / prioridad / acciones: sin colores.

   Cualquier badge o tag de color (estado, tipo, especialidad, prioridad,
   precio, acciones) queda con un único estilo neutro en todo el proyecto.
   Se distinguen las clases base de las variantes hover:/dark: para que un
   hover de color no pinte el elemento en reposo. Se aplica a `main`, así el
   sidebar y el navbar conservan su azul de marca.
   =================================================================== */

/* Fondos de color (clase base) */
main [class^="bg-green-"],
main [class*=" bg-green-"],
main [class^="bg-emerald-"],
main [class*=" bg-emerald-"],
main [class^="bg-teal-"],
main [class*=" bg-teal-"],
main [class^="bg-cyan-"],
main [class*=" bg-cyan-"],
main [class^="bg-sky-"],
main [class*=" bg-sky-"],
main [class^="bg-blue-"],
main [class*=" bg-blue-"],
main [class^="bg-indigo-"],
main [class*=" bg-indigo-"],
main [class^="bg-violet-"],
main [class*=" bg-violet-"],
main [class^="bg-purple-"],
main [class*=" bg-purple-"],
main [class^="bg-fuchsia-"],
main [class*=" bg-fuchsia-"],
main [class^="bg-pink-"],
main [class*=" bg-pink-"],
main [class^="bg-rose-"],
main [class*=" bg-rose-"],
main [class^="bg-red-"],
main [class*=" bg-red-"],
main [class^="bg-orange-"],
main [class*=" bg-orange-"],
main [class^="bg-amber-"],
main [class*=" bg-amber-"],
main [class^="bg-yellow-"],
main [class*=" bg-yellow-"],
main [class^="bg-lime-"],
main [class*=" bg-lime-"] {
  background-color: var(--chip-bg) !important;
  color: var(--chip-text) !important;
  border-color: var(--chip-border) !important;
}

/* Texto de color (clase base) */
main [class^="text-green-"],
main [class*=" text-green-"],
main [class^="text-emerald-"],
main [class*=" text-emerald-"],
main [class^="text-teal-"],
main [class*=" text-teal-"],
main [class^="text-cyan-"],
main [class*=" text-cyan-"],
main [class^="text-sky-"],
main [class*=" text-sky-"],
main [class^="text-blue-"],
main [class*=" text-blue-"],
main [class^="text-indigo-"],
main [class*=" text-indigo-"],
main [class^="text-violet-"],
main [class*=" text-violet-"],
main [class^="text-purple-"],
main [class*=" text-purple-"],
main [class^="text-fuchsia-"],
main [class*=" text-fuchsia-"],
main [class^="text-pink-"],
main [class*=" text-pink-"],
main [class^="text-rose-"],
main [class*=" text-rose-"],
main [class^="text-red-"],
main [class*=" text-red-"],
main [class^="text-orange-"],
main [class*=" text-orange-"],
main [class^="text-amber-"],
main [class*=" text-amber-"],
main [class^="text-yellow-"],
main [class*=" text-yellow-"],
main [class^="text-lime-"],
main [class*=" text-lime-"] {
  color: var(--chip-text) !important;
}

/* Bordes de color (clase base) */
main [class^="border-green-"],
main [class*=" border-green-"],
main [class^="border-emerald-"],
main [class*=" border-emerald-"],
main [class^="border-teal-"],
main [class*=" border-teal-"],
main [class^="border-cyan-"],
main [class*=" border-cyan-"],
main [class^="border-sky-"],
main [class*=" border-sky-"],
main [class^="border-blue-"],
main [class*=" border-blue-"],
main [class^="border-indigo-"],
main [class*=" border-indigo-"],
main [class^="border-violet-"],
main [class*=" border-violet-"],
main [class^="border-purple-"],
main [class*=" border-purple-"],
main [class^="border-fuchsia-"],
main [class*=" border-fuchsia-"],
main [class^="border-pink-"],
main [class*=" border-pink-"],
main [class^="border-rose-"],
main [class*=" border-rose-"],
main [class^="border-red-"],
main [class*=" border-red-"],
main [class^="border-orange-"],
main [class*=" border-orange-"],
main [class^="border-amber-"],
main [class*=" border-amber-"],
main [class^="border-yellow-"],
main [class*=" border-yellow-"],
main [class^="border-lime-"],
main [class*=" border-lime-"] {
  border-color: var(--chip-border) !important;
}

/* Variantes hover de color */
main [class*="hover:bg-green-"]:hover,
main [class*="hover:bg-emerald-"]:hover,
main [class*="hover:bg-teal-"]:hover,
main [class*="hover:bg-cyan-"]:hover,
main [class*="hover:bg-sky-"]:hover,
main [class*="hover:bg-blue-"]:hover,
main [class*="hover:bg-indigo-"]:hover,
main [class*="hover:bg-violet-"]:hover,
main [class*="hover:bg-purple-"]:hover,
main [class*="hover:bg-fuchsia-"]:hover,
main [class*="hover:bg-pink-"]:hover,
main [class*="hover:bg-rose-"]:hover,
main [class*="hover:bg-red-"]:hover,
main [class*="hover:bg-orange-"]:hover,
main [class*="hover:bg-amber-"]:hover,
main [class*="hover:bg-yellow-"]:hover,
main [class*="hover:bg-lime-"]:hover {
  background-color: var(--chip-bg) !important;
  color: var(--chip-text) !important;
}
main [class*="hover:text-green-"]:hover,
main [class*="hover:text-emerald-"]:hover,
main [class*="hover:text-teal-"]:hover,
main [class*="hover:text-cyan-"]:hover,
main [class*="hover:text-sky-"]:hover,
main [class*="hover:text-blue-"]:hover,
main [class*="hover:text-indigo-"]:hover,
main [class*="hover:text-violet-"]:hover,
main [class*="hover:text-purple-"]:hover,
main [class*="hover:text-fuchsia-"]:hover,
main [class*="hover:text-pink-"]:hover,
main [class*="hover:text-rose-"]:hover,
main [class*="hover:text-red-"]:hover,
main [class*="hover:text-orange-"]:hover,
main [class*="hover:text-amber-"]:hover,
main [class*="hover:text-yellow-"]:hover,
main [class*="hover:text-lime-"]:hover {
  color: var(--chip-text) !important;
}

/* Variantes dark de color */
.dark main [class*="dark:bg-green-"],
.dark main [class*="dark:bg-emerald-"],
.dark main [class*="dark:bg-teal-"],
.dark main [class*="dark:bg-cyan-"],
.dark main [class*="dark:bg-sky-"],
.dark main [class*="dark:bg-blue-"],
.dark main [class*="dark:bg-indigo-"],
.dark main [class*="dark:bg-violet-"],
.dark main [class*="dark:bg-purple-"],
.dark main [class*="dark:bg-fuchsia-"],
.dark main [class*="dark:bg-pink-"],
.dark main [class*="dark:bg-rose-"],
.dark main [class*="dark:bg-red-"],
.dark main [class*="dark:bg-orange-"],
.dark main [class*="dark:bg-amber-"],
.dark main [class*="dark:bg-yellow-"],
.dark main [class*="dark:bg-lime-"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.dark main [class*="dark:text-green-"],
.dark main [class*="dark:text-emerald-"],
.dark main [class*="dark:text-teal-"],
.dark main [class*="dark:text-cyan-"],
.dark main [class*="dark:text-sky-"],
.dark main [class*="dark:text-blue-"],
.dark main [class*="dark:text-indigo-"],
.dark main [class*="dark:text-violet-"],
.dark main [class*="dark:text-purple-"],
.dark main [class*="dark:text-fuchsia-"],
.dark main [class*="dark:text-pink-"],
.dark main [class*="dark:text-rose-"],
.dark main [class*="dark:text-red-"],
.dark main [class*="dark:text-orange-"],
.dark main [class*="dark:text-amber-"],
.dark main [class*="dark:text-yellow-"],
.dark main [class*="dark:text-lime-"] {
  color: #CBD5E1 !important;
}

/* Badges con el azul de marca dentro de tablas (tipo, status).
   Solo la clase base: un `hover:bg-primary/10` no debe pintar en reposo. */
main table [class^="bg-primary/"],
main table [class*=" bg-primary/"] {
  background-color: var(--chip-bg) !important;
  color: var(--chip-text) !important;
  border-color: var(--chip-border) !important;
}
.dark main table [class^="bg-primary/"],
.dark main table [class*=" bg-primary/"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}


/* ===================================================================
   5. Sobrescritura de clases semánticas con colores hardcodeados.
   Otros CSS files (medicos-tags.css, design-system.css, animations.css)
   definen colores en clases como .medico-tag, .quality-badge, .filter-bar-*
   que no se neutralizan con el selector de tono de Tailwind. Las forzamos
   al chip neutro y, cuando aplica, al naranja/azul de marca.
   =================================================================== */

/* Tags de médicos y equivalentes: mismo chip neutro */
main table .medico-tag,
main table .medico-seleccion-tag,
main table .medico-check,
main table .quality-badge,
main .filter-bar-submit,
main .filter-bar-clear {
  background-color: var(--chip-bg) !important;
  color: var(--chip-text) !important;
  border-color: var(--chip-border) !important;
}
.dark main table .medico-tag,
.dark main table .medico-seleccion-tag,
.dark main table .medico-check,
.dark main table .quality-badge,
.dark main .filter-bar-submit,
.dark main .filter-bar-clear {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Botones de eliminar dentro de chips (X del medico-tag): neutro */
main .remove-btn {
  background-color: transparent !important;
  color: var(--chip-text) !important;
}
.dark main .remove-btn {
  background-color: transparent !important;
  color: #CBD5E1 !important;
}

/* Botones de modales de médicos: mismo tamaño y paleta que el resto */
main .medicos-btn-cancel {
  background-color: var(--surface-light, #ffffff) !important;
  color: var(--chip-text) !important;
}
.dark main .medicos-btn-cancel {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #CBD5E1 !important;
}
main .medicos-btn-save {
  background-color: var(--brand) !important;
  color: #ffffff !important;
}