/* Contenedor */
.apm-wrap{--gap:16px; --radius:14px; --shadow:0 6px 16px rgba(0,0,0,.06);}
.apm-wrap *{box-sizing:border-box}

/* Toolbar */
.apm-toolbar{display:flex; flex-wrap:wrap; gap:var(--gap); align-items:center; margin-bottom:var(--gap)}
.apm-toolbar .apm-input{flex:1 1 280px}
.apm-toolbar .apm-select{flex:0 1 260px}
.apm-toolbar .button{height:40px; padding:0 16px; border-radius:10px; margin-bottom: 11px; font-size: 20px;}

/* Grid */
.apm-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, 1fr); /* base: móviles, 2 col */
}

@media (min-width: 768px) {
  .apm-grid {
    grid-template-columns: repeat(3, 1fr); /* tablet */
  }
}

@media (min-width: 1200px) {
  .apm-grid {
    grid-template-columns: repeat(6, 1fr); /* escritorio */
  }
}
.apm-grid a {text-decoration:none !important;}

/* Tarjeta */
.apm-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.apm-thumb{aspect-ratio:16/9; background:#fff; display:block; overflow:hidden}
/*.apm-thumb img{width:100%; height:100%; object-fit:cover; display:block}*/
.apm-thumb img{width: 103%;height: 100%;object-fit:cover;display:block;max-width: 200%;max-height: 200%;margin-left: -3px;margin-top: 0px;}
.apm-thumb img.img_file {margin-top: -8px;}
.apm-thumb.apm-open.img_file_ar {aspect-ratio: 125/104;}

.apm-card__fileinfo{
  margin-bottom: .5rem;
  font-size: .7rem;
  color: #667085;          /* gris suave */
  line-height: 1.2;
  word-break: break-word;  /* por si el nombre es largo */
}


.apm-body{padding:14px}
.apm-title{font-weight:600; font-size:16px; margin:0 0 8px}
.apm-meta{font-size:12px; color:#777; display:flex; gap:8px; flex-wrap:wrap}
.apm-badges{margin-top:10px; display:flex; gap:6px; flex-wrap:wrap}
.apm-badge{background:#eef6ff; color:#1677ff; border-radius:999px; padding:3px 8px; font-size:11px;}
.apm-actions{margin-top:auto; padding:12px 14px; display:flex; gap:10px; border-top:1px solid #f2f2f2; font-size: 14px; flex-direction: column;}
.apm-btn{display:inline-flex; align-items:center; gap:8px; padding:3px 10px; border-radius:7px; text-decoration:none; transition:.15s ease-in-out;margin-bottom: 8px;}
.apm-btn.primary{background:#1677ff; color:#fff}
.apm-btn.ghost{background:#f8f8f8; color:#333}
.apm-empty{padding:28px; background:#fff; border-radius:var(--radius); text-align:center}

/* Paginación */
.apm-pager{display:flex; gap:8px; justify-content:center; margin-top:18px}
.apm-page{padding:8px 12px; border-radius:8px; background:#f5f5f5; cursor:pointer; user-select:none;border-width: 1px;border-color: #333;}
.apm-page.is-active{background:#1677ff; color:#fff}
.apm-page[disabled]{opacity:.5; cursor:not-allowed}
/* Campos con etiqueta */
.apm-field{display:flex; flex-direction:column; gap:6px; min-width:140px}
.apm-field > label{font-size:12px; color:#666; font-weight:600}

/* Toolbar una sola fila (y responsive) */
.apm-toolbar{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px}
.apm-inline .apm-toolbar{flex-wrap:nowrap}
.apm-inline .apm-input{flex:1 1 auto; min-width:240px}
.apm-inline .apm-select{flex:0 0 240px}
.apm-inline .apm-field select,
.apm-inline .apm-field input[type="text"]{height:40px}
.apm-field select {font-size:16px;}

/* Oculta los controles de orden en la barra de filtros */
.apm-toolbar .apm-orderby-wrap,
.apm-toolbar .apm-order-wrap{
  display:none !important;
}

@media (max-width: 1024px){
  .apm-inline .apm-toolbar{flex-wrap:wrap}
}
/* Modal */
.apm-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:32px;opacity:0;pointer-events:none;transition:.2s}
.apm-modal.is-open{opacity:1;pointer-events:auto}
.apm-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.apm-modal__dialog{position:relative;z-index:1;background:#fff;border-radius: 3px;max-width: 750px;width:100%;max-height:calc(100vh - 64px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);padding: 25px;}
.apm-modal__close{position:sticky;top:0;left:100%;transform:translate(-8px,8px);border:none;background:#fff;color:#333;border-radius:999px;width:36px;height:36px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:2}
.apm-modal-open{overflow:hidden}

.apm-thumb.apm-open,
.apm-title .apm-title-link{ cursor:pointer; text-decoration:none }
.apm-title .apm-title-link:hover{ text-decoration:underline }