/* opcional: estilos externos si luego querés moverlos */


/* ===== Users Manager UI tweaks ===== */
#userListModal #userListModal .search-input::placeholder{
  color: rgba(0,0,0,.55) !important;
}
#userListModal .um-actions{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
}
#userListModal .um-actions .btn-mini{
  font-size:14px;
  padding:8px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  line-height:1;
  min-width:38px;
  min-height:38px;
}

#userListModal #umProjects{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px;
  overflow:auto;
}
#userListModal .um-proj-item{
  width:100%;
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  font-size:12px;
  user-select:none;
}
#userListModal .um-proj-item input{
  transform: scale(1.1);
}




/* ===== Users Manager - Modern UI ===== */
#userListModal .modal-content{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(245,245,245,.92);
  backdrop-filter: blur(16px);
}
body.dark-theme #userListModal .modal-content{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(20,20,24,.88);
}

#userListModal .viewer-body{
  background: transparent !important;
}

#userListModal .um-card{
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
}
body.dark-theme #userListModal .um-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

#userListModal .label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin: 10px 0 6px;
}

#userListModal input[type="text"],
#userListModal input[type="password"],
#userListModal select{
  width: 100%;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  color:#111827;
}
body.dark-theme #userListModal input[type="text"],
body.dark-theme #userListModal input[type="password"],
body.dark-theme #userListModal select{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:#e5e7eb;
}

#userListModal .search-input{
  min-width: 260px;
  background: rgba(255,255,255,.90) !important;
  color:#111 !important;
  border: 1px solid rgba(0,0,0,.10);
}
#userListModal .search-input::placeholder{ color: rgba(0,0,0,.55) !important; }
body.dark-theme #userListModal .search-input{
  background: rgba(0,0,0,.28) !important;
  color:#f3f4f6 !important;
  border: 1px solid rgba(255,255,255,.14);
}
body.dark-theme #userListModal .search-input::placeholder{ color: rgba(255,255,255,.55) !important; }

/* Pastel translucent buttons (works for both themes) */
#userListModal .btn-primary,
#userListModal .btn-secondary,
#userListModal .btn-danger{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
}
#userListModal .btn-primary{ background: rgba(147,197,253,.45) !important; color:#0b1220 !important; }
#userListModal .btn-secondary{ background: rgba(167,243,208,.45) !important; color:#0b1220 !important; }
#userListModal .btn-danger{ background: rgba(253,164,175,.45) !important; color:#0b1220 !important; }

body.dark-theme #userListModal .btn-primary{ background: rgba(147,197,253,.22) !important; color:#e5e7eb !important; }
body.dark-theme #userListModal .btn-secondary{ background: rgba(167,243,208,.20) !important; color:#e5e7eb !important; }
body.dark-theme #userListModal .btn-danger{ background: rgba(253,164,175,.20) !important; color:#e5e7eb !important; }

#userListModal .btn-primary:hover,
#userListModal .btn-secondary:hover,
#userListModal .btn-danger:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  filter: brightness(1.06);
}
#userListModal .btn-primary:active,
#userListModal .btn-secondary:active,
#userListModal .btn-danger:active{
  transform: translateY(0px) scale(.99);
}

/* Projects list (vertical + scroll, nice checkboxes) */
#userListModal #umProjects{
  max-height: 280px !important;
  overflow:auto !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.55) !important;
}
body.dark-theme #userListModal #umProjects{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.20) !important;
}

/* Tema único (novo-dim): hacer legible la lista de proyectos en Usuarios */
body.novo-dim #userListModal #umProjects{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(10,15,25,.55) !important;
  color: rgba(255,255,255,.92) !important;
}
body.novo-dim #userListModal .um-proj-item{
  color: rgba(255,255,255,.92) !important;
}
body.novo-dim #userListModal .um-proj-item:hover{
  background: rgba(255,255,255,.06) !important;
}
#userListModal .um-proj-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
  user-select:none;
}
#userListModal .um-proj-item:hover{
  background: rgba(0,0,0,.04);
  transform: translateY(-1px);
}
body.dark-theme #userListModal .um-proj-item:hover{
  background: rgba(255,255,255,.06);
}
#userListModal .um-proj-item input{
  width: 18px;
  height: 18px;
  accent-color: rgba(99,102,241,.9);
}

/* Actions icons */
#userListModal .um-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
#userListModal .um-actions button{
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 12px !important;
}
#userListModal .um-actions svg{
  width: 18px;
  height: 18px;
}

