/* Variables del contenido de funcionalidades — scopadas dentro de #top
   (el <main>) para que sólo afecten al contenido específico y no choquen
   con styles.css del proyecto. */
/* Variables aliasadas a la paleta del proyecto (styles.css). Así toda la
   página de funcionalidades hereda el brand del home en vez de los azules
   importados originales. */
#top {
    --color-primary: var(--brand, #1c4d61);
    --color-primary-dark: var(--brand-deep, #003f50);
    --color-primary-soft: var(--brand-soft, #36848b);
    --color-sky: #b9d2d4;
    --color-coral: #d67d6d;
    --color-coral-soft: #ffd7cc;
    --color-ink: var(--text, #17353d);
    --color-text: var(--text, #23343a);
    --color-text-soft: var(--text-soft, #5b6d74);
    --color-surface: #ffffff;
    --color-surface-alt: #f4f8f8;
    --color-border: rgba(0, 85, 109, 0.12);
    --color-border-strong: rgba(0, 85, 109, 0.18);
    --color-glow: rgba(54, 132, 139, 0.24);
    --radius-xl: 42px;
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --shadow-soft: 0 20px 60px rgba(0, 61, 79, 0.08);
    --shadow-card: 0 24px 70px rgba(0, 61, 79, 0.12);
    --transition: 0.32s ease;
}

.section {
    position: relative;
    padding: 11px 0;
}

.sectionTight {
    padding: 92px 0;
}

/* .eyebrow y .eyebrow--pill eliminados intencionalmente. Heredan el
   estilo del home (styles.css del proyecto): texto brand letterspaced
   con líneas fade decorativas a ambos lados. */

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

.intro h1,
.sectionHead h2,
.cta-panel h2 {
    margin-top: 12px;
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 800;
    color: var(--color-primary);
}

.intro h1 {
    font-size: 4.6rem;
}

.sectionHead h2,
.cta-panel h2 {
    font-size: clamp(2.15rem, 3.3vw, 3.8rem);
}

.introLead,
.sectionHead p,
.featPanelCopy p,
.micro-card p,
.ia-panel p,
.aiSupportCard p,
.cta-panel p {
    color: var(--color-text-soft);
    font-size: 1.04rem;
    line-height: 1.75;
}

/* Header / brand / btn base — eliminados intencionalmente: chocaban con
   el partial del proyecto. El header se renderiza con las reglas de
   styles.css (mismo aspecto que el home). Los botones del contenido
   (CTA/intro) que usan `.introBtnPrimary/--secondary/--large` se aplican
   sobre la base `.btn` del proyecto.

   Los `.featTabBtn:hover` y `.introBtnPrimary/--secondary/--large` se
   mantienen porque son únicos del contenido. */
.featTabBtn:hover {
    transform: translateY(-1px);
}

#top .introBtnPrimary {
    color: #fff;
    border: 0;
    /* Gradient con shine desplazado a la derecha (70%) — no centrado:
       el lado izquierdo es azul puro y extenso, el shine (verdoso)
       aparece en el tercio derecho, y al final vuelve sutilmente al
       azul. Al hover el background-position desplaza el shine. */
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-soft) 70%, var(--color-primary) 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    box-shadow: 0 14px 32px rgba(0, 85, 109, 0.18);
    transition: background-position 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

#top .introBtnPrimary:hover {
    /* Desplazamiento mínimo (25%) — el shine se mueve sólo un poco. */
    background-position: 25% 25%;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 85, 109, 0.32);
}

#top .introBtnSecondary {
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 85, 109, 0.16);
    backdrop-filter: blur(12px);
}

#top .introBtnLg {
    min-height: 56px;
    min-width: 240px;
    padding: 0 24px;
}

/* #top sube specificity sobre el `.intro` de styles.css (que tiene
   padding: 150px 0 16px para el home y nos lo sobrescribía aquí). */
#top .intro {
    padding: 65px 0 84px;
}

.introBackdrop {
    display: none;
}

.introBackdropLeft {
    width: 520px;
    height: 520px;
    left: 60px;
    top: 70px;
    background: radial-gradient(circle, rgba(185, 210, 212, 0.52) 0%, rgba(185, 210, 212, 0) 72%);
}

.introBackdropRight {
    width: 460px;
    height: 460px;
    right: 60px;
    top: 84px;
    background: radial-gradient(circle, rgba(255, 215, 204, 0.54) 0%, rgba(255, 215, 204, 0) 72%);
}

.introLayout,
.featPanelLayout,
.aiSupportGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 46px;
    align-items: center;
}

/* Hero: el texto se ancla arriba del grid row (no centrado verticalmente)
   para que el h1 quede pegado arriba aunque la orbit lateral sea alta. */
.introLayout {
    align-items: start;
}

.introContent {
    max-width: 580px;
}

.introLead {
    margin-top: 22px;
}

.introActions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
    justify-content: center;
}

.glass-panel,
.introOrbit,
.featTabsBox,
.featTabPanel,
.featMock,
.micro-card,
.ia-panel,
.aiSupportCard,
.cta-panel,
.introOrbitCore,
.introOrbitNode {
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
}

.introOrbit {
    position: relative;
    min-height: 640px;
    background: url('../img/Molecules/hexagon_grid.webp') center center / contain no-repeat;
    border: 0;
    box-shadow: none;
    overflow: visible;
    backdrop-filter: none;
    scale: 1.2;
}

/* Solo los nodos (palabras) quedan ocultos — las onditas de fondo (rings +
   curve) se mantienen como decoración. */
.introOrbitNode {
    display: none;
}

/* Moléculas decorativas (4 esquinas).
   El wrapper externo (.introOrbitMolecule) gestiona posición y zoom-hover.
   El wrapper interno (.introOrbitMoleculeFloat) gestiona el float asíncrono.
   Separar capas evita conflicto entre transform de la animación y el hover. */
.introOrbitMolecule {
    position: absolute;
    width: 240px;
    z-index: 1;
    cursor: pointer;
    transform-origin: center center;
    transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), filter 0.3s ease;
}

.introOrbitMoleculeFloat {
    position: relative;
    width: 100%;
    transform-origin: center center;
    will-change: transform;
}

.introOrbitMolecule img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.introOrbitMolecule:hover {
    font-smooth: never;
    -webkit-font-smoothing: none;
    transform: scale(1.22);
    filter: drop-shadow(0 12px 24px rgba(0, 85, 109, 0.18));
}

.introOrbitMolecule:hover .introOrbitMoleculeFloat {
    animation-play-state: paused;
}

.moleculeDot {
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: var(--font-heading, 'Urbanist', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}

/* Tratamientos — palabra larga, font más pequeño desktop + mobile. */
.moleculeDotTreat {
    font-size: 0.58rem;
}

.introOrbitMoleculeTL {
    top: 117px;
    left: 41px;
    width: 259px;
    z-index: 3;
}

.introOrbitMoleculeTR {
    top: 110px;
    right: 0;
    width: 200px;
    z-index: 3;
}

.introOrbitMoleculeBL {
    bottom: 76px;
    left: 48px;
    width: 196px;
    z-index: 3;
}

.introOrbitMoleculeBR {
    bottom: 70px;
    right: 55px;
    width: 180px;
    z-index: 1;
}

.introOrbitCore {
    z-index: 2;
}

.introOrbitMoleculeTL .introOrbitMoleculeFloat {
    animation: moleculeFloatA 6.5s ease-in-out infinite;
}

.introOrbitMoleculeTR .introOrbitMoleculeFloat {
    animation: moleculeFloatB 7.8s ease-in-out infinite;
    animation-delay: -2.4s;
}

.introOrbitMoleculeBL .introOrbitMoleculeFloat {
    animation: moleculeFloatC 7.2s ease-in-out infinite;
    animation-delay: -1.1s;
}

.introOrbitMoleculeBR .introOrbitMoleculeFloat {
    animation: moleculeFloatD 8.4s ease-in-out infinite;
    animation-delay: -3.6s;
}

@keyframes moleculeFloatA {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(6px, -8px) rotate(2deg);
    }
}

@keyframes moleculeFloatB {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-7px, -6px) rotate(-2.5deg);
    }
}

@keyframes moleculeFloatC {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(5px, 7px) rotate(-1.8deg);
    }
}

@keyframes moleculeFloatD {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-6px, 8px) rotate(2.2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .introOrbitMoleculeFloat {
        animation: none !important;
    }
}

.introOrbitRing {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(0, 85, 109, 0.08);
    transform: translate(-50%, -50%);
}

.introOrbitRingA {
    width: 360px;
    height: 360px;
}

.introOrbitRingB {
    width: 500px;
    height: 500px;
}

.introOrbitCurve {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 116px, rgba(0, 85, 109, 0.08) 117px 118px, transparent 119px),
        radial-gradient(circle at 50% 50%, transparent 0 176px, rgba(0, 85, 109, 0.06) 177px 178px, transparent 179px);
    opacity: 0.8;
}

.introOrbitCore {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 22px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.92)),
        radial-gradient(circle at top center, rgba(185, 210, 212, 0.28), transparent 50%);
    /* Sombra ligera, apenas perceptible. */
    box-shadow:
        0 12px 36px rgba(0, 61, 79, 0.08),
        0 0 40px rgba(54, 132, 139, 0.10);
}

.introOrbitBrand {
    color: var(--color-primary-soft);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
}

.introOrbitCore h3 {
    margin-top: 12px;
    color: var(--color-primary);
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.introOrbitCore p {
    margin-top: 10px;
    color: var(--color-text-soft);
    line-height: 1.65;
}

.introOrbitNode {
    position: absolute;
    padding: 16px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(0, 85, 109, 0.08);
    box-shadow:
        0 18px 40px rgba(0, 61, 79, 0.08),
        0 0 26px rgba(54, 132, 139, 0.08);
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.introOrbitNodeAgenda {
    top: 72px;
    left: 92px;
}

.introOrbitNodePacientes {
    top: 176px;
    right: 88px;
}

.introOrbitNodeHistoria {
    top: 284px;
    left: 54px;
}

.introOrbitNodeConsulta {
    bottom: 138px;
    left: 114px;
}

.introOrbitNodeFacturacion {
    bottom: 96px;
    right: 92px;
}

.introOrbitNodeAnalitica {
    top: 80px;
    right: 172px;
}

.sectionHead {
    max-width: 760px;
    margin-bottom: 20px;
}

.sectionHeadCenter {
    margin: 0 auto 20px;
    text-align: center;
}

.sectionHead p {
    margin-top: 16px;
}

.featTabsBox {
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 248, 248, 0.76)),
        radial-gradient(circle at top right, rgba(255, 215, 204, 0.18), transparent 34%);
}

