/* ========================================
  ARCHIVO: responsive.css
  DESCRIPCIÓN: Media queries para adaptar el diseño a diferentes tamaños de pantalla
  OBJETIVO: Hacer la aplicación fluida en móviles, tablets y escritorio
   ======================================== */

/* =====================================
  NOTA SOBRE BREAKPOINTS (PUNTOS DE CORTE):
  Los breakpoints definen cuándo cambia el diseño según el tamaño de pantalla.
  
  - 320px: Teléfonos muy antiguos/pequeños
  - 480px: Teléfonos modernos
  - 768px: Tablets en vertical / Pantallas pequeñas
  - 1024px: Tablets horizontales / Laptops pequeñas
  - 1440px: Laptops medianas / Escritorios
  - 2560px: Pantallas ultraancha (4K)
   ===================================== */

/* =====================================
  BREAKPOINT 1: DISPOSITIVOS MUY PEQUEÑOS
  Teléfonos muy antiguos o pequeños (≤ 320px)
   ===================================== */

  @media (max-width: 320px) {
    /* Reducir padding de página en pantallas microscópicas */
    .page-content {
      padding: 0.5rem;
    }
    
    /* Reducir padding de cards */
    .card {
      padding: 0.75rem;
    }
    
    /* Cambiar encabezados a dirección vertical */
    .view-header {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }
    
    /* Botones ocupan ancho completo */
    .btn {
      width: 100%;
      margin-top: 0.5rem;
    }
    
    /* Ocultar nombre de usuario en pantallas muy pequeñas */
    .user-profile .user-name {
      display: none;
    }
  }
  
  /* =====================================
    BREAKPOINT 2: TELÉFONOS MODERNOS
    Pantallas pequeñas (≤ 480px)
     ===================================== */
  
  @media (max-width: 480px) {
    /* Reducir padding pero no tanto */
    .page-content {
      padding: 1rem;
    }
    
    /* Encabezado de vista en columna */
    .view-header {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
    }
    
    /* Botones al ancho completo con texto centrado */
    .btn {
      width: 100%;
      justify-content: center;
    }
    
    /* Reducir tamaño de fuente en tablas */
    .data-table th, .data-table td {
      padding: 0.5rem;
      font-size: 0.8rem;
    }
    
    /* Reducir tamaño del h1 en header */
    .header h1 {
      font-size: 1.1rem;
    }
  }
  
  /* =====================================
    BREAKPOINT 3: TABLETS Y MÓVILES LANDSCAPE
    Pantallas medianas (≤ 768px)
    
    Este es el breakpoint MÁS IMPORTANTE porque:
    - Cambia sidebar a bottom navigation
    - Ajusta layout principal
    - Es la transición de móvil a tablet
     ===================================== */
  
  @media (max-width: 768px) {
    
    /* ========== OVERRIDE VARIABLES ==========
       Cambiar el ancho del sidebar a 0 en pantallas pequeñas */
    :root {
      --sidebar-width: 0px;
    }
  
    /* Ajustar main-content para nueva navegación inferior */
    .main-content {
      /* Sin margen izquierdo (no hay sidebar lateral) */
      margin-left: 0;
      
      /* Espacio en la parte inferior para la navegación */
      padding-bottom: 70px;
    }
  
    /* ========== OVERRIDES PARA WEB COMPONENTS ==========
      El selector :host() permite sobrescribir estilos
       dentro del Shadow DOM de los Web Components */
  
    /* El app-sidebar se convierte en navegación inferior */
    :host(app-sidebar) {
      /* Posicionar en la parte inferior */
      top: auto !important;
      bottom: 0 !important;
      left: 0 !important;
      
      /* Ancho completo de la pantalla */
      width: 100% !important;
      
      /* Alto fijo para barra de navegación */
      height: 70px !important;
      
      /* Sin borde derecho */
      border-right: none !important;
      
      /* Borde superior en su lugar */
      border-top: 1px solid var(--border-color);
      
      /* Cambiar dirección de flex a horizontal */
      flex-direction: row !important;
    }
  
    /* Ocultar logo en navegación inferior */
    .brand {
      display: none !important;
    }
    
    /* Navegación ocupa todo el espacio */
    nav {
      padding: 0 !important;
      height: 100%;
      width: 100%;
    }
  
    /* Lista de navegación en fila horizontal */
    nav ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
    }
  
    /* Cada item ocupa espacio igual */
    nav li {
      margin-bottom: 0 !important;
      flex: 1;
    }
  
    /* Enlaces de navegación en formato vertical (ícono sobre texto) */
    nav a {
      /* Ícono sobre texto */
      flex-direction: column;
      
      /* Reducir padding */
      padding: 0.5rem 0 !important;
      
      /* Texto pequeño */
      font-size: 0.65rem;
      
      /* Sin borde izquierdo */
      border-left: none !important;
      
      /* Borde superior en su lugar */
      border-top: 3px solid transparent;
      
      /* Centrar contenido */
      justify-content: center;
      text-align: center;
      
      /* Espacio entre ícono y texto */
      gap: 0.2rem;
    }
  
    /* Estado hover/activo en navegación inferior */
    nav a:hover, nav a.active {
      /* Sin fondo en hover */
      background-color: transparent !important;
      
      /* Sin borde izquierdo */
      border-left: none !important;
      
      /* Borde superior con color primario */
      border-top-color: var(--primary-color) !important;
    }
  
    /* Ícono sin margen derecho (está en columna) */
    nav .icon {
      margin-right: 0 !important;
      font-size: 1.4rem;
    }
  
    /* ========== AJUSTES PARA MODALES ==========
       Los modales se hacen casi pantalla completa */
    .modal-content {
      /* 95% del ancho disponible */
      width: 95% !important;
      
      /* Altura máxima: 80% de viewport */
      max-height: 80vh !important;
    }
  
    /* Formularios en tablet: inputs apilados */
    .form-row {
      flex-direction: column;
      gap: 0;
    }
  
    /* ========== AJUSTES PARA CRONOGRAMA ==========
       Adaptar vista de actividades en timeline */
    .activity-bar {
      /* Cambiar a columna */
      flex-direction: column !important;
      
      /* Alinear al inicio */
      align-items: flex-start !important;
    }
  
    /* Información de actividad en tablet */
    .activity-info {
      /* Ocupar ancho completo */
      width: 100% !important;
      
      /* Espacio abajo */
      margin-bottom: 0.5rem;
    }
  
    /* Timeline en tablet */
    .timeline-track {
      /* Ancho mínimo: 100% */
      min-width: 100% !important;
      
      /* Ancho: 100% */
      width: 100% !important;
    }
  
    /* ========== AJUSTES PARA BOTONES DE ACCIÓN ==========
       En tablets, apilar botones verticalmente */
    .action-buttons {
      flex-direction: column;
      min-width: unset;
    }
  
    /* Cada botón ocupa ancho completo */
    .action-buttons .btn {
      width: 100%;
    }
  }
  
  /* =====================================
    BREAKPOINT 4: MÓVILES EXTREMADAMENTE ESTRECHOS
    Convertir tablas en cards (≤ 400px)
     ===================================== */
  
  @media (max-width: 400px) {
    
    /* Remover sombra del contenedor de tabla */
    .table-wrapper {
      box-shadow: none !important;
      background: transparent;
      border: none;
      padding: 0;
    }
  
    /* Convertir tabla y todas sus partes en bloques */
    .data-table, .data-table tbody, .data-table tr, .data-table td {
      display: block;
      width: 100%;
      min-width: unset !important;
    }
  
    /* Ocultar encabezados (no hay espacio) */
    .data-table thead {
      display: none;
    }
  
    /* Cada fila se convierte en una card */
    .data-table tr {
      /* Espacio abajo entre cards */
      margin-bottom: 1rem;
      
      /* Fondo card */
      background-color: rgba(30, 41, 59, 0.45);
      
      /* Borde glass */
      border: 1px solid rgba(255, 255, 255, 0.08);
      
      /* Bordes redondeados */
      border-radius: 12px;
      
      /* Sombra glass */
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
      
      /* Padding interno */
      padding: 0.5rem;
    }
  
    /* Celdas dentro de las cards */
    .data-table td {
      /* Mostrar como bloque (nueva línea) */
      border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
      
      /* Centrar el contenido */
      text-align: center;
      
      /* Padding generoso */
      padding: 0.75rem 0;
    }
  
    /* Última celda sin borde inferior */
    .data-table td:last-child {
      border-bottom: none;
    }
  
    /* Botones de acción lado a lado en cards */
    .action-buttons {
      flex-direction: row;
      width: 100%;
    }
  
    /* Botones ocupan espacio igual */
    .action-buttons .btn {
      flex: 1;
    }
  }
  
  /* =====================================
    BREAKPOINT 5: LAPTOPS MEDIANAS
    Reducir ancho del sidebar (≤ 1024px)
     ===================================== */
  
  @media (max-width: 1024px) {
    
    /* Reducir ancho del sidebar para dispositivos medianos */
    :root {
      --sidebar-width: 200px;
    }
  }
  
  /* =====================================
    BREAKPOINT 6: PANTALLAS GRANDES
    Aumentar espacios en laptops (≥ 1440px)
     ===================================== */
  
  @media (min-width: 1440px) {
    
    /* Aumentar ancho del sidebar en pantallas grandes */
    :root {
      --sidebar-width: 300px;
    }
  }
  
  /* =====================================
    BREAKPOINT 7: PANTALLAS ULTRAANCHA
    Ajustes para 4K y ultrawide (≥ 2560px)
     ===================================== */
  
  @media (min-width: 2560px) {
    
    /* Sidebar muy ancho en pantallas ultraancha */
    :root {
      --sidebar-width: 400px;
    }
  }
  
  /* ========================================
    NOTAS DE IMPLEMENTACIÓN:
    
    1. MOBILE FIRST: Las reglas base sin media query
        son para móviles, luego se agrandan en pantallas grandes
    
    2. BOTTOM NAVIGATION: En tablets/móviles, la navegación
        lateral se convierte en barra inferior
    
    3. TABLAS A CARDS: En móviles extremos, las tablas se
        convierten visualmente en cards apiladas
    
    4. BREAKPOINT CRÍTICO: 768px es donde ocurren los mayores
        cambios en el layout
    
    5. !important: Se usa para sobrescribir estilos de
        Web Components (Shadow DOM)
    
    6. VARIABLES CSS: Se pueden cambiar variables
        en media queries para reescalar automáticamente
     ======================================== */