/* ──────────────────────────────────────────────────────────────
   Λ U R Ø — responsive.css
   Todas las @media queries de breakpoints en un único archivo.
   Orden conservado de la versión monolítica para preservar la cascada.

   Breakpoints:
   - Tablet:           768-919px
   - Móvil grande:     600-767px
   - Escritorio:       >=920px
   - Landscape móvil:  altura <=600px
   - Móvil compacto:   <600px (action-row)
   - Sheet ampliado:   >=600px
   - Bulk bar centrado: >=600px
   - Banners centrados: >=600px (update, sw-notice, safari)
   ────────────────────────────────────────────────────────────── */

/* ── Breakpoint tablet (768px - 919px) ── */
@media (min-width:768px) and (max-width:919px){
  #app{
    max-width:750px;
    min-height:calc(100dvh - 48px);
    border-radius:16px;
    border:1px solid var(--border);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 24px 60px -20px rgba(0,0,0,0.6),
      0 0 0 1px rgba(0,0,0,0.4);
  }
  /* Banners alineados al ancho del #app */
  #update-banner{max-width:750px}

  body{padding:24px 0}

  /* ── Densidad tablet: igual que escritorio ── */
  .action-btn-secondary{height:36px;font-size:12px;border-radius:8px;padding:0 12px;flex:1 1 0}

  header{padding:16px 20px 11px}
  .app-title{font-size:22px}
  .total-main{font-size:17px}

  input[type=text],input[type=date],input[type=number],select,textarea{
    font-size:13.5px;padding:9px 12px;border-radius:7px;
  }

  .etog{padding:8px 11px;font-size:12px;border-radius:7px}

  .btn-save{padding:9px 14px;font-size:13px;border-radius:8px}
  .btn-cancel{padding:9px 14px;font-size:13px;border-radius:8px}
  .btn-del{padding:9px 12px;font-size:13px;border-radius:8px}

  .fg label{font-size:10px;margin-bottom:5px}
  .fg{margin-bottom:13px}

  .card{padding:11px 14px;border-radius:10px}
  .card-desc{font-size:14px}
  .card-price{font-size:15px}

  .btn-install{padding:7px 13px;font-size:12px;border-radius:7px}
}

/* ── Franja intermedia (600-767px): móvil grande / tablet pequeña con tratamiento de tarjeta ── */
@media (min-width:600px) and (max-width:767px){
  body{padding:24px 0}
  #app{
    min-height:calc(100dvh - 48px);
    border-radius:16px;
    border:1px solid var(--border);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 24px 60px -20px rgba(0,0,0,0.6),
      0 0 0 1px rgba(0,0,0,0.4);
  }

  /* ── Densidad escritorio: botones e inputs más compactos ── */
  /* Action row: botones proporcionales entre sí (Añadir, Guardar, Cerrar, Backup) */
  .action-btn-secondary{height:36px;font-size:12px;border-radius:8px;padding:0 12px;flex:1 1 0}

  /* Header un poco más compacto */
  header{padding:16px 20px 11px}
  .app-title{font-size:22px}
  .total-main{font-size:17px}

  /* Inputs y selects */
  input[type=text],input[type=date],input[type=number],select,textarea{
    font-size:13.5px;padding:9px 12px;border-radius:7px;
  }

  /* Toggles de estado en formulario */
  .etog{padding:8px 11px;font-size:12px;border-radius:7px}

  /* Botones del formulario (Guardar, Cancelar, Borrar) */
  .btn-save{padding:9px 14px;font-size:13px;border-radius:8px}
  .btn-cancel{padding:9px 14px;font-size:13px;border-radius:8px}
  .btn-del{padding:9px 12px;font-size:13px;border-radius:8px}

  /* Etiquetas del formulario un poco más pequeñas */
  .fg label{font-size:10px;margin-bottom:5px}
  .fg{margin-bottom:13px}

  /* Tarjetas: padding ligeramente menor */
  .card{padding:11px 14px;border-radius:10px}
  .card-desc{font-size:14px}
  .card-price{font-size:15px}

  /* Banner buttons */
  .btn-install{padding:7px 13px;font-size:12px;border-radius:7px}
}

/* ── Breakpoint escritorio (920px+): columna centrada con tratamiento de tarjeta ── */
@media (min-width:920px){
  body{padding:24px 0}
  #app{
    max-width:920px;
    min-height:calc(100dvh - 48px);
    padding-bottom:24px;
    border-radius:16px;
    border:1px solid var(--border);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 24px 60px -20px rgba(0,0,0,0.6),
      0 0 0 1px rgba(0,0,0,0.4);
  }
}