.featTabsNav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.featTabBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 85, 109, 0.1);
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-text-soft);
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 61, 79, 0.04);
}

.featTabBtn.active {
    color: var(--color-primary);
    background: linear-gradient(180deg, rgba(185, 210, 212, 0.34), rgba(255, 255, 255, 0.96));
    border-color: rgba(0, 85, 109, 0.16);
}

.featTabIcon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(54, 132, 139, 0.18), rgba(214, 125, 109, 0.12));
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.featTabIcon svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.featTabPanel {
    display: none;
    padding: 28px;
    background: rgba(255, 255, 255, 0.88);
}

.featTabPanel.active {
    display: grid;
    gap: 24px;
}

/* El wrapper del panel ahora lleva el fondo blanco glass — mockup y copy
   conviven dentro de UN solo cuadro unificado. Grid asimétrico: el mockup
   (1.25fr) ocupa más ancho que el texto (1fr) para que no quede aplastado.
   `align-items: start` para que el copy quede SIEMPRE pegado arriba. */
.featPanelLayout {
    grid-template-columns: 1.25fr 1fr;
    align-items: start;
    gap: 32px;
    padding: 28px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 248, 0.90)),
        radial-gradient(circle at top right, rgba(185, 210, 212, 0.18), transparent 32%);
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-card);
}

.featPanelCopy h3 {
    margin-top: 10px;
    color: var(--color-primary);
    font-size: clamp(1.8rem, 2.7vw, 2.65rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.featPanelCopy p {
    margin-top: 16px;
    max-width: 540px;
}

.featPanelList {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.featPanelList li {
    position: relative;
    padding-left: 24px;
    color: var(--color-text);
    line-height: 1.68;
}

.featPanelList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-coral));
}

/* `.featPanelCopy` como columna flex para que el "Saber más" quede
   siempre pegado abajo, independientemente del largo del texto/lista. */
#funcionalidades .featPanelCopy {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.featPanelCta {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    margin-right: 18px;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-weight: 700;
    position: relative;
    padding-bottom: 4px;
}

/* Subrayado animado on-hover (mismo patrón que `.specNewLink` del home).
   Wrapper sin padding-top — separación con `margin-top: auto` (sticky
   abajo) → línea queda pegada al texto, no al fondo del flex. */
.featPanelCta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.featPanelCta:hover::after {
    transform: scaleX(1);
}

/* Mockup ya no necesita cuadro propio: vive dentro de .featPanelLayout que
   lleva el fondo unificado. Solo conserva el border-radius interior para
   que el .featMockWindow respete los corners. */
.featMock {
    padding: 0;
    border-radius: 24px;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    /* Ocupa todo el alto del panel — así, cuando JS iguala los paneles
       al más alto, la sidebar también se estira y el "Salir" queda
       siempre abajo. */
    height: 100%;
}

.featMockWindow {
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 85, 109, 0.08);
    height: 100%;
}

.featMockWindow__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0, 85, 109, 0.08);
}

.featMockDots {
    display: inline-flex;
    gap: 8px;
}

.featMockDots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 85, 109, 0.18);
}

.featMockLabel {
    color: var(--color-primary-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.76rem;
    font-weight: 700;
}

.featMockBodyAlt,
.featMockGrid2,
.featMockGrid3,
.micro-grid,
.aiSupportGrid {
    display: grid;
    gap: 12px;
}

.featMockBodyAlt {
    padding: 18px;
}

.featMockDash {
    display: grid;
    grid-template-columns: 168px 1fr;
    min-height: 360px;
    height: 100%;
}

/* Sidebar dark — estilo similar al mockup real de la app: fondo casi
   negro, items con chevron + icono a la derecha, item activo destacado
   con barra izquierda aguamarina. */
.featMockSidebar {
    padding: 16px 0;
    background: #0a1218;
    color: #a9bcd6;
    font-size: 0.86rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
}

.featMockSidebarBrand {
    display: none;
}

.featMockSidebarNav {
    display: flex;
    flex-direction: column;
}

.featMockSidebarItem {
    position: relative;
    padding: 12px 44px 12px 18px;
    color: #a9bcd6;
    font-weight: 500;
    cursor: default;
    transition: none;
    user-select: none;
}

/* Sólo los items que tienen una sección disponible (data-section)
   son clickables y muestran hover. Los demás (Usuarios, Clínica,
   D. Inteligentes, Salir…) son meros placeholders del mockup. */
.featMockSidebarItem[data-section] {
    cursor: pointer;
}

.featMockSidebarItem[data-section]:hover {
    color: #ffffff;
}

/* Chevron `<` a la derecha (antes del icono). */
.featMockSidebarItem::before {
    content: "‹";
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    opacity: 0.55;
}

/* Icono — mask SVG inline coloreado con currentColor. */
.featMockSidebarItem::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.featMockSidebarItem[data-icon="calendar"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}

.featMockSidebarItem[data-icon="user"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M19 8v6'/><path d='M22 11h-6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M19 8v6'/><path d='M22 11h-6'/></svg>");
}

.featMockSidebarItem[data-icon="folder"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/><circle cx='18' cy='14' r='1.6' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/><circle cx='18' cy='14' r='1.6' fill='black'/></svg>");
}

.featMockSidebarItem[data-icon="treatment"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='3'/><path d='M12 8v8M8 12h8'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='16' rx='3'/><path d='M12 8v8M8 12h8'/></svg>");
}

.featMockSidebarItem[data-icon="docs"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/></svg>");
}

.featMockSidebarItem[data-icon="chart"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>");
}

.featMockSidebarItem[data-icon="bar"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='14 7 21 7 21 14'/></svg>");
}

.featMockSidebarItem[data-icon="users"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

.featMockSidebarItem[data-icon="clinic"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='4'/><path d='M15 17v-1a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3'/><path d='M19 8v6M22 11h-6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='4'/><path d='M15 17v-1a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3'/><path d='M19 8v6M22 11h-6'/></svg>");
}

.featMockSidebarItem[data-icon="exit"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
}

/* Item activo — fondo más claro, texto blanco, barra izq aguamarina. */
.featMockSidebarItem.active {
    background: #161e26;
    color: #fff;
    box-shadow: inset 3px 0 0 var(--brand-soft, #36848b);
}

/* Sub-items (sólo visibles cuando el padre tiene `.active`). */
.featMockSidebarSub {
    display: none;
    background: #11181f;
    padding: 4px 0;
}

.featMockSidebarItem.active+.featMockSidebarSub {
    display: block;
}

.featMockSidebarSubItem {
    position: relative;
    padding: 10px 44px 10px 32px;
    color: #a9bcd6;
    font-weight: 500;
    cursor: pointer;
    transition: none;
}

.featMockSidebarSubItem.active {
    color: #fff;
}

.featMockSidebarSubItem:hover {
    color: #ffffff;
}

.featMockSidebarSubItem::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/></svg>") center/contain no-repeat;
}

.featMockSidebarFooter {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.featMockMain {
    display: grid;
    grid-template-rows: auto 1fr;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 250, 0.96));
}

.featMockToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0, 85, 109, 0.08);
}

.featMockToolbar strong {
    color: var(--color-primary);
    font-size: 0.96rem;
}

.featMockToolbar span {
    color: var(--color-text-soft);
    font-size: 0.84rem;
}

.featMockToolbarActions {
    display: flex;
    gap: 10px;
}