.um-actions{
  display:flex;
  gap:8px;
}
.um-actions .icon-only{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:12px;
}
.um-actions .icon-only svg{
  width:18px;
  height:18px;
}


/* === Users Manager refinamientos UI === */
#userListModal .um-actions .icon-only{
  width:34px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
}
#userListModal .um-actions .icon-only svg{
  width:16px; height:16px;
  display:block;
}
#userListModal .um-projects-box{
  max-height:260px;
  overflow:auto;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
[data-theme="light"] #userListModal .um-projects-box{
  border:1px solid rgba(2,6,23,.12);
  background:rgba(2,6,23,.04);
}
#userListModal .um-proj-item{
  padding:8px 10px;
}
#userListModal .um-proj-item input{ width:18px; height:18px; }


/* ===== Mejoras de contorno para búsqueda de usuarios (modal Usuarios) ===== */
#userListModal .search-input{
  width: 320px;
  max-width: 100%;
  padding: 10px 12px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.22);
  background: rgba(255,255,255,.92);
  color: #111827;
  outline: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
#userListModal .search-input::placeholder{
  color: rgba(17,24,39,.55);
}
#userListModal .search-input:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* Dark theme */
.dark-theme #userListModal .search-input{
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(17,24,39,.78);
  color: #f9fafb;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.dark-theme #userListModal .search-input::placeholder{
  color: rgba(249,250,251,.55);
}
.dark-theme #userListModal .search-input:focus{
  border-color: rgba(96,165,250,.6);
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}

/* ====== SINGLE THEME (Pasteles + grises) ====== */
:root{
  --primary: #8aa4b8;
  --primary-dark:#5f7384;
  --secondary:#e9eef2;
  --accent:#9ad7d2;
  --text:#1f2937;
  --text-light:#4b5563;
  --border:#cfd8e3;
  --success:#7bcfa2;
  --warning:#f6c38a;
  --error:#f19999;
}

/* Desactivar visualmente cualquier rastro de toggle */
#themeToggle{ display:none !important; }

/* Fondo general gris suave */
body{
  background: linear-gradient(135deg, #d8dde3 0%, #f0f2f5 100%) !important;
}
.main-header, .sidebar{
  background: rgba(245,245,245,.92) !important;
}
.main-content{
  background: rgba(238,240,244,.96) !important;
}

/* Si por alguna razón existe dark-theme, que no cambie nada */
body.dark-theme{ }


/* =========================================================
   TEMA ÚNICO: OSCURO SUAVE (grises + negros + pasteles)
   Objetivo: reducir blancos "chocantes" y mantener legibilidad
   ========================================================= */

:root{
  --bg0:#0b0f14;
  --bg1:#0f1720;
  --panel:#121a24;
  --panel2:#182231;
  --card:#151f2c;
  --card2:#1b2737;
  --border:rgba(255,255,255,.10);

  --text:#e6eaf0;
  --muted:#aab3c2;

  /* pasteles oscuros */
  --pri:#9aa7ff;      /* lavanda */
  --pri2:#6aa8ff;     /* azul */
  --acc:#79f2c0;      /* menta */
  --warn:#ffcf70;     /* amarillo suave */
  --danger:#ff7a8a;   /* rojo suave */
}

html, body{
  height:100%;
}

body{
  background: radial-gradient(1200px 700px at 10% 10%, rgba(154,167,255,.18), transparent 55%),
              radial-gradient(900px 600px at 90% 20%, rgba(121,242,192,.10), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

/* Si hay contenedores principales */
.main-header, header{
  background: rgba(18,26,36,.82) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(14px);
}

.sidebar{
  background: rgba(18,26,36,.78) !important;
  border-right: 1px solid var(--border) !important;
}

.main-content{
  background: rgba(15,23,32,.55) !important;
}

/* Tarjetas / paneles */
.glass-card,
.files-section,
.viewer-section,
.modal-content,
#loginCard,
#userListModal .modal-content,
#uploadModal .modal-content{
  background: rgba(21,31,44,.88) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* listas internas */
.files-header, .viewer-header{
  border-bottom: 1px solid var(--border) !important;
}

/* Inputs */
input, select, textarea,
.modern-input,
#userListModal input[type="text"],
#userListModal input[type="password"],
#userListModal select,
#userListModal .search-input{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}

input::placeholder, textarea::placeholder,
#userListModal .search-input::placeholder{
  color: rgba(230,234,240,.55) !important;
}

/* links and muted text */
.text-gray-600, .text-gray-500, .text-gray-800,
label, .label, .muted{
  color: var(--muted) !important;
}

/* Botones: tonos pasteles sobre fondo oscuro */
.btn-primary{
  background: linear-gradient(135deg, rgba(154,167,255,.95), rgba(106,168,255,.92)) !important;
  color:#0b0f14 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
}
.btn-primary:hover{ filter: brightness(1.04); transform: translateY(-1px); }

.btn-secondary{
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.btn-secondary:hover{ background: rgba(255,255,255,.12) !important; }

.btn-danger{
  background: rgba(255,122,138,.18) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,122,138,.35) !important;
}
.btn-danger:hover{ background: rgba(255,122,138,.24) !important; }

/* file cards */
.file-card{
  background: rgba(21,31,44,.80) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
}
.file-card:hover{
  border-color: rgba(154,167,255,.55) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45) !important;
}

/* acciones */
.file-action-btn{ color: rgba(154,167,255,.95) !important; }
.file-action-btn:hover{ background: rgba(154,167,255,.14) !important; }
.file-action-btn.delete{ color: rgba(255,122,138,.95) !important; }
.file-action-btn.delete:hover{ background: rgba(255,122,138,.14) !important; }

/* overlays */
.modal-overlay{
  background: rgba(0,0,0,.62) !important;
}

/* visor: fondo no blanco */
.viewer-iframe{
  background: rgba(255,255,255,.04) !important;
}

/* badges / chips si existieran */
.badge, .chip{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

/* scrollbar (webkit) */
*::-webkit-scrollbar{ width: 10px; height:10px; }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.18); }


