/* web/app/style/responsive.css */
/* Diseño responsive para móviles y tablets */

/* ==========================================
   BREAKPOINTS
   ========================================== */

/* 
  xs: < 480px  (móviles pequeños)
  sm: 480px - 768px (móviles)
  md: 768px - 1024px (tablets)
  lg: 1024px - 1440px (desktop)
  xl: > 1440px (desktop grande)
*/

/* ==========================================
   MOBILE FIRST BASE
   ========================================== */

/* Ajustes generales para móvil */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  h3 {
    font-size: 18px;
  }
  
  /* Padding general más pequeño en móvil */
  .card,
  .panel,
  .section {
    padding: 12px;
  }
}

/* ==========================================
   PANEL LATERAL IA
   ========================================== */

@media (max-width: 768px) {
  /* Panel ocupa toda la pantalla en móvil */
  .ai-panel {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Tabs del panel más compactos */
  .ai-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .ai-tab {
    min-width: auto;
    padding: 8px 12px;
    font-size: 13px;
  }
  
  /* Contenido del panel */
  .ai-panel-body {
    padding: 12px;
  }
  
  /* Gráficos más pequeños en móvil */
  .chart-container {
    height: 200px !important;
  }
}

/* ==========================================
   PROPERTY CARDS (SWIPE)
   ========================================== */

@media (max-width: 768px) {
  .property-card {
    max-width: 100%;
    margin: 0 8px;
  }
  
  .property-card__image {
    height: 250px; /* Más pequeño en móvil */
  }
  
  .property-card__content {
    padding: 12px;
  }
  
  .property-card__title {
    font-size: 18px;
  }
  
  .property-card__price {
    font-size: 22px;
  }
  
  /* Métricas en grid de 2 columnas en móvil */
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  
  .metric-item {
    font-size: 12px;
  }
}

/* ==========================================
   CONFIDENCE BADGE
   ========================================== */

@media (max-width: 768px) {
  .confidence-badge {
    top: 8px !important;
    right: 8px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  
  .confidence-badge__score {
    font-size: 16px !important;
  }
}

/* ==========================================
   HEADER / NAVIGATION
   ========================================== */

@media (max-width: 768px) {
  header {
    padding: 8px 12px;
  }
  
  header .logo {
    font-size: 18px;
  }
  
  /* Botones del header más pequeños */
  header button,
  header .btn {
    padding: 6px 10px;
    font-size: 13px;
  }
  
  /* Ocultar texto en botones, solo mostrar iconos */
  header .btn-text {
    display: none;
  }
  
  header .btn-icon {
    margin-right: 0;
  }
}

/* ==========================================
   COMPARADOR A/B/C
   ========================================== */

@media (max-width: 768px) {
  .comparator {
    padding: 12px;
  }
  
  /* Cards en columna en móvil */
  .comparator-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .comparator-card {
    width: 100%;
  }
  
  /* Risk/Reward Matrix más pequeño */
  .risk-reward-chart {
    height: 250px !important;
  }
  
  /* Tabla comparativa horizontal scroll */
  .comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .comparison-table {
    min-width: 600px;
  }
}

/* ==========================================
   MODALS
   ========================================== */

@media (max-width: 768px) {
  .modal {
    padding: 12px;
  }
  
  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    margin: 0;
    border-radius: 12px 12px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  .modal-header {
    padding: 12px;
  }
  
  .modal-body {
    padding: 12px;
    max-height: calc(90vh - 60px);
    overflow-y: auto;
  }
}

/* ==========================================
   FORMS
   ========================================== */

@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px; /* Evita zoom en iOS */
  }
  
  .form-group {
    margin-bottom: 12px;
  }
  
  label {
    font-size: 13px;
  }
  
  /* Botones más grandes en móvil (mejor touch target) */
  button,
  .btn {
    min-height: 44px; /* iOS recommended */
    font-size: 15px;
  }
}

/* ==========================================
   MONTE CARLO CHARTS
   ========================================== */

@media (max-width: 768px) {
  .monte-carlo-histogram {
    height: 200px !important;
  }
  
  .monte-carlo-timeline {
    height: 180px !important;
  }
  
  /* Percentiles en columna */
  .percentiles-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .percentile-item {
    width: 100%;
  }
  
  /* Stats colapsables abierto por defecto en desktop, cerrado en móvil */
  .stats-collapsible {
    max-height: 0;
    overflow: hidden;
  }
  
  .stats-collapsible.open {
    max-height: 500px;
  }
}

/* ==========================================
   TOOLTIPS EN MOBILE
   ========================================== */

@media (max-width: 768px) {
  /* Tooltips más pequeños y mejor posicionados */
  .tooltip {
    max-width: 200px;
    font-size: 12px;
    padding: 6px 10px;
  }
  
  /* En móvil, mostrar tooltips al hacer tap, no hover */
  [data-tooltip] {
    cursor: pointer;
  }
}

/* ==========================================
   TOUCH TARGETS
   ========================================== */

/* Asegurar que elementos táctiles sean suficientemente grandes (min 44x44px) */
@media (max-width: 768px) {
  button,
  a,
  input[type="checkbox"],
  input[type="radio"],
  .clickable {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Iconos más grandes para mejor toque */
  .icon {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================
   LANDSCAPE MODE (MÓVIL HORIZONTAL)
   ========================================== */

@media (max-width: 768px) and (orientation: landscape) {
  /* Aprovechar más el espacio horizontal */
  .ai-panel {
    width: 50% !important;
  }
  
  .property-card__image {
    height: 200px;
  }
  
  /* Métricas en 4 columnas */
  .metrics-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ==========================================
   TABLET (768px - 1024px)
   ========================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  .ai-panel {
    width: 400px !important;
  }
  
  .property-card {
    max-width: 90%;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================
   DESKTOP GRANDE (> 1440px)
   ========================================== */

@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .ai-panel {
    width: 500px !important;
  }
  
  .property-card {
    max-width: 500px;
  }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
  /* Ocultar elementos no imprimibles */
  header,
  .ai-panel,
  button,
  .btn,
  .controls {
    display: none !important;
  }
  
  /* Ajustar colores para impresión */
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  /* Evitar saltos de página */
  .card,
  .section {
    page-break-inside: avoid;
  }
}

/* ==========================================
   ACCESIBILIDAD
   ========================================== */

/* Mejorar contraste para usuarios con baja visión */
@media (prefers-contrast: high) {
  * {
    border-width: 2px !important;
  }
  
  button,
  .btn {
    border: 2px solid currentColor !important;
  }
}

/* Dark mode automático (respeta preferencias del sistema) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
  }
  
  body {
    background: var(--bg-primary);
    color: var(--text-primary);
  }
  
  .card {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }
}