.featMockPill {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(185, 210, 212, 0.24);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Pill activa — Diario/Semanal/Mensual: la seleccionada se distingue
   con fondo brand sólido y texto blanco. */
.featMockPillActive {
    background: var(--color-primary, #00556d);
    color: #fff;
}

/* Logo Veri*Factu en el toolbar de Facturación. Altura controlada
   y `object-fit: contain` para mantener proporciones (sin aplastar). */
.featMockVfactu {
    height: 22px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    display: block;
}

/* En el panel de facturación el strong (título) va arriba y el span
   (subtítulo) en una segunda línea, no en la misma. */
#panel-facturacion .featMockToolbar>div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#panel-facturacion .featMockToolbar span {
    font-size: 0.74rem;
    line-height: 1.2;
}

/* Toolbar centrado para el switch de vista (Diario/Semanal/Mensual). */
.featMockToolbarCenter {
    justify-content: center;
}

/* Segmented control: contenedor pill con 3 botones internos. La opción
   activa va en fondo brand sólido + texto blanco. */
.featMockViewSwitch {
    display: inline-flex;
    background: rgba(185, 210, 212, 0.22);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.featMockViewBtn {
    padding: 7px 18px;
    border: 0;
    background: transparent;
    color: var(--color-primary, #00556d);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    font-family: inherit;
    line-height: 1;
}

.featMockViewBtn:hover {
    background: rgba(255, 255, 255, 0.65);
}

.featMockViewBtn.is-active {
    background: var(--color-primary, #00556d);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 85, 109, 0.18);
}

.featMockViewBtn.is-active:hover {
    background: var(--color-primary, #00556d);
}

/* =====  VISTAS DE AGENDA  ===================================== */
/* 3 vistas (diario / semanal / mensual). Una sola visible a la vez. */
.agendaView {
    display: none;
}

.agendaView.is-active {
    display: block;
}

/* Etiqueta de fecha (debajo de los botones, encima del calendario).
   Se rellena dinámicamente con JS. */
.agendaDateLabel {
    margin: -10px 0 8px;
    color: var(--color-primary, #00556d);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: -0.01em;
    text-transform: capitalize;
    text-align: center;
}

.agendaDateLabel:empty {
    display: none;
}

/* Semanal: 5 columnas (Lun → Vie, sin fin de semana). Reusa toda la
   estructura del agendaMockMini cambiando sólo la grid de columnas
   y el head. */
#panel-agenda .agendaMockMiniWeekly .agendaMockMiniHead {
    grid-template-columns: var(--hoursColW) repeat(5, 1fr);
}

#panel-agenda .agendaMockMiniWeekly .agendaMockMiniGridWeekly {
    grid-template-columns: repeat(5, 1fr);
    /* Override líneas verticales del background: por defecto pinta cada
       33.333% (3 columnas). Aquí 5 columnas → líneas cada 20%. */
    background-image:
        repeating-linear-gradient(to bottom,
            transparent 0, transparent calc(var(--rowH) * 2 - 1px),
            var(--line, rgba(0, 85, 109, 0.08)) calc(var(--rowH) * 2 - 1px),
            var(--line, rgba(0, 85, 109, 0.08)) calc(var(--rowH) * 2)),
        repeating-linear-gradient(to right,
            transparent 0, transparent calc(20% - 1px),
            var(--line, rgba(0, 85, 109, 0.08)) calc(20% - 1px),
            var(--line, rgba(0, 85, 109, 0.08)) 20%);
}

/* Cita "tiny" para vista semanal (sin texto interno, solo color). */
#panel-agenda .agendaTinyApp {
    padding: 0;
    border-left-width: 2px;
}

#panel-agenda .agendaTinyApp strong,
#panel-agenda .agendaTinyApp span {
    display: none;
}

/* =====  VISTA MENSUAL  ======================================== */
.agendaMockMonth {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    border-radius: var(--radius-sm, 14px);
    overflow: hidden;
    font-family: var(--font-body, 'Urbanist', sans-serif);
}

.agendaMockMonthHead {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--brand, #00556d);
    color: #fff;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.agendaMockMonthHead span {
    padding: 8px 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.agendaMockMonthHead span:first-child {
    border-left: 0;
}

.agendaMockMonthGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(58px, 1fr);
}

.agendaMockMonthDay {
    position: relative;
    border-top: 1px solid rgba(0, 85, 109, 0.08);
    border-left: 1px solid rgba(0, 85, 109, 0.08);
    padding: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.agendaMockMonthDay:nth-child(7n+1) {
    border-left: 0;
}

.agendaMockMonthDay:nth-child(-n+7) {
    border-top: 0;
}

.agendaMockMonthDayNum {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text, #23343a);
    line-height: 1;
}

.agendaMockMonthDayMuted {
    background: #fafcfc;
}

.agendaMockMonthDayMuted .agendaMockMonthDayNum {
    color: rgba(0, 85, 109, 0.32);
}

.agendaMockMonthDayToday .agendaMockMonthDayNum {
    background: var(--brand, #00556d);
    color: #fff;
    padding: 3px 7px;
    border-radius: 999px;
    margin-left: -2px;
}

/* Mini-dots de citas en cada día. */
.agendaMockMonthDot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 3px;
}

.dotGreen {
    background: #2e9b5a;
}

.dotBlue {
    background: #3a8fb7;
}

.dotAmber {
    background: #d6a04a;
}

.dotRose {
    background: #d67d6d;
}

.dotPurple {
    background: #8c6bc0;
}

/* ========================================================
   FORMULARIO MODIFICAR PACIENTE — vista detalle del paciente
   con header dark, grid de campos vacíos + avatar lateral + tabs.
   ======================================================== */
.patientForm {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    border-radius: var(--radius-sm, 14px);
    overflow: hidden;
    font-size: 0.7rem;
}

.patientFormHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(90deg, #0a4d5e 0%, #0c5d72 100%);
    color: #fff;
}

.patientFormHead strong {
    font-size: 0.82rem;
    font-weight: 700;
}

.patientFormChip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.patientFormBody {
    display: grid;
    grid-template-columns: 1fr 130px;
    grid-template-areas:
        "fields aside"
        "full   full";
    gap: 12px;
    padding: 12px;
    align-items: start;
}

.patientFormFields {
    grid-area: fields;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.patientFormFieldsFull {
    grid-area: full;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.patientFormAside {
    grid-area: aside;
}

.patientFormRow {
    display: grid;
    gap: 8px;
}

.patientFormRow1 {
    grid-template-columns: 1fr;
}

.patientFormRow2 {
    grid-template-columns: 1fr 1fr;
}

.patientFormRow3 {
    grid-template-columns: 1fr 1fr 1.2fr;
}

/* Fila mixta: Sexo (medio) + Dependiente (toggle chiquito) + Aviso emergente (resto). */
.patientFormRowMix {
    grid-template-columns: 1fr auto 1.4fr;
}

/* Fila Aviso emergente (grande) + Dependiente (toggle chiquito). */
.patientFormRowAviso {
    grid-template-columns: 1fr auto;
}

/* Variante inline: label + toggle en la misma línea (no apilados). */
.patientFieldInline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.patientFieldShrink {
    min-width: 80px;
}

.patientField {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid rgba(0, 85, 109, 0.14);
    border-radius: 8px;
    padding: 5px 8px 6px;
    background: #fff;
}

.patientField label {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft, #5b6d74);
}

.patientFieldInput {
    display: block;
    height: 10px;
    border-bottom: 1px dashed rgba(0, 85, 109, 0.18);
}

.patientFieldInput:last-child {
    border-bottom: 0;
}

.patientFieldToggle {
    display: inline-block;
    width: 24px;
    height: 12px;
    border-radius: 999px;
    background: rgba(0, 85, 109, 0.18);
    position: relative;
}

.patientFieldToggle::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.patientFieldArea .patientFieldTextarea {
    display: block;
    height: 28px;
    background: rgba(0, 85, 109, 0.04);
    border-radius: 4px;
}

.patientFormAside {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.patientFormAuxBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background: linear-gradient(90deg, #c97a3a, #d68d4c);
    color: #fff;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 700;
}

.patientAvatarBox {
    aspect-ratio: 1 / 1;
    background: #d8dee2;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patientAvatarBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.patientAvatarUpload {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: var(--brand, #00556d);
    color: #fff;
    border-radius: 6px;
    font-size: 0.7rem;
}

.patientAvatarActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.patientAvatarActions span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 4px;
    background: var(--brand, #00556d);
    color: #fff;
    border-radius: 6px;
    font-size: 0.55rem;
    font-weight: 600;
}

.patientFormTabs {
    display: flex;
    gap: 0;
    padding: 0 12px 4px;
    border-top: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    background: #fafbfc;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Scrollbar móvil (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 85, 109, 0.28) transparent;
}

/* Scrollbar fino, redondeado, semitransparente — estilo móvil. */
.patientFormTabs::-webkit-scrollbar {
    height: 4px;
}

.patientFormTabs::-webkit-scrollbar-track {
    background: transparent;
}

.patientFormTabs::-webkit-scrollbar-thumb {
    background: rgba(0, 85, 109, 0.22);
    border-radius: 99px;
    transition: background 0.2s;
}

.patientFormTabs::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 85, 109, 0.42);
}

.patientFormTabs::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.patientFormTabs span {
    padding: 8px 10px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-soft, #5b6d74);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.patientFormTabs span.is-active {
    color: var(--brand, #00556d);
    border-bottom-color: var(--brand, #00556d);
}

/* ========================================================
   HISTORIA — lista de fondo oscurecida + modal flotante
   ======================================================== */
/* Wrapper con position relative + overflow hidden — la altura la
   define el modal (que está en flujo). El backdrop va position absolute
   inset:0 → puede tener filas de sobra que se recortan, SIN aportar
   altura al contenedor. */
.historiaMockBody {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 18px;
    box-sizing: border-box;
}

.historiaBackdrop {
    position: absolute;
    inset: 0;
    filter: brightness(0.85);
    opacity: 0.55;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.historiaBackdrop .capUi {
    box-shadow: none;
    border-radius: 0;
    border: 0;
    height: 100%;
}

.historiaBackdrop .capUiTable {
    height: 100%;
    overflow: hidden;
    border-radius: 0;
}

.historiaBackdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 32, 42, 0.18);
    pointer-events: none;
}

.historiaModal {
    position: relative;
    width: calc(100% - 24px);
    max-width: 420px;
    margin: 0 auto;
    z-index: 2;
}

/* Tabs Sesiones / Galería arriba del card. Con fondo blanco propio
   para que NO se vean los datos de la tabla atenuada por debajo. */
.historiaModalTabs {
    display: flex;
    gap: 24px;
    padding: 8px 14px 0;
    background: #fff;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    border-bottom: 0;
    border-top-left-radius: var(--radius-md, 20px);
    border-top-right-radius: var(--radius-md, 20px);
}

.historiaModalTabs span {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-soft, #5b6d74);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
}

.historiaModalTabs span.is-active {
    color: var(--brand, #00556d);
    border-bottom-color: var(--brand, #00556d);
}

.historiaModalCard {
    background: #fff;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    border-radius: var(--radius-md, 20px);
    /* Sombra más sutil para que no se corte por el wrapper. */
    box-shadow: 0 10px 24px rgba(0, 61, 79, 0.14);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Las tabs van pegadas al card → quitar border-radius arriba del card
   para que la unión se vea continua. */
.historiaModalTabs+.historiaModalCard {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

.historiaModalFilters {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 36px;
    gap: 8px;
}

.historiaFilter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 28px 7px 10px;
    border: 1px solid rgba(0, 85, 109, 0.18);
    border-radius: 6px;
    font-size: 0.62rem;
    color: var(--text-soft, #5b6d74);
    background: #fff;
    min-width: 0;
}

.historiaFilter label {
    font-weight: 700;
    color: var(--text, #23343a);
    margin-right: 4px;
}

.historiaFilterDates {
    color: var(--text, #23343a);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.historiaFilterPlaceholder {
    color: rgba(91, 109, 116, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.historiaFilterIcon,
.historiaFilterX {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-soft, #5b6d74);
    font-size: 0.7rem;
}

.historiaModalAdd {
    background: var(--brand, #00556d);
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
}

.historiaModalTable {
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.historiaModalHead,
.historiaModalRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 1.2fr);
    gap: 8px;
    padding: 8px 10px;
    align-items: center;
    font-size: 0.62rem;
}

.historiaModalRow>span,
.historiaModalHead>span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historiaModalHead {
    background: #f6fafa;
    border-bottom: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    font-weight: 700;
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft, #5b6d74);
}

.historiaModalRow+.historiaModalRow {
    border-top: 1px solid rgba(0, 85, 109, 0.06);
}

.historiaModalDesc {
    color: var(--brand, #00556d);
    font-weight: 600;
}

.historiaModalActions {
    display: inline-flex;
    gap: 4px;
}

.historiaModalActions span {
    padding: 4px 8px;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    border-radius: 6px;
    font-size: 0.56rem;
    font-weight: 600;
    color: var(--text-soft, #5b6d74);
    background: #fff;
}

.historiaModalBtnDanger {
    color: #d04545 !important;
}

.historiaModalFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--text-soft, #5b6d74);
}

.historiaModalPager {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.historiaModalPager span {
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    background: #fff;
}

.historiaModalPager span.is-active {
    background: var(--brand, #00556d);
    color: #fff;
    border-color: var(--brand, #00556d);
}

.featMockBody {
    padding: 18px;
    display: grid;
    gap: 14px;
}

.featMockGrid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 14px;
}

.featMockGridEqual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.featMockStack {
    display: grid;
    gap: 12px;
}

.featMockCalendar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.featMockSlot,
.featMockStat,
.featMockPatient,
.featMockTimeline,
.featMockChart,
.featMockNote {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(0, 85, 109, 0.08);
    background: rgba(255, 255, 255, 0.96);
}

.featMockSlot {
    min-height: 104px;
}

.featMockSlotSoft {
    background: linear-gradient(180deg, rgba(185, 210, 212, 0.34), rgba(255, 255, 255, 0.96));
}

.featMockSlotAccent {
    background: linear-gradient(180deg, rgba(255, 215, 204, 0.42), rgba(255, 255, 255, 0.96));
}

.featMockSlot strong,
.featMockStat strong,
.featMockPatient strong,
.featMockTimeline strong,
.featMockNote strong {
    display: block;
    color: var(--color-primary);
    line-height: 1.35;
}

.featMockSlot span,
.featMockStat span,
.featMockPatient span,
.featMockTimeline span,
.featMockNote span {
    display: block;
    margin-top: 6px;
    color: var(--color-text-soft);
    font-size: 0.86rem;
    line-height: 1.5;
}

.featMockStats {
    display: grid;
    gap: 10px;
}

.featMockChart {
    min-height: 200px;
    display: grid;
    align-content: end;
    gap: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 251, 0.98)),
        radial-gradient(circle at bottom left, rgba(185, 210, 212, 0.18), transparent 42%);
}

.featMockChartBars {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    min-height: 118px;
}

.featMockChartBars span {
    display: block;
    border-radius: 999px 999px 14px 14px;
    background: linear-gradient(180deg, rgba(54, 132, 139, 0.92), rgba(185, 210, 212, 0.38));
}

.featMockChartBars span:nth-child(1) {
    height: 58px;
}

.featMockChartBars span:nth-child(2) {
    height: 82px;
}

.featMockChartBars span:nth-child(3) {
    height: 72px;
}

.featMockChartBars span:nth-child(4) {
    height: 110px;
}

.featMockChartBars span:nth-child(5) {
    height: 96px;
}

.featMockChartBars span:nth-child(6) {
    height: 126px;
}

.featMockChartLegend {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-soft);
    font-size: 0.78rem;
}

.featMockPatientHeader {
    display: flex;
    align-items: center;
    gap: 12px;
}

.featMockAvatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(54, 132, 139, 0.34), rgba(255, 215, 204, 0.46));
}

.featMockGrid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.featMockGrid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.featMockBox {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 85, 109, 0.08);
}

.featMockBox strong {
    display: block;
    color: var(--color-primary);
    line-height: 1.35;
}

.featMockBox span {
    display: block;
    margin-top: 6px;
    color: var(--color-text-soft);
    line-height: 1.5;
    font-size: 0.92rem;
}

.featMockBoxSoft {
    background: linear-gradient(180deg, rgba(185, 210, 212, 0.38), rgba(255, 255, 255, 0.96));
}

.featMockBoxAccent {
    background: linear-gradient(180deg, rgba(255, 215, 204, 0.42), rgba(255, 255, 255, 0.96));
}

.micro-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.micro-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(0, 85, 109, 0.08);
    box-shadow: none;
}

.micro-icon,
.aiSupportIcon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(54, 132, 139, 0.18), rgba(214, 125, 109, 0.14));
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 800;
}

.micro-card h4,
.aiSupportCard h4 {
    color: var(--color-primary);
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.ia-panel {
    position: relative;
    min-height: 560px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.96), rgba(244, 248, 248, 0.82)),
        radial-gradient(circle at top right, rgba(255, 215, 204, 0.24), transparent 34%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.ia-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(0, 85, 109, 0.08);
    transform: translate(-50%, -50%);
}

.ia-ring--a {
    width: 340px;
    height: 340px;
}

.ia-ring--b {
    width: 470px;
    height: 470px;
}

.ia-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    padding: 28px;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82)),
        radial-gradient(circle at top center, rgba(185, 210, 212, 0.2), transparent 44%);
    box-shadow:
        0 24px 70px rgba(0, 61, 79, 0.12),
        0 0 70px rgba(54, 132, 139, 0.14);
}

.ia-center h3 {
    color: var(--color-primary);
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.ia-node {
    position: absolute;
    padding: 14px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(0, 85, 109, 0.08);
    box-shadow: 0 16px 36px rgba(0, 61, 79, 0.08);
    color: var(--color-primary);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.ia-node--contexto {
    top: 70px;
    left: 102px;
}

.ia-node--resumenes {
    top: 116px;
    right: 92px;
}

.ia-node--automatizacion {
    top: 250px;
    left: 48px;
}

.ia-node--seguimiento {
    top: 254px;
    right: 48px;
}

.ia-node--documentacion {
    bottom: 92px;
    left: 134px;
}

.ia-node--tareas {
    bottom: 86px;
    right: 132px;
}

#ia {
    padding-top: 50px;
    padding-bottom: 90px;
}


/* Overrides modo azul — #ia lleva bgModoAzul */
#ia .aiSupportCard {
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

#ia.bgModoAzul .aiAssistCopy h3 {
    color: #fff;
}

#ia.bgModoAzul .eyebrow {
    color: rgba(255, 255, 255, 0.9);
}

#ia.bgModoAzul .eyebrow::before {
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.6) 100%);
}