/* =========================================================
   MOBILE PORTRAIT (iPhone/Android) — Ajuste fino sin tocar desktop
   - Evita desbordes horizontales
   - Header/toolbar sin salirse de márgenes
   - Visor (overlay) 100% de la pantalla con safe-area
   ========================================================= */

@media (max-width: 480px) and (orientation: portrait) {
  html, body { width: 100%; overflow-x: hidden; }

  /* Evitar que contenedores con min-width de Tailwind rompan el layout */
  .toolbar-section .flex-1,
  .toolbar-section .relative,
  .toolbar-section .w-full,
  .content-main,
  .content-grid,
  .files-section,
  .viewer-section { min-width: 0 !important; }

  /* La barra de herramientas debe poder bajar a 2-3 líneas sin desbordar */
  .toolbar-section .flex,
  .toolbar-section .flex-wrap { flex-wrap: wrap !important; }

  /* Algunas clases de Tailwind vienen como min-w-[300px] */
  .toolbar-section .min-w-\[300px\],
  .toolbar-section .min-w-\[260px\],
  .toolbar-section .min-w-\[240px\] { min-width: 0 !important; width: 100% !important; }

  /* Ajuste general de paddings para que todo quepa */
  .toolbar-section { margin: .5rem !important; }
  .content-main { padding-left: .5rem !important; padding-right: .5rem !important; padding-bottom: .75rem !important; }

  /* Header superior (logo + user + botones) en 1 columna, sin desbordes */
  .main-header { padding-left: 12px !important; padding-right: 12px !important; }
  .main-header > .flex.items-center.justify-between{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .main-header > .flex.items-center.justify-between > div:first-child{
    width: 100% !important;
  }
  .main-header > .flex.items-center.justify-between > div:last-child{
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #userCard{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #userCard *{ max-width: 100% !important; }
  /* Botones compactos (icon-only) para que no se corten */
  #btnDesign, #btnLogout, #btnRefresh{
    padding: 10px 12px !important;
    border-radius: 14px !important;
    min-width: 44px !important;
    justify-content: center !important;
  }
  #btnDesign, #btnLogout, #btnRefresh{ font-size: 0 !important; }
  #btnDesign i, #btnLogout i, #btnRefresh i{ font-size: 16px !important; margin: 0 !important; }

  /* Layout principal: archivos + visor en una sola columna */
  .content-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .scroll-section{ min-width: 0 !important; }
  .files-section, .viewer-section{ width: 100% !important; }

  /* Visor normal (lado derecho) no debe desbordar */
  .viewer-content, .preview-area, iframe, embed, video, img{
    max-width: 100% !important;
  }
}

/* Overlay del visor móvil: usar unidades dinámicas para iOS (barra superior) */
@media (max-width: 480px) {
  .mobile-viewer-overlay { padding: 0 !important; }
  .mobile-viewer-panel {
    height: 100dvh;
    max-height: 100dvh;
  }
  .mv-header {
    padding: .55rem .7rem !important;
    gap: .35rem !important;
  }
  .mv-title { max-width: 45vw; }
  .mv-body { padding: .4rem !important; }
  .mv-body iframe,
  .mv-body embed,
  .mv-body img,
  .mv-body video {
    border-radius: 10px !important;
  }
}





/* =========================================================
   AJUSTE: "CLARO MÁS OSCURO" (único tema)
   - Encabezado negro-rojizo translúcido
   - Botones pasteles oscuros (sin rosado) + sombras/animación
   - Sidebar de proyectos más oscura manteniendo morado activo
   - Barra de búsqueda/orden/limpiar/subir con estilo formal
   ========================================================= */

body.novo-dim{
  background: #0f141b !important; /* solo detrás; los panels ya definen su color */
}

/* Encabezado principal */
body.novo-dim .main-header{
  background: linear-gradient(135deg, rgba(0,0,0,.68), rgba(110,0,0,.28)) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}
body.novo-dim .main-header .logo{ color: rgba(245,247,255,.98) !important; }
body.novo-dim .main-header p{ color: rgba(226,232,240,.72) !important; }

/* Tarjeta del usuario (arriba): no blanca, legible en tema novo-dim */
body.novo-dim #userCard{
  background: rgba(10,15,25,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.34) !important;
}
body.novo-dim #userCard #userBadge{ color: rgba(245,247,255,.98) !important; }
body.novo-dim #userCard #userRole{ color: rgba(226,232,240,.70) !important; }

