/* Contact uses the landing's type, surfaces and MiGestión blue in both themes. */
.mg-contact { --contact-focus:var(--brand-700); position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); z-index:110; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.mg-contact [hidden] { display:none !important; }
.mg-contact button, .mg-contact textarea { font:inherit; }
.mg-contact button { cursor:pointer; }
.mg-contact :is(button,a,textarea):focus-visible { outline:3px solid var(--contact-focus); outline-offset:3px; }
.mg-contact__trigger { display:flex; align-items:center; gap:14px; padding:7px 7px 7px 20px; min-height:56px; border:1px solid rgba(255,255,255,.2); border-radius:var(--r-full); color:#fff; background:var(--brand-800); font-weight:600; font-size:14px; box-shadow:var(--shadow-brand); text-decoration:none; }
.mg-contact__trigger-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--brand-900); background:var(--brand-100); }
.mg-contact__panel { width:360px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 108px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--border-strong); border-radius:var(--r-4); color:var(--text); background:var(--surface); box-shadow:var(--shadow-lg); }
.mg-contact__head { position:sticky; top:0; z-index:1; background:var(--surface); display:flex; align-items:flex-start; gap:10px; padding:20px 16px 16px; border-bottom:1px solid var(--border); }
.mg-contact__head > div { flex:1; min-width:0; }
.mg-contact__head h2 { margin:0; font-size:17px; font-weight:650; letter-spacing:-.02em; }
.mg-contact__head p { margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--text-soft); }
.mg-contact__icon-button { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border:0; border-radius:var(--r-2); background:var(--surface-2); color:var(--text); }
#mgContactBack svg { transform:rotate(180deg); }
.mg-contact__options { padding:8px; }
.mg-contact__option { display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:12px; border:0; border-radius:var(--r-3); color:var(--text); background:transparent; text-align:left; }
.mg-contact__option:hover { background:var(--surface-2); }
.mg-contact__option > span:not(.mg-contact__glyph) { flex:1; min-width:0; }
.mg-contact__option strong { display:block; font-size:14px; font-weight:600; line-height:1.4; }
.mg-contact__option small { display:block; margin-top:4px; color:var(--text-soft); font-size:12px; line-height:1.5; }
.mg-contact__option > svg { flex-shrink:0; color:var(--text-soft); }
.mg-contact__option:disabled { cursor:wait; opacity:.65; }
.mg-contact__glyph { display:grid; flex-shrink:0; place-items:center; width:40px; height:40px; border-radius:var(--r-3); }
.mg-contact__glyph--ai { color:var(--brand-800); background:var(--brand-100); }
.mg-contact__glyph--wa { color:#075e35; background:#dcfce7; }
.mg-contact__glyph--topics { color:var(--text-soft); background:var(--surface-2); }
.mg-contact__foot { padding:8px 20px 20px; font-size:12px; line-height:1.6; color:var(--text-soft); }
.mg-contact__foot a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.mg-contact__foot p { margin:12px 0 0; font-size:11px; }
.mg-contact__status { margin:4px 12px 8px; font-size:13px; line-height:1.5; color:var(--text-soft); }
.mg-contact__compose { padding:20px; }
.mg-contact__compose label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.mg-contact__compose textarea { display:block; width:100%; min-height:110px; resize:vertical; padding:12px; border:1px solid var(--border-strong); border-radius:var(--r-2); color:var(--text); background:var(--surface-2); font-size:16px; line-height:1.5; }
.mg-contact__send { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:12px 16px; min-height:46px; border-radius:var(--r-full); background:#dcfce7; color:#075e35; font-size:14px; font-weight:600; text-decoration:none; }
.mg-contact__compose p { font-size:11px; color:var(--text-soft); line-height:1.6; margin:12px 0 0; }
@media (max-width:480px) { .mg-contact { right:16px; bottom:max(16px, env(safe-area-inset-bottom)); } .mg-contact__panel { max-height:calc(100dvh - 100px); } }
@media (prefers-reduced-motion:no-preference) { .mg-contact__trigger { transition:transform .15s; } .mg-contact__trigger:hover { transform:translateY(-2px); } }
[data-theme="dark"] .mg-contact { --contact-focus:var(--brand-300); }