/* Contenedor premium del logo de la clínica (BRAND-CLINIC-03 y 04, agente 1). Estilos .clogo- El relieve es del contenedor, nunca de la imagen. BRAND-CLINIC-04 (17 de octubre de 2026, pedido del dueño: «el 3D no se aprecia»): la pieza se lee como una placa con espesor, elevada sobre la columna azul, sin hover y sin brillos de plástico. Capas, de abajo hacia arriba: 1. Sombra externa en cuatro partes: canto (2–3 px sólidos, gris azulado frío, bajo la cara: el espesor), contacto corto y oscuro, elevación media y difusa amplia, en índigo muy oscuro para que se note sobre el azul. Más un filo de luz de 1 px sobre el borde superior, por fuera. 2. Cara: degradado blanco → gris frío (luz desde arriba) y borde iluminado (blanco arriba, frío abajo). 3. ::before, debajo de la imagen: reflejo suave en el tercio superior. 4. La imagen (object-fit: contain), sin filtros. Opcional: zoom y desplazamiento que calcula logo-clinica.js (--clogo-zoom, --clogo-shift-x, --clogo-shift-y) para aprovechar el aire transparente de algunos logos. 5. ::after, encima de todo y sin recibir clics: bisel interior de 1–2 px (luz arriba, sombra abajo), que da el volumen también cuando el logo trae su propio fondo blanco y tapa la cara. Sin transformaciones 3D ni animaciones continuas. Estados (data-state): loading y loaded muestran la imagen; empty y error, las iniciales. Superficie (data-surface): light (por defecto) o dark, para logos claros sobre transparente. */ .clogo { --clogo-size: 4.5rem; /* 72 px en el menú abierto: el tamaño exterior no cambia */ --clogo-pad: 4px; /* antes 5 px: el logo gana 2 px por lado */ --clogo-radius: 14px; --clogo-surface: /* La cara queda blanca donde va el logo y se agrisa solo junto al canto: así un logo con fondo blanco propio no deja «costura» (17 de octubre de 2026). El volumen lo dan el canto, la sombra y la luz de arriba. */ linear-gradient(180deg, #ffffff 0%, #ffffff 80%, #f1f4f9 92%, #e6ebf3 100%); --clogo-sheen: radial-gradient(130% 70% at 50% -8%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 72%); --clogo-edge: #ffffff #dfe5ee #c2ccdb #dfe5ee; /* borde: blanco arriba, frío a los lados, más oscuro al pie */ --clogo-bevel: inset 0 1px 0 rgba(255, 255, 255, .95), /* filo de luz interior arriba */ inset 0 -2px 0 rgba(120, 138, 170, .22), /* bisel inferior: la cara dobla hacia el canto */ inset 0 -7px 7px -6px rgba(24, 40, 86, .16); /* sombra muy suave al pie de la cara */ --clogo-shadow: 0 -1px 0 rgba(255, 255, 255, .30), /* filo de luz sobre el borde superior, contra el azul */ 0 1px 0 #cfd7e4, /* canto: espesor de la placa, del más claro… */ 0 2px 0 #b3bed0, 0 3px 0 #94a1b8, /* …al más oscuro */ 0 4px 3px rgba(3, 8, 30, .45), /* contacto corto y oscuro, justo bajo el canto */ 0 10px 16px -4px rgba(3, 8, 30, .50), /* elevación media */ 0 22px 38px -10px rgba(2, 6, 24, .62); /* difusa amplia */ --clogo-shadow-hover: 0 -1px 0 rgba(255, 255, 255, .34), 0 1px 0 #cfd7e4, 0 2px 0 #b3bed0, 0 3px 0 #94a1b8, 0 5px 4px rgba(3, 8, 30, .48), 0 13px 20px -4px rgba(3, 8, 30, .54), 0 26px 44px -10px rgba(2, 6, 24, .66); --clogo-ink: var(--brand-deep, #19243a); position: relative; isolation: isolate; /* los pseudo-elementos se ordenan dentro de la pieza, no con el menú */ display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* celda fija: la imagen se ajusta a ella, nunca la agranda */ place-items: center; flex: none; box-sizing: border-box; width: var(--clogo-size); height: var(--clogo-size); padding: var(--clogo-pad); overflow: hidden; /* recorta al radio (también el zoom del logo); la sombra externa queda fuera */ border: 1px solid; border-color: var(--clogo-edge); border-radius: var(--clogo-radius); background: var(--clogo-surface); box-shadow: var(--clogo-shadow); transition: box-shadow var(--motion-hover, 160ms) var(--motion-ease, ease); } /* Reflejo: debajo de la imagen, nunca la tapa. */ .clogo::before { content: ""; position: absolute; inset: 0 0 55% 0; z-index: 0; background: var(--clogo-sheen); pointer-events: none; } /* Bisel interior: encima, solo en el borde (1–2 px y una sombra de 7 px que cae dentro del relleno). */ .clogo::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: calc(var(--clogo-radius) - 1px); /* dentro del borde de 1 px */ box-shadow: var(--clogo-bevel); pointer-events: none; } .clogo-img { grid-area: 1 / 1; position: relative; z-index: 1; display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; /* Sin drop-shadow: en un logo con fondo blanco propio dibujaría la sombra de un rectángulo dentro de la pieza. */ filter: none; /* Contrato con logo-clinica.js: shift = −zoom · centro del contenido (en % de la caja), zoom ≤ 1,6, calculado para que el contenido visible quepa entero. Sin variables, transform identidad (como antes). */ transform: translate(var(--clogo-shift-x, 0%), var(--clogo-shift-y, 0%)) scale(var(--clogo-zoom, 1)); transform-origin: 50% 50%; } .clogo-mark { grid-area: 1 / 1; position: relative; z-index: 1; display: none; place-items: center; width: 100%; height: 100%; color: var(--clogo-ink); font-size: 1.45rem; font-weight: 680; line-height: 1; letter-spacing: -.01em; user-select: none; } /* Estados: con logo (cargando o cargado) se ve la imagen; sin logo o si falla, las iniciales. */ .clogo[data-state="empty"] .clogo-img, .clogo[data-state="error"] .clogo-img { display: none; } .clogo[data-state="empty"] .clogo-mark, .clogo[data-state="error"] .clogo-mark { display: grid; } /* Superficie oscura (logos blancos o muy claros sobre transparente): la misma placa en índigo profundo. */ .clogo[data-surface="dark"] { --clogo-surface: linear-gradient(180deg, #2c438c 0%, #22397a 40%, #1a2f68 78%, #142656 100%); --clogo-sheen: radial-gradient(130% 70% at 50% -8%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, 0) 72%); --clogo-edge: rgba(255, 255, 255, .34) rgba(255, 255, 255, .14) rgba(0, 0, 0, .30) rgba(255, 255, 255, .14); --clogo-bevel: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .22), inset 0 -7px 7px -6px rgba(0, 0, 0, .28); --clogo-shadow: 0 -1px 0 rgba(255, 255, 255, .22), 0 1px 0 #10204c, 0 2px 0 #0c1940, 0 3px 0 #091333, 0 4px 3px rgba(2, 5, 20, .52), 0 10px 16px -4px rgba(2, 5, 20, .55), 0 22px 38px -10px rgba(1, 4, 16, .68); --clogo-shadow-hover: 0 -1px 0 rgba(255, 255, 255, .26), 0 1px 0 #10204c, 0 2px 0 #0c1940, 0 3px 0 #091333, 0 5px 4px rgba(2, 5, 20, .55), 0 13px 20px -4px rgba(2, 5, 20, .58), 0 26px 44px -10px rgba(1, 4, 16, .72); --clogo-ink: #fff; } /* El enlace .brand lleva a Inicio: al pasar el mouse la sombra apenas se profundiza. Nada se mueve. */ .brand:hover .clogo, .brand:focus-visible .clogo { box-shadow: var(--clogo-shadow-hover); } /* Menú lateral: alineado óptico con el bloque «Clínica / nombre». */ .sidebar .brand .clogo { align-self: center; } /* Tamaño chico (44 px): menú encogido y barra de arriba bajo 900 px. Canto de 2 px y sombras más cortas: más sutil, pero se sigue leyendo como pieza elevada. */ @media (min-width: 761px) { .app.slim .sidebar .clogo { --clogo-size: 2.75rem; --clogo-pad: 3px; --clogo-radius: 11px; --clogo-bevel: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1.5px 0 rgba(120, 138, 170, .24), inset 0 -5px 5px -4px rgba(24, 40, 86, .14); --clogo-shadow: 0 -1px 0 rgba(255, 255, 255, .26), 0 1px 0 #c3cddc, 0 2px 0 #9aa7bd, 0 3px 2px rgba(3, 8, 30, .42), 0 7px 11px -3px rgba(3, 8, 30, .46), 0 14px 24px -8px rgba(2, 6, 24, .52); --clogo-shadow-hover: 0 -1px 0 rgba(255, 255, 255, .30), 0 1px 0 #c3cddc, 0 2px 0 #9aa7bd, 0 4px 3px rgba(3, 8, 30, .45), 0 9px 14px -3px rgba(3, 8, 30, .50), 0 17px 28px -8px rgba(2, 6, 24, .58); } .app.slim .sidebar .clogo-mark { font-size: .95rem; } .app.slim .sidebar .clogo[data-surface="dark"] { --clogo-bevel: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1.5px 0 rgba(0, 0, 0, .22), inset 0 -5px 5px -4px rgba(0, 0, 0, .26); --clogo-shadow: 0 -1px 0 rgba(255, 255, 255, .20), 0 1px 0 #0e1d46, 0 2px 0 #091333, 0 3px 2px rgba(2, 5, 20, .50), 0 7px 11px -3px rgba(2, 5, 20, .52), 0 14px 24px -8px rgba(1, 4, 16, .60); --clogo-shadow-hover: var(--clogo-shadow); } } @media (max-width: 900px) { .sidebar .clogo { --clogo-size: 2.75rem; --clogo-pad: 3px; --clogo-radius: 11px; --clogo-bevel: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1.5px 0 rgba(120, 138, 170, .24), inset 0 -5px 5px -4px rgba(24, 40, 86, .14); --clogo-shadow: 0 -1px 0 rgba(255, 255, 255, .26), 0 1px 0 #c3cddc, 0 2px 0 #9aa7bd, 0 3px 2px rgba(3, 8, 30, .42), 0 6px 10px -3px rgba(3, 8, 30, .44), 0 11px 18px -8px rgba(2, 6, 24, .48); /* algo más corta: la barra de arriba es baja */ --clogo-shadow-hover: var(--clogo-shadow); } .sidebar .clogo-mark { font-size: .95rem; } .sidebar .clogo[data-surface="dark"] { --clogo-bevel: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1.5px 0 rgba(0, 0, 0, .22), inset 0 -5px 5px -4px rgba(0, 0, 0, .26); --clogo-shadow: 0 -1px 0 rgba(255, 255, 255, .20), 0 1px 0 #0e1d46, 0 2px 0 #091333, 0 3px 2px rgba(2, 5, 20, .50), 0 6px 10px -3px rgba(2, 5, 20, .50), 0 11px 18px -8px rgba(1, 4, 16, .56); --clogo-shadow-hover: var(--clogo-shadow); } } @media (prefers-reduced-motion: reduce) { .clogo { transition: none; } } /* Impresión: plana, sin sombras, reflejo ni bisel. */ @media print { .clogo { box-shadow: none; border-color: #d0d7e2; background: #fff; } .clogo::before, .clogo::after { display: none; } } /* Centro óptico (17 de octubre de 2026): el bloque «Clínica + nombre» está centrado con el logo al píxel, pero el nombre (grande, en negrita) pesa más que la etiqueta y el logo se percibía alto. El texto baja 2 px (relleno, sin márgenes negativos); el tamaño del conjunto no cambia. Solo en el menú abierto. */ @media (min-width: 901px) { .app:not(.slim) .sidebar .brand-name { padding-top: 4px; } }