/* Botones del encabezado */
body.novo-dim .btn-primary,
body.novo-dim .btn-secondary,
body.novo-dim .btn-design{
  background: rgba(129,140,248,.30) !important; /* pastel morado/azul oscuro */
  color: #eef2ff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.32) !important;
}
}
body.novo-dim .btn-primary{
  background: rgba(88,101,242,.42) !important; /* índigo sobrio */
  color: rgba(245,247,255,.98) !important;
}
body.novo-dim .btn-primary:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.44) !important;
}
body.novo-dim .btn-secondary{
  background: rgba(148,163,184,.20) !important; /* slate */
  color: rgba(245,247,255,.92) !important;
}
body.novo-dim .btn-secondary:hover{
  background: rgba(148,163,184,.26) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.42) !important;
}

/* Ocultar el botón de diseño (tema único) */
/* El botón TABLA/TARJETAS debe estar visible */
body.novo-dim #btnDesign{ display:flex !important; }

/* Sidebar / Proyectos */
body.novo-dim .sidebar{
  background: linear-gradient(180deg, rgba(18,22,30,.92), rgba(12,15,21,.92)) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}
body.novo-dim .mode-tabs{
  background: rgba(0,0,0,.34) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.30) !important;
}
body.novo-dim .mode-tab{
  background: rgba(148,163,184,.18) !important; /* pastel oscuro */
  color: rgba(240,244,255,.92) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
body.novo-dim .mode-tab:hover{
  background: rgba(148,163,184,.24) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.38) !important;
}
body.novo-dim .mode-tab.active{
  /* mantener morado, pero más formal */
  background: linear-gradient(135deg, rgba(124,58,237,.92), rgba(76,29,149,.86)) !important;
  border-color: rgba(167,139,250,.40) !important;
  box-shadow: 0 14px 30px rgba(76,29,149,.35) !important;
}

