/* =======================================================
   css/responsive.css
   Diseño completamente adaptable a movil, tablet y escritorio.
   ======================================================= */

/* ══════════════════════════════════════════════════════
   TABLET  (<= 1024px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .charts-row {
    grid-template-columns: 1fr;
  }
  .chart-card-wide {
    grid-column: 1;
  }
}

/* ══════════════════════════════════════════════════════
   TABLET PEQUENA  (<= 768px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar {
    width: 64px;
  }
  .sidebar .nav-text,
  .sidebar .logo,
  .sidebar-footer {
    display: none;
  }
  .main-content,
  .main-content.shifted {
    margin-left: 64px;
  }
  .topbar {
    padding: 0 14px;
    gap: 8px;
  }
  .fecha-hoy {
    display: none;
  }
  .page {
    padding: 14px;
  }
  .cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .filters-bar {
    padding: 10px;
  }
  .radio-group {
    flex-direction: column;
  }
  .section-card {
    padding: 14px;
  }
  .topbar-right .btn-reminder {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════
   MOVIL  (<= 600px)
   Sidebar se convierte en bottom-nav, contenido a ancho completo
   ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Ocultar sidebar lateral completamente */
  .sidebar {
    display: none !important;
  }

  /* Contenido ocupa todo el ancho */
  .main-content,
  .main-content.shifted {
    margin-left: 0 !important;
    padding-bottom: 68px;
  }

  /* Topbar compacta */
  .topbar {
    padding: 0 12px;
    height: 56px;
    gap: 8px;
  }
  .page-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }
  .fecha-hoy,
  .usuario-nombre {
    display: none;
  }
  #selectorMoneda {
    font-size: 11px;
    padding: 3px 4px;
    max-width: 80px;
  }
  .topbar-right .btn-primary {
    padding: 6px 10px;
    font-size: 12px;
  }
  .topbar-right .btn-reminder {
    display: none;
  }

  /* Contenido de paginas */
  .page {
    padding: 12px;
  }

  /* Cards en 1 columna */
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .card {
    padding: 14px;
    gap: 12px;
  }
  .card-icon {
    font-size: 26px;
  }
  .card-value {
    font-size: 18px;
  }
  .card-label {
    font-size: 10px;
  }

  /* Formularios */
  .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Modales: ancho completo y scroll interno */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    margin: 0;
  }
  /* Dejar que .modal maneje el scroll; quitar max-height del formulario
     para que el sticky del header y del footer funcionen correctamente */
  .modal-form {
    max-height: none !important;
    overflow-y: visible !important;
    padding-bottom: 8px;
  }
  .modal-header {
    position: sticky;
    top: 0;
    background: var(--bg-modal);
    z-index: 2;
    padding: 16px;
    border-bottom: 1px solid var(--border);
  }
  .modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg-modal);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
  }
  .modal-actions button {
    flex: 1;
    justify-content: center;
  }

  /* Tablas: scroll horizontal */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table {
    min-width: 500px;
    font-size: 12px;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px;
  }

  /* Filtros en columna */
  .filters-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filters-bar label {
    display: none;
  }
  .input-filter,
  .filters-bar select,
  .filters-bar input {
    width: 100%;
  }

  /* Presupuesto */
  .budget-grid {
    grid-template-columns: 1fr;
  }

  /* Metas – botones en móvil */
  .meta-acciones {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .meta-btn-completar {
    width: 100%;
    min-width: unset;
    padding: 10px 16px;
    font-size: 14px;
  }
  .meta-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .meta-btn-group .btn-sm {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 10px 8px;
    font-size: 13px;
  }

  /* Recordatorios */
  .recordatorios-grid {
    grid-template-columns: 1fr;
  }
  .reminder-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .reminder-actions .btn-sm,
  .reminder-actions .action-btn {
    flex: 1;
    min-width: calc(50% - 3px);
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    font-size: 13px;
  }

  /* Section headers con boton */
  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .section-header h2 {
    font-size: 15px;
  }
  .section-header button {
    width: 100%;
    justify-content: center;
  }

  /* Charts: altura reducida */
  .chart-card canvas {
    max-height: 200px !important;
  }

  /* Deudas resumen */
  #deudasResumen {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ── INVERSIONES ──────────────────────────────────────── */

  /* Cabecera de página */
  .inv-page-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .inv-page-header #btnNuevaInversion {
    width: 100%;
    justify-content: center;
  }

  /* Banner fondo: column layout compacto */
  .inv-fondo-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
  }
  .inv-fondo-icono { display: none; }
  .inv-fondo-info  { min-width: unset; }
  .inv-fondo-valores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .inv-fondo-item {
    padding: 8px 6px;
    min-width: unset;
    border-right: 1px solid var(--border);
  }
  .inv-fondo-item:last-child { border-right: none; }
  .inv-fondo-val  { font-size: 13px; }
  .inv-fondo-label { font-size: 9px; }
  .inv-fondo-btn  { width: 100%; justify-content: center; text-align: center; }

  /* Resumen cards: 2 x 2 */
  #invResumen {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .inv-resumen-card  { padding: 12px 8px; }
  .inv-resumen-icon  { font-size: 20px; }
  .inv-resumen-label { font-size: 10px; }
  .inv-resumen-valor { font-size: 17px; }

  /* Tarjeta de inversión: cabecera en columna */
  .inv-card { padding: 14px; }
  .inv-card-header {
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
  }
  .inv-card-left  { width: 100%; }
  .inv-card-right {
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
  }
  .inv-card-sublabel { font-size: 11px; margin-bottom: 0; }
  .inv-card-capital  { font-size: 18px; }
  .inv-card-nombre   { font-size: 15px; }

  /* Stats en 2 columnas */
  .inv-card-stats {
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    gap: 8px;
  }
  .inv-stat-valor { font-size: 13px; }

  /* Acciones: flex wrap, 50% por botón — el de basura queda compacto */
  .inv-card-acciones { gap: 8px; }
  .inv-card-acciones .btn-sm {
    flex: 1;
    min-width: calc(50% - 4px);
    text-align: center;
    justify-content: center;
    padding: 10px 4px;
    font-size: 12px;
  }
  .inv-card-acciones .btn-danger.btn-sm {
    flex: 0 0 auto;
    min-width: unset;
    padding: 10px 20px;
  }

  /* Fechas y nota */
  .inv-card-fechas { font-size: 11px; }
  .inv-card-nota   { font-size: 11px; }

  /* Historial de movimientos: tabla con scroll horizontal */
  #invHistorialLista {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .inv-hist-table {
    min-width: 460px;
    font-size: 12px;
  }
  .inv-hist-table th,
  .inv-hist-table td {
    padding: 8px 8px;
  }

  /* Gestor de tipos: input + botón en columna */
  #modalGestorTiposInv .modal-body > div {
    flex-direction: column;
  }
  #btnAgregarTipoInv {
    width: 100%;
  }

  /* Bottom nav visible */
  .bottom-nav {
    display: flex !important;
  }
}

