/* * Capa de marca del consultorio encima de Metronic 8.2.3. * * Aquí no se escribe ningún color de la marca: todos salen de core/branding.py * como variables --cs-* (propias) y --bs-* (las de Metronic), que base.html * declara justo antes de este archivo. Cambiar un verde es cambiar branding.py. */ :root { /* Tema claro también para los controles nativos que queden (selector de archivos, barras de desplazamiento): con la Mac en modo oscuro se pintaban oscuros. */ color-scheme: light; /* La franja con los tres Pantone: encabezado, login y expediente. */ --franja-marca: linear-gradient(90deg, var(--cs-primario), var(--cs-secundario) 55%, var(--cs-oscuro)); /* Texto de pista (placeholders, «Zona del cuerpo…», etiquetas chicas): entre los grises 600 y 700 del tema, para leerse a 4.5:1 sobre un campo gris sin confundirse con lo ya escrito. */ --texto-pista: color-mix(in srgb, var(--bs-gray-600) 60%, var(--bs-gray-700)); } /* ── Tipografía ───────────────────────────────────────────────────────────── */ body { font-family: var(--cs-fuente-datos); } .titulo-serif, .marca-nombre, .page-heading { font-family: var(--cs-fuente-titulos); letter-spacing: .005em; } .page-heading { color: var(--bs-primary); font-weight: 600; } /* ── Emblema: el logo de la doctora, su § en blanco sobre el círculo del tono ── */ .marca-emblema { display: inline-block; flex-shrink: 0; border-radius: 50%; color: #fff; } .marca-emblema svg { display: block; width: 100%; height: 100%; } .marca-emblema-sm { width: 32px; height: 32px; } .marca-emblema-md { width: 42px; height: 42px; } .marca-emblema-lg { width: 84px; height: 84px; } .marca-emblema-xl { width: 132px; height: 132px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35); } /* El círculo del emblema y las muestras de Pantone del login, del mismo tono. */ .marca-emblema-primario, .pantone-primario { background-color: var(--cs-primario); } .marca-emblema-oscuro, .pantone-oscuro { background-color: var(--cs-oscuro); } .pantone-secundario { background-color: var(--cs-secundario); } .marca-nombre { color: var(--cs-texto_sobre_primario); font-weight: 600; font-size: 1.3rem; line-height: 1.1; } /* El § del logo, grande y pálido, detrás de las bandas de color. Mide 0.4 × 1 em: cada banda le da su tamaño con `font-size`. */ .marca-agua { position: absolute; pointer-events: none; user-select: none; line-height: 1; color: rgba(255, 255, 255, .4); } .marca-agua svg { display: block; width: .4em; height: 1em; } /* ── Encabezado: franja con los tres Pantone ──────────────────────────────── */ /* El blanco del fondo lo pone branding.py (`app-header-base-bg-color`). */ .app-header { position: relative; border-bottom: 1px solid var(--cs-claro); } .app-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1; background: var(--franja-marca); } /* El avatar que abre el menú del usuario, y «Salir» dentro de él, son botones (app.html). */ .boton-avatar { padding: 0; border: 0; background: none; border-radius: 50%; } .boton-avatar:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); } .boton-menu { width: 100%; border: 0; background: none; text-align: left; } /* ── Barra lateral menta ──────────────────────────────────────────────────── */ .app-sidebar-logo { border-bottom: 1px solid var(--bs-app-sidebar-light-separator-color); } [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link { border-radius: .65rem; } [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link:hover:not(.active) { background-color: rgba(255, 255, 255, .42); } [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active { box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .35); } /* El activo es la única pieza blanca de la barra: su ícono va en teal (569). */ [data-kt-app-layout=light-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i { color: var(--bs-info); } .app-sidebar .menu-badge .badge { padding: .3rem .35rem; } /* Lo que viene: se ve apagado y no responde al cursor (ver app.html). */ .app-sidebar .menu-link-proximo { pointer-events: none; opacity: .6; } .app-sidebar-footer .nota-bitacora { color: var(--cs-texto_sobre_primario); line-height: 1.35; } [data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .nota-bitacora span { display: none; } /* ── Avatares de texto ────────────────────────────────────────────────────── */ .symbol .symbol-label.iniciales { background-color: var(--cs-primario); color: var(--cs-texto_sobre_primario); font-weight: 700; } /* ── Banda de bienvenida ──────────────────────────────────────────────────── */ .banda-marca { position: relative; overflow: hidden; border: 0; background: linear-gradient(115deg, var(--cs-primario) 0%, var(--cs-claro) 62%, #fff 100%); color: var(--cs-texto_sobre_primario); } .banda-marca .saludo { color: var(--cs-texto_sobre_primario); } .banda-marca .marca-agua { right: 3%; bottom: -3.5rem; font-size: 15rem; } /* ── Tarjetas de módulo ───────────────────────────────────────────────────── */ .tarjeta-modulo { border: 1px solid var(--bs-gray-200); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .tarjeta-modulo:hover { transform: translateY(-3px); border-color: var(--cs-primario); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .28); } .tarjeta-modulo .flecha { transition: transform .15s ease, color .15s ease; } /* `!important` porque la flecha lleva la utilidad `text-gray-600`, que también lo trae. */ .tarjeta-modulo:hover .flecha { transform: translateX(3px); color: var(--bs-primary) !important; } @media (prefers-reduced-motion: reduce) { .tarjeta-modulo, .tarjeta-modulo .flecha { transition: none; } .tarjeta-modulo:hover, .tarjeta-modulo:hover .flecha { transform: none; } } /* Módulos que vienen después: se ven, apagados, y no llevan a ningún lado */ .tarjeta-proxima { border: 1px dashed var(--bs-gray-300); background-color: transparent; box-shadow: none; } /* ── Login ────────────────────────────────────────────────────────────────── */ .acceso-identidad { position: relative; overflow: hidden; background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .45), transparent 42%), linear-gradient(160deg, var(--cs-primario) 0%, var(--cs-primario) 58%, var(--cs-claro) 100%); color: var(--cs-texto_sobre_primario); } .acceso-identidad .titulo-serif { color: var(--cs-texto_sobre_primario); } .acceso-identidad .marca-agua { font-size: 34rem; right: -5rem; bottom: -11rem; } .acceso-franja { height: 6px; background: var(--franja-marca); } .pantone { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; display: inline-block; } /* ── Formularios: se marca lo que falta, no lo que está bien ──────────────── */ .was-validated .form-control:valid { background-image: none; padding-right: 1rem; } /* Con contraste suficiente: en los buscadores, el placeholder es la única pista de qué escribir. */ .form-control::placeholder, .form-control.form-control-solid::placeholder { color: var(--texto-pista); } /* Casillas e interruptores marcados: Metronic los trae con su azul escrito a mano (#1b84ff), no con variable, así que la paleta no los alcanza sola. */ .form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); } /* Anillo de foco de las pestañas con el teclado: el de la marca, no el azul de Bootstrap. */ .nav-link:focus-visible { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); } /* ── Listas flotantes: el buscador de pacientes, los menús desplegables y los combos ── */ .buscador, .menu-select, .combo { position: relative; } .buscador-lista, .menu-select-lista, .combo-opciones { position: absolute; z-index: 110; left: 0; margin: 0; padding: .45rem; list-style: none; overflow-y: auto; background-color: #fff; border: 1px solid var(--bs-gray-200); border-radius: .65rem; box-shadow: var(--bs-dropdown-box-shadow); } .menu-select-opcion, .combo-opcion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: .5rem; cursor: pointer; font-weight: 600; color: var(--bs-gray-800); } .menu-select-opcion.activa, .combo-opcion:hover, .combo-opcion[aria-selected="true"] { background-color: var(--cs-claro); color: var(--bs-primary); } /* Buscador de pacientes: el del encabezado y el de «Agendar cita» */ /* Ancho medido para que «Buscar por nombre o teléfono» se lea completo. */ .app-header .buscador { width: 21.5rem; } .app-header .buscador .form-control { padding-left: 3rem; } .buscador-lupa { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); pointer-events: none; } .buscador-lista { top: calc(100% + .4rem); width: 100%; min-width: 22rem; max-height: 24rem; border-radius: .75rem; } .app-header .buscador-lista { left: auto; right: 0; } .buscador-opcion { display: flex; align-items: center; gap: .8rem; padding: .6rem .75rem; border-radius: .55rem; cursor: pointer; } .buscador-opcion:hover, .buscador-opcion[aria-selected="true"] { background-color: var(--cs-claro); } .buscador-iniciales { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; background-color: var(--cs-primario); color: var(--cs-texto_sobre_primario); } .buscador-datos { display: flex; flex-direction: column; min-width: 0; } .buscador-nombre { font-weight: 700; color: var(--bs-gray-900); } .buscador-opcion[aria-selected="true"] .buscador-nombre { color: var(--bs-primary); } .buscador-detalle { font-size: .85rem; font-weight: 600; color: var(--bs-gray-700); } .buscador-vacio { padding: .75rem; font-weight: 600; color: var(--bs-gray-700); } /* Menús desplegables: cada