#ia.bgModoAzul .eyebrow::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6) 0%, transparent 100%);
}

#ia.bgModoAzul .aiAssistCopy p {
    color: rgba(255, 255, 255, 0.82);
}

#ia.bgModoAzul .aiAssistOrbitRing {
    border-color: rgba(255, 255, 255, 0.2);
}

#ia:not(.bgModoAzul) .aiAssistOrbitNode.orbitNode1 {
    color: var(--color-primary);
}

#ia.bgModoAzul .aiAssistOrbitNode.orbitNode1 {
    color: whitesmoke;
}


.aiAssistBlock {
    display: grid;
    gap: 0px;
}

/* Eyebrow "Hygia AI" reubicado al tope de la sección, centrado
   horizontalmente. `justify-self: center` funciona porque es item
   de un grid (.aiAssistBlock). Sin compensación negativa — deja
   respirar el gap de 28px del grid + un poquito extra. */
.aiAssistEyebrow {
    justify-self: center;
    margin-bottom: -8px;
}

.aiAssistShell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    /* Copy anclado abajo del shell — pegado a las cards de la fila
       siguiente. Combinado con párrafo full-width abajo, queda compacto
       y al nivel del blob. */
    align-items: end;
}

.aiAssistCopy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Padding lateral — h3 + párrafo alinean con contenido de cards
       abajo (.aiSupportCard tiene padding: 24px). */
    padding-left: 24px;
    padding-right: 24px;
}

.aiAssistCopy h3 {
    margin-top: 12px;
    color: var(--color-primary);
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.aiAssistCopy p {
    margin-top: 18px;
    /* max-width quitado — párrafo usa todo el ancho de su columna (~570px
       en desktop), reduce número de líneas → copy más compacto vertical. */
    max-width: none;
    font-size: 1.1rem;
    line-height: 1.6;
}

.aiAssistOrbit {
    position: relative;
    width: 100%;
    /* 360px ajustado a contenido mínimo (core centrado + nodo bottom:20).
       Reduce aire arriba del shell → copy bottom-anchored queda más
       cerca del eyebrow. */
    height: 360px;
    /* Anclado izquierda de columna — orbit + palabra rotatoria más
       cerca del copy. */
    margin: 0 auto 0 0;
    flex-shrink: 0;
    overflow: visible;

    display: flex;
    justify-content: center;
}

.aiAssistOrbitRing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 415px;
    height: 415px;
    border-radius: 50%;
    border: 1.5px solid rgb(255, 255, 255);
    animation: orbitRipple 5.5s ease-out infinite;
    pointer-events: none;
}

