@import url("./tokens.css");
@import url("./themes.css");
@import url("./base.css");
@import url("./typography.css");
@import url("./layout.css");
@import url("./buttons.css");
@import url("./forms.css");
@import url("./navigation.css");
@import url("./components.css");
@import url("./utilities.css");
@import url("./responsive.css");
@import url("../estilo-global-panel-medico.css?v=1.899");

/* Semántica común para páginas con CSS legacy cargado antes o después del tema. */
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="light"] :where(body, main, .app-shell, .contenedor, .contenedor-principal) {
  color: var(--text-primary);
  background-color: var(--page-bg);
  background-image: none;
}
html[data-theme="light"] :where(.card, .tarjeta, .module-card, .panel, .panel-lab, .seccion, .contenido, .hero, .workspace-section, .bloque, .nota-card, .paciente-card, .escala-card, .config-card, .feature-card) {
  color: var(--text-primary);
  background: var(--surface-primary);
  background-image: none;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-subtle);
}
html[data-theme="light"] :where(h1, h2, h3, h4, strong, .title, .card-title, .module-card__title) { color: var(--text-primary); }
html[data-theme="light"] :where(p, small, .description, .subtitle, .card-description, .module-card__description, .muted) { color: var(--text-secondary); opacity: 1; }
html[data-theme="light"] :where(input, select, textarea) { color: var(--input-text); background: var(--input-bg); border-color: var(--input-border); }
html[data-theme="light"] :where(input, select, textarea)::placeholder { color: var(--input-placeholder); opacity: 1; }
html[data-theme="light"] :where(.btn-secondary, .secondary-button, .ghost-button, .btn-secundario, .boton-secundario) { color: var(--action-secondary-text); background: var(--action-secondary-bg); border-color: var(--action-secondary-border); box-shadow: none; }
html[data-theme="light"] :where(.btn-primary, .primary-button, .btn-primario, .boton-principal) { color: var(--action-primary-text); background: var(--action-primary-bg); border-color: var(--action-primary-bg); box-shadow: none; }
html[data-theme="light"] :where(.navbar-medico, .navbar, .nav, .topbar, header) { color: var(--text-primary); background: var(--surface-primary); border-bottom: 1px solid var(--border-subtle); background-image: none; box-shadow: none; }
html[data-theme="light"] :where(.navbar-medico a, .navbar a, .nav a, .menu a, .menu button, .topbar a) { color: var(--text-secondary); }
html[data-theme="light"] :where(.navbar-medico a:hover, .navbar a:hover, .nav a:hover, .menu a:hover, .menu button:hover) { color: var(--accent-primary); background: var(--surface-hover); }
html[data-theme="light"] :where(.badge, .pill, .chip, .status, .tag) { color: var(--accent-active); background: var(--accent-soft); border-color: var(--border-normal); }
html[data-theme="light"] body { overflow-x: clip; }

