/* ========== Monkey Widget – BASE / GLOBAL ========== */

/* Paleta por defecto (se sobreescribe con theme de la API si lo inyectás en <style>) */
:root{
  --blue:#003d76;
  --orange:#ff7f00;
  --header:#6b1a27;
  --header-text:#e6d412;

  --bg:#ffffff;
  --text:#333333;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#ffffff;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:12px;
  --shadow-100:0 1px 2px rgba(16,24,40,.05);
}

/* Reset mínimo */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
}

/* Tipografía y enlaces */
h1,h2,h3,h4{margin:0 0 .5rem 0;color:#0f2b4d}
h1{font-size:28px;line-height:1.15}
h2{font-size:28px}
h3{font-size:16px}
p{margin:.5rem 0}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}

/* Layout general del sitio */
.container{
  max-width:1100px;
  margin:18px auto;
  display:flex;
  gap:18px;
  padding:0 12px;
}

/* Cartas / paneles */
.card{
  background:var(--card);
  padding:12px;
  box-shadow:var(--shadow-100);
}

/* Botones genéricos */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px; border:1px solid transparent; border-radius:8px;
  padding:10px 14px; font-weight:700; cursor:pointer;
  background:#f3f4f6; color:#111827;
}
.btn:hover{filter:brightness(0.98)}
.btn-primary{background:var(--orange);color:#fff;border-color:transparent}
.btn-primary:hover{filter:brightness(0.97)}
.btn-accent{background:var(--blue);color:#fff}
.btn-outline{background:#fff;border-color:var(--blue);color:var(--blue)}

/* Formularios */
label{display:block;font-size:12px;margin:8px 0 4px}
input[type="text"], input[type="date"], select{
  width:100%; padding:8px; border:1px solid var(--border);
  border-radius:6px; background:#fff;
}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

/* Utilidades */
.hidden{display:none !important}
.center{display:flex;align-items:center;justify-content:center}
.space-between{display:flex;align-items:center;justify-content:space-between}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}

/* Responsive básico */
@media (max-width: 900px){
  .container{
    grid-template-columns:1fr;
  }
}