/* ═══════════════════════════════════════════════════════════════════════════ ui-theme.css — el tema que cada médico elige para SU plataforma. Va DESPUÉS de layout.css en el : aquí solo hay variantes, y todas cuelgan de una clase del que pone DoctorTheme. Un médico que no ha personalizado no lleva ninguna de esas clases, así que este archivo no le cambia ni un píxel. Regla de oro de este archivo: NUNCA usar !important y NUNCA fijar un color en duro donde pueda ir una variable. Las variables las manda el tema global del admin (theme.css) y el acento lo puede pisar el médico desde el . Así el admin puede cambiar el estilo global y estas variantes lo siguen. Nombres: ui-sb-* barra lateral ui-nb-* barra de arriba ui-bg-* fondo de la página ui-d-* densidad ═══════════════════════════════════════════════════════════════════════════ */ /* La escala de letra del médico. Se aplica al contenido, NO a los inputs: por debajo de 16px iOS hace zoom al enfocar un campo y descuadra la vista, y en una plataforma llena de formularios eso es fatal. */ .shell-main { font-size: calc(1rem * var(--ui-font, 1)); } /* ── Barra lateral ────────────────────────────────────────────────────────── */ /* Oscura: el patrón más pedido. Los tokens se derivan del fondo oscuro del tema global, así que si el admin cambia su paleta esto la sigue. */ .ui-sb-oscuro { --sb-bg: #1b2430; --sb-text: #e7edf4; --sb-muted: #9dabbb; --sb-hover: rgba(255, 255, 255, .07); --sb-border: rgba(255, 255, 255, .10); } .ui-sb-acento { --sb-bg: var(--accent); --sb-text: var(--accent-ink); /* El apagado se saca del propio texto con transparencia: con un color fijo se volvía ilegible en cuanto el acento era claro. */ --sb-muted: color-mix(in srgb, var(--accent-ink) 72%, transparent); --sb-hover: color-mix(in srgb, var(--accent-ink) 14%, transparent); --sb-border: color-mix(in srgb, var(--accent-ink) 18%, transparent); } .ui-sb-oscuro .sidebar, .ui-sb-acento .sidebar { background: var(--sb-bg); border-right-color: var(--sb-border); } .ui-sb-oscuro .sidebar-link, .ui-sb-acento .sidebar-link { color: var(--sb-text); } .ui-sb-oscuro .sidebar-link:hover, .ui-sb-acento .sidebar-link:hover { background: var(--sb-hover); } .ui-sb-oscuro .sidebar-sep, .ui-sb-acento .sidebar-sep { background: var(--sb-border); } /* El grupo y el subtítulo apagados: si heredaran --muted se perderían sobre el fondo oscuro. */ .ui-sb-oscuro .sidebar-group, .ui-sb-acento .sidebar-group { color: var(--sb-muted); } .ui-sb-oscuro .sidebar-head, .ui-sb-acento .sidebar-head { border-bottom-color: var(--sb-border); } /* El enlace activo: con el sidebar de color, el tinte del acento ya no contrasta contra su propio fondo, así que se marca con el texto lleno. */ .ui-sb-oscuro .sidebar-link.is-active, .ui-sb-acento .sidebar-link.is-active { background: var(--sb-hover); color: var(--sb-text); font-weight: 700; } /* Transparente: se funde con el fondo, sin caja ni línea. */ .ui-sb-transparente .sidebar { background: transparent; border-right-color: transparent; } /* En móvil el sidebar es un cajón que flota SOBRE el contenido: transparente ahí deja ver el texto de abajo y no se lee nada. Solo aplica en escritorio. */ @media (max-width: 899px) { .ui-sb-transparente .sidebar { background: var(--surface); } } /* Borde: sin relleno, solo la línea divisoria. Para quien quiere el mínimo ruido pero sí saber dónde termina el menú. */ .ui-sb-borde .sidebar { background: transparent; border-right-width: var(--bw); } @media (max-width: 899px) { .ui-sb-borde .sidebar { background: var(--surface); } } /* ── Barra de arriba ──────────────────────────────────────────────────────── */ .ui-nb-oscuro .navbar { background: #1b2430; border-bottom-color: rgba(255, 255, 255, .10); color: #e7edf4; } .ui-nb-oscuro .navbar a, .ui-nb-oscuro .navbar .btn-plain { color: #e7edf4; } .ui-nb-acento .navbar { background: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent-ink) 18%, transparent); color: var(--accent-ink); } .ui-nb-acento .navbar a, .ui-nb-acento .navbar .btn-plain { color: var(--accent-ink); } /* Transparente: la barra desaparece y el contenido "sube". Se le deja un velo con desenfoque para que el texto que pase por debajo no la vuelva ilegible. */ .ui-nb-transparente .navbar { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px); border-bottom-color: transparent; } /* ── Fondo de la página ───────────────────────────────────────────────────── */ /* Plano: el fondo y las tarjetas al mismo tono, sin el escalón de siempre. */ .ui-bg-plano { background: var(--surface); } /* Rayado y punteado: papel milimétrico. El tamaño va en em para que crezca con la escala de letra del médico y no se vea desproporcionado. */ .ui-bg-lineas { background-image: repeating-linear-gradient( to bottom, color-mix(in srgb, var(--border) 45%, transparent) 0 1px, transparent 1px 2.25em); } .ui-bg-puntos { background-image: radial-gradient( color-mix(in srgb, var(--border) 65%, transparent) 1px, transparent 1px); background-size: 1.5em 1.5em; } .ui-bg-degradado { background-image: linear-gradient( 170deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 46%); background-attachment: fixed; } /* ── Densidad ─────────────────────────────────────────────────────────────── */ /* Compacta: cabe más en pantalla, para quien trabaja en una laptop chica. No se toca el alto de los botones ni de los inputs: son el objetivo del dedo y por debajo de 40px se vuelven difíciles de picar en celular. */ .ui-d-compacta { --card-pad: .75rem; --gap: .5rem; } .ui-d-compacta .card { padding: var(--card-pad); } .ui-d-compacta .shell-main { padding-top: calc(var(--navbar-h) + .5rem); } .ui-d-compacta .sidebar-link { padding-top: .4rem; padding-bottom: .4rem; } /* Amplia: más aire. Ayuda a quien lee de lejos o usa la pantalla táctil. */ .ui-d-amplia { --card-pad: 1.5rem; --gap: 1.25rem; } .ui-d-amplia .card { padding: var(--card-pad); } .ui-d-amplia .sidebar-link { padding-top: .7rem; padding-bottom: .7rem; } /* ── Impresión ────────────────────────────────────────────────────────────── */ /* Una receta o un recibo se imprimen igual para todos: el tema del médico es para la pantalla. Sin esto, un sidebar oscuro se llevaría el tóner. */ @media print { .ui-sb-oscuro .sidebar, .ui-sb-acento .sidebar, .ui-nb-oscuro .navbar, .ui-nb-acento .navbar { background: #fff; color: #000; } .ui-bg-lineas, .ui-bg-puntos, .ui-bg-degradado { background-image: none; } } /* ── Barra lateral: iconos y líneas ──────────────────────────────────────────── Pedido el 30 jul 2026: decidir si hay iconos, de qué color, y si hay líneas entre los enlaces, de qué color y de qué tipo. */ /* Sin iconos. Se ESCONDEN, no se quitan del HTML: el menú sigue siendo el mismo y volver a encenderlos no obliga a recargar la página. */ .ui-sbi-off .sidebar-icon, .ui-sbi-off .sidebar-subicon { display: none; } /* Todos del mismo color. DOS CAMINOS, porque en el menú convive un SVG con algún emoji suelto: · SVG (iconos de trazo): el trazo es `currentColor`, así que basta con darle `color` al icono y ya. Si aquí se usara el truco del emoji de abajo, el stroke se volvería TRANSPARENTE y el icono desaparecería. · Emoji: un emoji trae su propio color y `color` no le hace nada. El truco es volver el glifo transparente y pintar su SILUETA con una sombra sin desenfoque, que sí toma el color que se le dé. El default es currentColor, así que sin elegir color el icono se pinta del mismo tono que el texto del menú y sigue al modo noche solo. */ .ui-sbi-mono .sidebar-icon > .ic, .ui-sbi-mono .sidebar-subicon > .ic { color: var(--sb-icon, currentColor); } .ui-sbi-mono .sidebar-icon:not(:has(> .ic)), .ui-sbi-mono .sidebar-subicon:not(:has(> .ic)) { color: transparent; text-shadow: 0 0 0 var(--sb-icon, currentColor); } /* En grises. Para un emoji es quitarle la saturación; para un SVG —que ya es de un solo color— "gris" significa apagarlo al tono secundario del tema. */ .ui-sbi-grises .sidebar-icon:not(:has(> .ic)), .ui-sbi-grises .sidebar-subicon:not(:has(> .ic)) { filter: grayscale(1); opacity: .85; } .ui-sbi-grises .sidebar-icon > .ic, .ui-sbi-grises .sidebar-subicon > .ic { color: var(--muted); } /* Líneas entre un enlace y el siguiente. Van en el borde SUPERIOR del hermano (con + ) y no en el inferior de todos: así no queda una línea suelta debajo del último elemento del menú. */ .ui-sbl-solida .sidebar-link + .sidebar-link, .ui-sbl-punteada .sidebar-link + .sidebar-link, .ui-sbl-guiones .sidebar-link + .sidebar-link { border-top-width: 1px; border-top-color: var(--sb-line, var(--border)); } .ui-sbl-solida .sidebar-link + .sidebar-link { border-top-style: solid; } .ui-sbl-punteada .sidebar-link + .sidebar-link { border-top-style: dotted; } .ui-sbl-guiones .sidebar-link + .sidebar-link { border-top-style: dashed; } /* Con la barra oscura o de color, el borde del tema (pensado para fondo claro) desaparece. Si el médico no eligió un color de línea, se usa el separador que ya calcula la variante — así la línea se ve sin que él tenga que pensarlo. */ .ui-sb-oscuro.ui-sbl-solida .sidebar-link + .sidebar-link, .ui-sb-oscuro.ui-sbl-punteada .sidebar-link + .sidebar-link, .ui-sb-oscuro.ui-sbl-guiones .sidebar-link + .sidebar-link, .ui-sb-acento.ui-sbl-solida .sidebar-link + .sidebar-link, .ui-sb-acento.ui-sbl-punteada .sidebar-link + .sidebar-link, .ui-sb-acento.ui-sbl-guiones .sidebar-link + .sidebar-link { border-top-color: var(--sb-line, var(--sb-border)); } /* Impresión: las líneas y el teñido de iconos son de pantalla. */ @media print { .ui-sbi-mono .sidebar-icon, .ui-sbi-mono .sidebar-subicon, .ui-sbi-mono .sidebar-icon > .ic, .ui-sbi-mono .sidebar-subicon > .ic { color: inherit; text-shadow: none; } .ui-sbi-grises .sidebar-icon, .ui-sbi-grises .sidebar-subicon { filter: none; opacity: 1; } .ui-sbi-grises .sidebar-icon > .ic, .ui-sbi-grises .sidebar-subicon > .ic { color: inherit; } }