/* Normalización global de controles: el tema claro no hereda superficies oscuras de páginas legacy. */
html[data-theme="light"] :where(button, .btn, a.btn, .btn-secundario, .btn-secondary, .secondary-button, .ghost-button, .boton-secundario, .boton-filtro-atencion, .nav-login) {
  color: var(--button-secondary-text);
  background: var(--button-secondary-bg);
  background-image: none;
  border: 1px solid var(--button-secondary-border);
  box-shadow: 0 2px 8px rgb(20 40 28 / 8%);
  filter: none;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

html[data-theme="light"] :where(.boton, .btn-primario, .btn-primary, .primary-button, .boton-principal, .action-primary, .available-action, .btn--primary) {
  color: var(--button-primary-text);
  background: var(--button-primary-bg);
  background-image: none;
  border-color: var(--button-primary-border);
}

html[data-theme="light"] :where(button, .btn, a.btn, .btn-secundario, .btn-secondary, .secondary-button, .ghost-button, .boton-secundario, .boton-filtro-atencion, .nav-login):hover:not(:disabled) {
  color: var(--button-secondary-text);
  background: var(--button-secondary-hover);
  background-image: none;
  border-color: var(--accent-primary);
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(20 40 28 / 12%);
}

html[data-theme="light"] :where(.boton, .btn-primario, .btn-primary, .primary-button, .boton-principal, .action-primary, .available-action, .btn--primary):hover:not(:disabled) {
  color: var(--button-primary-text);
  background: var(--button-primary-hover);
  background-image: none;
  border-color: var(--button-primary-hover);
}

html[data-theme="light"] :where(button, .btn, a.btn):active:not(:disabled) {
  background: var(--button-secondary-active);
  background-image: none;
  filter: none;
  transform: translateY(0);
}

html[data-theme="light"] :where(.boton, .btn-primario, .btn-primary, .primary-button, .boton-principal, .action-primary, .available-action, .btn--primary):active:not(:disabled) {
  background: var(--button-primary-active);
  background-image: none;
}

html[data-theme="light"] :where(.btn-peligro, .btn-danger, .danger-button, .boton-peligro, .btn--critical) {
  background: #fff1f0;
  background-image: none;
  color: #8f2924;
  border-color: #e6b8b4;
}

html[data-theme="light"] :where(.btn-peligro, .btn-danger, .danger-button, .boton-peligro, .btn--critical):hover:not(:disabled) {
  background: #ffe4e1;
  background-image: none;
  color: #7d211d;
  border-color: #d9958f;
}

html[data-theme="light"] :where(button, .btn, a.btn):focus-visible {
  outline: 3px solid rgb(78 145 102 / 28%);
  outline-offset: 2px;
}

html[data-theme="light"] :where(button, .btn, a.btn):disabled {
  background: #dfe7e1;
  background-image: none;
  color: #7b887f;
  border-color: #d1dad3;
  box-shadow: none;
  filter: none;
  opacity: 1;
  cursor: not-allowed;
}

html[data-theme="light"] :where(.interactive-row, .patient-row, .fila-paciente, .card, .tarjeta, .seccion):hover {
  background: var(--surface-hover-light);
  background-image: none;
  color: inherit;
  filter: none;
}

html[data-theme="light"] :where(.selected, .active, .seleccionada, .activa) {
  background: var(--surface-selected-light);
  background-image: none;
  color: var(--button-secondary-text);
}

/* Paletas pastel del tema claro. El lienzo permanece blanco y las superficies usan la paleta elegida. */
html[data-theme="light"] {
  --paleta-clara-fondo: #e9ede6;
  --paleta-clara-superficie: #dfeadf;
  --paleta-clara-superficie-fuerte: #d2e2d3;
  --paleta-clara-hover: #c9dccb;
  --paleta-clara-borde: #abc8b1;
  --paleta-clara-acento: #3f7654;
  --page-bg: var(--paleta-clara-fondo);
  --surface-primary: var(--paleta-clara-superficie);
  --surface-secondary: var(--paleta-clara-superficie-fuerte);
  --surface-hover: var(--paleta-clara-hover);
  --surface-hover-light: var(--paleta-clara-hover);
  --surface-selected-light: var(--paleta-clara-superficie-fuerte);
  --border-subtle: var(--paleta-clara-borde);
  --border-normal: var(--paleta-clara-borde);
  --accent-primary: var(--paleta-clara-acento);
  --button-primary-bg: var(--paleta-clara-acento);
  --button-primary-border: var(--paleta-clara-acento);
}

html[data-theme="light"][data-paleta-clara="cielo"] {
  --paleta-clara-superficie: #dfe9eb;
  --paleta-clara-superficie-fuerte: #d3e1e4;
  --paleta-clara-hover: #c8dadd;
  --paleta-clara-borde: #adc8cd;
  --paleta-clara-acento: #477985;
}

html[data-theme="light"][data-paleta-clara="lavanda"] {
  --paleta-clara-superficie: #e7e3ec;
  --paleta-clara-superficie-fuerte: #ddd7e5;
  --paleta-clara-hover: #d4ccdf;
  --paleta-clara-borde: #c1b6cf;
  --paleta-clara-acento: #716681;
}

html[data-theme="light"][data-paleta-clara="durazno"] {
  --paleta-clara-superficie: #eee4dc;
  --paleta-clara-superficie-fuerte: #e6d8cd;
  --paleta-clara-hover: #ddcdbf;
  --paleta-clara-borde: #ceb9a8;
  --paleta-clara-acento: #8a654f;
}

html[data-theme="light"] body {
  background-color: var(--paleta-clara-fondo) !important;
  background-image: none !important;
}

html[data-theme="light"] body :where(
  header,
  aside,
  .navbar,
  .navbar-medico,
  .sidebar,
  .card,
  .tarjeta,
  .module-card,
  .panel,
  .panel-lab,
  .seccion,
  .contenido,
  .hero,
  .workspace-section,
  .bloque,
  .nota-card,
  .paciente-card,
  .escala-card,
  .config-card,
  .feature-card,
  .estadisticas,
  .stat,
  .tabla-pacientes
) {
  background-color: var(--paleta-clara-superficie) !important;
  background-image: none !important;
  border-color: var(--paleta-clara-borde) !important;
}

/* Ventanas flotantes y velos: una sola semántica visual adaptada al tema activo. */
html[data-theme] {
  --ventana-flotante-velo: rgb(0 0 0 / 72%);
  --ventana-flotante-superficie: linear-gradient(180deg, var(--surface-primary), var(--page-bg-alt));
  --ventana-flotante-cabecera: var(--surface-secondary);
  --ventana-flotante-interior: color-mix(in srgb, var(--surface-secondary) 82%, transparent);
  --ventana-flotante-borde: var(--border-normal);
  --ventana-flotante-texto: var(--text-primary);
  --ventana-flotante-texto-suave: var(--text-secondary);
  --ventana-flotante-acento: var(--accent-primary);
  --ventana-flotante-sombra: 0 28px 90px rgb(0 0 0 / 48%);
}

html[data-theme="dark"] {
  --ventana-flotante-velo: radial-gradient(circle at 50% 16%, rgb(47 100 65 / 16%), transparent 38%), rgb(2 7 4 / 80%);
  --ventana-flotante-superficie: linear-gradient(180deg, rgb(12 24 17 / 98%), rgb(5 12 8 / 99%));
  --ventana-flotante-cabecera: rgb(10 21 14 / 98%);
  --ventana-flotante-interior: rgb(20 40 27 / 68%);
  --ventana-flotante-borde: rgb(105 185 134 / 30%);
  --ventana-flotante-acento: #69b986;
}

html[data-theme="light"] {
  --ventana-flotante-velo: linear-gradient(rgb(27 62 40 / 28%), rgb(27 62 40 / 38%));
  --ventana-flotante-superficie: linear-gradient(180deg, #f4f6f0, var(--paleta-clara-superficie));
  --ventana-flotante-cabecera: var(--paleta-clara-superficie-fuerte);
  --ventana-flotante-interior: rgb(244 247 240 / 80%);
  --ventana-flotante-borde: var(--paleta-clara-borde);
  --ventana-flotante-texto: #183025;
  --ventana-flotante-texto-suave: #4f665a;
  --ventana-flotante-acento: var(--paleta-clara-acento);
  --ventana-flotante-sombra: 0 24px 68px rgb(28 61 41 / 22%);
}

html[data-theme="biocelular"] {
  --ventana-flotante-velo:
    radial-gradient(ellipse at 18% 18%, rgb(201 66 69 / 18%), transparent 34%),
    radial-gradient(ellipse at 84% 76%, rgb(255 189 88 / 10%), transparent 30%),
    rgb(13 3 6 / 82%);
  --ventana-flotante-superficie: linear-gradient(180deg, rgb(43 10 17 / 99%), rgb(20 5 9 / 99%));
  --ventana-flotante-cabecera: rgb(31 7 12 / 98%);
  --ventana-flotante-interior: rgb(73 20 29 / 58%);
  --ventana-flotante-borde: rgb(205 79 68 / 48%);
  --ventana-flotante-texto: #fff1d5;
  --ventana-flotante-texto-suave: #dfc8b5;
  --ventana-flotante-acento: #ffbd58;
  --ventana-flotante-sombra: 0 28px 90px rgb(0 0 0 / 58%), 0 0 46px rgb(201 66 69 / 12%);
}

html[data-theme] :where(
  .modal-backdrop,
  .modal-overlay,
  .proximamente-overlay,
  .patient-transfer-modal,
  .patient-duplicates-modal,
  .legal-modal-backdrop,
  .reporte-overlay,
  .modal-filtro-atencion,
  .solicitud-imagen-overlay,
  .resumen-editor-overlay,
  .historial-signo-overlay,
  .panel-tamizaje-overlay,
  .calc-med-modal
) {
  background: var(--ventana-flotante-velo);
}

html[data-theme] :where(
  .patient-transfer-panel,
  .patient-duplicates-panel,
  .legal-modal,
  .reporte-modal,
  .modal-tipo-paciente-contenido,
  .modal-catalogo-pronosticos > div,
  .modal-sincronizar-estudios-nota > div,
  .calc-med-modal-card
) {
  color: var(--ventana-flotante-texto);
  border-color: var(--ventana-flotante-borde);
  background: var(--ventana-flotante-superficie);
  box-shadow: var(--ventana-flotante-sombra);
}

html[data-theme] :where(
  .patient-transfer-header,
  .patient-transfer-actions,
  .patient-duplicates-panel > header,
  .legal-modal > header,
  .legal-modal > footer,
  .reporte-modal-header
) {
  color: var(--ventana-flotante-texto);
  border-color: var(--ventana-flotante-borde);
  background: var(--ventana-flotante-cabecera);
}

html[data-theme] :where(
  .patient-transfer-file,
  .patient-transfer-note,
  .patient-transfer-preview,
  .patient-transfer-summary,
  .patient-transfer-result,
  .patient-transfer-candidates,
  .patient-transfer-indications-box,
  .patient-transfer-clinical-sections,
  .patient-transfer-clinical-section,
  .patient-transfer-note-segment,
  .reporte-opcion
) {
  color: var(--ventana-flotante-texto);
  border-color: var(--ventana-flotante-borde);
  background: var(--ventana-flotante-interior);
}

html[data-theme] :where(
  .patient-transfer-header p,
  .patient-transfer-result a,
  .patient-transfer-indication-meta summary,
  .legal-modal-type,
  .legal-modal-content h3,
  .reporte-kicker
) {
  color: var(--ventana-flotante-acento);
}

html[data-theme] :where(
  .patient-transfer-header span,
  .patient-transfer-header small,
  .patient-transfer-muted,
  .patient-transfer-progress div,
  .patient-transfer-indications-count,
  .patient-transfer-indication-meta,
  .patient-transfer-candidates small,
  .legal-modal p,
  .reporte-modal p
) {
  color: var(--ventana-flotante-texto-suave);
}

html[data-theme] .patient-transfer-dropzone {
  color: var(--ventana-flotante-texto);
  border-color: color-mix(in srgb, var(--ventana-flotante-acento) 58%, transparent);
  background: color-mix(in srgb, var(--ventana-flotante-acento) 10%, transparent);
}

html[data-theme] .patient-transfer-dropzone.activo {
  border-color: var(--ventana-flotante-acento);
  background: color-mix(in srgb, var(--ventana-flotante-acento) 18%, transparent);
}

html[data-theme] :where(
  .patient-transfer-header button,
  .patient-transfer-dropzone button,
  .patient-transfer-actions button,
  .patient-transfer-file button,
  .patient-duplicates-panel button
) {
  color: var(--button-secondary-text);
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg);
}

html[data-theme] .patient-transfer-actions button:last-child {
  color: var(--button-primary-text);
  border-color: var(--button-primary-border);
  background: var(--button-primary-bg);
}

html[data-theme] :where(.patient-transfer-panel, .patient-duplicates-panel) {
  scrollbar-color: var(--ventana-flotante-acento) var(--ventana-flotante-cabecera);
}