/* ══════════════════════════════════════════════════════
   BOTTOM NAVIGATION (movil <= 600px)
   Barra de navegacion inferior flotante
   ══════════════════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  z-index: 200;
  align-items: stretch;
  overflow: hidden;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 2px;
  position: relative;
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item .bn-icon {
  font-size: 20px;
  line-height: 1;
}

.bottom-nav-item.active {
  color: var(--accent-blue);
  background: rgba(88, 166, 255, 0.08);
}

.bottom-nav-item .bn-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  background: var(--accent-red);
  color: #fff;
  border-radius: 10px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  min-width: 16px;
  text-align: center;
}

.bottom-nav-item .bn-badge:empty {
  display: none;
}

/* More menu (overflow de items extra) */
.bottom-nav-more-panel {
  display: none;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  z-index: 199;
  padding: 8px 0;
  flex-direction: column;
}

.bottom-nav-more-panel.open {
  display: flex;
}

.bottom-nav-more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-more-item:active {
  background: var(--bg-card);
}

/* ══════════════════════════════════════════════════════
   MOVIL MUY PEQUENO (<= 380px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .card-value {
    font-size: 16px;
  }
  .page-title {
    max-width: 110px;
    font-size: 14px;
  }
  #selectorMoneda {
    max-width: 65px;
    font-size: 10px;
  }
  .bottom-nav-item {
    font-size: 8px;
  }
  .bottom-nav-item .bn-icon {
    font-size: 18px;
  }
  .modal-actions {
    flex-direction: column;
  }
  .modal-actions button {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════
   LANDSCAPE MOVIL (altura < 500px)
   ══════════════════════════════════════════════════════ */
@media (max-height: 500px) and (max-width: 900px) {
  .modal {
    max-height: 95vh;
    border-radius: 8px;
  }
  .bottom-nav {
    height: 50px;
  }
  .main-content {
    padding-bottom: 54px;
  }
  .topbar {
    height: 48px;
  }
}

/* ══════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════ */
@media print {
  .sidebar,
  .topbar,
  .bottom-nav,
  .modal-overlay,
  .toast-container,
  .filters-bar,
  .modal-actions,
  .action-btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-reminder,
  .btn-success {
    display: none !important;
  }
  .main-content {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
  }
  .page.active {
    display: block;
    padding: 0;
  }
  body {
    background: #fff;
    color: #000;
  }
  .data-table th,
  .data-table td {
    border: 1px solid #ccc;
  }
  .section-card,
  .chart-card {
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}