@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --brand-blue:#2C5282;
  --brand-green:#48BB78;
  --brand-orange:#F6AD55;
  --brand-bg:#F7FAFC;
  --brand-dark:#1A202C;

  --radius-xl: 12px;
  --radius-2xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --border: 1px solid #E2E8F0;
}

.impulsa-ia{ background: var(--brand-bg); color: var(--brand-dark); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; }

.impulsa-ia .container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.impulsa-ia .header{ position:sticky; top:0; z-index:10; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border-bottom: var(--border); }
.impulsa-ia .header__inner{ display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; max-width: 1200px; margin:0 auto; }
.impulsa-ia .brand-badge{ width:40px; height:40px; border-radius: 16px; background: var(--brand-blue); }

.impulsa-ia .text-lg{ font-size: 20px; }
.impulsa-ia .text-xl{ font-size: 22px; }
.impulsa-ia .text-sm{ font-size: 14px; }
.impulsa-ia .font-semibold{ font-weight:600; }
.impulsa-ia .subtitle{ color:#6B7280; }

.impulsa-ia .card{ background:#fff; border: var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 16px; }
.impulsa-ia .divider{ height:1px; background:#E5E7EB; margin: 16px 0; }

.impulsa-ia .pill{ display:inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.impulsa-ia .pill--blue{ background: #E6EEF7; color: var(--brand-blue); }
.impulsa-ia .pill--green{ background: #E6F6EE; color: var(--brand-green); }
.impulsa-ia .pill--orange{ background: #FEF1E5; color: var(--brand-orange); }

.impulsa-ia .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding: .5rem 1rem; border-radius: 12px; border: 1px solid transparent; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-sm); cursor: pointer; transition: filter .2s ease, background .2s ease, border-color .2s ease; }
.impulsa-ia .btn:hover{ filter: brightness(1.05); }
.impulsa-ia .btn:disabled{ opacity:.6; cursor:not-allowed; }
.impulsa-ia .btn--primary{ background: var(--brand-blue); color:#fff; border-color: var(--brand-blue); }
.impulsa-ia .btn--success{ background: var(--brand-green); color:#fff; border-color: var(--brand-green); }
.impulsa-ia .btn--action{ background:#fff; color: var(--brand-dark); border: var(--border); }

.impulsa-ia .field__label{ display:block; font-size: 14px; color:#6B7280; margin-bottom: 4px; }
.impulsa-ia .input{ display:flex; align-items:center; gap:.5rem; background: var(--brand-bg); border: var(--border); border-radius: 12px; padding: 8px 12px; }
.impulsa-ia .input input{ border:0; outline:0; background:transparent; color: var(--brand-dark); width:100%; font-size: 16px; }
.impulsa-ia ::placeholder{ color:#9CA3AF; }

.impulsa-ia .list{ list-style:none; padding:0; margin:0; }
.impulsa-ia .list--tasks li{ display:flex; align-items:center; gap:.75rem; background: var(--brand-bg); border: var(--border); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.impulsa-ia input[type="checkbox"]{ width:20px; height:20px; accent-color: var(--brand-green); }
.impulsa-ia .task-remove{ font-size: 12px; color:#6B7280; background:none; border:0; cursor:pointer; }
.impulsa-ia .task-remove:hover{ color:#DC2626; }

.impulsa-ia .grid{ display:grid; }
.impulsa-ia .grid-2{ grid-template-columns: 1fr; gap:16px; }
.impulsa-ia .grid-3{ grid-template-columns: 1fr; gap:16px; }
@media (min-width: 768px){ .impulsa-ia .grid-2{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .impulsa-ia .grid-3{ grid-template-columns: 2fr 1fr 1fr; } }

.impulsa-ia .mt-3{ margin-top: 12px; }
.impulsa-ia .mt-4{ margin-top: 16px; }
.impulsa-ia .py-8{ padding-top: 32px; padding-bottom: 32px; }