/* responsive.css — overrides para pantallas chicas (<992px) sin tocar main.js
   ------------------------------------------------------------------------
   OBJETIVO: Hacer que la interfaz de tu nube sea usable en móviles/tablets
   conservando TODO el marcado y JS existentes. Solo CSS.

   ARCHIVOS BASE REFERENCIADOS:
   - style.css establece body/html height:100% + overflow:hidden, lo que impide 
     el scroll vertical natural en móviles. fileciteturn1file1
   - El header de la tabla en #drop-zone usa una fila con 4 columnas fijas 
     (Nombre/Tamaño/Última Modificación/Acciones) que rompen el layout en pantallas estrechas. fileciteturn1file15
   - Cada item de archivo se renderiza desde main.js con una .row -> .col-md-6/.col-md-2/.col-md-3/.col-md-1 
     estructura; necesitamos que se apile y que Tamaño/Fecha pasen debajo del Nombre en móviles. fileciteturn1file13
   - El footer de uso de almacenamiento está fijado a la derecha con min-width:450px; ya hay un media query a 768px que lo expande 100%, pero ajustaremos también tipografía y espaciados. fileciteturn1file4
*/

/* ------------------------------------------------------------------ */
/* 1. VARIABLES (opcional)                                            */
/* ------------------------------------------------------------------ */
:root {
  --fm-mobile-h-padding: 0.75rem;
  --fm-mobile-icon-space: 1.75rem; /* ancho aprox del icono + margen */
  --fm-mobile-meta-fs: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* 2. Corregir overflow en móviles                                    */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  html, body {
    height: auto;            /* permitir que el contenido crezca */
    overflow-x: hidden;      /* evitar scroll lateral */
    overflow-y: auto;        /* permitir scroll vertical */
  }
  body {
    padding-top: 0.5rem;     /* respirar un poco */
  }
  .container-fluid {
    flex-grow: 0;            /* evita forzar alturas en móviles */
    min-height: auto;
  }
}

/* ------------------------------------------------------------------ */
/* 3. Toolbar superior: permitir envoltura / apilado                  */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* Wrapper que contiene breadcrumb + buscador + acciones */
  #file-manager > .d-flex, /* selectores defensivos */
  #file-manager .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: .5rem 1rem;
  }
  #breadcrumb-container {
    margin-bottom: .25rem;
  }
  #search-container {
    min-width: 0 !important;  /* anula inline style de 250px */
    flex: 1 1 100%;           /* pantalla completa */
    order: 2;                 /* debajo del breadcrumb */
  }
  #main-actions,
  #secondary-actions {
    order: 3;
    flex-wrap: wrap;
  }
  #main-actions > * {
    margin-bottom: .25rem;
  }
  #secondary-actions {
    margin-top: .25rem !important;
  }
}

/* ------------------------------------------------------------------ */
/* 4. Encabezado de lista (#drop-zone .card-header)                   */
/*    En pantallas pequeñas mostramos solo "Nombre" para ganar espacio*/
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  #drop-zone .card-header .row > div:not(:first-child) {
    display: none !important; /* Oculta Tamaño/Última Modificación/Acciones */
  }
  #drop-zone .card-header .row > div:first-child {
    width: 100% !important;
    flex: 0 0 100%;
  }
}

/* ------------------------------------------------------------------ */
/* 5. Items de archivo                                                */
/* ------------------------------------------------------------------ */
/* Layout de escritorio se mantiene (Bootstrap cols).                 */
/* En móviles: apilar, mostrar meta debajo del nombre, y mover botón  */
/* de acciones a la derecha en la primera línea.                      */
@media (max-width: 575.98px) {
  .file-item {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }
  .file-item .row {
    display: grid !important;
    grid-template-columns: 1fr auto; /* nombre ocupa ancho, actions shrink */
    grid-template-areas:
      "name actions"
      "meta meta";  /* tamaño + fecha */
    column-gap: .25rem;
    row-gap: .25rem;
    align-items: center;
  }
  .file-item .row > .col-md-6 { /* icono+nombre */
    grid-area: name;
    display: flex !important;
    align-items: center;
    min-width: 0; /* permitir truncado */
  }
  .file-item .row > .col-md-2, /* size */
  .file-item .row > .col-md-3 { /* modified */
    grid-area: meta;
    display: inline-block !important;
    width: auto !important;
    flex: none !important;
    padding-left: calc(var(--fm-mobile-icon-space) + .25rem) !important; /* alinear con texto */
    font-size: var(--fm-mobile-meta-fs);
    line-height: 1.2;
    color: #6c757d !important;
  }
  .file-item .row > .col-md-1 { /* acciones */
    grid-area: actions;
    width: auto !important;
    flex: none !important;
    text-align: right !important;
    padding-left: .25rem !important;
    padding-right: .25rem !important;
  }
  /* Compactar icono */
  .file-item .item-icon {
    margin-right: .5rem !important;
  }
  /* Truncar nombre largo */
  .file-item .item-name {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Mostrar meta en una sola línea separada por · si caben */
  .file-item .row > .col-md-2:after {
    content: " · ";
    margin: 0 .25rem;
    color: #adb5bd;
  }
  .file-item .row > .col-md-3 {
    display: inline-block !important;
  }
}

/* Alternativa para pantallas ligeramente más grandes (sm a md) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .file-item .row {
    flex-wrap: wrap;
  }
  .file-item .row > .col-md-6 {flex: 0 0 60%;max-width:60%;}
  .file-item .row > .col-md-2 {flex: 0 0 20%;max-width:20%;font-size:var(--fm-mobile-meta-fs);}  
  .file-item .row > .col-md-3 {flex: 0 0 100%;max-width:100%;order:4;font-size:var(--fm-mobile-meta-fs);padding-left:calc(var(--fm-mobile-icon-space) + .25rem)!important;}
  .file-item .row > .col-md-1 {flex:0 0 auto;order:2;text-align:right;}
}

/* ------------------------------------------------------------------ */
/* 6. File Viewer Modal: full ancho en móviles                         */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  #file-viewer-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }
  #file-viewer-modal .modal-content {
    height: 100vh !important;
    border-radius: 0;
  }
}

/* ------------------------------------------------------------------ */
/* 7. Loader overlay: reducir spinner en móviles                       */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  #loader-overlay .spinner-border {
    width: 2rem !important;
    height: 2rem !important;
  }
  #loader-overlay #loader-text {
    font-size: .875rem;
  }
}

/* ------------------------------------------------------------------ */
/* 8. Footer de almacenamiento                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  #storage-usage-footer {
    padding: .5rem .75rem !important;
  }
  #storage-usage-footer #storage-usage-text {
    font-size: .7rem !important;
  }
  #storage-usage-footer .progress {
    height: 14px !important;
  }
}

/* ------------------------------------------------------------------ */
/* 9. Ajustes táctiles (tamaño de toque mínimo)                       */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  #main-actions .btn,
  #secondary-actions .btn,
  .file-item .item-actions .btn {
    min-height: 36px;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
  }
}

/* ------------------------------------------------------------------ */
/* 10. Accesibilidad: ampliar zona de drop en móviles                  */
/* ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  #drop-zone {
    margin-bottom: 1rem;
  }
}

/* FIN responsive.css */