/* Puente entre Bootstrap 5.1 (y SweetAlert2 / Quill) y el tema de MudBlazor (TemaContro). Bootstrap 5.1 no conoce el modo oscuro (data-bs-theme llegó en 5.3) y trae blancos y grises fijos en .card, .table, .modal-content, .form-control, etc. Estas reglas los apuntan a las variables de la paleta de MudBlazor, que el MudThemeProvider cambia solo al conmutar claro/oscuro. El componente ProveedorTemaContro marca . Las reglas bajo html[data-tema] valen en ambos modos (el fondo del body, que Bootstrap pisa en blanco porque se carga después de MudBlazor); las de html[data-tema="oscuro"] solo en oscuro. */ /* Deslizar hacia abajo en el móvil ya no recarga la página (pull-to-refresh nativo de Chrome Android): el usuario lo hacía sin querer y perdía lo que estaba haciendo (Diego, 2026-09-17). El scroll normal de la página sigue igual; solo se corta el "rebote" del borde superior. */ html, body { overscroll-behavior-y: contain; } /* ── Ambos modos: el body sigue a la paleta, no al blanco de Bootstrap ───────────────────────── */ html[data-tema] body { background-color: var(--mud-palette-background); color: var(--mud-palette-text-primary); } /* Burbujas de la conversación del CRM (notas de la gestión): un tinte del color de estado sobre la superficie de la tarjeta. Las variables *-hover de MudBlazor (6 % de opacidad) no se distinguen, sobre todo en oscuro; acá el tinte se dosifica por modo. Lo que dijo el CONTACTO = verde (success); lo que dijo el USUARIO = celeste (info). Las usa NuevoEditarGestion.razor. */ :root { --contro-nota-contacto: color-mix(in srgb, var(--mud-palette-success) 14%, var(--mud-palette-surface)); --contro-nota-usuario: color-mix(in srgb, var(--mud-palette-info) 14%, var(--mud-palette-surface)); /* Nota PRIVADA (solo la ve quien la escribió, Diego 2026-09-09): violeta, un color que no usa nadie más en el CRM. */ --contro-nota-privada: color-mix(in srgb, #7E57C2 16%, var(--mud-palette-surface)); --contro-nota-privada-borde: #7E57C2; /* Estado "En programación" (Diego 2026-09-17): UN solo color en tablero, kanban y chips (la gestión ya no depende del usuario). Gris pizarra (Diego 2026-09-21: el violeta anterior no le gustó): es un color "en pausa", sin alarma, que dice "esto no está en tus manos". Además el violeta se confundía con el color primario del tema (medido: separación 13 sobre un mínimo de 15, y 6 sobre 8 para quien tiene daltonismo). Este tono se midió contra el ámbar, el verde, el primario y el rojo del tema y se distingue de todos, en claro y en oscuro. */ --contro-programacion: #475569; } /* ── Solo oscuro ──────────────────────────────────────────────────────────────────────────────── */ html[data-tema="oscuro"] { color-scheme: dark; /* scrollbars, selects nativos y campos de fecha del navegador en oscuro */ /* SIN DESTELLO BLANCO al abrir/F5: el script inline del pone data-tema="oscuro" ANTES del primer pintado, y estas variables (los mismos valores de PaletteDark en TemaContro.cs) valen desde ese instante, sin esperar a que Blazor cargue y el MudThemeProvider emita las suyas. html[data-tema] le gana en especificidad al :root del MudThemeProvider; en modo claro no aplica. */ --mud-palette-primary: #63AFE0; --mud-palette-secondary: #00EEB8; --mud-palette-tertiary: #00AFFF; --mud-palette-background: #10161D; --mud-palette-background-grey: #1B2531; --mud-palette-surface: #171F29; --mud-palette-appbar-background: #10161D; --mud-palette-appbar-text: #E8EEF4; --mud-palette-drawer-background: #171F29; --mud-palette-drawer-text: #E8EEF4; --mud-palette-text-primary: #E8EEF4; --mud-palette-text-secondary: #9FB0BE; --mud-palette-action-default: #9FB0BE; --mud-palette-lines-default: #283645; --mud-palette-divider: #283645; --mud-palette-table-lines: #223040; /* Pista del MudSwitch (lo único que usa --mud-palette-black); el #27272f por defecto se fundía con el fondo y los interruptores no se veían. Mismo valor que Black en PaletteDark. */ --mud-palette-black: #9FB0BE; /* Burbujas del CRM: en oscuro el tinte tiene que ser más franco para separarse de la tarjeta. */ --contro-nota-contacto: color-mix(in srgb, var(--mud-palette-success) 28%, var(--mud-palette-surface)); --contro-nota-usuario: color-mix(in srgb, var(--mud-palette-info) 28%, var(--mud-palette-surface)); --contro-nota-privada: color-mix(in srgb, #9575CD 30%, var(--mud-palette-surface)); --contro-nota-privada-borde: #B39DDB; /* Pizarra un punto más clara para leerse sobre el carbón. No más clara que esto: se acercaría al azul acero del primario en oscuro (#63AFE0) y volverían a parecerse. */ --contro-programacion: #6E7F96; } /* Tarjetas */ html[data-tema="oscuro"] .card { background-color: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-color: var(--mud-palette-lines-default); } html[data-tema="oscuro"] .card-header, html[data-tema="oscuro"] .card-footer { background-color: var(--mud-palette-background-grey); border-color: var(--mud-palette-lines-default); } /* Tablas */ html[data-tema="oscuro"] .table { color: var(--mud-palette-text-primary); border-color: var(--mud-palette-table-lines); --bs-table-bg: transparent; --bs-table-striped-bg: var(--mud-palette-background-grey); --bs-table-striped-color: var(--mud-palette-text-primary); --bs-table-hover-bg: var(--mud-palette-table-hover); --bs-table-hover-color: var(--mud-palette-text-primary); } html[data-tema="oscuro"] .table > :not(caption) > * > * { border-bottom-color: var(--mud-palette-table-lines); } /* Modales (los propios de la app: CustomModal, MenuVertical) */ html[data-tema="oscuro"] .modal-content { background-color: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-color: var(--mud-palette-lines-default); } html[data-tema="oscuro"] .modal-header, html[data-tema="oscuro"] .modal-footer { border-color: var(--mud-palette-lines-default); } /* Campos de formulario nativos que aún usan clases de Bootstrap */ html[data-tema="oscuro"] .form-control, html[data-tema="oscuro"] .form-select, html[data-tema="oscuro"] .input-group-text { background-color: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-color: var(--mud-palette-lines-default); } html[data-tema="oscuro"] .form-control:focus, html[data-tema="oscuro"] .form-select:focus { background-color: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-color: var(--mud-palette-primary); box-shadow: 0 0 0 0.25rem var(--mud-palette-primary-hover); } html[data-tema="oscuro"] .form-control::placeholder { color: var(--mud-palette-text-secondary); } /* Utilidades de color de Bootstrap que asumen fondo claro */ html[data-tema="oscuro"] .text-muted, html[data-tema="oscuro"] .text-secondary { color: var(--mud-palette-text-secondary) !important; } html[data-tema="oscuro"] .text-dark, html[data-tema="oscuro"] .text-black { color: var(--mud-palette-text-primary) !important; } html[data-tema="oscuro"] .bg-white, html[data-tema="oscuro"] .bg-light { background-color: var(--mud-palette-surface) !important; } html[data-tema="oscuro"] .border, html[data-tema="oscuro"] .border-top, html[data-tema="oscuro"] .border-bottom, html[data-tema="oscuro"] .border-start, html[data-tema="oscuro"] .border-end { border-color: var(--mud-palette-lines-default) !important; } html[data-tema="oscuro"] .list-group-item { background-color: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-color: var(--mud-palette-lines-default); } html[data-tema="oscuro"] .dropdown-menu { background-color: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-color: var(--mud-palette-lines-default); } html[data-tema="oscuro"] .dropdown-item { color: var(--mud-palette-text-primary); } html[data-tema="oscuro"] .dropdown-item:hover { background-color: var(--mud-palette-action-default-hover); } html[data-tema="oscuro"] .page-link { background-color: var(--mud-palette-surface); color: var(--mud-palette-primary); border-color: var(--mud-palette-lines-default); } html[data-tema="oscuro"] .btn-secondary { background-color: var(--mud-palette-background-grey); border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); } html[data-tema="oscuro"] hr { border-color: var(--mud-palette-divider); opacity: 1; } /* SweetAlert2 (confirmaciones y avisos) */ html[data-tema="oscuro"] .swal2-popup { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); } html[data-tema="oscuro"] .swal2-title, html[data-tema="oscuro"] .swal2-html-container { color: var(--mud-palette-text-primary); } html[data-tema="oscuro"] .swal2-input, html[data-tema="oscuro"] .swal2-textarea, html[data-tema="oscuro"] .swal2-select { background: var(--mud-palette-background); color: var(--mud-palette-text-primary); border-color: var(--mud-palette-lines-default); } /* Quill (editor de texto de notas de versión) */ html[data-tema="oscuro"] .ql-toolbar.ql-snow, html[data-tema="oscuro"] .ql-container.ql-snow { border-color: var(--mud-palette-lines-default); } html[data-tema="oscuro"] .ql-editor { color: var(--mud-palette-text-primary); } html[data-tema="oscuro"] .ql-editor.ql-blank::before { color: var(--mud-palette-text-secondary); } html[data-tema="oscuro"] .ql-snow .ql-stroke { stroke: var(--mud-palette-text-primary); } html[data-tema="oscuro"] .ql-snow .ql-fill { fill: var(--mud-palette-text-primary); } html[data-tema="oscuro"] .ql-snow .ql-picker, html[data-tema="oscuro"] .ql-snow .ql-picker-options { color: var(--mud-palette-text-primary); background-color: var(--mud-palette-surface); } /* ── Landing (Home.razor + landingPage.css) ─────────────────────────────────────────────────────── La landing trae su propia paleta en variables (--background-color, --default-color, --heading-color, --surface-color, --accent-color) definidas en :root y en .light-background. En oscuro se re-apuntan a la paleta de MudBlazor; .dark-background (el hero azul) ya es oscuro y se deja como está. */ html[data-tema="oscuro"], html[data-tema="oscuro"] .light-background { --background-color: var(--mud-palette-background); --surface-color: var(--mud-palette-surface); --default-color: var(--mud-palette-text-primary); --heading-color: var(--mud-palette-text-primary); --accent-color: var(--mud-palette-primary); --contrast-color: var(--mud-palette-primary-text); } html[data-tema="oscuro"] .light-background { --background-color: var(--mud-palette-background-grey); } /* ── Interruptores de estado Sí/No (CheckboxNuevoComponent, TrbBuscarComponent) ────────────────── Pedido de Diego 2026-09-08: que el estado se distinga de un vistazo. La pista se pinta del color del ESTADO (verde = Sí, rojo = No) y más gruesa (18 px en vez de 14); el botón queda blanco para que el ícono ✓/✕ encima se lea. Vale en claro y en oscuro. Se aplica con Class="contro-sw-estado" en el MudSwitch (la clase cae en la etiqueta raíz .mud-switch). */ .contro-sw-estado .mud-switch-span.mud-switch-span-medium { padding: 10px 12px; } .contro-sw-estado .mud-switch-track { border-radius: 10px; } .contro-sw-estado .mud-switch-base { color: #FFFFFF; } .contro-sw-estado .mud-switch-base.mud-checked + .mud-switch-track { background-color: var(--mud-palette-success); opacity: .9; } .contro-sw-estado .mud-switch-base:not(.mud-checked) + .mud-switch-track { background-color: var(--mud-palette-error); opacity: .9; } .contro-sw-estado .mud-switch-base.mud-switch-disabled + .mud-switch-track { opacity: .35 !important; } /* ── Páginas legales (políticas, términos, preguntas frecuentes) ─────────────────────────────── */ /* landingPage.css pinta .privacy-policy-section con colores FIJOS (fondo #f9f9f9, h2 #333, p #555), pero NO estiliza h3/h4: esos caen en la regla global de encabezados, que sí sigue al tema y en oscuro los pone blancos. Resultado: "Datos personales" (h3) salía blanco sobre la tarjeta clara, invisible (Diego, 2026-09-21). Se apunta toda la tarjeta a la paleta para que fondo y texto cambien juntos; en claro se ve igual que antes. */ html[data-tema="oscuro"] .privacy-policy-section { background-color: var(--mud-palette-surface); box-shadow: 0 4px 8px rgba(0, 0, 0, .35); } html[data-tema="oscuro"] .privacy-policy-section h2, html[data-tema="oscuro"] .privacy-policy-section h3, html[data-tema="oscuro"] .privacy-policy-section h4, html[data-tema="oscuro"] .privacy-policy-section strong, html[data-tema="oscuro"] .privacy-policy-section ul li strong { color: var(--mud-palette-text-primary); } html[data-tema="oscuro"] .privacy-policy-section p, html[data-tema="oscuro"] .privacy-policy-section ul li { color: var(--mud-palette-text-secondary); } /* El título de la página va FUERA de la tarjeta (

suelto, justo ANTES de ella), sobre el fondo del body. Se lo toma por el hermano que lo precede para no pisar los h1 del resto del sitio. */ html[data-tema="oscuro"] h1:has(+ .privacy-policy-section) { color: var(--mud-palette-text-primary); } /* ── "Cargando…" (CargandoComponent.razor): barra fina en el lugar del contenido, sin cuadro ni fondo (2026-09-29). Antes era una caja fija de media ventana con fondo blanco al 10 %: en oscuro, un cuadrado gris que iba y venía. */ .contro-cargando { padding: .5rem 0 .75rem; } .contro-cargando-texto { display: block; margin-top: .35rem; font-size: .8125rem; color: var(--mud-palette-text-secondary); } /* ── Ficha por secciones (SeccionFicha.razor, ESTANDAR_PANTALLAS §3; publicista 2026-09-29) ────────────── Lo que separa las secciones es el BORDE y la FRANJA del encabezado: en oscuro la sombra no se ve (fondo #10161D, superficie #171F29), así que no se confía en ella. */ .contro-seccion { background: var(--mud-palette-surface); border-color: var(--mud-palette-lines-default); overflow: hidden; } .contro-seccion-encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--mud-palette-background-grey); border-bottom: 1px solid var(--mud-palette-lines-default); } .contro-seccion-icono { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface)); } .contro-seccion-titulos { flex: 1 1 14rem; min-width: 0; } .contro-seccion-titulos .mud-typography-h6 { line-height: 1.25; } .contro-seccion-subtitulo { display: block; color: var(--mud-palette-text-secondary); font-size: .8125rem; } .contro-seccion-estado { display: flex; flex-wrap: wrap; gap: .5rem; } .contro-seccion-cuerpo { padding: 1rem; } /* Números de una sección que se comparan de un vistazo (beta del cliente vs. publicada). */ .contro-seccion-datos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 2rem; margin-bottom: 1rem; } .contro-seccion-dato { display: flex; flex-direction: column; min-width: 8.5rem; } .contro-seccion-dato-rotulo { font-size: .78rem; color: var(--mud-palette-text-secondary); } .contro-seccion-dato-valor { font-size: 1.4rem; font-weight: 400; letter-spacing: .01em; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); } .contro-seccion-acciones { display: flex; flex-wrap: wrap; gap: .5rem; } @media (max-width: 599.98px) { .contro-seccion-encabezado { padding: .75rem; } .contro-seccion-cuerpo { padding: .75rem; } .contro-seccion-estado { width: 100%; } .contro-seccion-acciones > .mud-button-root { flex: 1 1 100%; } } /* ── Pastilla de estado (PastillaEstado.razor): relleno tenue + texto en tinta (ESTANDAR_PANTALLAS §5 Contraste). El color lo llevan el fondo y el borde; el icono y el texto dicen el significado (el color nunca es la única señal). */ .contro-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-grey); color: var(--mud-palette-text-primary); font-size: .8125rem; font-weight: 600; line-height: 1.4; } .contro-pill .mud-icon-root { font-size: 1rem; } .contro-pill.ok { border-color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 16%, var(--mud-palette-surface)); } .contro-pill.aviso { border-color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface)); } .contro-pill.error { border-color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 16%, var(--mud-palette-surface)); } html[data-tema="oscuro"] .contro-pill.ok { background: color-mix(in srgb, var(--mud-palette-success) 24%, var(--mud-palette-surface)); } html[data-tema="oscuro"] .contro-pill.aviso { background: color-mix(in srgb, var(--mud-palette-warning) 24%, var(--mud-palette-surface)); } html[data-tema="oscuro"] .contro-pill.error { background: color-mix(in srgb, var(--mud-palette-error) 24%, var(--mud-palette-surface)); }