@keyframes orbitRipple {
    0% {
        transform: translate(-50%, -50%) scale(0.38);
        opacity: 0.95;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.aiAssistOrbitRingA {
    animation-delay: 0s;
}

.aiAssistOrbitRingB {
    animation-delay: -1.83s;
}

.aiAssistOrbitRingC {
    animation-delay: -3.67s;
}

.aiAssistOrbitCore {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.aiAssistOrbitCore {
    cursor: pointer;
}

.aiAssistOrbitCore:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.aiAssistOrbitCore:active {
    transform: translate(-50%, -50%) scale(0.9);
    transition-duration: 0.15s;
}

.aiAssistOrbitCore .containerBlob {
    pointer-events: auto;
}

.aiAssistOrbitNode {
    text-align: center;
    position: absolute;
    white-space: nowrap;
    user-select: none;
    width: 230px;
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgba(0, 85, 109, 0);
    box-shadow: 0 14px 34px rgba(0, 61, 79, 0);
    color: var(--color-primary);
    font-size: 0.92rem;
    font-weight: 700;
    transition:
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        scale 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.7s ease,
        opacity 0.7s ease;
    line-height: 1.35;
    display: flex;
    justify-content: center;
    font-size: 1.3rem;
}

.aiAssistOrbitNode {
    position: absolute;
    bottom: 20px;
    transition: all 1s ease-in-out;
}

.aiAssistOrbitNode:not(.orbitNode1) {
    opacity: .1;
    background: transparent;
    border-color: transparent;
    box-shadow: 0 14px 34px transparent;
    color: rgba(245, 245, 245, 0.575);
}

.orbitNode1 {
    transform: translate(0px, 0px);
    scale: 1.1;
    z-index: 6;
    color: whitesmoke;
}

.orbitNode2 {
    transform: translate(-120px, -15px);
    scale: 0.9;
    filter: blur(3px);
    z-index: 5;
}

.orbitNode3 {
    transform: translate(-170px, -40px);
    scale: 0.8;
    filter: blur(5px);
    z-index: 4;
}

.orbitNode4 {
    transform: translate(0px, -60px);
    scale: 0.7;
    filter: blur(8px);
    opacity: 0.8;
    z-index: 3;
}

.orbitNode5 {
    transform: translate(170px, -40px);
    scale: 0.8;
    filter: blur(5px);
    z-index: 4;
}

.orbitNode6 {
    transform: translate(120px, -15px);
    scale: 0.9;
    filter: blur(3px);
    z-index: 5;
}

/* Float suave */
@keyframes orbitFloat0 {
    0%, 100% {
        translate: 0px 0px
    }

    50% {
        translate: 2px -5px
    }
}

@keyframes orbitFloat1 {
    0%, 100% {
        translate: 0px 0px
    }

    50% {
        translate: -3px -4px
    }
}

@keyframes orbitFloat2 {
    0%, 100% {
        translate: 0px 0px
    }

    50% {
        translate: 3px 4px
    }
}

@keyframes orbitFloat3 {
    0%, 100% {
        translate: 0px 0px
    }

    50% {
        translate: -2px 5px
    }
}

@keyframes orbitFloat4 {
    0%, 100% {
        translate: 0px 0px
    }

    50% {
        translate: 4px -3px
    }
}

@keyframes orbitFloat5 {
    0%, 100% {
        translate: 0px 0px
    }

    50% {
        translate: -4px 3px
    }
}

/* Transición rápida al hacer click manual */
.aiAssistOrbit.is-clicking .aiAssistOrbitNode {
    transition:
        transform 0.35s ease,
        scale 0.35s ease,
        filter 0.35s ease,
        opacity 0.35s ease !important;
}

.aiAssistOrbitNodeContexto {}

.aiAssistOrbitNodeResumenes {}

.aiAssistOrbitNodeDocumentacion {}

.aiAssistOrbitNodeSeguimiento {}

.aiAssistOrbitNodeTareas {}

.aiAssistOrbitNodeAutomatizacion {}




.aiSupportGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
    margin-top: 20px;
    justify-content: center;
}

.aiSupportCard {
    position: relative;
    height: 100%;
    padding: 24px;
    border-radius: 24px;
    background: transparent;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 10px;
    row-gap: 12px;
    align-items: start;
}

/* Separador vertical entre cards — centrado en el gap (12px → translateX -6px).
   Gradiente opaco al centro, fade a transparente en extremos. */
.aiSupportCard+.aiSupportCard::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-6px);
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 61, 79, 0.18) 35%,
            rgba(0, 61, 79, 0.18) 65%,
            transparent 100%);
    pointer-events: none;
}

#ia.bgModoAzul .aiSupportCard+.aiSupportCard::before {
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.75) 35%,
            rgba(255, 255, 255, 0.75) 65%,
            transparent 100%);
}

.aiSupportIcon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
}

.aiSupportCard blockquote {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(233, 244, 245, 0.96), rgba(223, 239, 241, 0.86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    color: var(--brand-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    font-weight: 600;
    font-style: italic;
}

#ia.bgModoAzul .aiSupportCard blockquote {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    color: rgba(255, 255, 255, 0.88);
}

.aiSupportIcon svg {
    width: 15px;
    height: 15px;
    stroke: var(--brand);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#ia.bgModoAzul .aiSupportIcon svg {
    stroke: rgba(255, 255, 255, 0.9);
}

.aiSupportCard p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    color: var(--text-muted);
}

.aiSupportCard h4 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    color: var(--brand);
}

#ia.bgModoAzul .aiSupportCard h4 {
    color: #fff;
}

#ia.bgModoAzul .aiSupportCard p {
    color: rgba(255, 255, 255, 0.82);
}

.toolsBlock {
    /* Card exterior eliminada — toolsBlock queda como contenedor
       transparente sin padding extra ni borde. Las toolsCard internas
       mantienen su look. */
    padding: 0;
    border-radius: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.toolsHead {
    max-width: 620px;
    margin: 0 auto 34px;
    text-align: center;
}

.toolsHead h2 {
    margin-top: 18px;
}

.toolsHead p {
    margin-top: 14px;
}

.toolsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.toolsCard {
    min-height: 260px;
    padding: 24px;
    border-radius: 28px;
    /* Fondo plano (degradado eliminado) + border del color del título
       (h4 usa var(--color-primary)). */
    background: transparent;
    border: 1px solid var(--color-primary);
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    /* Position relative + cursor pointer — el `<p>` se posiciona absolute
       encima del visual+h4 y se revela en hover. */
    position: relative;
    cursor: pointer;
}

.toolsCardVisual {
    width: 100%;
    min-height: 118px;
    display: grid;
    place-items: center;
    transition: opacity 0.3s ease;
}

.toolsCard h4 {
    margin-top: 8px;
    color: var(--color-primary);
    font-size: 1.36rem;
    letter-spacing: -0.03em;
    transition: opacity 0.3s ease;
}

/* Párrafo oculto por defecto, ocupa toda la card en absolute para
   solapar el contenido normal. Se revela en hover. */
.toolsCard p {
    position: absolute;
    inset: 24px;
    margin: 0;
    max-width: none;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-size: 1.08rem;
    line-height: 1.55;
}

/* Hover: visual + h4 desaparecen, párrafo aparece. */
.toolsCard:hover .toolsCardVisual,
.toolsCard:hover h4 {
    opacity: 0;
}

.toolsCard:hover p {
    opacity: 1;
}

.toolsCardIcon {
    width: 94px;
    height: 94px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    /* Fondo + sombra eliminados — icono SVG limpio sobre la card. */
    background: transparent;
    box-shadow: none;
}

.toolsCardIcon svg {
    width: 34px;
    height: 34px;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toolsCardVisualClusters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.toolsCardCluster {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(0, 61, 79, 0.08);
    color: var(--color-primary-soft);
    font-weight: 800;
}

.toolsCardLines {
    width: 96px;
    display: grid;
    gap: 10px;
}

.toolsCardLines span {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(54, 132, 139, 0.18), rgba(54, 132, 139, 0.52));
}

.toolsCardLines span:nth-child(2) {
    width: 76%;
}

.toolsCardLines span:nth-child(3) {
    width: 58%;
}

.quickNavBlock {
    text-align: center;
}

/* Padding equilibrado arriba/abajo — section centrada entre vecinas
   ahora que el carrusel tiene altura fija (no salta entre estados). */
.section.sectionTight:has(.quickNavBlock) {
    padding-top: 56px;
    padding-bottom: 56px;
}

/* Section "Todo lo que debes saber" (blog) — padding vertical reducido. */
#blog.section.sectionTight {
    padding-top: 40px;
    padding-bottom: 56px;
}

.quickNavBlock h2 {
    max-width: 760px;
    margin: 0 auto;
}

/* Carrusel coverflow — estructura clásica: viewport (overflow hidden)
   contiene un track flex que se traslada según el item activo. Items
   con scale/opacity según clase aplicada por JS. */
.quickNavCarousel {
    position: relative;
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.quickNavViewport {
    flex: 1;
    overflow: hidden;
    height: 90px;
    display: flex;
    align-items: center;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}

.quickNavViewport.is-dragging {
    cursor: grabbing;
}

/* Track centrado dentro del viewport. JS le aplica translateX para
   alinear el item activo con el centro del viewport. */
.quickNavTrack {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Padding lateral 50% del viewport — permite que items extremos
       queden centrados sin scrollear más allá del track. */
    padding: 0 50%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.quickNavViewport.is-dragging .quickNavTrack {
    transition: none;
}

/* Items — scale + opacity según clase aplicada por JS. */
.quickNavTrack .quickNavBtn {
    flex: 0 0 auto;
    transform: scale(0.7);
    opacity: 0.35;
    transition:
        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
    cursor: pointer;
}

.quickNavTrack .quickNavBtn.is-near {
    opacity: 0.65;
    transform: scale(0.85);
}

.quickNavTrack .quickNavBtn.is-active {
    opacity: 1;
    transform: scale(1.15);
    z-index: 2;
}

/* Hover override — solo afecta scale del item, no su posición flex. */
.quickNavTrack .quickNavBtn:hover {
    transform: scale(0.78);
    background: #fff;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.quickNavTrack .quickNavBtn.is-near:hover {
    transform: scale(0.95);
}

.quickNavTrack .quickNavBtn.is-active:hover {
    transform: scale(1.22);
}

/* Flechas — circular, sutiles. */
.quickNavArrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(0, 85, 109, 0.15);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    z-index: 3;
}

.quickNavArrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quickNavArrow:hover {
    background: #fff;
    border-color: var(--color-primary);
    transform: scale(1.08);
}

/* Dots — indicadores posición + click salta al item. */
.quickNavDots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.quickNavDot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    background: rgba(0, 85, 109, 0.2);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease, width 0.3s ease;
}

.quickNavDot:hover {
    background: rgba(0, 85, 109, 0.5);
    transform: scale(1.2);
}

.quickNavDot.is-active {
    background: var(--color-primary);
    width: 22px;
}

.quickNavBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(0, 85, 109, 0.1);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: none;
    color: var(--color-primary);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    /* `all` permite que el browser interpole posición al cambiar de
       flex carrusel a grid 4+3 (suaviza el "salto" entre layouts). */
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.quickNavBtn:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 1);
    color: var(--color-primary);
    box-shadow: none;
}

.quickNavBtnIcon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(54, 132, 139, 0.18), rgba(214, 125, 109, 0.12));
}

.quickNavBtnIcon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Loop del carrusel: reposición instantánea sin animar (track + items). */
.quickNavCarousel.no-anim .quickNavTrack,
.quickNavCarousel.no-anim .quickNavTrack .quickNavBtn {
    transition: none !important;
}

.blogBlock {
    display: grid;
    gap: 30px;
}

.blogHead {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.blogHead p {
    margin-top: 16px;
}

.blogGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.blogCard {
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-card);
}

.blogCardMedia {
    min-height: 220px;
    padding: 24px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top left, rgba(185, 210, 212, 0.24), transparent 36%),
        linear-gradient(135deg, rgba(8, 70, 85, 0.96), rgba(54, 132, 139, 0.84));
}