/* ── Optimización para pantallas pequeñas en altura (landscape móvil) ── */
@media (max-height:600px){
  header{
    padding:10px 16px 6px;
  }

  .app-title{
    font-size:18px;
  }

  .total-main{
    font-size:15px;
  }

  .file-indicator{
    display:none;
  }

  .totals-bar{
    margin:8px 0 0 0;
  }

  .tot-l{
    font-size:7px;
  }

  .tot-c{
    font-size:9px;
  }

  .tot-v{
    font-size:10px;
  }

  #app-footer-fixed{
    padding:6px 12px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
  }

  .footer-btn{
    height:32px;
    font-size:11px;
  }

  .entries{
    padding:10px 16px 20px;
    gap:8px;
  }

  .month-year-dropdown{
    bottom:60px;
  }

  .overlay{
    align-items:flex-start;
    padding-top:10px;
  }

  .sheet{
    max-height:95dvh;
    margin:0 12px;
  }

  .handle{
    display:none;
  }
}

/* ── En móvil (<600px): compactar action-row ── */
@media (max-width:599px){
  .action-row{
    flex-wrap:wrap;gap:6px;
  }
  .action-btn-secondary{
    flex:1;min-width:0;height:36px;font-size:10px;padding:0 8px;
  }
}

/* ── Sheet ampliado en >=600px (centrado vertical, sombra, scrollbar discreta) ── */
@media (min-width:600px){
  .overlay{align-items:center}
  .sheet{
    max-width:560px;
    max-height:85dvh;
    border-radius:16px;
    margin:0 24px;
    transform:translateY(20px) scale(.96);
    opacity:0;
    transition:transform .25s cubic-bezier(.33,1,.68,1),opacity .2s;
    border:1px solid var(--border);
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.7);
    /* Scrollbar discreta en escritorio (el nativo es demasiado visible) */
    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
  }
  .sheet::-webkit-scrollbar{width:8px}
  .sheet::-webkit-scrollbar-track{background:transparent}
  .sheet::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
  .sheet::-webkit-scrollbar-thumb:hover{background:var(--border-hi);background-clip:padding-box;border:2px solid transparent}
  .overlay.open .sheet{transform:translateY(0) scale(1);opacity:1}
  .handle{display:none}
}

/* ── Bulk bar centrado en >=600px ── */
@media (min-width:600px){
  #bulk-bar{
    left:50%;transform:translateX(-50%);
    max-width:920px;border-radius:12px 12px 0 0;
    border-left:1px solid var(--border-hi);border-right:1px solid var(--border-hi);
  }
  /* Sobreescritura del keyframe para mantener centrado durante la animación */
  @keyframes slideUpBulk{from{transform:translateX(-50%) translateY(100%)}to{transform:translateX(-50%) translateY(0)}}
}

/* ── Update banner centrado en >=600px ── */
@media (min-width:600px){
  #update-banner{
    top:24px;left:50%;right:auto;transform:translateX(-50%);
    border-radius:12px;border:1px solid var(--cobrado);
    width:calc(100% - 48px);max-width:920px;
  }
}
/* Sobreescritura del keyframe para mantener centrado durante la animación */
@media (min-width:600px){
  @keyframes slideDown{from{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%,0)}}
}

/* ── SW update notice centrado en >=600px ── */
@media (min-width:600px){
  #sw-update-notice{
    bottom:24px;left:50%;right:auto;transform:translateX(-50%);
    border-radius:12px;border:1px solid var(--border-hi);
    width:calc(100% - 48px);max-width:920px;
  }
}
/* Sobreescritura del keyframe para mantener centrado durante la animación */
@media (min-width:600px){
  @keyframes slideUp{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
}

/* ── Safari banner centrado en >=600px ── */
@media (min-width:600px){
  #safari-banner{
    top:24px;left:50%;right:auto;transform:translateX(-50%);
    border-radius:12px;border:1px solid var(--amber);
    width:calc(100% - 48px);max-width:920px;
  }
}

/* ── Esquinas redondeadas del #app: alineación con header y footer ────
   En desktop/tablet (≥600px), #app tiene border-radius:16px en sus 4
   esquinas. Pero .top-stack (header sticky) y #app-footer-fixed
   (footer sticky) ocupan width:100% con fondo sólido, por lo que
   "pisan" visualmente las esquinas redondeadas del #app.

   Solución: aplicar el mismo radio (16px) a las esquinas exteriores
   del header (arriba) y del footer (abajo). Así el contenedor queda
   completamente redondeado por fuera, sin romper position:sticky.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  /* .top-stack tiene background sólido, hay que redondear arriba.
     El header anidado también tiene background sólido y ocupa todo el
     ancho, por lo que tapa el redondeo del padre si no se le aplica
     también el mismo radio. Por eso ambos. */
  .top-stack,
  .top-stack > header {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
  #app-footer-fixed {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}