/* fichaje.eu — Responsive móvil
 * TODAS las reglas están dentro de @media (max-width: 768px).
 * El modo PC NO se ve afectado por este archivo. */

@media (max-width: 768px) {
  /* ── App shell ───────────────────────────────────────── */
  aside {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    width: 78vw !important;
    max-width: 300px;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 0 100vmax transparent;
  }
  aside.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }

  /* Backdrop cuando el drawer está abierto */
  .mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    z-index: 1000;
  }
  .mobile-backdrop.visible {
    display: block;
  }

  /* Botón hamburguesa — visible solo en móvil (display flex en JSX condicional) */
  .mobile-hamburger {
    display: inline-flex !important;
  }

  /* Topbar más compacta */
  header {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  /* Esconder elementos no críticos en móvil de topbar (search, role-toggle) */
  header .desktop-only {
    display: none !important;
  }

  /* Main content con menos padding */
  main {
    padding: 14px 12px !important;
  }

  /* ── Grids: cualquier grid de varias columnas pasa a 1 columna ─── */
  main div[style*="grid-template-columns"],
  main section[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Cards: padding más compacto */
  main div[style*="border-radius: var(--r-lg)"],
  main div[style*="border-radius: var(--r-md)"] {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Inputs: hacerlos full-width y un pelín más grandes (touch) */
  main input[type="text"],
  main input[type="email"],
  main input[type="password"],
  main input[type="number"],
  main input[type="search"],
  main input[type="date"],
  main input[type="time"],
  main select,
  main textarea {
    font-size: 16px !important;  /* evita auto-zoom de iOS */
    width: 100%;
    box-sizing: border-box;
  }

  /* Tablas y filas en grid → scroll horizontal si no caben */
  main table {
    display: block;
    overflow-x: auto;
  }

  /* Tipografía hero de Inicio → más pequeña */
  main [class*="h-title"], main [style*="font-size: 56"], main [style*="font-size: 48"] {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  /* Reloj grande del fichaje */
  main .mono.tnum[style*="font-size: 56"] {
    font-size: 42px !important;
  }

  /* Modales: full-screen friendly en móvil */
  div[style*="position: fixed"][style*="inset: 0"] > div {
    max-width: 94vw !important;
    max-height: 92vh !important;
  }

  /* Kanban (Tareas) — 1 columna apilada */
  main div[style*="repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Landing pública también responsive ────────────────────────── */
@media (max-width: 900px) {
  .container, .container-wide {
    padding: 0 16px !important;
  }
  .h-title {
    font-size: 38px !important;
    line-height: 1.05 !important;
  }
  .section-title {
    font-size: 28px !important;
  }
  .lead {
    font-size: 15px !important;
    max-width: 100% !important;
  }
  /* Apilar hero (panel + texto) */
  section[style*="grid-template-columns"],
  section div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Reducir hero panel inclinado a algo más pequeño */
  .hero-tilt {
    transform: scale(0.6) rotateY(-6deg) rotateX(2deg) !important;
    transform-origin: top center !important;
  }
  .hero-app-frame {
    transform: scale(0.45) !important;
  }
  .hero-app-wrap {
    width: 100% !important;
    max-width: 380px !important;
    height: 280px !important;
    margin: 0 auto !important;
  }
  /* Esconder slider de paneles en móvil (es muy pesado y poco útil) */
  .slider-wrap {
    transform: scale(0.55);
    transform-origin: top left;
    margin-bottom: -200px;
  }
  /* Nav: ocultar links menos importantes */
  nav .nav-link[href="#"] {
    display: none;
  }
  /* CTAs full-width */
  .cta-primary, .cta-secondary {
    width: 100%;
    justify-content: center;
  }
  footer {
    padding: 40px 0 24px !important;
    margin-top: 40px !important;
  }
  footer .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 600px) {
  .h-title { font-size: 30px !important; }
  .section-title { font-size: 24px !important; }
  footer .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}