.blogCardMediaLight {
    background:
        radial-gradient(circle at top right, rgba(255, 215, 204, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(244, 248, 248, 0.98), rgba(185, 210, 212, 0.86));
}

.blogCardMediaSoft {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.26), transparent 32%),
        linear-gradient(135deg, rgba(206, 235, 232, 0.98), rgba(185, 210, 212, 0.92));
}

.blogVisualChip {
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 30px rgba(0, 61, 79, 0.08);
    color: var(--color-primary);
    font-weight: 700;
}

.blogVisualDoc {
    width: min(100%, 220px);
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(0, 61, 79, 0.08);
    display: grid;
    gap: 10px;
}

.blogVisualDoc span {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 85, 109, 0.14), rgba(0, 85, 109, 0.04));
}

.blogVisualDoc span:nth-child(2) {
    width: 78%;
}

.blogVisualDoc span:nth-child(3) {
    width: 56%;
}

.blogVisualOrbit {
    position: relative;
    width: 170px;
    height: 170px;
}

.blogVisualOrbit::before,
.blogVisualOrbit::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 85, 109, 0.1);
}

.blogVisualOrbit::after {
    inset: 0;
    border-color: rgba(0, 85, 109, 0.06);
}

.blogVisualOrbit span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 84px;
    border-radius: 28px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary);
    font-weight: 800;
    box-shadow: 0 16px 34px rgba(0, 61, 79, 0.08);
}

.blogCardBody {
    padding: 22px 22px 24px;
}

.blogCardMeta {
    color: var(--color-primary-soft);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blogCard h3 {
    margin-top: 14px;
    color: var(--color-primary);
    font-size: 1.44rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.blogCardLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--color-primary);
    font-weight: 700;
}

.cta {
    padding-bottom: 140px;
}

.cta-panel {
    padding: 72px 48px 68px;
    text-align: center;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at top center, rgba(88, 169, 178, 0.22), transparent 30%),
        linear-gradient(135deg, #0a5567 0%, #0f6273 55%, #2d8e97 100%);
    color: #f5fbfb;
    box-shadow: 0 34px 90px rgba(0, 61, 79, 0.22);
}

/* CTA-panel sobre fondo oscuro: el eyebrow hereda del home (líneas fade).
   Aclaramos texto + líneas para que se vean sobre fondo brand. */
.cta-panel .eyebrow {
    color: #fff;
}

.cta-panel .eyebrow::before,
.cta-panel .eyebrow::after {
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, .85) 100%);
}

.cta-panel .eyebrow::after {
    background: linear-gradient(to right, rgba(255, 255, 255, .85) 0%, transparent 100%);
}

.cta-panel h2,
.cta-panel p {
    color: inherit;
}

.cta-panel h2 {
    max-width: 920px;
    margin: 22px auto 0;
}

.cta-panel p {
    max-width: 860px;
    margin: 18px auto 0;
    color: rgba(245, 251, 251, 0.8);
    font-size: 1.08rem;
    line-height: 1.7;
}

.cta-panel__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.cta-panel .introBtnPrimary {
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-primary);
    box-shadow: 0 18px 40px rgba(0, 61, 79, 0.12);
}

.cta-panel .introBtnSecondary {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.cta-panel__meta {
    margin-top: 24px;
    color: rgba(245, 251, 251, 0.6);
    font-size: 0.98rem;
}

.cta-panel__meta a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Footer hereda el "modo azul" global definido en styles.css
   (parallax + overlay azul). Esta página no añade overrides. */

/* CTA final — card teal flotante (sin bgModoAzul full-bleed).
   La <section> queda transparente y la card lleva todo el color. */
#funcionalidades-page #cta,
main #cta {
    padding: 64px 0 96px;
}

/* CTA final más ancho que el containerNarrow original. */
.ctaWide {
    max-width: 1080px;
}

#cta .ctaCard {
    padding: 56px 48px;
    border-radius: 36px;
    background: linear-gradient(135deg, var(--brand-deep, #003d4f) 0%, var(--brand, #00556d) 55%, var(--brand-soft, #36848b) 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 30px 70px rgba(0, 61, 79, 0.22);
    position: relative;
    overflow: hidden;
}

#cta .ctaCard>* {
    position: relative;
    z-index: 1;
}

#cta .ctaBadge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0 auto 18px;
    padding: 9px 22px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0;
}

#cta .ctaBadge::before,
#cta .ctaBadge::after {
    display: none;
}

#cta .ctaCard h2 {
    margin: 0 auto;
    max-width: 940px;
    color: #fff;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    text-wrap: balance;
}

#cta .ctaCard p {
    margin: 18px auto 0;
    max-width: 860px;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.65;
    font-size: 1.02rem;
}

#cta .ctaActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}

#cta .ctaContact {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
}

#cta .ctaContact a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 36px;
}

.footer__brand h3,
.footer__column h4 {
    color: #f5fbfb;
}

.footer__brand h3 {
    font-size: 2rem;
    letter-spacing: -0.03em;
}

.footer__brand p {
    margin-top: 18px;
    max-width: 280px;
    line-height: 1.65;
}

.footer__column h4 {
    font-size: 0.98rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer__links {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.footer__links a {
    color: rgba(236, 245, 245, 0.74);
    transition: color var(--transition);
}

.footer__links a:hover {
    color: #fff;
}

.footer__bottom {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(236, 245, 245, 0.12);
    color: rgba(236, 245, 245, 0.58);
    font-size: 0.95rem;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(4px);
    transition:
        opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

@media (max-width: 1120px) {

    /* `.aiAssistShell` se mantiene 2-col en tablet — el orbit (450px)
       cabe perfectamente a la derecha hasta ~860px. Se colapsa a 1-col
       en el bloque de mobile (max-width: 860px). */
    .introLayout {
        grid-template-columns: 1fr;
    }

    .micro-grid,
    .aiSupportGrid,
    .toolsGrid,
    .blogGrid,
    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featMockCalendar,
    .featMockGrid,
    .featMockGridEqual {
        grid-template-columns: 1fr;
    }


    /* Tablet: hero centrado + orbit con width fijo para mantener
       las proporciones de moléculas y círculo. */
    .introContent {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .introLead {
        margin-left: auto;
        margin-right: auto;
    }

    .introActions {
        justify-content: center;
    }

    .introOrbit {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        min-height: 640px;
    }
}

@media (max-width: 860px) {
    .section {
        padding: 94px 0;
    }

    .header__nav,
    .header__actions {
        display: none;
    }

    .header__toggle {
        display: block;
    }

    .header__nav.is-open {
        position: absolute;
        top: calc(100% + 10px);
        left: 20px;
        right: 20px;
        display: grid;
        gap: 6px;
        padding: 14px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--shadow-soft);
        backdrop-filter: blur(18px);
    }

    .header__nav.is-open a {
        padding: 12px 10px;
    }

    .intro h1,
    #top .intro h1,
    .sectionHead h2,
    .cta-panel h2 {
        font-size: clamp(2.4rem, 9.5vw, 3.6rem);
        line-height: 1.05;
        word-break: break-word;
        overflow-wrap: anywhere;
        text-wrap: balance;
        overflow: visible;
        max-width: 100%;
    }

    /* Container del h1 sin scroll propio. */
    .introContent,
    #top .introContent {
        overflow: visible;
    }

    /* Hero responsive — FLEX column (no grid). Todo centrado, sin
       desbordamiento horizontal. */
    body,
    html {
        overflow-x: hidden;
    }

    #top .intro {
        padding: 40px 0 56px;
        overflow-x: hidden;
    }

    .introLayout {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
        overflow: clip;
    }

    .introContent {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .introLead {
        margin-left: auto;
        margin-right: auto;
    }

    .introActions {
        justify-content: center;
    }

    /* Orbit que escala con el viewport — `aspect-ratio` mantiene la
       proporción y las moléculas usan posiciones porcentuales para
       acompañar el escalado. `scale` se resetea a 1 para que el
       viewport clip del padre no lo corte. */
    .introOrbit {
        width: min(95vw, 500px);
        max-width: 100%;
        height: auto;
        aspect-ratio: 5 / 6;
        min-height: 0;
        margin: 0 auto;
        flex-shrink: 0;
        background-size: 100% 100%;
        scale: 1;
    }

    /* Padding lateral container → 0 en mobile. */
    .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* Card de los mockups (tabs) sin padding interno en mobile. */
    #funcionalidades .tabsPanels {
        padding: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-top: 12px;
    }

    /* Paneles absolutos pegados al wrapper, sin offset 28px. */
    #funcionalidades .tabsPanels .tabPanel,
    #funcionalidades .tabsPanels .tabPanel[hidden] {
        top: 0;
        left: 0;
        right: 0;
    }

    /* Moléculas en %: más cerca del core (top/bottom 14-18%, left/right 4-8%). */
    .introOrbitMoleculeTL {
        width: 40%;
        top: 18%;
        left: 4%;
        right: auto;
        bottom: auto;
    }

    .introOrbitMoleculeTR {
        width: 36%;
        top: 14%;
        right: 4%;
        left: auto;
        bottom: auto;
    }

    .introOrbitMoleculeBL {
        width: 36%;
        bottom: 14%;
        left: 6%;
        right: auto;
        top: auto;
    }

    .introOrbitMoleculeBR {
        width: 34%;
        bottom: 16%;
        right: 6%;
        left: auto;
        top: auto;
    }

    /* Core con texto legible en mobile (orbit ahora 500px).
       El h3 es largo — reduzco font-size para que quepa dentro del
       aspect-ratio 1/1 sin estirar el círculo verticalmente. */
    .introOrbitCore {
        width: 56%;
        padding: 14px;
    }

    .introOrbitCore h3 {
        font-size: 1.05rem;
        margin-top: 6px;
        line-height: 1.15;
    }

    .introOrbitBrand {
        font-size: 0.72rem;
    }

    /* Palabras flotantes — un pelín reducidas. */
    .moleculeDot {
        font-size: 0.68rem;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .moleculeDotTreat {
        font-size: 0.58rem;
    }

    /* Subtítulo intro (lead) + botones intro un poco más grandes. */
    .introLead {
        font-size: 1.12rem;
        line-height: 1.65;
    }

    #top .introBtnPrimary,
    #top .introBtnSecondary {
        font-size: 1.05rem;
    }

    #top .introBtnLg {
        min-height: 60px;
        min-width: 220px;
        padding: 0 28px;
    }

    .introOrbitNode {
        display: none;
    }

    /* Mantener core absolute centrado (no static apilado que rompe
       el layout del orbit en mobile). */
    .introOrbitCore {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    .introOrbitCurve {
        display: none;
    }

    .featTabPanel,
    .featTabsBox,
    .ia-panel,
    .aiSupportCard,
    .cta-panel {
        padding: 22px;
    }

    /* Mockups en mobile: layout 1 columna con copy ARRIBA y mock ABAJO.
       En desktop es grid 2 columnas (mock izq + copy der); en mobile el
       grid colapsa a 1 col y `order` invierte el flujo del DOM. */
    #funcionalidades .featPanelLayout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #funcionalidades .featPanelCopy {
        order: 1;
    }

    #funcionalidades .featMock {
        order: 2;
        padding: 0;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
    }

    #funcionalidades .featMockWindow {
        margin: 0 auto;
        width: 100%;
    }

    /* Body del mockup centrado dentro del window — el contenido (agenda,
       grid de pacientes, etc.) queda centrado y aprovecha todo el ancho. */
    #funcionalidades .featMockBody {
        margin: 0 auto;
        width: 100%;
    }

    .featMockGrid2,
    .featMockGrid3,
    .micro-grid,
    .aiSupportGrid,
    .toolsGrid,
    .blogGrid,
    .footer__grid {
        grid-template-columns: 1fr;
    }

    /* Mobile: viewport más compacto + items con scale reducido. */
    .quickNavViewport {
        height: 70px;
    }

    .quickNavTrack {
        gap: 14px;
    }

    .quickNavTrack .quickNavBtn {
        transform: scale(0.55);
    }

    .quickNavTrack .quickNavBtn.is-near {
        transform: scale(0.75);
    }

    .quickNavTrack .quickNavBtn.is-active {
        transform: scale(1);
    }

    .quickNavArrow {
        width: 36px;
        height: 36px;
    }

    .featMockSidebarNav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ia-panel {
        min-height: 680px;
    }

    .aiAssistShell,
    .aiAssistBlock {
        gap: 20px;
    }

    /* IA section en mobile — todo vertical, copy arriba, orbit abajo.
       El .bgModoAzul es full-bleed (padding lateral = calc(50vw - 50%))
       y el .container interior tiene padding 0 en mobile → el texto
       tocaba el borde y se cortaba. Restauramos padding interno solo
       para el container de #ia y forzamos shell a 1 columna. */
    #ia .container.aiAssistBlock {
        padding-left: 18px;
        padding-right: 18px;
    }

    #ia .aiAssistShell {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* En mobile el container ya da padding (18px) — la copy no necesita
       el extra de 24px que usa en desktop para alinearse con las cards. */
    #ia .aiAssistCopy {
        padding-left: 0;
        padding-right: 0;
    }

    /* Título visible + ancho seguro. */
    #ia.bgModoAzul .aiAssistCopy h3 {
        font-size: clamp(2.4rem, 9vw, 3rem);
        line-height: 1.05;
    }

    #ia.bgModoAzul .aiAssistCopy p {
        max-width: 100%;
    }

    /* Orbit responsive — wrapper sin width fijo, los nodos quedan
       absolutos pero la órbita entera se escala con la viewport. */
    #ia .aiAssistOrbit {
        width: 100%;
        max-width: 360px;
        height: auto;
        aspect-ratio: 1 / 1;
        min-height: 0;
        margin: 0 auto;
    }

    /* Rings y core SE MANTIENEN visibles (anulamos los antiguos
       overrides que rompían el layout en mobile). */
    #ia .aiAssistOrbitRing {
        display: block;
    }

    #ia .aiAssistOrbitCore {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
    }

    /* Nodos vuelven a `absolute` (los `position: static` antiguos los
       sacaban del orbit y ocultaban la pelotita). En mobile, los nodos
       fuera del orbitNode1 (los 5 difuminados) se ocultan con
       `opacity: 0` (NO display:none — display no transiciona y mataba
       la animación del cycle). Siguen en el DOM, pero invisibles; el
       transition de opacity hace que al entrar a orbitNode1 aparezcan
       con fade-in suave. */
    #ia .aiAssistOrbitNode {
        position: absolute;
        width: auto;
        max-width: 90%;
        font-size: 1.1rem;
    }

    #ia .aiAssistOrbitNode:not(.orbitNode1) {
        opacity: 0;
        pointer-events: none;
    }

    /* aiSupportGrid en mobile — cards apiladas en 1 col PERO centradas
       y con max-width para que no se estiren a viewport completo. */
    #ia .aiSupportGrid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 16px;
    }

    #ia .aiSupportCard {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
    }

    /* El separador vertical entre cards (::before) no aplica en mobile —
       las cards van apiladas, no en fila. Lo ocultamos para evitar
       líneas verticales sueltas. */
    #ia .aiSupportCard+.aiSupportCard::before {
        display: none;
    }

    .ia-node {
        position: static;
        display: inline-flex;
        margin: 10px;
    }

    .ia-center {
        position: static;
        transform: none;
        margin: 180px auto 0;
    }
}

