/* ═══════════════════════════════════════════
   ClicGest — Mobile Landscape (apaisado obligado)
   ═══════════════════════════════════════════ */

/* --- LANDSCAPE ENFORCEMENT --- */
#landscape-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #0f172a;
  color: white;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  font-family: system-ui, sans-serif;
  padding: 20px;
}
#landscape-overlay .icon { font-size: 64px; animation: pwa-bob 2.2s ease-in-out infinite; }
#landscape-overlay .msg { font-size: 22px; font-weight: 700; }
#landscape-overlay .sub { font-size: 14px; opacity: .7; max-width: 320px; }
@keyframes pwa-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* Aviso de instalación (PWA) — el JS decide cuándo mostrarlo */
#landscape-overlay .pwa-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#landscape-overlay .pwa-btn {
  background: var(--cg-purple, #7c3aed); color: #fff; border: none; border-radius: 12px;
  padding: 14px 28px; font-size: 17px; font-weight: 700; cursor: pointer;
}
#landscape-overlay .pwa-btn:active { transform: scale(.98); }
#landscape-overlay .pwa-ios-steps { font-size: 15px; line-height: 1.5; max-width: 300px; }
#landscape-overlay .pwa-ios-steps b { color: #fff; }
#landscape-overlay .pwa-hint { font-size: 13px; opacity: .55; max-width: 300px; margin-top: 4px; }
#landscape-overlay .pwa-dismiss {
  margin-top: 6px; background: transparent; border: 1px solid rgba(255,255,255,.3);
  color: #cbd5e1; border-radius: 10px; padding: 9px 18px; font-size: 14px; cursor: pointer;
}

/* --- SIDEBAR MOBILE --- */
.sidebar-mobile-toggle {
  display: none;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1101;
  background: var(--cg-dark, #0f172a);
  color: white;
  border: none;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 22px;
  cursor: pointer;
}
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1098;
}

/* Responsive override */
@media screen and (max-width: 1024px) {
  .sidebar-mobile-toggle { display: flex; align-items: center; justify-content: center; }
  
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1100;
    position: fixed;
    top: 0;
    /* Altura acotada al viewport + scroll interno: si la lista de módulos es
       más alta que la pantalla, el panel scrollea por dentro y "Salir" (último
       enlace) siempre queda alcanzable. Sin esto, al ser fixed, quedaba cortado. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Que el último enlace no quede bajo la barra de gestos / notch inferior. */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .sidebar.open {
    transform: translateX(0);
  }
  #sidebar-backdrop.open { display: block; }
  
  .main {
    margin-left: 0 !important;
    /* Zona segura: en la PWA en horizontal el notch/cámara queda en un lateral.
       max() respeta el inset cuando existe y mantiene el padding normal si no. */
    padding-top: max(56px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
  }
  /* Evitar desplazamiento horizontal por restos de overflow en móvil */
  html, body { overflow-x: hidden; }
  
  /* Tables */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 12px !important; }
  th, td { padding: 6px 8px !important; white-space: nowrap; }
  
  /* Dashboard stats */
  .stat-card { padding: 12px !important; }
  .stat-card .number { font-size: 24px !important; }
  .col-md-3 { flex: 0 0 50%; max-width: 50%; margin-bottom: 8px; }
  
  /* Forms */
  .row.g-3 > [class*="col"] { flex: 0 0 100% !important; max-width: 100% !important; }
  
  /* Module picker */
  .mod-chip { padding: 6px 12px !important; font-size: 12px !important; margin: 2px !important; }
  
  /* Demo banner */
  .demo-banner { font-size: 12px !important; padding: 6px !important; }
  
  /* Landing */
  .hero { padding: 40px 16px !important; }
  .hero h1 { font-size: 28px !important; }
  .hero .lead { font-size: 16px !important; }
  .row.g-4 > [class*="col-md"] { flex: 0 0 50% !important; max-width: 50% !important; }
  
  /* Auth — 100% (el <body> ya aporta el margen lateral con zona segura);
     95vw se salía del body con padding y descuadraba la tarjeta. */
  .login-card, form[style*="max-width"] {
    max-width: 100% !important;
    padding: 24px !important;
    border-radius: 12px !important;
  }

  /* Botón ☰ del menú: que no quede bajo el notch en horizontal */
  .sidebar-mobile-toggle {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
  }

  /* La hamburguesa (z-index 1101) quedaba parcialmente TAPADA por las cintas
     fijas superiores (MODO DEMO / impersonación / "Entrar como", z-index 3000+
     y 34px de alto cada una). Cuando hay una cinta activa, se baja el botón
     bajo ella. El JS inyecta el botón con body.prepend (queda ANTES de las
     cintas en el DOM), así que no sirve el combinador de hermanos: se detecta
     la presencia de la cinta con :has() sobre el body (Chrome lo soporta). */
  body:has(.impersonate-bar, .actuando-bar) .sidebar-mobile-toggle {
    top: calc(34px + max(8px, env(safe-area-inset-top)));
  }
  /* La cinta MODO DEMO ahora lleva 2 líneas en móvil (advertencia "no datos
     reales" + enlaces legales), así que ocupa más alto: el botón ☰ baja un poco
     más para no quedar tapado por la segunda línea. */
  body:has(.demo-ribbon) .sidebar-mobile-toggle {
    top: calc(62px + max(8px, env(safe-area-inset-top)));
  }
  /* Si la franja "Entrar como" se APILA sobre otra cinta (impersonación o demo),
     hay dos barras de 34px: el botón baja bajo ambas. */
  body:has(.actuando-bar):has(.demo-ribbon) .sidebar-mobile-toggle,
  body:has(.actuando-bar):has(.impersonate-bar) .sidebar-mobile-toggle {
    top: calc(68px + max(8px, env(safe-area-inset-top)));
  }
  
  /* Admin */
  .card-body { padding: 16px !important; }
  
  /* Carnet editor */
  #carnet-canvas-container {
    max-width: 100vw !important;
    overflow-x: auto;
  }
  .carnet-toolbar { flex-wrap: wrap; gap: 4px !important; }
  .carnet-toolbar button, .carnet-toolbar select { font-size: 11px !important; padding: 4px 8px !important; }
}

