/*
 * Mesier desktop responsiveness
 * Esta capa se carga al final de la cascada y solo actua por encima de 720px.
 * No cambia comportamiento, estados ni la composicion reservada para telefono.
 */

@media (min-width: 721px) {
  :root {
    --mesier-desktop-gutter: clamp(20px, 3vw, 48px);
    --mesier-desktop-narrow-gutter: clamp(16px, 2.25vw, 34px);
  }

  html,
  body {
    max-width: 100%;
  }

  body {
    overflow-x: clip;
  }

  .logo-only-header,
  .site-header {
    padding-left: var(--mesier-desktop-gutter);
    padding-right: var(--mesier-desktop-gutter);
  }

  .logo-only-header > *,
  .site-header > *,
  .header-actions,
  .section-head-main,
  .project-tools,
  .project-selection-toolbar,
  .trash-selection-toolbar,
  .last-opened-content,
  .last-opened-meta-item,
  .last-opened-meta-copy,
  .continue-working-copy,
  .account-layout > *,
  .template-feature > *,
  .gallery-upload-copy,
  .site-page-row-copy,
  .analytics-hero-copy {
    min-width: 0;
  }

  /* Home */
  .home-main {
    width: 100%;
    padding-left: var(--mesier-desktop-gutter);
    padding-right: var(--mesier-desktop-gutter);
  }

  .home-projects-status,
  .last-opened-project,
  .continue-working {
    width: min(calc(100vw - (var(--mesier-desktop-gutter) * 2)), 1540px);
  }

  .continue-working-list {
    max-width: 100%;
    scroll-padding-inline: 3px;
  }

  .continue-working-card {
    flex-basis: clamp(280px, 24vw, 318px);
    min-width: clamp(280px, 24vw, 318px);
  }

  .home-setup-dialog {
    max-width: 100vw;
    max-height: 100dvh;
  }

  .home-setup-header,
  .home-setup-progress,
  .home-setup-body,
  .home-setup-footer {
    padding-left: clamp(24px, 3vw, 36px);
    padding-right: clamp(24px, 3vw, 36px);
  }

  /* Proyectos */
  .layout {
    padding: clamp(14px, 1.8vw, 24px);
  }

  .projects-page {
    width: 100%;
  }

  .project-tools,
  .project-selection-toolbar,
  .trash-selection-toolbar,
  .section-head-actions {
    flex-wrap: wrap;
  }

  .project-search {
    flex: 1 1 260px;
  }

  .project-list {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    padding: clamp(14px, 1.8vw, 22px);
    gap: clamp(12px, 1.4vw, 18px);
  }

  .trash-dialog,
  .preview-asset-gallery-dialog,
  .edit-mode-dialog,
  .editor-confirm-dialog,
  .site-page-dialog-card {
    max-width: calc(100vw - (var(--mesier-desktop-gutter) * 2));
    max-height: calc(100dvh - (var(--mesier-desktop-gutter) * 2));
  }

  /* Plantillas y cuenta */
  .templates-page,
  .account-page {
    width: min(var(--page-max-width, 1240px), calc(100% - (var(--mesier-desktop-gutter) * 2)));
  }

  .account-page {
    --page-max-width: 1120px;
  }

  .template-feature,
  .account-layout,
  .profile-info {
    min-width: 0;
  }

  .template-preview-dialog {
    width: calc(100% - (var(--mesier-desktop-narrow-gutter) * 2));
    height: calc(100dvh - (var(--mesier-desktop-narrow-gutter) * 2));
  }

  /* Panel */
  .header-outline,
  .footer-outline {
    max-width: 100vw;
  }

  .footer-nav {
    gap: clamp(18px, 3vw, 42px);
    max-width: calc(100vw - 24px);
  }

  .storage-view,
  .site-view,
  .gallery-view,
  .analytics-view {
    left: var(--mesier-desktop-narrow-gutter);
    right: var(--mesier-desktop-narrow-gutter);
  }

  .summary-overview,
  body[data-panel-view="resumen"] .metrics-panel {
    width: min(860px, calc(100vw - (var(--mesier-desktop-gutter) * 2)));
  }

  .site-preview-launch-card,
  .site-page-manager,
  .site-publish-card,
  .gallery-upload-panel,
  .gallery-selection-toolbar,
  .gallery-grid {
    max-width: 100%;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  }

  .site-page-manager-header-actions,
  .site-page-row-actions,
  .site-publish-actions,
  .site-publish-url-actions,
  .analytics-view-switch,
  .analytics-traffic-legend {
    flex-wrap: wrap;
  }

  .site-page-row-details,
  .analytics-conversion-card,
  .analytics-mode-panel,
  .analytics-traffic,
  .analytics-summary {
    min-width: 0;
  }

  /* Editor */
  .chat,
  .preview-panel,
  .simple-edit-panel {
    max-width: calc(100vw - (var(--mesier-desktop-narrow-gutter) * 2));
  }

  .preview-style-toolbar {
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .full-preview-bar,
  .site-full-preview-bar,
  .template-preview-toolbar {
    min-width: 0;
  }

  .full-preview-copy,
  .site-full-preview-heading,
  .template-preview-title {
    min-width: 0;
  }

  /* Login */
  main:has(> .login-avatar) {
    width: min(390px, calc(100vw - (var(--mesier-desktop-gutter) * 2)));
  }
}

@media (min-width: 901px) and (max-width: 1240px) {
  /* Home: conserva dos columnas en portatiles sin comprimir acciones ni metadatos. */
  .last-opened-card {
    grid-template-columns: minmax(340px, 42%) minmax(0, 1fr);
  }

  .last-opened-content {
    padding: clamp(28px, 3vw, 38px);
  }

  .last-opened-kicker {
    margin-bottom: clamp(14px, 1.8vw, 20px);
  }

  .last-opened-heading {
    font-size: clamp(29px, 3.5vw, 43px);
  }

  .last-opened-description {
    margin: 14px 0 clamp(22px, 2.4vw, 30px);
    font-size: clamp(16px, 1.6vw, 18px);
  }

  .last-opened-meta {
    gap: clamp(8px, 1vw, 12px);
  }

  .last-opened-meta-item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding-left: clamp(8px, 1.2vw, 14px);
  }

  .last-opened-meta-icon,
  .last-opened-meta-status {
    width: 34px;
    height: 34px;
  }

  .last-opened-actions {
    gap: 10px;
    padding-top: 22px;
  }

  .last-opened-action,
  .last-opened-secondary-action {
    flex: 1 1 170px;
    min-width: 0;
    min-height: 54px;
    padding-inline: 18px;
    font-size: 15px;
  }

  .last-opened-more-action {
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    min-height: 54px;
  }

  /* Editor: el chat, la previsualizacion y el panel lateral comparten el ancho disponible. */
  :root {
    --mesier-editor-gutter: clamp(18px, 2.6vw, 32px);
    --mesier-editor-chat-width: clamp(306px, 33vw, 340px);
    --mesier-editor-gap: clamp(14px, 1.8vw, 20px);
    --mesier-editor-side-width: clamp(276px, 28vw, 300px);
  }

  .chat {
    left: var(--mesier-editor-gutter);
    width: var(--mesier-editor-chat-width);
  }

  .preview-panel {
    left: calc(var(--mesier-editor-gutter) + var(--mesier-editor-chat-width) + var(--mesier-editor-gap));
    width: calc(100vw - (var(--mesier-editor-gutter) * 2) - var(--mesier-editor-chat-width) - var(--mesier-editor-gap));
    min-width: 0;
  }

  body[data-edit-mode="simple"] .preview-panel {
    left: var(--mesier-editor-gutter);
    right: calc(var(--mesier-editor-side-width) + var(--mesier-editor-gap));
    width: auto;
  }

  .simple-edit-panel {
    width: var(--mesier-editor-side-width);
  }

  /* Panel: las cuadrillas densas pasan a dos columnas antes de quedar comprimidas. */
  .analytics-traffic-metrics,
  .analytics-traffic-details,
  .analytics-conversions-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-page-manager,
  .site-preview-launch-card,
  .site-publish-card {
    width: min(900px, 100%);
  }
}