/* Barra superior del contenido (proyecto + búsqueda + ordenar + limpiar + subir) */
body.novo-dim .modern-input{
  background: rgba(16,20,28,.62) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(245,247,255,.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.novo-dim .modern-input::placeholder{
  color: rgba(226,232,240,.55) !important;
}
body.novo-dim select.modern-input option{ color:#111827; } /* para que en algunos navegadores se vea bien */

/* Badge del proyecto (evitar rosados) */
body.novo-dim #currentProjectBadge{
  background: linear-gradient(135deg, rgba(124,58,237,.90), rgba(59,130,246,.65)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.38) !important;
}

/* Tarjetas de archivos: grises, acciones bien visibles */
body.novo-dim .file-card{
  background: rgba(18,22,30,.78) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
body.novo-dim .file-action-btn{
  border-radius: 12px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(148,163,184,.10) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
body.novo-dim .file-action-btn:hover{
  background: rgba(148,163,184,.16) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.35) !important;
}
body.novo-dim .file-action-btn.delete{
  background: rgba(239,68,68,.12) !important;
  color: rgba(255,170,170,.95) !important;
}
body.novo-dim .file-action-btn.delete:hover{
  background: rgba(239,68,68,.18) !important;
}


.btn-design:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.44) !important;
}

.file-icon.has-num{
  display:flex;
  align-items:center;
  justify-content:center;
}

.file-icon.has-num .file-num{
  font-weight: 800;
  letter-spacing: .5px;
  color: #ffffff;
  font-size: 1.05rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}


/* =========================
   Mobile Portrait (vertical) – ajustes SIN tocar escritorio
   Activado por app.js agregando body.mobile-portrait
   ========================= */
body.mobile-portrait {
  overscroll-behavior: none;
}

/* En vertical: apilar paneles y evitar cortes */
body.mobile-portrait .app-container > .flex,
body.mobile-portrait .flex.flex-1.overflow-hidden {
  flex-direction: column !important;
  overflow: visible !important;
  min-height: 0 !important;
}

/* Sidebar arriba con scroll cómodo */
body.mobile-portrait aside.sidebar {
  width: 100% !important;
  max-height: 42vh;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Zona derecha ocupa el resto */
body.mobile-portrait main.flex-1,
body.mobile-portrait .main-content {
  width: 100% !important;
  min-height: 0 !important;
}

/* Grid de archivos: 1 columna */
body.mobile-portrait #contentGrid,
body.mobile-portrait .content-grid {
  grid-template-columns: 1fr !important;
}

/* Visor interno: full width + alto real del viewport */
body.mobile-portrait #viewerPanel,
body.mobile-portrait .viewer-section {
  width: 100% !important;
  min-height: 44vh;
}

/* iFrames/imagenes/videos: que NO se salgan */
body.mobile-portrait #viewer iframe,
body.mobile-portrait #viewer img,
body.mobile-portrait #viewer video {
  width: 100% !important;
  max-width: 100% !important;
}

/* Botoneras compactas para no tapar pantalla */
body.mobile-portrait .viewer-actions,
body.mobile-portrait #viewerActions {
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.mv-open { overflow: hidden !important; }



/* =========================================================
   MOBILE FIX: iPhone vertical responsive (NO rompe desktop)
   - No cambia nombres/rutas/login
   - Solo ajustes de layout para pantallas angostas
   ========================================================= */
@media (max-width: 520px) and (orientation: portrait) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Contenedor principal: apilar sidebar + contenido */
  .app-container > .flex.flex-1.overflow-hidden,
  .app-container > .flex.flex-1 {
    flex-direction: column !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* Header: evitar desbordes */
  .main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }
  .main-header .topbar,
  .main-header .header-content,
  .main-header .header-inner {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Sidebar full width */
  aside.sidebar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    max-height: 38dvh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Área principal */
  .content-main {
    padding: 0.9rem !important;
    overflow: visible !important;
  }

  /* Grid del contenido: una columna */
  .content-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    height: auto !important;
  }
  .content-grid.table-mode { grid-template-columns: 1fr !important; }

  /* Controles superiores: que no se salgan */
  .controls-row,
  .controls,
  .filters-row,
  .filters-bar {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #currentProjectBadge {
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Tabla: nunca debe romper márgenes; scroll interno */
  .table-container,
  .files-table-wrap,
  .files-content,
  .files-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table.files-table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tarjetas: ocupar ancho real */
  .file-card,
  .card,
  .file-item {
    max-width: 100% !important;
  }

  /* Visor/modal: encajar al iPhone */
  #viewerModal,
  #mobileViewer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  #mobileViewer .mobile-viewer-inner,
  #viewerModal .viewer-inner,
  #viewer {
    height: 100% !important;
    max-height: 100% !important;
  }
  #viewer iframe,
  #viewer img,
  #viewer video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Botón volver/acciones: siempre visibles y no se salen */
  #viewerActions,
  .viewer-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* Extra: para móviles angostos en general (portrait o landscape) evitar scroll lateral */
@media (max-width: 520px) {
  body { overflow-x: hidden !important; }
  .sidebar, .content-main, .content-grid { max-width: 100% !important; }
}