/* Small landscape phones */
@media screen and (max-width: 768px) {
  .col-md-3 { flex: 0 0 100%; max-width: 100%; }
  .row.g-4 > [class*="col-md"] { flex: 0 0 100% !important; max-width: 100% !important; }
  h4 { font-size: 18px !important; }
  .btn { padding: 6px 12px !important; font-size: 13px !important; }
  .badge { font-size: 11px !important; }
}

/* ═══════════════════════════════════════════
   CARNET EDITOR — Mobile + Apaisado
   ═══════════════════════════════════════════ */
@media screen and (max-width: 1024px) {
  /* Toolbar scrollable + compact */
  #topbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 2px !important;
    padding: 4px 6px !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
  }
  #topbar button {
    font-size: 10px !important;
    padding: 4px 6px !important;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 4px !important;
  }
  #topbar .brand { font-size: 14px !important; flex-shrink: 0; }
  #topbar .sep { width: 1px !important; margin: 0 2px !important; }
  #topbar .tabs button { font-size: 10px !important; padding: 3px 6px !important; }

  /* Canvas area full width */
  #app { flex-direction: column !important; }
  #sidebar { 
    flex-direction: row !important; 
    width: 100% !important; 
    height: auto !important;
    padding: 4px !important;
    gap: 4px !important;
    flex-shrink: 0;
  }
  #canvas-area { width: 100% !important; overflow-y: auto !important; }
  #canvas-container { 
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
  /* Scale canvas to fit */
  #fc { max-width: 100% !important; height: auto !important; }

  /* Properties panel below canvas */
  #props-panel {
    width: 100% !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    flex-shrink: 0;
    border-left: none !important;
    border-top: 2px solid #1e293b !important;
  }

  /* Template modal */
  .tmpl-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .tmpl-card { padding: 8px !important; }
}

@media screen and (max-width: 768px) {
  #topbar button { font-size: 9px !important; padding: 3px 4px !important; }
  #topbar .brand { font-size: 12px !important; }
  .tmpl-grid { grid-template-columns: 1fr !important; }
  #props-panel { max-height: 150px !important; }
}

/* El editor de carnets no es usable en móvil: enlaces en gris y desactivados */
@media screen and (max-width: 1024px) {
  .solo-pc {
    opacity: .45;
    pointer-events: none;
    cursor: default;
    position: relative;
  }
  .solo-pc::after {
    content: " · solo PC";
    font-size: 10px;
    opacity: .85;
  }
}