@media (max-width: 560px) {
    .container {
        width: min(var(--container), calc(100% - 24px));
    }

    .introActions,
    .cta-panel__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .introActions .btn,
    .cta-panel__actions .btn {
        width: 100%;
    }
}

/* Sección "Funcionalidades": el tabPanel del home aplica display:grid 1fr 1.05fr
   pero aquí el contenido interno ya viene como `.featPanelLayout` (mock izq +
   copy der). Override a block para que sea featPanelLayout quien controle el
   grid interno y los mocks queden a la izquierda. */
/* Tabs panel switcher:
   - El wrapper `.tabsPanels` mantiene el fondo blanco (antes vivía en
     `.featPanelLayout`) → la card NO se desvanece al cambiar de tab.
   - Los paneles inactivos quedan en `position: absolute` (no aportan
     altura). Sólo el activo está en flujo y define la altura.
   - Un script lee `scrollHeight` del activo y lo aplica al wrapper para
     animar `height` de forma suave entre paneles de distinto tamaño. */
#funcionalidades .tabsPanels {
    position: relative;
    margin-top: 20px;
    padding: 28px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 248, 0.90)),
        radial-gradient(circle at top right, rgba(185, 210, 212, 0.18), transparent 32%);
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    /* Altura fija (igualada por JS al panel más alto) — sin transition. */
    contain: layout paint;
}

/* Quita backdrop-filter (blur) en los elementos pesados dentro de los
   paneles. El blur es costoso en GPU y al hacer fade + cambio de altura
   simultáneo provoca lag. Compensamos con un background ligeramente más
   opaco para conservar el "glass". */
#funcionalidades .featMock,
#funcionalidades .featTabsBox,
#funcionalidades .featTabPanel,
#funcionalidades .micro-card,
#funcionalidades .ia-panel,
#funcionalidades .aiSupportCard,
#funcionalidades .cta-panel {
    backdrop-filter: none;
}

/* Dentro de #funcionalidades el `.featPanelLayout` pierde su propio
   fondo (ahora vive en `.tabsPanels`). */
#funcionalidades .featPanelLayout {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    /* El layout ocupa todo el alto del panel (los paneles están
       igualados por JS) para que el mockup + sidebar se estiren a la
       misma medida en TODAS las pestañas. `grid-auto-rows: 1fr` fuerza
       que el row tome el alto completo del grid (sin él el row queda
       en `auto` y mide el contenido más alto, no la altura del padre). */
    height: 100%;
    align-items: stretch;
    grid-auto-rows: 1fr;
}

/* El copy se ancla arriba aunque la celda esté estirada. */
#funcionalidades .featPanelCopy {
    align-self: start;
}

/* Los paneles SIEMPRE están visibles (opacity 1) — el fade ocurre sólo
   sobre los hijos que cambian: `.featMockMain` y `.featPanelCopy`. Así la
   sidebar (idéntica en todos los paneles) NUNCA se desvanece, y como las
   6 sidebars son HTML idéntico apiladas en la misma posición, visualmente
   sólo se percibe una. */
#funcionalidades .tabsPanels .tabPanel,
#funcionalidades .tabsPanels .tabPanel[hidden] {
    position: absolute;
    top: 28px;
    left: 28px;
    right: 28px;
    display: block;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    visibility: visible;
    pointer-events: none;
    transform: none;
    animation: none;
    contain: layout paint;
    backface-visibility: hidden;
}

#funcionalidades .tabsPanels .tabPanel.is-active {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    pointer-events: auto;
}

/* Fade solo en lo que cambia con cada tab. Crossfade simultáneo. */
#funcionalidades .tabsPanels .tabPanel .featMockMain,
#funcionalidades .tabsPanels .tabPanel .featPanelCopy {
    opacity: 0;
    transition: opacity 0.32s ease;
    will-change: opacity;
}

#funcionalidades .tabsPanels .tabPanel.is-active .featMockMain,
#funcionalidades .tabsPanels .tabPanel.is-active .featPanelCopy {
    opacity: 1;
}

/* El `.featMockWindow` (caja blanca del mockup con borde + radius) NO
   debe verse en paneles inactivos — su caja se solaparía con la del
   activo. La hacemos transparente y sin borde en inactivos. La del
   activo conserva su look completo. */
#funcionalidades .tabsPanels .tabPanel:not(.is-active) .featMockWindow {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Las sidebars de paneles inactivos se ocultan — sólo se ve la del
   panel activo. Como las 6 son HTML idéntico apiladas en la misma
   posición, mostrar sólo una elimina cualquier duplicación visual
   (línea de fin, "Salir", etc.). */
#funcionalidades .featMockSidebar {
    opacity: 1;
}

#funcionalidades .tabsPanels .tabPanel:not(.is-active) .featMockSidebar {
    visibility: hidden;
}

/* ===== Overrides para los mockups que reusan .capUi ===== */

/* Historia: 4 columnas (Fecha + Paciente + Especialidad + Descripción). */
#panel-historia .capUiTableHead,
#panel-historia .capUiTableRow {
    grid-template-columns: 88px 1.6fr 1fr 90px;
}

/* Tratamientos: Código (estrecho) + Tratamiento + Paciente (ellipsis si
   se sale) + Sesiones (pill). */
#panel-consulta .capUiTableHead,
#panel-consulta .capUiTableRow {
    grid-template-columns: 56px 1.4fr 1.1fr 78px;
}

