/* 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}

/* Grid */
.apm-grid{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}

/* 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:#f4f4f4; display:block; overflow:hidden}
.apm-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.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}
.apm-btn{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; text-decoration:none; transition:.15s ease-in-out}
.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}
.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}
@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 }