/* ==========================================================
   NOESOR - RESPONSIVE GLOBAL
   Este archivo se carga de último para normalizar todas las
   pantallas en portátiles, tabletas y móviles.
   ========================================================== */

/* Evita que cualquier grid o contenido extenso ensanche la página. */
.page-shell,
.page-shell > *,
main,
section,
article,
.card,
.page-header,
.projects-page,
.history-page,
.account-page,
.engineering-page,
.integrations-page,
.analyze-page,
.database-page,
.generation-page,
.relationship-workspace {
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/* ==========================================================
   PORTÁTILES: 1201px - 1440px
   ========================================================== */
@media (min-width: 1201px) and (max-width: 1440px) {
    .topbar {
        padding-inline: 20px;
    }

    .topbar-inner {
        gap: 18px;
    }

    .topbar-nav {
        gap: 1px;
    }

    .nav-item {
        padding-inline: 9px;
        font-size: .76rem;
    }

    .page-shell {
        padding-top: 32px;
    }

    .page-header h1,
    .projects-hero h1,
    .history-hero h1,
    .engineering-hero h1,
    .integrations-hero h1,
    .analysis-read-hero h1,
    .project-detail-hero h1,
    .compare-hero h1,
    .database-header h1,
    .generation-header h1,
    .relationship-page-header h1,
    .entity-page-header h1,
    .structure-page-header h1 {
        font-size: clamp(2.35rem, 3.6vw, 4rem);
        overflow-wrap: anywhere;
    }

    .projects-page,
    .history-page,
    .engineering-page,
    .integrations-page,
    .analyze-page,
    .database-page,
    .generation-page,
    .relationship-workspace,
    .account-page {
        padding-inline: 28px;
    }

    .projects-hero,
    .history-hero,
    .engineering-hero,
    .integrations-hero,
    .analysis-read-hero,
    .project-detail-hero,
    .compare-hero {
        gap: 24px;
    }

    .analysis-layout,
    .relationship-layout,
    .database-layout {
        grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
        gap: 22px;
    }

    .project-structure-layout,
    .structure-layout,
    .entity-designer-layout {
        grid-template-columns: 290px minmax(0, 1fr);
        gap: 22px;
    }

    .integrations-grid,
    .projects-grid,
    .history-grid,
    .engineering-grid {
        gap: 16px;
    }
}

/* ==========================================================
   TABLETAS Y PORTÁTILES ESTRECHOS
   ========================================================== */
@media (max-width: 1200px) {
    .analysis-layout,
    .relationship-layout,
    .database-layout,
    .project-structure-layout,
    .structure-layout,
    .entity-designer-layout,
    .generation-layout {
        grid-template-columns: 1fr !important;
    }

    .relationship-form-card,
    .structure-sidebar,
    .entity-sidebar,
    .database-sidebar,
    .generation-sidebar {
        position: static !important;
        top: auto !important;
    }

    .entity-diagram,
    .history-grid,
    .projects-grid,
    .database-validation-grid,
    .integrations-grid,
    .engineering-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .analysis-executive-dashboard,
    .project-detail-overview,
    .projects-hero,
    .history-hero,
    .engineering-hero,
    .integrations-hero,
    .analysis-read-hero,
    .project-detail-hero,
    .compare-hero {
        grid-template-columns: 1fr !important;
    }

    .analysis-project-stats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .analysis-score-rich,
    .projects-hero-actions,
    .history-hero-actions {
        width: 100%;
        max-width: none;
    }
}

/* ==========================================================
   TABLETAS PEQUEÑAS
   ========================================================== */
@media (max-width: 992px) {
    .topbar {
        padding: 10px 14px;
    }

    .topbar-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
        padding-left: 12px;
    }

    .brand-logo-desktop {
        display: none;
    }

    .brand-logo-mobile {
        display: block;
        width: 36px;
        height: 36px;
    }

    .topbar-nav {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .topbar-nav::-webkit-scrollbar {
        display: none;
    }

    .topbar-auth .nav-item,
    .topbar-cta span:first-child,
    .language-selector-icon {
        display: none;
    }

    .topbar-cta {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .language-select {
        min-width: 62px;
        padding-left: 10px;
    }

    .page-shell {
        padding-top: 28px;
    }

    .projects-page,
    .history-page,
    .engineering-page,
    .integrations-page,
    .analyze-page,
    .database-page,
    .generation-page,
    .relationship-workspace,
    .account-page {
        padding-inline: 20px;
    }

    .page-header,
    .relationship-page-header,
    .database-header,
    .generation-header,
    .entity-page-header,
    .structure-page-header,
    .profile-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-header {
        grid-template-columns: auto 1fr;
    }

    .profile-plan {
        grid-column: 1 / -1;
    }

    .database-summary,
    .relationship-total-card,
    .entity-total-card,
    .structure-score {
        width: 100%;
        max-width: none;
    }

    .relationship-toolbar,
    .database-toolbar,
    .entity-toolbar,
    .structure-toolbar,
    .toolbar {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .relationship-entities,
    .profile-grid,
    .account-shell {
        grid-template-columns: 1fr;
    }

    .account-intro {
        display: none;
    }

    .account-shell,
    .account-shell-compact,
    .profile-shell {
        width: min(100%, 680px);
    }
}

/* ==========================================================
   MÓVILES
   ========================================================== */
@media (max-width: 768px) {
    .topbar-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 52px;
    }

    .topbar-actions {
        gap: 6px;
    }

    .account-menu-trigger > span:nth-child(2) {
        display: none;
    }

    .page-shell {
        padding-top: 22px;
    }

    .page-header {
        margin-bottom: 26px;
    }

    .page-header h1,
    .projects-hero h1,
    .history-hero h1,
    .engineering-hero h1,
    .integrations-hero h1,
    .analysis-read-hero h1,
    .project-detail-hero h1,
    .compare-hero h1,
    .database-header h1,
    .generation-header h1,
    .relationship-page-header h1,
    .entity-page-header h1,
    .structure-page-header h1,
    .account-card h1,
    .profile-header h1 {
        font-size: clamp(1.9rem, 8.8vw, 2.7rem) !important;
        line-height: 1.08;
    }

    .preview-grid,
    .trust-grid,
    .workflow-grid,
    .history-grid,
    .projects-grid,
    .database-validation-grid,
    .integrations-grid,
    .engineering-grid,
    .entity-diagram,
    .analysis-deliverables-grid,
    .analysis-project-stats,
    .analysis-document-identity,
    .analysis-next-step-panel,
    .compare-score-grid,
    .compare-differences-grid,
    .refinement-columns {
        grid-template-columns: 1fr !important;
    }

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

    .relationship-toolbar,
    .database-toolbar,
    .entity-toolbar,
    .structure-toolbar,
    .toolbar,
    .projects-hero-actions,
    .history-hero-actions,
    .engineering-actions,
    .integrations-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .relationship-toolbar .button,
    .database-button,
    .entity-toolbar .button,
    .structure-toolbar .button,
    .toolbar .button,
    .projects-hero-actions .button,
    .history-hero-actions .button,
    .engineering-actions .button,
    .integrations-actions .button {
        width: 100%;
        justify-content: center;
    }

    .analysis-deliverable-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .analysis-deliverable-card .button {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .analysis-recommended-actions {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .relationship-item,
    .profile-details div,
    .audit-item {
        grid-template-columns: 1fr;
    }

    .relationship-details {
        margin-top: 12px;
    }

    .entity-list {
        max-height: none;
    }

    .database-script-editor {
        min-height: 360px;
    }

    .table-responsive,
    .database-table-wrap,
    .relationship-table-wrap,
    .history-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-footer {
        padding-inline: 18px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-meta {
        align-items: flex-start;
    }
}

/* ==========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================== */
@media (max-width: 576px) {
    .topbar {
        padding-inline: 8px;
    }

    .topbar-inner {
        border-radius: 14px;
        gap: 8px;
        padding-inline: 9px;
    }

    .topbar-nav .nav-item {
        min-height: 36px;
        padding-inline: 9px;
        font-size: .72rem;
    }

    .language-selector {
        display: none;
    }

    .projects-page,
    .history-page,
    .engineering-page,
    .integrations-page,
    .analyze-page,
    .database-page,
    .generation-page,
    .relationship-workspace,
    .account-page {
        padding-inline: 12px;
    }

    .card,
    .account-card,
    .projects-hero,
    .history-hero,
    .engineering-hero,
    .integrations-hero,
    .analysis-read-hero,
    .project-detail-hero,
    .compare-hero,
    .profile-header {
        padding: 18px;
        border-radius: 18px;
    }

    .analysis-quick-actions,
    .analysis-pro-module-grid {
        grid-template-columns: 1fr !important;
    }

    .analysis-project-stats {
        grid-template-columns: 1fr !important;
    }

    .structure-count,
    .database-count,
    .database-script-lines,
    .relationship-total-card {
        min-width: 0;
    }

    .history-card,
    .project-card,
    .integration-card,
    .engineering-card {
        padding: 18px;
    }

    .account-card-heading,
    .workspace-meta {
        flex-direction: column;
    }

    .profile-details div {
        gap: 5px;
    }

    .button,
    .database-button,
    .generation-button {
        min-height: 44px;
    }
}

@media (max-width: 390px) {
    .brand-logo-mobile {
        width: 31px;
        height: 31px;
    }

    .topbar-nav .nav-item {
        padding-inline: 7px;
    }

    .account-menu-trigger {
        padding-inline: 6px;
    }

    .account-menu-avatar {
        width: 27px;
        height: 27px;
    }
}

/* ==========================================================
   AJUSTE FINAL DE ALTURA EN PÁGINAS CORTAS
   Mantiene el footer cercano al contenido sin afectar páginas
   largas ni los espacios de trabajo internos.
   ========================================================== */

@media (min-width: 993px) {
    .page-shell:has(> .noesor-home) {
        padding-bottom: 0;
    }
}

/* ==========================================================
   ENCABEZADO RESPONSIVE CORREGIDO
   - Usa más ancho en escritorio para que quepan todas las opciones.
   - Nunca recorta enlaces.
   - Cambia a menú hamburguesa antes de cualquier superposición.
   ========================================================== */

.topbar-inner {
    width: min(100%, 1480px);
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: clamp(12px, 1.25vw, 22px);
}

.brand,
.topbar-actions,
.topbar-auth,
.language-selector,
.account-menu {
    flex: 0 0 auto;
}

.brand-logo {
    max-width: 154px;
}

.topbar-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: visible;
}

.topbar-nav .nav-item {
    flex: 0 0 auto;
    padding-inline: clamp(7px, .65vw, 11px);
    font-size: clamp(.72rem, .68vw, .81rem);
}

.topbar-actions {
    min-width: max-content;
    gap: 8px;
}

.language-selector {
    width: auto;
    max-width: 94px;
}

.language-select {
    width: 90px;
    min-width: 90px;
    padding-left: 32px;
}

.account-menu-trigger {
    max-width: 286px;
}

.account-menu-identity {
    min-width: 0;
}

.account-menu-name {
    max-width: 126px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-navigation {
    position: relative;
    display: none;
}

.mobile-navigation > summary {
    list-style: none;
}

.mobile-navigation > summary::-webkit-details-marker {
    display: none;
}

.mobile-navigation-trigger {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 12px;
    color: var(--text);
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
}

.mobile-navigation-icon {
    width: 19px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-navigation-icon span {
    width: 100%;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
}

.mobile-navigation-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1100;
    width: min(340px, calc(100vw - 28px));
    max-height: calc(100vh - 105px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    background: rgba(7, 17, 31, .98);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.mobile-nav-item {
    position: relative;
    min-height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: white;
    background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(34, 211, 238, .06));
}

/* En resoluciones donde no cabe el menú completo, se oculta entero.
   Nunca se deja parcialmente visible ni recortado. */
@media (max-width: 1420px) {
    .topbar {
        padding-inline: 14px;
    }

    .topbar-inner {
        width: min(100%, 1240px);
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 14px;
    }

    .topbar-nav {
        display: none !important;
    }

    .mobile-navigation {
        display: block;
    }

    .topbar-actions {
        justify-self: end;
    }
}

@media (max-width: 820px) {
    .topbar {
        padding: 8px 10px;
    }

    .topbar-inner {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "brand actions";
        min-height: 54px;
        padding: 7px 8px 7px 10px;
    }

    .brand {
        grid-area: brand;
    }

    .topbar-actions {
        grid-area: actions;
        min-width: 0;
        justify-self: end;
    }

    .brand-logo-desktop {
        display: none;
    }

    .brand-logo-mobile {
        width: 36px;
        height: 36px;
        display: block;
    }

    .account-menu-name {
        display: none;
    }
}

@media (max-width: 560px) {
    .language-selector {
        display: none;
    }

    .account-menu-trigger {
        max-width: 154px;
    }

    .account-plan-badge {
        padding: 3px 6px;
        font-size: .58rem;
    }

    .mobile-navigation-panel {
        position: fixed;
        top: 72px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 86px);
    }
}

@media (max-width: 400px) {
    .topbar {
        padding-inline: 6px;
    }

    .topbar-inner {
        gap: 6px;
        padding-inline: 7px;
    }

    .account-menu-trigger {
        max-width: 112px;
        padding-inline: 7px;
    }

    .account-plan-badge {
        display: none;
    }

    .mobile-navigation-trigger {
        width: 38px;
        height: 38px;
    }
}


/* FASE 4 · Ajustes responsive globales */
@media (max-width: 760px) {
    .page-shell { overflow-x: clip; }
    .page-shell > section { width: min(100% - 22px, 100%) !important; margin-inline: auto !important; }
    h1 { overflow-wrap: anywhere; }
    .button, button, a[class*="button"] { min-height: 44px; }
    .pricing-card-featured { transform: none; }
    .pricing-table-wrap { margin-inline: -2px; }
}

@media (max-width: 480px) {
    .account-menu-panel { width: min(310px, calc(100vw - 20px)); right: -4px; }
    .account-menu-trigger { min-height: 42px; }
    .mobile-navigation-trigger { min-width: 42px; min-height: 42px; }
}

/* QA Bloque 3 · selector de idioma disponible también en navegación móvil */
.mobile-navigation-language {
    margin: 2px 2px 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
}

.mobile-navigation-language .language-selector {
    display: inline-flex !important;
    width: auto;
    max-width: none;
}

.mobile-navigation-language .language-select {
    width: 76px;
    min-width: 76px;
}

@media (min-width: 1421px) {
    .mobile-navigation-language { display: none; }
}

@media (max-width: 560px) {
    .mobile-navigation-language .language-selector { display: inline-flex !important; }
}