@media (min-width: 721px) and (max-width: 1000px) {
  .section-head-main {
    align-items: flex-start;
  }

  .project-tools > * {
    flex-grow: 1;
  }

  .template-feature {
    grid-template-columns: minmax(0, 1.05fr) minmax(270px, 0.95fr);
  }

  .template-feature-info {
    padding: clamp(24px, 3vw, 32px);
  }

  .account-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(270px, 0.85fr);
  }

  .gallery-upload-panel,
  .site-preview-launch-card,
  .analytics-hero {
    align-items: flex-start;
  }

  .site-page-manager-header,
  .site-page-row,
  .site-publish-header,
  .site-publish-row {
    flex-wrap: wrap;
  }
}

@media (min-width: 721px) and (max-height: 720px) {
  .home-setup-header {
    padding-top: 18px;
    padding-bottom: 14px;
  }

  .home-setup-progress {
    padding-top: 12px;
  }

  .home-setup-body {
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .home-setup-footer {
    padding-top: 13px;
    padding-bottom: 15px;
  }

  .footer-shell {
    height: 128px;
  }

  .footer-nav {
    bottom: 14px;
  }

  .storage-view,
  .site-view,
  .gallery-view,
  .analytics-view {
    top: 88px;
    bottom: 136px;
  }

  .chat,
  .preview-panel {
    top: 48px;
    height: calc(100dvh - 88px);
  }

  .simple-edit-panel {
    top: 48px;
    bottom: 40px;
  }
}

/* Proyectos mantiene una lectura de una sola columna en portátiles estrechos.
   La regla es específica para no alterar otras cuadrículas compartidas. */
@media (min-width: 721px) and (max-width: 980px) {
  .projects-page .project-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1600px) {
  .project-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}