/* ============================================================================ components.css — Tecsa·S3 Clínico · el shell y sus piezas ---------------------------------------------------------------------------- Este fichero responde a la Fase 0 del plan. Con tecsa-clinico como default, las reglas `html[data-app-theme="tricorder"]` de custom.css (66), chrome-tricorder.css (62), footer.css (28), sidebar.css (27) y navbar.css (4) dejan de matchear. Aquí se cubren las superficies que quedaron. INVENTARIO (F0.2) Y CÓMO SE CUBRE ---------------------------------------------------------------------------- - .btn-primary, .card, .card-title, .card-body, .card-text, .card-header Bootstrap 5.3 → re-tematizado abajo. - .form-control, .form-select, .form-label → sección Formularios. - .dropdown-menu, .dropdown-item, .dropdown-divider, .dropdown-header → sección Dropdown. - .modal-content, .modal-header, .modal-footer → sección Modal. - .app-navbar, .app-topbar, .app-brand__*, .nav-link, .app-theme-toggle → sección Cromo/navbar. - #sidebar, .nav-link, .sidebar-section-*, .sidebar-mini-card, .sidebar-hide-toggle → sección Sidebar. - .footer-* (copyright, ticker, stat, toggle) → sección Footer. LAS REGLAS DE MARCA QUE NO SE NEGOCIAN ---------------------------------------------------------------------------- 1. Botón primario = #378ADD, en toda la app, en todos los sitios. Sin variación entre secciones. 2. El morado es IA y sólo IA. `.ai-chat-*` es el único consumidor de --ui-accent. Nunca un botón normal: si el morado aparece en un botón de "Guardar", el usuario no sabe si es una acción de IA. 3. El texto sobre el azul primario es tinta (#101B27), NO blanco: blanco sobre #378ADD da 3.59:1 y falla AA a tamaño normal. 4. Selects: campo cerrado radio 8px; el MENÚ desplegado baja a 4-8px, casi cuadrado, para diferenciarse visualmente de las tarjetas (12-16). 5. Sombras planas. Nada de sombras marcadas. ICONOS: SVG outline inline, viewBox 0 0 24 24, stroke 1.75-2, fill none. ============================================================================ */ @layer components { /* ========================================================================== 1. SUPERFICIE BASE ========================================================================== El mockup: .fam-card / .map-card / .side-card comparten receta (background #fff; border 1px solid rgba(55,138,221,.10); border-radius 14px; box-shadow 0 1px 2px rgba(24,95,165,.05)). Se aplica a las dos familias de tarjeta del proyecto (Bootstrap .card y las propias del dashboard) para que no queden dos estilos en la misma pantalla. */ html[data-app-theme="tecsa-clinico"] .card, html[data-app-theme="tecsa-clinico"] .fam-card, html[data-app-theme="tecsa-clinico"] .map-card, html[data-app-theme="tecsa-clinico"] .side-card { background-color: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--tca-radius-lg); box-shadow: var(--ui-elev-1); color: var(--ui-text); } html[data-app-theme="tecsa-clinico"] .card:hover, html[data-app-theme="tecsa-clinico"] .fam-card:hover { border-color: var(--ui-border-strong); box-shadow: var(--ui-elev-2); } html[data-app-theme="tecsa-clinico"] .card-header { background-color: transparent; border-bottom: 1px solid var(--ui-border-soft); color: var(--ui-text); padding: var(--space-sm) var(--space-md); } html[data-app-theme="tecsa-clinico"] .card-title, html[data-app-theme="tecsa-clinico"] .fam-head h3, html[data-app-theme="tecsa-clinico"] .map-head h3 { color: var(--ui-text); font-size: var(--fs-md); font-weight: 600; } html[data-app-theme="tecsa-clinico"] .card-body { color: var(--ui-text); padding: var(--space-md); } html[data-app-theme="tecsa-clinico"] .card-text, html[data-app-theme="tecsa-clinico"] .subtitle, html[data-app-theme="tecsa-clinico"] .breadcrumb { color: var(--ui-text-muted); } /* ========================================================================== 2. BOTONES ========================================================================== El documento: primario #378ADD siempre, en toda la app, en ambos modos. Secundario = mismo azul en versión outline, "en vez de un color distinto". Ese matiz importa: dos azules, no azul+gris. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .btn-primary { background-color: var(--ui-primary); border-color: var(--ui-primary); /* Tinta, no blanco — ver regla 3 del cabecera. 4.84:1. */ color: var(--ui-text-on-fill); border-radius: var(--tca-radius); font-weight: 600; padding: 0.5rem 1rem; min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color var(--tca-dur-fast) var(--tca-ease), border-color var(--tca-dur-fast) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] .btn-primary:hover, html[data-app-theme="tecsa-clinico"] .btn-primary:focus-visible { background-color: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: var(--ui-text-on-fill); } html[data-app-theme="tecsa-clinico"] .btn-primary:active { background-color: var(--tca-azul-900); border-color: var(--tca-azul-900); } /* Secundario = el mismo azul en outline. */ html[data-app-theme="tecsa-clinico"] .btn-outline-primary, html[data-app-theme="tecsa-clinico"] .btn-secondary { background-color: transparent; border: 1px solid var(--ui-primary); color: var(--ui-secondary); border-radius: var(--tca-radius); font-weight: 600; min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } html[data-app-theme="tecsa-clinico"] .btn-outline-primary:hover, html[data-app-theme="tecsa-clinico"] .btn-secondary:hover { background-color: var(--ui-tint-primary); border-color: var(--ui-primary); color: var(--ui-secondary); } /* Neutro (ghost): sólo texto y borde tenue. */ html[data-app-theme="tecsa-clinico"] .btn-ghost, html[data-app-theme="tecsa-clinico"] .btn-light { background-color: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-text); border-radius: var(--tca-radius); min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } html[data-app-theme="tecsa-clinico"] .btn-ghost:hover, html[data-app-theme="tecsa-clinico"] .btn-light:hover { background-color: var(--ui-surface-3); border-color: var(--ui-border-strong); color: var(--ui-text); } /* Estados no textuales — los mockups no tienen ni un :disabled. Un botón deshabilitado que no lo parece es un invitations de hacer clic en nothing; uno que parece deshabilitado pero responde frustra. */ html[data-app-theme="tecsa-clinico"] .btn-primary:disabled, html[data-app-theme="tecsa-clinico"] .btn-outline-primary:disabled, html[data-app-theme="tecsa-clinico"] .btn-secondary:disabled, html[data-app-theme="tecsa-clinico"] .btn-ghost:disabled, html[data-app-theme="tecsa-clinico"] .btn-light:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; } /* Botón de icono — el .icon-btn del mockup: 38px, radio 10px, superficie translúcida, icono 18px. Se sube a 44px en táctil (responsive.css). */ html[data-app-theme="tecsa-clinico"] .icon-btn, html[data-app-theme="tecsa-clinico"] .map-icon-btn { width: 38px; height: 38px; border-radius: var(--tca-radius); display: grid; place-items: center; background-color: var(--tca-glass-bg); border: 1px solid var(--ui-border); color: var(--ui-text); cursor: pointer; transition: background-color var(--tca-dur-fast) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] .icon-btn:hover, html[data-app-theme="tecsa-clinico"] .map-icon-btn:hover { background-color: var(--ui-surface); border-color: var(--ui-border-strong); } /* ========================================================================== 3. TARJETA KPI (las 4 variantes de acento) ========================================================================== Del mockup: .kpi{border-left:4px solid }. Cuatro variantes: azul, lavanda, verde, ámbar. El acento va en el BORDE (elemento no textual, umbral 3:1) y el valor en texto de alto contraste — nunca al revés, que es el fallo que theme-tokens.css documenta en su §3b. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .kpi, html[data-app-theme="tecsa-clinico"] .kpi-card { background-color: var(--ui-surface); border: 1px solid var(--ui-border); border-left: 4px solid var(--ui-primary); border-radius: var(--tca-radius-lg); box-shadow: var(--ui-elev-1); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); } html[data-app-theme="tecsa-clinico"] .kpi.k-lav, html[data-app-theme="tecsa-clinico"] .kpi-card.k-lav { border-left-color: var(--ui-accent); } html[data-app-theme="tecsa-clinico"] .kpi.k-green, html[data-app-theme="tecsa-clinico"] .kpi-card.k-green { border-left-color: var(--ui-success); } html[data-app-theme="tecsa-clinico"] .kpi.k-peach, html[data-app-theme="tecsa-clinico"] .kpi-card.k-peach { border-left-color: var(--ui-warn); } /* Etiqueta: 12px, 700, MAYÚSCULAS, letter-spacing .6px. El patrón de los mockups es "uppercase sólo para etiquetas de sección/estado a 11-12px", nunca para títulos ni cuerpo. */ html[data-app-theme="tecsa-clinico"] .kpi-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ui-text-muted); } html[data-app-theme="tecsa-clinico"] .kpi-value { font-size: var(--fs-xl); font-weight: 600; line-height: 1.1; color: var(--ui-text); letter-spacing: -0.02em; } /* Tendencia: verde/rojo como TEXTO → 5.30:1 y 6.47:1, no los 3.39 del mockup. El icono de flecha acompaña; el color no es el único portador de significado (WCAG 1.4.1). */ html[data-app-theme="tecsa-clinico"] .kpi-trend.up { color: var(--ui-success-text); } html[data-app-theme="tecsa-clinico"] .kpi-trend.dn { color: var(--ui-danger); } /* ========================================================================== 4. TABLAS — construidas desde cero ========================================================================== Los mockups NO tienen tablas: cero , cero thead/tbody/th/td, cero zebra. Su `.fam-item` es una lista CSS-grid. El proyecto sí tiene tablas en todas partes, así que esta sección es diseño nuevo dentro del lenguaje del tema. ========================================================================== */ html[data-app-theme="tecsa-clinico"] table { width: 100%; border-collapse: collapse; color: var(--ui-text); font-size: var(--fs-sm); } html[data-app-theme="tecsa-clinico"] thead th { background-color: var(--ui-surface-3); color: var(--ui-text); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; padding: var(--space-sm); border-bottom: 1px solid var(--ui-border); /* Sticky sólo si la tabla scrollea verticalmente; sin contexto de altura un thead sticky se despegaría del header de la página. */ position: static; } html[data-app-theme="tecsa-clinico"] tbody td, html[data-app-theme="tecsa-clinico"] tbody th { padding: var(--space-sm); border-bottom: 1px solid var(--ui-border-soft); color: var(--ui-text); vertical-align: middle; } /* Zebra con tinte suave, no gris plano: menos ruido visual que #ECEEF2 y mantiene la lavanda de la marca. Se mezcla --ui-accent (que sigue el modo) y no la primitiva clara --tca-lav-050: con ésta, en oscuro, la fila par salía gris medio (#6A6F7E) y el texto claro caía a 4.35:1. */ html[data-app-theme="tecsa-clinico"] tbody tr:nth-child(even) { background-color: color-mix(in oklab, var(--ui-accent) 7%, var(--ui-surface)); } html[data-app-theme="tecsa-clinico"] tbody tr:hover { background-color: var(--ui-tint-primary); } /* Fila accionable: cursor + foco. */ html[data-app-theme="tecsa-clinico"] tbody tr:focus-within { background-color: var(--ui-tint-primary); outline: var(--tca-focus-width) solid var(--tca-linea-campo); outline-offset: -2px; } /* ========================================================================== 5. FORMULARIOS ========================================================================== */ html[data-app-theme="tecsa-clinico"] .form-label { color: var(--ui-text); font-weight: 500; font-size: var(--fs-sm); /* El documento: 15-16px body. Una etiqueta a 12px es el componente más frecuente en una pantalla clínica y el primero que se sacrifica. */ } html[data-app-theme="tecsa-clinico"] .form-control, html[data-app-theme="tecsa-clinico"] .form-select { background-color: var(--ui-surface); /* Borde FUNCIONAL: --ui-border (1px tenue) no llega a 3:1 y un campo sin borde visible no se ve como campo. --ui-border-strong = 4.31:1. */ border: 1px solid var(--ui-border-strong); border-radius: 8px; /* documento: inputs 8px */ color: var(--ui-text); font-size: var(--fs-sm); min-height: var(--touch-target); padding: 0.5rem 0.75rem; transition: border-color var(--tca-dur-fast) var(--tca-ease), box-shadow var(--tca-dur-fast) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] .form-control:focus, html[data-app-theme="tecsa-clinico"] .form-select:focus { background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ui-primary) 30%, transparent); outline: none; /* el anillo lo pone box-shadow: mismo resultado, 1 sombra */ } html[data-app-theme="tecsa-clinico"] .form-control::placeholder { color: var(--tca-gris-500); /* 3.05:1 — placeholder no es texto real y WCAG lo trata aparte, pero se oscurece lo justo para que no desaparezca. */ opacity: 1; } html[data-app-theme="tecsa-clinico"] .form-control:disabled, html[data-app-theme="tecsa-clinico"] .form-select:disabled, html[data-app-theme="tecsa-clinico"] .form-control[readonly] { background-color: var(--ui-surface-3); color: var(--ui-text-muted); border-color: var(--ui-border-soft); cursor: not-allowed; } html[data-app-theme="tecsa-clinico"] .form-check-input { border-color: var(--ui-border-strong); /* 20px: por debajo el objetivo táctil se pierde en dedo. */ width: 1.25em; height: 1.25em; margin-top: 0.15em; } html[data-app-theme="tecsa-clinico"] .form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary); } html[data-app-theme="tecsa-clinico"] .form-check-input:focus-visible { border-color: var(--ui-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ui-primary) 30%, transparent); outline: none; } html[data-app-theme="tecsa-clinico"] .form-text, html[data-app-theme="tecsa-clinico"] .form-hint { color: var(--ui-text-muted); font-size: var(--fs-xs); } /* ========================================================================== 6. DROPDOWN / SELECT ========================================================================== REGLA DE MARCA: el campo cerrado conserva el radio 8px de input; el MENÚ desplegado baja a 4-8px, casi cuadrado, y cada opción es un bloque rectangular separado por una línea divisoria sutil — sin redondeo entre opciones. Eso lo diferencia visualmente de las tarjetas (12-16) y da la sensación "técnica/estructurada" que pide el documento. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .dropdown-menu { background-color: var(--ui-surface); /* 6px, casi cuadrado — deliberadamente distinto de --tca-radius-lg. */ border-radius: var(--tca-radius-sm); border: 1px solid var(--ui-border); box-shadow: var(--ui-elev-3); padding: 0; min-width: 12rem; } html[data-app-theme="tecsa-clinico"] .dropdown-item { color: var(--ui-text); font-size: var(--fs-sm); padding: 0.5rem 0.875rem; /* Bloque rectangular: sin radio propio, la separación la da la línea. */ border-radius: 0; display: flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); } html[data-app-theme="tecsa-clinico"] .dropdown-item:hover, html[data-app-theme="tecsa-clinico"] .dropdown-item:focus { background-color: var(--ui-tint-primary); color: var(--ui-text); } html[data-app-theme="tecsa-clinico"] .dropdown-item.active, html[data-app-theme="tecsa-clinico"] .dropdown-item:active { background-color: var(--ui-primary); color: var(--ui-text-on-fill); } /* Línea divisoria sutil entre opciones. */ html[data-app-theme="tecsa-clinico"] .dropdown-item + .dropdown-item { border-top: 1px solid var(--ui-border-soft); } html[data-app-theme="tecsa-clinico"] .dropdown-divider { border-top: 1px solid var(--ui-border); margin: 0; } html[data-app-theme="tecsa-clinico"] .dropdown-header { color: var(--ui-text-muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-xs) 0.875rem; } /* ========================================================================== 7. MODAL / DRAWER ========================================================================== El documento: modales 16-20px, sombra 0 4px 12px rgba(0,0,0,.1). El .drawer del mockup NO declara radio — se lo pone aquí. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .modal-content { background-color: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: var(--tca-radius-xl); box-shadow: var(--ui-elev-3); } html[data-app-theme="tecsa-clinico"] .modal-header, html[data-app-theme="tecsa-clinico"] .modal-footer { border-color: var(--ui-border-soft); padding: var(--space-md); } html[data-app-theme="tecsa-clinico"] .modal-header .modal-title { color: var(--ui-text); font-size: var(--fs-lg); font-weight: 600; } html[data-app-theme="tecsa-clinico"] .modal-backdrop { background-color: rgb(16 27 39 / 0.45); } /* Drawer lateral: el .drawer del mockup va a 480px fijo y sin radio, lo que a 375px desborda la pantalla. responsive.css lo lleva a 100vw. */ html[data-app-theme="tecsa-clinico"] .drawer { background-color: var(--ui-surface); border-left: 1px solid var(--ui-border); border-radius: var(--tca-radius-xl) 0 0 var(--tca-radius-xl); box-shadow: var(--tca-shadow-md); color: var(--ui-text); } html[data-app-theme="tecsa-clinico"] .drawer-head { background: var(--tca-grad-avatar); color: var(--tca-blanco); } html[data-app-theme="tecsa-clinico"] .drawer-title h3 { color: inherit; font-size: var(--fs-md); font-weight: 600; } /* ========================================================================== 8. NAVBAR / TOPBAR ========================================================================== El mockup: .top-bar background --c-azul-100 (#E6F1FB), borde inferior 1px #cfe1f3, padding 12px 24px. El proyecto usa .app-navbar y .app-topbar sobre Bootstrap. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .app-topbar { background-color: var(--tca-topbar-bg); border-bottom: 1px solid var(--tca-topbar-border); } html[data-app-theme="tecsa-clinico"] .app-navbar { background-color: var(--tca-glass-bg); border-bottom: 1px solid var(--ui-border); -webkit-backdrop-filter: var(--ui-glass); backdrop-filter: var(--ui-glass); } html[data-app-theme="tecsa-clinico"] .app-navbar .navbar-brand, html[data-app-theme="tecsa-clinico"] .app-brand__title { color: var(--ui-text); font-weight: 700; font-size: var(--fs-md); } html[data-app-theme="tecsa-clinico"] .app-navbar .nav-link { color: var(--ui-text-muted); font-weight: 500; font-size: var(--fs-sm); padding: 0.5rem 0.75rem; border-radius: var(--tca-radius-sm); min-height: var(--touch-target); display: inline-flex; align-items: center; } html[data-app-theme="tecsa-clinico"] .app-navbar .nav-link:hover, html[data-app-theme="tecsa-clinico"] .app-navbar .nav-link:focus-visible { color: var(--ui-text); background-color: var(--ui-tint-primary); } /* La página actual: ellavanda de la marca como relleno con tinta encima. El mockup usa blanco sobre lavanda = 3.76:1 (falla); aquí tinta = 4.62:1 conservando el color. */ html[data-app-theme="tecsa-clinico"] .app-navbar .nav-link[aria-current="page"] { background-color: var(--ui-accent); color: var(--ui-text-on-fill); font-weight: 600; } html[data-app-theme="tecsa-clinico"] .app-navbar .nav-link i { color: currentcolor; } html[data-app-theme="tecsa-clinico"] .app-navbar .navbar-toggler { border-color: var(--ui-border-strong); } /* ========================================================================== 9. SIDEBAR ========================================================================== El gradiente azul -> lavanda a 0/45/100% es la firma visual del tema. El mockup lo fija en 240px sin collapse; responsive.css lo pasa a off-canvas por debajo de 1100px. ========================================================================== */ html[data-app-theme="tecsa-clinico"] #sidebar, html[data-app-theme="tecsa-clinico"] .app-sidebar { background: var(--tca-sidebar-bg); border-right: 1px solid var(--tca-sidebar-border); } html[data-app-theme="tecsa-clinico"] #sidebar .nav-link { color: var(--ui-text); font-size: var(--fs-sm); font-weight: 500; border-radius: var(--tca-nav-item-radius); padding: 0.625rem 0.75rem; margin-bottom: 2px; min-height: var(--tca-nav-item-h); display: flex; align-items: center; gap: 0.625rem; transition: background-color var(--tca-dur-fast) var(--tca-ease), color var(--tca-dur-fast) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] #sidebar .nav-link:hover, html[data-app-theme="tecsa-clinico"] #sidebar .nav-link:focus-visible { background-color: color-mix(in oklab, var(--ui-accent) 20%, transparent); color: var(--tca-lav-500); /* 5.43:1 — el mockup usa 3.15:1 aquí */ } html[data-app-theme="tecsa-clinico"] #sidebar .nav-link[aria-current="page"] { background-color: var(--ui-accent); color: var(--ui-text-on-fill); font-weight: 700; box-shadow: 0 3px 10px color-mix(in oklab, var(--ui-accent) 35%, transparent); } html[data-app-theme="tecsa-clinico"] #sidebar .nav-link i { color: currentcolor; /* 19px: el mockup lo sube de los 18 del icono de toolbar. */ font-size: 1.1875rem; flex-shrink: 0; } /* Etiqueta de sección: 12px, 700, MAYÚSCULAS, .7px. */ html[data-app-theme="tecsa-clinico"] .sidebar-section-title, html[data-app-theme="tecsa-clinico"] .nav-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tca-lav-500); margin: var(--space-xs) 0 var(--space-xs) 0.625rem; } html[data-app-theme="tecsa-clinico"] #sidebar-container .sidebar-section-card { background-color: color-mix(in oklab, var(--ui-surface) 55%, transparent); border: 1px solid var(--ui-border-soft); border-radius: var(--tca-radius); padding: var(--space-xs) var(--space-sm); color: var(--ui-text-muted); } html[data-app-theme="tecsa-clinico"] #sidebar-container .sidebar-divider { border-top: 1px solid color-mix(in oklab, var(--ui-accent) 18%, transparent); margin: var(--space-sm) 0; } html[data-app-theme="tecsa-clinico"] #sidebar-container .sidebar-brand-text span { color: var(--ui-text); font-weight: 600; } html[data-app-theme="tecsa-clinico"] .sidebar-mini-card { background-color: var(--tca-glass-bg); border: 1px solid var(--ui-border); border-radius: var(--tca-radius); padding: var(--space-xs); color: var(--ui-text); } html[data-app-theme="tecsa-clinico"] .sidebar-hide-toggle { color: var(--ui-text-muted); min-height: var(--touch-target); min-width: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tca-radius-sm); background: transparent; border: 1px solid transparent; } html[data-app-theme="tecsa-clinico"] .sidebar-hide-toggle:hover, html[data-app-theme="tecsa-clinico"] .sidebar-hide-toggle:focus-visible { background-color: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); } /* ========================================================================== SIDEBAR — LA TINTA, QUE ESTABA HECHA PARA UN FONDO QUE ESTE TEMA NO USA ========================================================================== MEDIDO en Chromium con composición de alfa (axe NO lo detecta: con un fondo en degradado no puede resolver un color de fondo fiable y se rinde). Resultado antes de esto, texto blanco sobre fondo casi blanco: .sidebar-section-title .............. 1.17:1 FALLA .sidebar-section-icon ................ 1.15:1 FALLA .sidebar-section-arrow ............... 1.12:1 FALLA #sidebar .nav-link ................... 1.19:1 FALLA #sidebar .sidebar-brand-text span .... 1.22:1 FALLA Es exactamente lo que se ve en pantalla: los títulos de sección y los enlaces se confunden con las tarjetas y no se leen. LA CAUSA, y es de fondo ---------------------- `sidebar.css` declara su propia paleta en `:root` y su propio comentario (líneas 29-41) dice, con razón para entonces: «El sidebar tiene fondo oscuro fijo en los DOS temas». Ese supuesto es justo el que este tema incumple: aquí el sidebar se pinta con `--tca-grad-sidebar`, un degradado CLARO (#E6F1FB → #ECE6F4). La superficie cambió; la tinta no. Es la misma clase de agujero que el del pie (que pintaba el fondo y dejaba el enlace en el azul de Bootstrap): el tema cambiaba superficies y no el texto que va encima. POR QUÉ TOKENS Y NO SELECTORES SUELTOS ------------------------------------- `sidebar.css` ya ofrece el punto de extensión: escribe `color: var(--sidebar-fg) !important` en `.btn-toggle` y en `.nav-link`. El `!important` está en la DECLARACIÓN, no en el valor: al cambiar el token, el valor nuevo llega igual. Redefiniendo los tokens se arreglan de una vez los botones de sección y los enlaces, sin tocar sus selectores. Los selectores con tinta blanca ESCRITA a pelo (los de sección y el lockup de marca) sí necesitan override, y con `#sidebar-container` en el selector: uno de ID gana a cualquier cantidad de clases, así que la regla del tema sin ID (0,2,1) perdía contra la de sidebar.css (1,1,0). Eso era literalmente por qué la tinta del tema no se aplicaba. Tintas, todas medidas contra los fondos reales del navegador (#E2EFF8 la tarjeta de sección, #ECE6F4 el degradado del sidebar): --tca-azul-900 #185FA5 .... 5.57:1 / 5.34:1 <- usada --tca-azul-700 #1F588B .... 6.34:1 / 6.08:1 <- hover --tca-ink-900 #0F172A .... 15.25:1 / 14.61:1 <- lockup de marca --tca-lav-500 #7F77DD .... 3.21:1 / 3.08:1 <- NO: falla 4.5:1 El lavanda que este tema usaba para los títulos de sección se queda en 3.21:1. Con 13.6px y peso 600 no cuenta como «texto grande» (WCAG pide 18.66px en negrita o 24px), así que el mínimo es 4.5:1. Por eso los títulos van en azul de marca y no en lavanda: el lavanda se queda para lo que sí es decorativo, y aquí ya hay otro icono junto al texto. ========================================================================== */ html[data-app-theme="tecsa-clinico"] { /* Tinta propia del sidebar, para la superficie CLARA de este tema. */ --sidebar-bg: var(--tca-sidebar-bg); --sidebar-border: var(--tca-sidebar-border); /* Semánticos, no primitivos: mismo valor en claro (#185FA5 / #1F588B) y se invierten en oscuro. Con --tca-azul-900 fijo, en modo oscuro los enlaces del menú quedaban azul oscuro sobre el panel oscuro. */ --sidebar-fg: var(--ui-secondary); --sidebar-fg-hover: var(--ui-secondary-hover); --sidebar-fg-active: var(--ui-secondary); --sidebar-text: var(--ui-secondary); /* Estas dos las consumen dos reglas de sidebar.css que llevan `!important`, y un `!important` gana a cualquier declaración normal sin importar la capa ni la especificidad: sin definir estas variables NO hay forma de cambiar la tinta de los enlaces del menú desde fuera. El fallback de cada una en sidebar.css es el literal que tenía antes, así que los temas que no definen las variables se ven igual que hasta ahora. Es el mismo punto de extensión que ya usa aquel fichero con --sidebar-text y --sidebar-card-bg. */ --sidebar-nav-fg: var(--ui-secondary); --sidebar-link-fg: var(--ui-secondary); --sidebar-link-fg-hover: var(--ui-secondary-hover); /* Estados de los enlaces del menú: sidebar.css los declara con `!important` y los expone como variables (2026-10-08). Valores del tema: hover y activo como TINTES del azul de marca con la tinta de marca encima, sin desplazamiento ni brillo animado. Los literales de antes (blanco sobre celeste al 80%) daban ~1.5:1 al pasar el ratón. */ --sidebar-nav-fg-hover: var(--ui-secondary-hover); --sidebar-nav-bg-hover: color-mix(in oklab, var(--ui-primary) 9%, transparent); --sidebar-nav-shift: none; --sidebar-nav-bg-active: var(--ui-tint-primary-2); --sidebar-nav-active-anim: none; --sidebar-nav-active-shadow: none; --sidebar-nav-indicator: var(--ui-primary); /* Tinta sobre chip claro: la que trae sidebar.css (rgb(6 43 61)) ya es oscura y sigue sirviendo; se deja para que el valor quede explícito y no dependa del fallback de otro fichero. */ --sidebar-chip-fg: rgb(6 43 61); /* Superficie de la INSIGNIA del logo, y solo de ella: este token lo consumen `.sidebar-brand-icon` (sidebar.css:339) y `.sidebar-section-card` (sidebar.css:470), pero las tarjetas de sección las repinta el tema con su propia regla `background-color`, que gana por orden. Así que en la práctica este valor decide el fondo del logo. MEDIDO, y es la causa de que el logo no se viera: el PNG tiene DOS tonos —blanco #FAFAFA (17 474 px) y azul #458BBA (2 666 px)— y un solo fondo no hace legibles los dos: fondo #FAFAFA #458BBA veredicto #FFFFFF (lo que habia) 1.04:1 3.71:1 solo un tono #185FA5 azul 900 6.25:1 1.76:1 solo un tono #1F588B azul 700 7.12:1 2.00:1 solo un tono #0F172A tinta 17.10:1 4.81:1 LOS DOS Con el azul de marca el blanco del logo se ve y el azul se pierde; con blanco pasa lo contrario. La tinta profunda es el único de los cuatro que deja los dos tonos por encima de 3:1, que es lo que pide WCAG 1.4.11 para un objeto gráfico. Y encaja con la marca: la insignia es el único elemento oscuro del sidebar, que es justo la jerarquía que se quiere. */ --sidebar-card-bg: var(--tca-ink-900); } /* Títulos de sección: 13.6px/600 en MAYÚSCULAS. Necesitan 4.5:1, y el selector lleva ID para ganar a `#sidebar-container .sidebar-section-title`. */ html[data-app-theme="tecsa-clinico"] #sidebar-container .sidebar-section-title { color: var(--ui-secondary); text-shadow: none; } /* Icono de sección: es objeto gráfico, así que WCAG 1.4.11 pide 3:1. Va en azul de marca y queda en 5.57:1. */ html[data-app-theme="tecsa-clinico"] #sidebar-container .sidebar-section-icon { color: var(--ui-secondary); } /* El chevron va un punto más suave para no competir con el título, pero sigue por encima de 3:1 (6.34:1 medidos). */ html[data-app-theme="tecsa-clinico"] #sidebar-container .sidebar-section-arrow { color: var(--ui-secondary-hover); } /* Lockup de marca del sidebar. El `text-shadow` de sidebar.css era una sombra oscura pensada para texto blanco: sobre superficie clara embarra la tinta, así que se anula. */ html[data-app-theme="tecsa-clinico"] #sidebar-container .sidebar-brand-text, html[data-app-theme="tecsa-clinico"] #sidebar-container .sidebar-brand-text span { color: var(--ui-text-strong); text-shadow: none; } /* ========================================================================== 10. FOOTER ========================================================================== */ html[data-app-theme="tecsa-clinico"] .footer-professional, html[data-app-theme="tecsa-clinico"] .footer-ticker-wrapper { background-color: var(--ui-surface-3); border-top: 1px solid var(--ui-border); color: var(--ui-text-muted); } html[data-app-theme="tecsa-clinico"] .footer-stat-value { color: var(--ui-text); font-weight: 600; font-size: var(--fs-md); } html[data-app-theme="tecsa-clinico"] .footer-stat-label, html[data-app-theme="tecsa-clinico"] .footer-ticker-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ui-text-muted); } html[data-app-theme="tecsa-clinico"] .footer-ticker-badge.news { background-color: var(--ui-info); color: var(--ui-text-on-fill); } html[data-app-theme="tecsa-clinico"] .footer-ticker-badge.stat { background-color: var(--ui-accent); color: var(--ui-text-on-fill); } html[data-app-theme="tecsa-clinico"] .footer-ticker-badge.is-alert { background-color: var(--ui-danger); color: var(--ui-text-on-fill); } html[data-app-theme="tecsa-clinico"] .footer-copyright { background-color: var(--ui-surface-3); color: var(--ui-text-muted); font-size: var(--fs-xs); } html[data-app-theme="tecsa-clinico"] .footer-copyright a { color: var(--ui-secondary); } html[data-app-theme="tecsa-clinico"] .footer-toggle { color: var(--ui-text); background-color: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--tca-radius-sm); min-height: var(--touch-target); padding: 0 var(--space-sm); } html[data-app-theme="tecsa-clinico"] .footer-toggle:hover { background-color: var(--ui-surface-2); border-color: var(--ui-border-strong); } /* ========================================================================== 11. STATUS PILLS Y BADGES ========================================================================== El mockup usa #1D9E75 sobre #E6F7F1 = 3.05:1. Aquí el par de tinte usa las variantes legibles: --ui-success-text sobre --tint-success = 5.0:1. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .pill, html[data-app-theme="tecsa-clinico"] .badge-soft { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.5rem; border-radius: var(--tca-radius-pill); } html[data-app-theme="tecsa-clinico"] .pill.ok, html[data-app-theme="tecsa-clinico"] .badge-soft.ok { background-color: var(--ui-tint-success); color: var(--ui-success-text); } html[data-app-theme="tecsa-clinico"] .pill.amber, html[data-app-theme="tecsa-clinico"] .badge-soft.amber { background-color: var(--ui-tint-warn); color: var(--ui-warn); } html[data-app-theme="tecsa-clinico"] .pill.red, html[data-app-theme="tecsa-clinico"] .badge-soft.red { background-color: var(--ui-tint-danger); color: var(--ui-danger); } /* Contador numérico del header: relleno sólido + tinta encima. */ html[data-app-theme="tecsa-clinico"] .badge-counter, html[data-app-theme="tecsa-clinico"] .app-topbar .badge-counter.bg-danger { background-color: var(--ui-danger); color: var(--ui-text-on-fill); border: 1.5px solid var(--tca-azul-100); } /* ========================================================================== 12. BARRAS DE PROGRESO ========================================================================== */ html[data-app-theme="tecsa-clinico"] .prog-bar { background-color: var(--tca-gris-100); border-radius: var(--tca-radius-pill); height: 8px; overflow: hidden; } html[data-app-theme="tecsa-clinico"] .prog-fill { background: var(--tca-grad-progress-ok); border-radius: var(--tca-radius-pill); height: 100%; transition: width var(--tca-dur) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] .prog-fill.amber { background: var(--tca-grad-progress-warn); } html[data-app-theme="tecsa-clinico"] .prog-fill.red { background: var(--tca-grad-progress-ko); } /* ========================================================================== 13. SEGMENTED CONTROL / FILTER PILLS ========================================================================== */ html[data-app-theme="tecsa-clinico"] .view-toggle, html[data-app-theme="tecsa-clinico"] .filter-pills { background-color: var(--tca-gris-100); border-radius: 8px; padding: 3px; display: inline-flex; gap: 2px; } html[data-app-theme="tecsa-clinico"] .view-toggle button, html[data-app-theme="tecsa-clinico"] .filter-pills button { font-family: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--ui-text-muted); background: transparent; border: 0; border-radius: var(--tca-radius-sm); padding: 0.375rem 0.75rem; min-height: 2rem; cursor: pointer; transition: background-color var(--tca-dur-fast) var(--tca-ease), color var(--tca-dur-fast) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] .view-toggle button.active, html[data-app-theme="tecsa-clinico"] .filter-pills button.active { background-color: var(--ui-surface); color: var(--ui-secondary); box-shadow: var(--ui-elev-1); } /* ========================================================================== 14. SWITCHER DE TEMA ========================================================================== Renderizado por {% ui_theme_switcher %}. Es el reemplazo del toggle de 3 estados histórico (.app-theme-toggle), que sigue existiendo para el tema actual — este fichero NO lo toca, sólo le da el mismo tratamiento visual que al resto de controles cuando el tema nuevo está activo. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .ui-theme-switcher { display: inline-flex; align-items: center; gap: var(--space-2xs); } /* El toggle legacy de 3 estados (light→tricorder→auto) queda INOPERATIVO bajo el tema nuevo: el guard de base.html (__applyAppTheme) hace que no escriba nada cuando el servidor ya emitió data-app-theme. Un botón que no responde es peor que no tenerlo, así que se oculta y su sitio lo ocupa {% ui_theme_switcher %}. Sólo se oculta en este tema: los temas actuales siguen viendo su toggle intacto. Estas DOS reglas tenían el MISMO selector, y la segunda declaraba display:inline-flex. Al ir después y con igual especificidad, ANULABA el display:none de la primera: el toggle legacy volvía a verse, y dead para siempre (el guard lo dejaba sin efecto). Se fusionan en una sola. */ html[data-app-theme="tecsa-clinico"] .app-theme-toggle { display: none; } html[data-app-theme="tecsa-clinico"] .ui-theme-switcher .form-select { min-height: 2.25rem; font-size: var(--fs-xs); padding: 0.25rem 1.75rem 0.25rem 0.5rem; border-radius: var(--tca-radius-sm); } /* ========================================================================== 15. IA — CHAT FLOTANTE ========================================================================== El ÚNICO consumidor de --ui-accent como superficie de marca. El documento: círculo, esquina inferior derecha, 56-60px, lavanda, icono chispa o burbuja outline 24px. Al abrir: panel no a pantalla completa, radio 16-20, sombra de modal. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .ai-chat-fab, html[data-app-theme="tecsa-clinico"] .chat-fab { position: fixed; right: 24px; bottom: 24px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background-color: var(--ui-accent); /* Tinta, no blanco: blanco sobre lavanda da 3.76:1. */ color: var(--ui-text-on-fill); box-shadow: 0 4px 12px color-mix(in oklab, var(--ui-accent) 40%, transparent); border: 0; cursor: pointer; z-index: 1050; /* sobre el footer fijo, bajo el navbar */ transition: transform var(--tca-dur-fast) var(--tca-ease), box-shadow var(--tca-dur-fast) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] .ai-chat-fab:hover, html[data-app-theme="tecsa-clinico"] .chat-fab:hover, html[data-app-theme="tecsa-clinico"] .chat-fab:focus-visible { color: var(--ui-text-on-fill); transform: scale(1.05); box-shadow: 0 6px 18px color-mix(in oklab, var(--ui-accent) 50%, transparent); } html[data-app-theme="tecsa-clinico"] .ai-chat-fab svg, html[data-app-theme="tecsa-clinico"] .chat-fab svg { width: 28px; height: 28px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Panel de IA: ventana flotante, NO pantalla completa. */ html[data-app-theme="tecsa-clinico"] .ai-chat-panel, html[data-app-theme="tecsa-clinico"] .chat-panel { position: fixed; right: 24px; bottom: 96px; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 140px)); display: flex; flex-direction: column; background-color: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--tca-radius-xl); box-shadow: var(--ui-elev-3); z-index: 1050; overflow: hidden; } html[data-app-theme="tecsa-clinico"] .ai-chat-panel[hidden], html[data-app-theme="tecsa-clinico"] .chat-panel[hidden] { display: none; } html[data-app-theme="tecsa-clinico"] .ai-chat-panel__head, html[data-app-theme="tecsa-clinico"] .chat-panel__head { background: var(--tca-grad-avatar); color: var(--tca-blanco); padding: var(--space-sm) var(--space-md); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } html[data-app-theme="tecsa-clinico"] .ai-chat-panel__body, html[data-app-theme="tecsa-clinico"] .chat-panel__body { padding: var(--space-md); overflow-y: auto; color: var(--ui-text); font-size: var(--fs-sm); flex: 1; } html[data-app-theme="tecsa-clinico"] .ai-chat-panel__foot, html[data-app-theme="tecsa-clinico"] .chat-panel__foot { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--ui-border-soft); display: flex; gap: var(--space-2xs); } /* ========================================================================== 16. AVATARES ========================================================================== El mockup: círculo, gradiente azul->lavanda, anillo blanco 2px, iniciales 12px/700, letter-spacing -.5px. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .profile .pa, html[data-app-theme="tecsa-clinico"] .avatar-initial { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: -0.5px; color: var(--tca-blanco); background: var(--tca-grad-avatar); box-shadow: 0 2px 6px color-mix(in oklab, var(--ui-accent) 35%, transparent); border: 2px solid var(--tca-blanco); flex-shrink: 0; } /* Variante neutra para avatar de agente/paciente. */ html[data-app-theme="tecsa-clinico"] .patient .av, html[data-app-theme="tecsa-clinico"] .agents-mini .av { background-color: var(--tca-lav-050); border: 1.5px solid var(--tca-agente-border); color: var(--tca-lav-500); /* 5.43:1 — el mockup da 3.29:1 */ display: grid; place-items: center; border-radius: 50%; font-weight: 700; } /* Píldora de perfil. */ html[data-app-theme="tecsa-clinico"] .profile { display: inline-flex; align-items: center; gap: 0.5625rem; padding: 5px 12px 5px 5px; border-radius: var(--tca-radius-pill); background-color: var(--tca-glass-bg); border: 1px solid var(--ui-border); color: var(--ui-text); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; } html[data-app-theme="tecsa-clinico"] .profile:hover { background-color: var(--ui-surface); border-color: var(--ui-border-strong); } /* ========================================================================== 17. ESTADOS: vacío, error, alerta ========================================================================== Los mockups no tienen ninguno: cero empty-state, cero rama de cero resultados. Son las pantallas que más se ven en una plataforma de salud rural con datos reales, así que se construyen aquí. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-xl) var(--space-md); text-align: center; color: var(--ui-text-muted); } html[data-app-theme="tecsa-clinico"] .empty-state svg { width: 40px; height: 40px; fill: none; stroke: var(--tca-gris-500); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } html[data-app-theme="tecsa-clinico"] .empty-state h3 { color: var(--ui-text); font-size: var(--fs-md); font-weight: 600; margin: 0; } html[data-app-theme="tecsa-clinico"] .alert { border-radius: var(--tca-radius); border: 1px solid transparent; padding: var(--space-sm) var(--space-md); } html[data-app-theme="tecsa-clinico"] .alert-success { background-color: var(--ui-tint-success); border-color: color-mix(in oklab, var(--ui-success) 35%, transparent); color: var(--ui-success-text); } html[data-app-theme="tecsa-clinico"] .alert-warning { background-color: var(--ui-tint-warn); border-color: color-mix(in oklab, var(--ui-warn) 35%, transparent); color: var(--ui-warn); } html[data-app-theme="tecsa-clinico"] .alert-danger { background-color: var(--ui-tint-danger); border-color: color-mix(in oklab, var(--ui-danger) 35%, transparent); color: var(--ui-danger); } html[data-app-theme="tecsa-clinico"] .alert-info { background-color: var(--ui-tint-info); border-color: color-mix(in oklab, var(--ui-info) 35%, transparent); color: var(--ui-info-text); } /* ========================================================================== 18. PAGINACIÓN ========================================================================== También ausente de los mockups (cero ocurrencias de "pagination"). ========================================================================== */ html[data-app-theme="tecsa-clinico"] .pagination { gap: var(--space-3xs); display: flex; flex-wrap: wrap; } html[data-app-theme="tecsa-clinico"] .page-link, html[data-app-theme="tecsa-clinico"] .page-item .page-link { color: var(--ui-secondary); background-color: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--tca-radius-sm); min-width: var(--touch-target); min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; padding: 0 0.625rem; margin: 0; } html[data-app-theme="tecsa-clinico"] .page-item.active .page-link { background-color: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-text-on-fill); font-weight: 600; } html[data-app-theme="tecsa-clinico"] .page-link:hover, html[data-app-theme="tecsa-clinico"] .page-item .page-link:hover { background-color: var(--ui-tint-primary); color: var(--ui-secondary); border-color: var(--ui-border-strong); } html[data-app-theme="tecsa-clinico"] .page-item.disabled .page-link { opacity: 0.5; pointer-events: none; background-color: var(--ui-surface-3); } /* ========================================================================== 19. SKIP LINK ========================================================================== Ya existe en el repo (base-shell.css), pero se le da el color del tema. Off-screen por defecto, se revela al recibir foco. ========================================================================== */ html[data-app-theme="tecsa-clinico"] .skip-link { background-color: var(--ui-primary); color: var(--ui-text-on-fill); font-weight: 700; padding: 10px 16px; border-radius: var(--tca-radius-sm); } html[data-app-theme="tecsa-clinico"] .skip-link:focus { outline: 3px solid var(--tca-blanco); outline-offset: 2px; color: var(--ui-text-on-fill); } } /* ============================================================================ SECCION SIN @layer — conflicto MEDIDO con Bootstrap ---------------------------------------------------------------------------- MEDIDO en Chromium a 375px con axe-core, y medido TAMBIÉN por qué no aplicaba desde dentro de la capa: bootstrap.min.css NO usa @layer (0 ocurrencias, verificado). En CSS una regla sin capa gana SIEMPRE a cualquier regla dentro de una capa, sea cual sea su especificidad. Poner estas correcciones dentro de @layer components es, por tanto, inútil. No es un defecto de este tema: es el problema que MASTER.md sección 6 ya documenta ("El contrato de capas está roto en la raíz: Bootstrap va SIN capa") y para el que el repo ya tiene precedente — base-shell.css se carga el último y a propósito SIN capa por el mismo motivo. Regla de la casa: cero !important (R10 del plan). Para vencer a Bootstrap sin !important la unica via es salirse de la capa. Selectores PLENS, sin anidar: la especificidad de una regla anidada es la del padre mas la propia, y conviene no depender de ese calculo para un ajuste de acessibilidade. TODO lo que esté en este bloque debe ser un conflicto real y MEDIDO con Bootstrap. Si añades algo aquí sin haberlo medido, casi seguro que no hace falta estar fuera de la capa. ============================================================================ */ /* --- Checkbox "recordarme" (WCAG 2.2 AA 2.5.8 target-size) ----------------- MEDIDO: .form-check-input mide 18x18 en Chromium a 375px. El minimo exigido es 24x24. El espaciado no compensa porque el label va pegado. El defecto es del tema actual y vive en Bootstrap + login.css, que este trabajo no toca. Se corrige aqui, scopado al tema nuevo, porque el tema nuevo es el default y es el unico sitio donde puede corregirse sin tocar el CSS del tema vigente. */ html[data-app-theme="tecsa-clinico"] .form-check-input { width: 1.55rem; height: 1.55rem; margin-top: 0.05em; } /* El label pasa a ser superficie tactica real: pulsar la palabra "Recordarme" es igual de valido que pulsar la casilla, y con un pulgar adulto es lo que se hace. */ html[data-app-theme="tecsa-clinico"] .form-check { min-height: var(--touch-target); display: inline-flex; align-items: center; gap: 0.5rem; padding-left: 1.9rem; } html[data-app-theme="tecsa-clinico"] .form-check-label { min-height: var(--touch-target); display: inline-flex; align-items: center; } /* --- Boton "mostrar contrasena" superpuesto (WCAG 2.2 AA 2.5.8) ---------- MEDIDO: #id_password 281x48 (cumple de sobra) el boton 280x44 SUPERPUESTO encima del campo El template lo declara position-absolute y .btn-link de Bootstrap no lleva width, asi que con position:absolute sin left el boton se estira al ancho completo de su input-group. Resultado: un objetivo de 280px montado encima del campo de 281px. axe-core lo reporta como target-size sobre #id_password, no porque el campo sea pequeno sino porque los dos objetivos adyacentes se solapan y no dejan el espacio libre que la pauta exige. El arreglo no es agrandar el campo: es quitar el solape. */ html[data-app-theme="tecsa-clinico"] .input-group .btn-link.position-absolute { width: auto; left: auto; right: 0.25rem; min-width: var(--touch-target); min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; padding: 0 0.75rem; border-radius: var(--tca-radius-sm); text-decoration: none; } html[data-app-theme="tecsa-clinico"] .input-group .btn-link.position-absolute:focus-visible { outline: var(--tca-focus-width) solid var(--tca-linea-campo); outline-offset: -2px; } /* El input recupera el ancho que el boton dejaba tapado. */ html[data-app-theme="tecsa-clinico"] .input-group:has(.btn-link.position-absolute) .form-control { padding-right: 3.25rem; } /* ============================================================================ HEADER — marca, control de tema desplegable y etiquetas opcionales ---------------------------------------------------------------------------- MEDIDO con Chromium (scripts/measure_header.py) ANTES de cada decisión. No se supone nada: si una regla de aquí no corresponde a una medición, sobra. Sin @layer a propósito, por el mismo motivo que el bloque anterior: para vencer a Bootstrap sin !important hay que salirse de la capa. Todas estas reglas compiten con utilidades de Bootstrap (.nav-link, .dropdown-menu, .navbar-brand) que están sin capa. ============================================================================ */ /* --- Marca: sólo el símbolo ----------------------------------------------- */ html[data-app-theme="tecsa-clinico"] .app-brand { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--touch-target); height: var(--touch-target); max-width: none; margin-right: 0.5rem; border-radius: var(--tca-radius); transition: background-color var(--tca-dur-fast) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] .app-brand:hover, html[data-app-theme="tecsa-clinico"] .app-brand:focus-visible { background-color: var(--ui-tint-primary); } html[data-app-theme="tecsa-clinico"] .app-brand:focus-visible { outline: var(--tca-focus-width) solid var(--tca-linea-campo); outline-offset: 2px; } html[data-app-theme="tecsa-clinico"] .app-brand__mark { width: 30px; height: 30px; display: block; flex-shrink: 0; /* MEDIDO: el navbar se pinta con un gradiente `linear-gradient(135deg, rgb(19,77,109)…)`, o sea #134D6D, no con una superficie clara. El símbolo con los tokens de superficie clara daba 1.39:1 y 2.53:1 sobre ese fondo: invisible. `--tca-azul-100` (#E6F1FB) da 7.94:1. El SVG dibuja con `currentColor` en vez de con tokens, por dos razones: el contraste de arriba, y que `--tca-*` sólo existe bajo este tema —con tokens en el atributo `stroke`, bajo `tricorder` y `tecsa` la variable no existía, el `stroke` caía a `none` y la marca no se pintaba. Así el símbolo es visible en los tres temas sin una regla por tema. */ color: var(--tca-azul-100); } /* El lockup de texto desaparece; su nombre queda en el aria-label del . */ html[data-app-theme="tecsa-clinico"] .app-brand__title, html[data-app-theme="tecsa-clinico"] .app-brand__subtitle, html[data-app-theme="tecsa-clinico"] .app-brand__accent { display: none; } /* --- Control de tema desplegable ------------------------------------------ */ html[data-app-theme="tecsa-clinico"] .ui-theme-control { position: relative; display: inline-block; flex-shrink: 0; } html[data-app-theme="tecsa-clinico"] .ui-theme-control__trigger { display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); min-width: var(--touch-target); min-height: var(--touch-target); padding: 0; border: 1px solid var(--ui-border); border-radius: var(--tca-radius); background-color: var(--tca-glass-bg); color: var(--ui-text); cursor: pointer; transition: background-color var(--tca-dur-fast) var(--tca-ease), border-color var(--tca-dur-fast) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] .ui-theme-control__trigger:hover { background-color: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text); } html[data-app-theme="tecsa-clinico"] .ui-theme-control__trigger:focus-visible { outline: var(--tca-focus-width) solid var(--tca-linea-campo); outline-offset: 2px; } html[data-app-theme="tecsa-clinico"] .ui-theme-control__trigger[aria-expanded="true"] { background-color: var(--ui-tint-primary); border-color: var(--ui-primary); } html[data-app-theme="tecsa-clinico"] .ui-theme-control__icon { width: 20px; height: 20px; display: block; } /* El panel: radio de tarjeta, NO el cuadrado de dropdown de Bootstrap, para que se lea como un control de la marca y no como un menú genérico. */ html[data-app-theme="tecsa-clinico"] .ui-theme-panel { min-width: 15rem; padding: var(--space-sm); border-radius: var(--tca-radius-lg); border: 1px solid var(--ui-border); box-shadow: var(--ui-elev-3); background-color: var(--ui-surface); /* Por debajo del navbar: si no, el panel queda cortado por el borde superior de la barra. */ z-index: 1060; } html[data-app-theme="tecsa-clinico"] .ui-theme-panel__title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ui-text-muted); margin: var(--space-xs) 0 var(--space-3xs); } html[data-app-theme="tecsa-clinico"] .ui-theme-panel__title:first-of-type { margin-top: 0; } html[data-app-theme="tecsa-clinico"] .ui-theme-panel__group { display: flex; flex-direction: column; gap: 2px; } html[data-app-theme="tecsa-clinico"] .ui-theme-panel__item { display: flex; align-items: center; width: 100%; min-height: var(--touch-target); padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: var(--tca-radius-sm); background: transparent; color: var(--ui-text); font-family: inherit; font-size: var(--fs-sm); font-weight: 500; text-align: left; cursor: pointer; transition: background-color var(--tca-dur-fast) var(--tca-ease); } html[data-app-theme="tecsa-clinico"] .ui-theme-panel__item:hover { background-color: var(--ui-tint-primary); color: var(--ui-text); } html[data-app-theme="tecsa-clinico"] .ui-theme-panel__item:focus-visible { outline: var(--tca-focus-width) solid var(--tca-linea-campo); outline-offset: -2px; } /* El estado activo se marca con relleno Y con aria-pressed, nunca sólo con color: WCAG 1.4.1 (el color no es el único portador de significado). */ html[data-app-theme="tecsa-clinico"] .ui-theme-panel__item.is-active { background-color: var(--ui-tint-primary-2); border-color: var(--ui-primary); color: var(--ui-secondary); font-weight: 700; } html[data-app-theme="tecsa-clinico"] .ui-theme-panel__item.is-active::before { content: "✓"; font-weight: 700; margin-right: 0.5rem; color: var(--ui-primary-hover); } html[data-app-theme="tecsa-clinico"] .ui-theme-panel__empty { display: block; padding: 0.5rem 0.75rem; color: var(--ui-text-muted); font-size: var(--fs-sm); } /* --- Enlaces del sidebar: Bootstrap va SIN capa y gana por orden ------------ MEDIDO: los enlaces del menú son `` y salían en `rgba(255, 255, 255, 0.85)` — 1.19:1 sobre el degradado claro. La causa NO es la especificidad ni el orden de capas, que es lo que se sospechó primero: `bootstrap.min.css` no usa @layer (0 ocurrencias), así que mover la regla fuera de la capa debería haber bastado, y NO bastó. MEDIDO en el navegador para descartarlo: el enlace NO tiene ancestro con `data-bs-theme`, y `--bs-emphasis-color-rgb` resuelve a `0,0,0`. La causa real es que `sidebar.css:820` declara su PROPIA .link-body-emphasis { color: rgba(255,255,255,0.85) !important } y `bootstrap.min.css` tiene la suya, también con `!important`. Un `!important` gana a cualquier declaración normal sin importar la capa ni la especificidad, así que ninguna ajuste de cascada podía competir con ellas. El arreglo no necesita tocar el marcado: `sidebar.css` pasa a exponer `--sidebar-nav-fg` y `--sidebar-link-fg`, con el literal de siempre como valor por defecto. Los `!important` se conservan intactos y los temas que no definen esas variables se ven EXACTAMENTE igual — medido: tricorder sigue en 11.90:1 con el mismo blanco de siempre, y sidebar.html queda con cero líneas de diff. Se probó antes quitar `link-body-emphasis` de los 125 enlaces: arreglaba el tema nuevo, pero cambiaba el color de los enlaces de tricorder (de blanco a cian). Se descartó por eso, no por la causa raíz. */ html[data-app-theme="tecsa-clinico"] #sidebar-container .btn-toggle-nav a { color: var(--ui-secondary); text-decoration: none; } html[data-app-theme="tecsa-clinico"] #sidebar-container .btn-toggle-nav a:hover, html[data-app-theme="tecsa-clinico"] #sidebar-container .btn-toggle-nav a:focus-visible { color: var(--ui-secondary-hover); } html[data-app-theme="tecsa-clinico"] #sidebar-container .btn-toggle-nav a:focus-visible { outline: var(--tca-focus-width) solid var(--tca-linea-campo); outline-offset: -2px; } html[data-app-theme="tecsa-clinico"] #sidebar-container .btn-toggle-nav a.disabled, html[data-app-theme="tecsa-clinico"] #sidebar-container .btn-toggle-nav a[aria-disabled="true"] { color: var(--ui-text-muted); } html[data-app-theme="tecsa-clinico"] #sidebar-container .nav-link { color: var(--ui-secondary); } html[data-app-theme="tecsa-clinico"] #sidebar-container .nav-link:hover, html[data-app-theme="tecsa-clinico"] #sidebar-container .nav-link:focus-visible { color: var(--ui-secondary-hover); } html[data-app-theme="tecsa-clinico"] #sidebar-container .nav-link:focus-visible { outline: var(--tca-focus-width) solid var(--tca-linea-campo); outline-offset: -2px; } /* El enlace activo lo pinta el tema con `--ui-accent` de fondo, asi que su texto usa la tinta para superficies de color, no el azul de marca. */ html[data-app-theme="tecsa-clinico"] #sidebar-container .nav-link[aria-current="page"], html[data-app-theme="tecsa-clinico"] #sidebar-container .nav-link.active { color: var(--ui-text-on-fill); } /* --- Los enlaces del pie, que el tema dejaba a medias ------------------------ MEDIDO con axe-core: al hacer que los tokens se apliquen (ver tokens.css), aparecieron 8 nodos nuevos de color-contrast, todos `a[href$="tecsas3.com"]` y `a[href$="digosystems.com"]` en el pie de /dashboard/. La causa es que el tema pinta el FONDO del pie (`--ui-surface-2`, #EDF3FA) y deja el color de enlace al azul por defecto de Bootstrap (#0D6EFD). Sobre ese fondo el contraste queda en 4.28:1, por debajo del 4.5:1 de WCAG AA. O sea: el tema cambiaba la superficie y no el texto que va sobre ella. Eso es un agujero de cobertura, no un descuido deBootstrap. `--tca-azul-900` (#185FA5) da 5.99:1 sobre el mismo fondo. Se acota al pie a propósito: poner un color de enlace global pisaría los colores que cada zona usa como identidad —el ámbar de `--ui-privilege`, el lavanda de IA—, que es justo lo que este tema no debe tocar. */ html[data-app-theme="tecsa-clinico"] .footer-copyright a { color: var(--ui-secondary); } html[data-app-theme="tecsa-clinico"] .footer-copyright a:hover, html[data-app-theme="tecsa-clinico"] .footer-copyright a:focus-visible { color: var(--ui-secondary-hover); } /* --- Las etiquetas de navegación, con el corte MEDIDO y no supuesto ------- MEDIDO en Chromium a 9 anchos, la posición del