/* ============================================================
   MANITAS APP UI (OFICINA VIRTUAL)
   Archivo: assets/css/manitas-app.css
   Se aplica SOLO cuando el body tiene: .manitas-app
   ============================================================ */

html.manitas-app,
body.manitas-app{
  --bg1:#0f172a;
  --bg2:#020617;
  --card: rgba(2,6,23,.55);
  --line: rgba(148,163,184,.18);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --pri:#80c342;
  --sec:#00A1B0;
  --danger:#ef4444;

  min-height:100vh;
  margin:0;
  background: radial-gradient(circle at top,#1f2937 0,#020617 55%,#000 100%) fixed !important;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  color: var(--text);
  overflow-x:hidden;
}

/* Mata fondos del tema/Elementor SOLO en app */
body.manitas-app #page,
body.manitas-app .site,
body.manitas-app #content,
body.manitas-app .site-content,
body.manitas-app main,
body.manitas-app .elementor,
body.manitas-app .elementor-section,
body.manitas-app .elementor-container,
body.manitas-app .elementor-widget-wrap{
  background: transparent !important;
  background-image:none !important;
}

body.manitas-app .elementor-background-overlay{
  background: transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Wrapper app */
body.manitas-app .mta-app{
  min-height:100dvh;
  padding:14px 10px 90px;
  box-sizing:border-box;
}

/* Topbar */
body.manitas-app .mta-topbar{
  max-width:980px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid var(--line);
  background: var(--card);
  backdrop-filter: blur(8px);
  box-shadow:0 12px 34px rgba(0,0,0,.35);
}

body.manitas-app .mta-logo{
  width:38px;height:38px;
  border-radius:12px;
  background:#0b1220;
  border:1px solid rgba(148,163,184,.22);
  display:flex;align-items:center;justify-content:center;
  font-weight:950;
  text-decoration:none;
  color:var(--text);
  flex:0 0 auto;
}

body.manitas-app .mta-user{
  flex:1;
  min-width:0;
}

body.manitas-app .mta-user__name{
  font-weight:950;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.manitas-app .mta-user__meta{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

body.manitas-app .mta-warn{
  opacity:.9;
}

/* Badges */
body.manitas-app .mta-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  border:1px solid var(--line);
  background: rgba(15,23,42,.55);
  color: var(--text);
}

body.manitas-app .mta-badge--ok{
  background:#063a2e;
  border-color:#0c6951;
  color:#a7f3d0;
}
body.manitas-app .mta-badge--pend{
  background:#33220f;
  border-color:#5a441b;
  color:#ffd7a1;
}
body.manitas-app .mta-badge--warn{
  background:#2b2633;
  border-color:#4b3f5a;
  color:#e9d5ff;
}
body.manitas-app .mta-badge--bad{
  background:#2a1010;
  border-color:#5a1b1b;
  color:#fecaca;
}
body.manitas-app .mta-badge--neutral{
  background:#0b1220;
  border-color:rgba(255,255,255,.18);
  color:#cbd5e1;
}

/* Buttons */
body.manitas-app .mta-btn{
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
  font-weight:950;
  font-size:12px;
  border:1px solid var(--line);
  background:#0b1220;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

body.manitas-app .mta-btn--ghost{
  background:rgba(148,163,184,.10);
}

body.manitas-app .mta-btn--danger{
  background: var(--danger);
  border-color: transparent;
  color:#fff;
}

/* Container content */
body.manitas-app .mta-container{
  max-width:980px;
  margin:12px auto 0;
}

/* Fix: imágenes de cards no “se parten” por padding raro */
body.manitas-app a[style*="background:"],
body.manitas-app a[style*="background-image"]{
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;
}
/* ============================================================
   FIX MOBILE: el AppBar tapa títulos arriba (Guía, etc.)
   ============================================================ */

/* 1) Asegura espacio real debajo del header fijo */
body.manitas-app{
  padding-top: calc(var(--mx-appbar-h) + 12px) !important;
}

/* 2) Si hay secciones que arrancan muy arriba, dales aire */
body.manitas-app .mta-container,
body.manitas-app .mta-home,
body.manitas-app .mta-page,
body.manitas-app main{
  padding-top: 12px !important;
}

/* 3) Cuando haces scroll a un título/anchor, que no quede oculto */
body.manitas-app h1,
body.manitas-app h2,
body.manitas-app .mta-title,
body.manitas-app .mta-page-title{
  scroll-margin-top: calc(var(--mx-appbar-h) + 14px);
}