/* ============================================
   Ajustes responsivos para el módulo documental
   ============================================ */

/* Base */
.documentary-module {
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}

/* Tablet (<=1100px) */
@media (max-width: 1100px) {
  .documentary-module {
    padding: 24px 20px !important;
  }

  /* Header: wrap counter under title */
  .doc-header {
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 24px !important;
  }

  .doc-header > div:last-child {
    min-width: auto !important;
    padding: 10px 18px !important;
  }

  /* Search bar */
  .doc-search-bar {
    padding: 16px 24px !important;
  }

  .doc-search-bar .doc-category-dropdown {
    width: 220px !important;
  }

  /* Category pills */
  .doc-pills {
    padding: 16px 24px !important;
  }

  /* Grid: allow smaller cards */
  #documents-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
  }
}

/* Mobile (<=640px) */
@media (max-width: 640px) {
  .documentary-module {
    padding: 14px 12px !important;
  }

  /* Header: stack vertically */
  .doc-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 16px !important;
    gap: 14px;
  }

  .doc-header > div:first-child {
    margin-right: 0 !important;
    width: 44px !important;
    height: 44px !important;
  }

  .doc-header > div:first-child i {
    font-size: 20px !important;
  }

  .doc-header h2 {
    font-size: 18px !important;
  }

  .doc-header p {
    font-size: 12px !important;
  }

  .doc-header > div:last-child {
    align-self: flex-start;
    padding: 10px 16px !important;
    min-width: 0 !important;
  }

  .doc-header > div:last-child span:first-child {
    font-size: 22px !important;
  }

  /* Category pills */
  .doc-pills {
    padding: 14px 16px !important;
  }

  .doc-pills > div {
    gap: 8px !important;
  }

  .doc-pills > div > div > div {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  /* Search bar: stack vertically */
  .doc-search-bar {
    flex-direction: column !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .doc-search-bar > div:first-child {
    min-width: 100% !important;
    width: 100% !important;
  }

  .doc-search-bar > div:first-child input {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  .doc-search-bar > div:last-child {
    width: 100% !important;
  }

  .doc-search-bar .doc-category-dropdown,
  .doc-search-bar .doc-category-dropdown .Select {
    width: 100% !important;
  }

  /* Grid: single column */
  #documents-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Document cards */
  .doc-card {
    border-radius: 12px !important;
  }

  .doc-card > div:first-child {
    height: 120px !important;
  }

  .doc-card > div:first-child i {
    font-size: 34px !important;
  }

  .doc-card > div:nth-child(2) {
    padding: 14px 16px 0 !important;
  }

  .doc-card > div:nth-child(2) h3 {
    font-size: 15px !important;
  }

  .doc-card > div:nth-child(2) p {
    font-size: 12px !important;
  }

  .doc-card > div:last-child {
    padding: 12px 16px !important;
  }

  .doc-preview-btn,
  .doc-card > div:last-child a {
    width: 34px !important;
    height: 34px !important;
  }

  /* Empty state */
  .doc-empty-state {
    padding: 50px 16px !important;
  }

  .doc-empty-state i {
    font-size: 40px !important;
  }

  .doc-empty-state p:first-of-type {
    font-size: 16px !important;
  }
}

/* Very small screens (<=400px) */
@media (max-width: 400px) {
  .documentary-module {
    padding: 10px 8px !important;
  }

  .doc-header {
    padding: 14px 12px !important;
  }

  .doc-header h2 {
    font-size: 16px !important;
  }

  .doc-search-bar {
    padding: 10px 12px !important;
  }

  .doc-pills {
    padding: 10px 12px !important;
  }

  #documents-container {
    gap: 12px !important;
  }

  .doc-card > div:first-child {
    height: 100px !important;
  }

  .doc-card > div:nth-child(2) h3 {
    font-size: 14px !important;
  }
}