/* ══════════════════════════════════════════════════════════
   Micromur Noticias IT — estilos
   ══════════════════════════════════════════════════════════ */

.mmit-wrapper{max-width:1100px;margin:0 auto;padding:10px 15px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#1e293b;box-sizing:border-box}
.mmit-wrapper *{box-sizing:border-box}

/* ── Pestañas de categoría ── */
.mmit-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;padding-bottom:14px;
  border-bottom:2px solid #e2e8f0}
.mmit-tab{display:flex;align-items:center;gap:7px;padding:9px 15px;background:#fff;
  border:1px solid #dbe3ec;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;
  color:#475569;transition:all .18s;font-family:inherit;line-height:1.2}
.mmit-tab:hover{border-color:#00529b;color:#00529b;background:#f4f8fd}
.mmit-tab.active{background:#00529b;border-color:#00529b;color:#fff;
  box-shadow:0 2px 8px rgba(0,82,155,.28)}
.mmit-tab svg{flex-shrink:0}

/* ── Barra superior ── */
.mmit-toolbar{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;margin-bottom:16px}
.mmit-toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mmit-section-title{font-size:17px;font-weight:700;color:#00529b;line-height:1.2}
.mmit-badge{background:#e8f0fe;color:#00529b;padding:3px 11px;border-radius:20px;
  font-size:12px;font-weight:600}
.mmit-status{display:flex;align-items:center;gap:6px;font-size:12px;color:#94a3b8}
.mmit-status-text{white-space:nowrap}
.mmit-status-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0}
.mmit-status-dot.loading{background:#f59e0b;animation:mmitPulse 1s infinite}
@keyframes mmitPulse{0%,100%{opacity:1}50%{opacity:.3}}
.mmit-btn-refresh{display:flex;align-items:center;gap:6px;background:#fff;color:#00529b;
  border:1px solid #dbe3ec;border-radius:8px;padding:8px 15px;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .18s;font-family:inherit}
.mmit-btn-refresh:hover{background:#00529b;color:#fff;border-color:#00529b}

/* ── Rejilla de noticias ── */
.mmit-grid{display:flex;flex-direction:column;gap:16px}

.mmit-card{display:flex;background:#fff;border:1px solid #e6ebf1;border-radius:12px;
  overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s;
  animation:mmitFade .4s both}
.mmit-card:hover{box-shadow:0 6px 24px rgba(15,23,42,.10);transform:translateY(-2px);
  border-color:#c9d8e8}
@keyframes mmitFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.mmit-card-img{flex:0 0 260px;min-height:170px;background-size:cover;
  background-position:center;background-color:#eef2f6}
.mmit-card.no-img .mmit-card-body{width:100%}

.mmit-card-body{flex:1;padding:18px 22px;display:flex;flex-direction:column;min-width:0}

.mmit-card-body h4{margin:0 0 9px;font-size:18px;line-height:1.35;font-weight:700;
  color:#0f172a;transition:color .18s}
.mmit-card:hover .mmit-card-body h4{color:#00529b}

.mmit-card-body p{margin:0 0 14px;font-size:14px;line-height:1.6;color:#64748b;flex:1}

.mmit-card-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid #f1f5f9}
.mmit-card-source{font-size:11px;font-weight:700;color:#00529b;text-transform:uppercase;
  letter-spacing:.4px}
.mmit-card-date{font-size:12px;color:#94a3b8}
.mmit-card-read{margin-left:auto;font-size:13px;font-weight:600;color:#00529b;white-space:nowrap}

/* ── Botón Crear artículo (solo admin) ── */
.mmit-btn-article{display:flex;align-items:center;gap:5px;background:#e8f0fe;color:#00529b;
  border:1px solid #c5d5e8;border-radius:6px;padding:6px 13px;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .18s;font-family:inherit;white-space:nowrap}
.mmit-btn-article:hover{background:#00529b;color:#fff;border-color:#00529b}
.mmit-btn-article:disabled{cursor:not-allowed}
.mmit-btn-article svg{flex-shrink:0}

/* ── Estados ── */
.mmit-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:14px 18px;
  border-radius:10px;font-size:14px;margin-bottom:16px}
.mmit-empty{text-align:center;padding:50px 20px;color:#94a3b8;font-size:15px;
  background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px}

/* ── Esqueleto de carga ── */
.mmit-skeleton{display:flex;background:#fff;border:1px solid #e6ebf1;border-radius:12px;
  overflow:hidden;animation:mmitFade .4s both}
.mmit-skeleton-img{flex:0 0 260px;min-height:170px;background:#eef2f6;
  animation:mmitShimmer 1.4s infinite}
.mmit-skeleton-body{flex:1;padding:18px 22px}
.mmit-skeleton-line{height:14px;border-radius:6px;background:#eef2f6;margin-bottom:10px;
  animation:mmitShimmer 1.4s infinite}
.mmit-skeleton-line.h1{height:20px;width:75%}
.mmit-skeleton-line.h2{width:100%}
.mmit-skeleton-line.h3{width:60%}
.mmit-skeleton-footer{display:flex;gap:12px;margin-top:18px;padding-top:12px;
  border-top:1px solid #f1f5f9}
.mmit-skeleton-sm{height:11px;width:90px;border-radius:6px;background:#eef2f6;
  animation:mmitShimmer 1.4s infinite}
@keyframes mmitShimmer{0%,100%{opacity:1}50%{opacity:.45}}

/* ── Móvil ── */
@media(max-width:768px){
  .mmit-wrapper{padding:8px 12px}
  .mmit-card,.mmit-skeleton{flex-direction:column}
  .mmit-card-img,.mmit-skeleton-img{flex:0 0 190px;width:100%;min-height:190px}
  .mmit-card-body{padding:15px 17px}
  .mmit-card-body h4{font-size:16px}
  .mmit-tab{font-size:13px;padding:8px 12px}
  .mmit-tab span{display:none}
  .mmit-card-read{margin-left:0;width:100%;margin-top:6px}
}