/* Sistema visual transversal: superficies ligeras, agrupación clara y estados visibles. */

.navegacion-recomendaciones {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.navegacion-recomendaciones__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-3);
    color: rgba(251, 250, 248, .52);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.navegacion-recomendaciones__cabecera span:last-child {
    color: #a9bce9;
    font-size: 15px;
}

.navegacion-recomendaciones__cerrar,
.navegacion-recomendacion__cerrar {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.navegacion-recomendaciones__cerrar:hover,
.navegacion-recomendacion__cerrar:hover {
    background: rgba(127, 141, 162, .14);
    color: var(--ink-900);
}

.navegacion-recomendaciones__cerrar .icono,
.navegacion-recomendacion__cerrar .icono {
    width: 14px;
    height: 14px;
}

.navegacion-recomendaciones__lista {
    display: grid;
    gap: var(--space-2);
}

.navegacion-recomendacion {
    display: flex;
    min-width: 0;
    gap: var(--space-2);
    padding: 10px;
    border: 1px solid rgba(251, 250, 248, .1);
    border-radius: 13px;
    color: var(--paper-000);
    text-decoration: none;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.navegacion-recomendacion-contenedor {
    position: relative;
    min-width: 0;
}

.navegacion-recomendacion-contenedor.oculta {
    display: none;
}

.navegacion-recomendacion-contenedor > .navegacion-recomendacion {
    padding-right: 32px;
}

.navegacion-recomendacion__cerrar {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 1;
}

.navegacion-recomendaciones[hidden] {
    display: none;
}

.navegacion-recomendacion:hover {
    border-color: rgba(251, 250, 248, .28);
    background: rgba(251, 250, 248, .11);
    color: var(--paper-000);
    transform: translateY(-1px);
}

.navegacion-recomendacion--azul { background: linear-gradient(145deg, rgba(46, 76, 140, .72), rgba(46, 76, 140, .3)); }
.navegacion-recomendacion--verde { background: linear-gradient(145deg, rgba(58, 107, 76, .72), rgba(58, 107, 76, .28)); }
.navegacion-recomendacion--naranja { background: linear-gradient(145deg, rgba(156, 107, 46, .72), rgba(156, 107, 46, .28)); }
.navegacion-recomendacion--violeta { background: linear-gradient(145deg, rgba(93, 75, 137, .72), rgba(93, 75, 137, .28)); }

.navegacion-recomendacion__icono {
    display: inline-flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(251, 250, 248, .15);
    color: #fff;
}

.navegacion-recomendacion__icono .icono {
    width: 15px;
    height: 15px;
}

.navegacion-recomendacion__cuerpo {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.navegacion-recomendacion__cuerpo small {
    color: rgba(251, 250, 248, .68);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.navegacion-recomendacion__cuerpo strong,
.navegacion-recomendacion__cuerpo > span,
.navegacion-recomendacion__cuerpo em {
    overflow: hidden;
    text-overflow: ellipsis;
}

.navegacion-recomendacion__cuerpo strong {
    font-size: 12px;
    line-height: 1.25;
}

.navegacion-recomendacion__cuerpo > span {
    display: -webkit-box;
    color: rgba(251, 250, 248, .68);
    font-size: 11px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.navegacion-recomendacion__cuerpo em {
    margin-top: 3px;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: var(--weight-semibold);
}

.navegacion-recomendacion__cuerpo em b {
    font-size: 13px;
    font-weight: inherit;
}

.onboarding-resumen__avance strong {
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -.04em;
}

.dashboard .estado-badge {
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: none;
}

/* Controles comunes: un solo lenguaje para acciones, filtros y tarjetas. */
.boton,
.control-link-button,
.control-main button {
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.boton:hover,
.control-link-button:hover,
.control-main button:hover {
    box-shadow: 0 5px 14px rgba(46, 76, 140, .16);
    transform: translateY(-1px);
}

@media (min-width: 1024px) {
    .navegacion-principal {
        padding: 18px 14px;
    }

    .navegacion-principal__grupos {
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .navegacion-principal__grupos {
        gap: 20px;
    }

    .navegacion-principal__pie {
        margin-top: 20px;
    }
}

@media (max-width: 700px) {
    .navegacion-recomendaciones {
        margin-top: var(--space-4);
    }

}

/* Editor editorial: un lienzo blanco continuo. Los colores quedan para
   acciones, estados y contornos de inserción. */
body:has(.nota-editor-pagina),
body:has(.nota-editor-pagina) .contenido,
body:has(.nota-editor-pagina) .cabecera-2,
body:has(.nota-editor-pagina) .nota-documento,
body:has(.nota-editor-pagina) .nota-configuracion__tarjeta,
body:has(.nota-editor-pagina) .nota-editor-acciones,
body:has(.nota-editor-pagina) .nota-documento__legado textarea,
body:has(.nota-editor-pagina) .np-insert-popover,
body:has(.nota-editor-pagina) .np-config-block,
body:has(.nota-editor-pagina) .np-text-toolbar,
body:has(.nota-editor-pagina) .np-html-panel__textarea,
body:has(.nota-editor-pagina) .np-html-panel__acciones button {
    background: #fff;
}

body:has(.nota-editor-pagina) .ProseMirror code,
body:has(.nota-editor-pagina) .np-image select,
body:has(.nota-editor-pagina) .np-image__config input,
body:has(.nota-editor-pagina) .np-image__config select,
body:has(.nota-editor-pagina) .np-config-block__fields input,
body:has(.nota-editor-pagina) .np-config-block__fields select,
body:has(.nota-editor-pagina) .np-divider__controls select {
    background: #fff;
}

body:has(.nota-editor-pagina) .np-mas,
body:has(.nota-editor-pagina) .np-block-row__btn,
body:has(.nota-editor-pagina) .np-config-block select,
body:has(.nota-editor-pagina) .np-config-block input,
body:has(.nota-editor-pagina) .nota-embargo-control,
body:has(.nota-editor-pagina) .nota-aprobacion-control,
body:has(.nota-editor-pagina) .nota-revision__resumen {
    background: #fff;
}

body:has(.nota-editor-pagina) .nota-editor-pagina,
body:has(.nota-editor-pagina) .nota-editor-pagina select,
body:has(.nota-editor-pagina) .nota-editor-pagina input,
body:has(.nota-editor-pagina) .nota-editor-pagina textarea {
    background: #fff;
}

body:has(.nota-editor-pagina) .np-mas,
body:has(.nota-editor-pagina) .np-block-row__btn {
    border-color: #e7eaee;
}

body:has(.nota-editor-pagina) .nota-documento,
body:has(.nota-editor-pagina) .nota-configuracion__tarjeta {
    border-color: #e7eaee;
    box-shadow: none;
}

body:has(.nota-editor-pagina) .nota-editor-acciones {
    border-color: #e7eaee;
    box-shadow: none;
    backdrop-filter: none;
}

body:has(.nota-editor-pagina) .np-text-toolbar {
    border-color: #e7eaee;
    box-shadow: none;
}

body:has(.nota-editor-pagina) .np-text-toolbar button:hover,
body:has(.nota-editor-pagina) .np-insert-popover__item:hover {
    background: #f8fafc;
}

body:has(.nota-editor-pagina) [data-block-type="contact_block"],
body:has(.nota-editor-pagina) .np-event__preview,
body:has(.nota-editor-pagina) .np-download__preview,
body:has(.nota-editor-pagina) .np-social__preview span,
body:has(.nota-editor-pagina) .np-image__placeholder,
body:has(.nota-editor-pagina) .np-gallery__preview > div,
body:has(.nota-editor-pagina) .np-content-card__media,
body:has(.nota-editor-pagina) .np-video__media {
    background: #fff;
}

body:has(.nota-editor-pagina) .np-image__placeholder,
body:has(.nota-editor-pagina) .np-gallery__preview > div,
body:has(.nota-editor-pagina) .np-content-card__media,
body:has(.nota-editor-pagina) .np-video__media {
    border-color: #cfd6df;
    color: var(--ink-700);
}

body:has(.nota-editor-pagina) .np-download__icon,
body:has(.nota-editor-pagina) .np-insert-popover__icono,
body:has(.nota-editor-pagina) .np-image__placeholder small {
    border: 1px solid #e7eaee;
    background: #fff;
}

body:has(.nota-editor-pagina) .np-social__preview span[data-empty="true"] {
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .navegacion-recomendacion,
    .boton,
    .control-link-button,
    .control-main button {
        transition: none;
    }

    .navegacion-recomendacion:hover,
    .boton:hover,
    .control-link-button:hover,
    .control-main button:hover {
        transform: none;
    }
}

/* Revisión visual: superficies planas, contraste suave y menos decoración. */
body:not(.control-body) {
    background: #fff;
}

.shell:not(.shell--public) .contenido {
    background: #fff;
}

.navegacion-principal {
    color: var(--ink-900);
    background: #fff;
    border-right: 1px solid #e6eaf0;
}

.navegacion-principal .marca-app__simbolo {
    background: var(--blue-signal);
    color: #fff;
}

.navegacion-principal__cerrar {
    color: var(--ink-700);
}

.navegacion-principal__colapsar {
    color: var(--ink-700);
}

.navegacion-principal__cerrar:hover {
    background: #f1f4f8;
}

.navegacion-principal__colapsar:hover {
    background: #f1f4f8;
    color: var(--ink-900);
}

.navegacion-principal__crear {
    border: 1px solid #dce3ee;
    background: #f4f7fc;
    color: var(--blue-signal);
    box-shadow: none;
}

.navegacion-principal__crear:hover {
    border-color: #b8c8e8;
    background: #edf3ff;
}

.navegacion-grupo__titulo,
.navegacion-recomendaciones__cabecera {
    color: #9aa4b2;
}

.navegacion-grupo > a,
.navegacion-principal__pie > a {
    color: #667085;
    border-radius: 8px;
}

.navegacion-grupo > a:hover,
.navegacion-principal__pie > a:hover {
    color: var(--ink-900);
    background: #f4f6f9;
}

.navegacion-grupo > a.activo,
.navegacion-principal__pie > a.activo {
    color: var(--blue-signal);
    background: #edf3ff;
}

.navegacion-grupo > a.activo::before {
    background: #4d7de4;
}

.navegacion-progreso {
    background: #e7edf9;
    color: var(--blue-signal);
}

.navegacion-principal__pie {
    border-top-color: #e6eaf0;
}

.navegacion-principal__pie strong {
    color: var(--ink-900);
}

.navegacion-principal__pie small,
.navegacion-principal__version {
    color: #98a1ae;
}

.navegacion-recomendacion,
.navegacion-recomendacion:hover {
    border: 1px solid #e3e8f0;
    border-left-width: 3px;
    background: #fff;
    color: var(--ink-900);
    transform: none;
}

.navegacion-recomendaciones__cerrar,
.navegacion-recomendacion__cerrar {
    color: #98a1ae;
}

.navegacion-recomendaciones__cerrar:hover,
.navegacion-recomendacion__cerrar:hover {
    background: #f1f4f8;
    color: var(--ink-900);
}

.navegacion-recomendacion--azul { border-left-color: #4d7de4; }
.navegacion-recomendacion--verde { border-left-color: #4f8b6b; }
.navegacion-recomendacion--naranja { border-left-color: #b98542; }
.navegacion-recomendacion--violeta { border-left-color: #8066ad; }

.navegacion-recomendacion__icono {
    background: #f0f3f8;
    color: var(--blue-signal);
}

.navegacion-recomendacion--verde .navegacion-recomendacion__icono { color: #4f8b6b; }
.navegacion-recomendacion--naranja .navegacion-recomendacion__icono { color: #a36f32; }
.navegacion-recomendacion--violeta .navegacion-recomendacion__icono { color: #8066ad; }

.navegacion-recomendacion__cuerpo small { color: #8b96a5; }
.navegacion-recomendacion__cuerpo > span { color: #718096; }
.navegacion-recomendacion__cuerpo em { color: var(--blue-signal); }

.barra-superior {
    background: rgba(255, 255, 255, .96);
    box-shadow: none;
    backdrop-filter: none;
}

.shell--cliente-activo .barra-superior {
    background: #fff;
    box-shadow: inset 0 -2px var(--client-accent);
}

.contenido,
.dashboard-panel,
.onboarding-resumen,
.tabla-tarjeta,
.app-form-section,
.perfil-tarjeta,
.nota-panel,
.campana-formulario__seccion,
.multimedia-formulario__seccion,
.newsletter-form > section,
.design-editor,
.plantilla-datos,
.plantilla-documento {
    box-shadow: none;
}

.dashboard-panel,
.onboarding-resumen,
.tabla-tarjeta,
.app-form-section,
.perfil-tarjeta,
.nota-panel,
.campana-formulario__seccion,
.multimedia-formulario__seccion,
.newsletter-form > section,
.design-editor,
.plantilla-datos,
.plantilla-documento {
    border-radius: 12px;
    border-color: #e5e9ef;
}

.dashboard-panel {
    background: #fff;
}

.shell:not(.shell--public) .onboarding-resumen {
    border: 1px solid #e0e6f0;
    background: #fff;
}

.boton,
.dashboard .boton,
.control-link-button,
.control-main button {
    border-radius: 8px;
    box-shadow: none;
}

.boton:hover,
.control-link-button:hover,
.control-main button:hover {
    box-shadow: none;
    transform: none;
}

@media (max-width: 700px) {
    .shell:not(.shell--public),
    .shell:not(.shell--public) .contenido {
        background: #fff;
    }

    .navegacion-principal {
        box-shadow: 8px 0 24px rgba(25, 27, 32, .08);
    }
}