/*
 * MANITAS – App
 * Archivo: assets/css/manitas-app.css
 * Versión: 1.8.1
 * Última actualización: 2026-01-12 13:40:00 -0400
 *
 * Cambios v1.8.1
 * - Fondo FULL-SCREEN estable (sin depender de contenedores)
 * - Menos “apretado”: spacing y paddings mejorados
 * - Fix: no usar padding-top en body (se mueve a .mta-app)
 * - Define --mx-appbar-h por defecto
 */

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

html.manitas-app, body.manitas-app,
html.manitas-auth, body.manitas-auth{
  --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;

  /* Altura estimada de tu appbar (topbar) para spacing */
  --mx-appbar-h: 64px;

  min-height:100vh;
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  color: var(--text);
  overflow-x:hidden;

  /* Fondo base oscuro (seguro) */
  background: radial-gradient(circle at top,#1f2937 0,#020617 55%,#000 100%) fixed !important;
}

/* ============================================================
   FONDO FULL-SCREEN “BRAND” (verde) SIN ROMPER TU UI
   - El verde que ves hoy NO es fondo: es un bloque interno.
   - Si quieres que TODO el fondo tenga tinte verde, activa esto:
   ============================================================ */

/* ✅ Fondo full-screen detrás de todo (solo en app)
   Si NO quieres verde global, comenta este bloque completo. */
body.manitas-app::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;

  /* Verde premium, suave, no radioactivo 😄 */
  background:
    radial-gradient(circle at 15% 10%, rgba(128,195,66,.35) 0%, rgba(0,161,176,.18) 35%, rgba(2,6,23,0) 70%),
    radial-gradient(circle at 85% 25%, rgba(0,161,176,.22) 0%, rgba(2,6,23,0) 55%),
    radial-gradient(circle at top,#1f2937 0,#020617 55%,#000 100%);

  background-attachment: fixed;
}

/* Mata fondos del tema/Elementor SOLO en app/auth */
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,

body.manitas-auth #page,
body.manitas-auth .site,
body.manitas-auth #content,
body.manitas-auth .site-content,
body.manitas-auth main,
body.manitas-auth .elementor,
body.manitas-auth .elementor-section,
body.manitas-auth .elementor-container,
body.manitas-auth .elementor-widget-wrap{
  background: transparent !important;
  background-image:none !important;
}

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

/* ============================================================
   Wrapper app
   - IMPORTANT: el espacio “para que no tape el topbar”
     se aplica aquí (no en body).
   ============================================================ */
body.manitas-app .mta-app{
  min-height:100dvh;

  /* Más aire: arriba considera el appbar + margen */
  padding: calc(var(--mx-appbar-h) + 12px) 14px 96px;

  box-sizing:border-box;
}

/* Topbar */
body.manitas-app .mta-topbar{
  max-width:980px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 14px; /* + aire */
  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);
}

/* Logo */
body.manitas-app .mta-logo{
  width:40px;height:40px;
  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;
}

/* User */
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:7px 12px; /* + aire */
  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:9px 12px; /* + aire */
  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:14px 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: anchors/títulos no quedan tapados
   (scroll-margin-top) se mantiene.
   ============================================================ */
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);
}

/* ============================================================
 * UI – BOTONES (ALIAS) | v1.8.1
 * ============================================================ */
body.manitas-app .ma-btn,
body.manitas-app .mc-btn,
body.manitas-app .mca-btn,
body.manitas-app .mcall-btn,
body.manitas-app .mch-btn,
body.manitas-app .mco-btn,
body.manitas-app .mh-btn,
body.manitas-app .miw-btn,
body.manitas-app .mj-btn,
body.manitas-app .mp-btn,
body.manitas-app .ms-btn,
body.manitas-app .mx-btn,
body.manitas-app .mts-btn,
body.manitas-app .pc-btn,
body.manitas-app .pp-btn,
body.manitas-app .ck-btn,
body.manitas-app .btn,
body.manitas-app .btn-primary{
  text-decoration:none;
  padding:9px 12px;
  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;
  gap:8px;
  white-space:nowrap;
}

body.manitas-app .btn-primary,
body.manitas-app .mh-btn--primary,
body.manitas-app .mta-btn-primary{
  background: var(--pri);
  border-color: transparent;
  color:#0b1220;
}

body.manitas-app .mta-btn-blue,
body.manitas-app .mta-btn-secondary{
  background: var(--sec);
  border-color: transparent;
  color:#00121a;
}

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

/* ============================================================
 * UI – TOAST + LIKE (v1.8.1)
 * ============================================================ */
body.manitas-app .mta-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(16px);
  opacity:0;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(2,6,23,.92);
  border:1px solid rgba(148,163,184,.18);
  color:var(--text);
  font-weight:900;
  font-size:13px;
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  z-index:99999;
  transition:all .25s ease;
}
body.manitas-app .mta-toast.is-on{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
body.manitas-app .mta-like-btn.is-liked{
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* ============================================================
 * Mobile tuning: menos “apretado” y mejor respiración
 * ============================================================ */
@media (max-width: 520px){
  html.manitas-app, body.manitas-app{
    --mx-appbar-h: 60px;
  }

  body.manitas-app .mta-app{
    padding: calc(var(--mx-appbar-h) + 10px) 12px 96px;
  }

  body.manitas-app .mta-topbar{
    padding:11px 12px;
  }

  body.manitas-app .mta-container{
    margin-top:12px;
  }
}