#panel-consulta .capUiTableRow .capUiUser,
#panel-consulta .capUiTableRow .capUiDesc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Tabla de tratamientos: limitar altura visual del wrapper para que las
   filas extras se recorten sin afectar al mockup. */
#panel-consulta .featMockBody {
    overflow: hidden;
}

#panel-consulta .capUiTable {
    max-height: 100%;
    overflow: hidden;
}

/* ========================================================
   TRATAMIENTOS — lista de fondo atenuada + modal flotante
   ======================================================== */
.tratamientosMockBody {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 18px;
    box-sizing: border-box;
}

.tratamientosBackdrop {
    position: absolute;
    inset: 0;
    filter: brightness(0.85);
    opacity: 0.55;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.tratamientosBackdrop .capUi {
    box-shadow: none;
    border-radius: 0;
    border: 0;
    height: 100%;
}

.tratamientosBackdrop .capUiTable {
    height: 100%;
    overflow: hidden;
    border-radius: 0;
}

.tratamientosBackdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 32, 42, 0.18);
    pointer-events: none;
}

.tratamientosModal {
    position: relative;
    width: calc(100% - 24px);
    max-width: 420px;
    margin: 0 auto;
    z-index: 2;
}

.tratamientosModalHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(90deg, #0a4d5e 0%, #0c5d72 100%);
    color: #fff;
    border-top-left-radius: var(--radius-md, 20px);
    border-top-right-radius: var(--radius-md, 20px);
}

.tratamientosModalHead strong {
    font-size: 0.78rem;
    font-weight: 700;
}

.tratamientosModalChip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.tratamientosModalCard {
    background: #fff;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    border-top: 0;
    border-bottom-left-radius: var(--radius-md, 20px);
    border-bottom-right-radius: var(--radius-md, 20px);
    box-shadow: 0 10px 24px rgba(0, 61, 79, 0.14);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tratamientosModalFields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.tratamientosModalFields .patientField {
    min-width: 0;
    overflow: hidden;
}

.tratamientosFieldValue {
    height: auto;
    font-size: 0.66rem;
    color: var(--text, #23343a);
    border-bottom: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Acordeón de 3 filas (Precio / Costes / Rentabilidad). Cada uno con
   una barra lateral de color distinto y un "+" a la derecha. */
.tratamientosModalAccordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tratamientosAccordionItem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 18px;
    border: 1px solid rgba(0, 85, 109, 0.12);
    border-radius: 8px;
    background: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text, #23343a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tratamientosAccordionItem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.tratamientosAccordionPrice::before {
    background: #2e9b5a;
}

.tratamientosAccordionCost::before {
    background: #d04545;
}

.tratamientosAccordionProfit::before {
    background: #d67d6d;
}

.tratamientosAccordionIcon {
    color: var(--brand-soft, #36848b);
    font-size: 0.78rem;
}

.tratamientosAccordionLabel {
    flex: 1;
}

.tratamientosAccordionPlus {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.18));
    color: var(--text-soft, #5b6d74);
    font-size: 0.72rem;
    line-height: 16px;
    text-align: center;
}

/* Pacientes: 7 columnas (Código, Nombre, Población, Provincia, Grupo,
   Credenciales, Acciones). La tabla excede el ancho del mockup → scroll
   horizontal interno.

   IMPORTANTE: para que la tabla no expanda el ancho del panel, todos los
   ancestros del scroll-container necesitan `min-width: 0` (grid/flex
   items por defecto tienen min-width: auto = ancho de su contenido). */
#panel-pacientes .featMockMain,
#panel-pacientes .featMockBody,
#panel-pacientes .capUi {
    min-width: 0;
}

#panel-pacientes .featMockBody {
    overflow: hidden;
}

#panel-pacientes .capUiTableScroll {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    border-radius: var(--radius-sm, 14px);
    -webkit-overflow-scrolling: touch;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 85, 109, 0.28) transparent;
    /* Padding inferior para que las filas no se peguen al scrollbar. */
    padding-bottom: 4px;
}

/* Scrollbar estilo móvil: fino, redondeado, semitransparente. */
#panel-pacientes .capUiTableScroll::-webkit-scrollbar {
    height: 6px;
}

#panel-pacientes .capUiTableScroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 6px;
}

#panel-pacientes .capUiTableScroll::-webkit-scrollbar-thumb {
    background: rgba(0, 85, 109, 0.22);
    border-radius: 99px;
    transition: background 0.2s;
}

#panel-pacientes .capUiTableScroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 85, 109, 0.42);
}

#panel-pacientes .capUiTableScroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

#panel-pacientes .capUiTableHead,
#panel-pacientes .capUiTableRow {
    grid-template-columns: 70px 180px 130px 110px 80px 90px 130px;
    /* `min-content` evitaba squeeze; `width: 820px` cortaba el background
       del header al overflow horizontal. `max-content` asegura que el
       contenedor mida EXACTAMENTE lo que ocupan las columnas + gaps +
       padding → header y filas siempre coinciden en width. */
    width: max-content;
    min-width: 100%;
    box-sizing: content-box;
}

/* Agenda extendida 09:00 → 22:00 (14 franjas). Override del agendaMockMini
   global (que sólo tiene 5 horas) para esta página: columna horas con
   14 celdas y grid de citas con 28 rows (2 medias horas por hora). */
#panel-agenda .agendaMockMiniExtended {
    --rowH: 17px;
}

#panel-agenda .agendaMockMiniExtended .agendaMockMiniHours {
    grid-template-rows: repeat(14, calc(var(--rowH) * 2));
}

#panel-agenda .agendaMockMiniExtended .agendaMockMiniGrid {
    grid-template-rows: repeat(28, var(--rowH));
}

/* Citas: padding mínimo + texto más legible. Strong (hora) en una línea,
   span (nombre) debajo. Si el slot es muy corto, oculta el nombre para
   no solaparse. */
#panel-agenda .agendaMockMiniExtended .agendaMockMiniApp {
    padding: 2px 6px;
    line-height: 1.15;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#panel-agenda .agendaMockMiniExtended .agendaMockMiniApp strong {
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

#panel-agenda .agendaMockMiniExtended .agendaMockMiniApp span {
    font-size: 0.64rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header de columnas con estilo más marcado: fondo gris suave, texto
   uppercase brand, sin separación entre celdas. Queda como un bloque
   claramente diferenciado de las filas. */
#panel-pacientes .capUiTableHead {
    background: #eef4f5;
    color: var(--brand, #00556d);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 85, 109, 0.12);
}

/* Filas con separadores tenues y altura consistente. */
#panel-pacientes .capUiTableRow {
    border-top: 1px solid rgba(0, 85, 109, 0.06);
}

#panel-pacientes .capUiTableRow:first-of-type {
    border-top: 0;
}

/* Estilo "✕" (sin credenciales) y botones de acciones del mockup. */
.capUiNo {
    color: #d04545;
    font-weight: 700;
    text-align: center;
}

.capUiActions {
    display: inline-flex;
    gap: 6px;
}

.capUiBtn {
    padding: 4px 8px;
    border-radius: 8px;
    background: #f6fafa;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-soft, #5b6d74);
}

.capUiBtnDanger {
    color: #d04545;
}

/* Pill amarillo "Uso 0 de 1" usado en tratamientos. */
.capUiPill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff4d6;
    color: #8a6300;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ===== Analítica: 3 KPI cards + chart ===== */
.capStatsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.capStatCard {
    background: #fff;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0, 64, 82, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.capStatLabel {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft, #5b6d74);
}

.capStatValue {
    color: var(--brand, #00556d);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.capStatDelta {
    font-size: 0.66rem;
    color: var(--text-soft, #5b6d74);
}

.capStatDeltaDown {
    color: #d04545;
    font-weight: 600;
}

.capStatHint {
    font-size: 0.66rem;
    color: var(--text-soft, #5b6d74);
}

/* ========================================================
   ANALÍTICA — chart en card con ejes/regla
   ======================================================== */
.analyticsMockBody {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.analyticsChartCard {
    background: #fff;
    border: 1px solid var(--line, rgba(0, 85, 109, 0.12));
    border-radius: 12px;
    padding: 14px 14px 8px;
    box-shadow: 0 4px 10px rgba(0, 61, 79, 0.04);
}

.analyticsChartArea {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    align-items: stretch;
    max-height: 180px;
    height: 180px;
}

/* Eje Y — escala vertical con números. */
.analyticsYAxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.5rem;
    color: var(--text-soft, #5b6d74);
    text-align: right;
    padding: 2px 0;
}

.analyticsChartInner {
    position: relative;
    border-left: 1px solid rgba(0, 85, 109, 0.18);
    border-bottom: 1px solid rgba(0, 85, 109, 0.18);
    padding: 0;
}

.analyticsChartInner .capChart {
    width: 100%;
    height: 100%;
    display: block;
}

/* Eje X — meses debajo, repartidos uniformes. Indent 36px (eje Y 28 + gap 8). */
.analyticsXAxis {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    font-size: 0.5rem;
    color: var(--text-soft, #5b6d74);
    padding-top: 6px;
    margin-left: 36px;
    text-align: center;
}

/* ===== MOBILE: el mockup en formato apilado, sin sidebar dark ===== */
/* La sidebar dark es decorativa (la app real); en mobile ocupa toda la
   columna del panel y deja al usuario sin ver el cuerpo del mockup. */
@media (max-width: 1024px) {
    #funcionalidades .featMockDash {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    #funcionalidades .featMockSidebar {
        display: none;
    }

    /* Quitar padding lateral interno del mockup (sección izquierda
       del .featPanelLayout) en tablet/mobile. */
    #funcionalidades .featMockBody {
        padding-left: 0;
        padding-right: 0;
    }

    #funcionalidades .featMockToolbar {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* La agenda extendida también se compacta para no estirar el panel. */
    #panel-agenda .agendaMockMiniExtended {
        --rowH: 13px;
    }

    /* Ficha paciente: foto ARRIBA + campos abajo (1 col) para que los
       inputs no se aplasten. */
    #panel-pacientes .patientFormBody {
        grid-template-columns: 1fr;
        grid-template-areas:
            "aside"
            "fields"
            "full";
    }

    #panel-pacientes .patientFormAside {
        max-width: 220px;
        margin: 0 auto;
        width: 100%;
        align-items: center;
    }

    #panel-pacientes .patientAvatarBox {
        aspect-ratio: 1 / 1;
        width: 110px;
        max-width: 110px;
    }
}