/* Portal Comercial MX · additions on top of the CRM GLOBAL primitives (app.css). */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field .req { color: var(--accent); margin-left: 3px; }
.field .ro { font-size: 13px; color: var(--ink-2); padding: 10px 0; }
.field-help { font-size: 11px; color: var(--muted-2); text-transform: none; letter-spacing: 0; font-weight: 500; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 8px 0; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.multi { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 18px; }
.facts .k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.facts .v { font-size: 13px; font-weight: 600; color: var(--ink); white-space: pre-line; word-break: break-word; }
.facts .v.empty { color: var(--muted-2); font-weight: 500; }

.checklist { display: flex; flex-direction: column; gap: 8px; }
.checklist .item { display: grid; grid-template-columns: 22px 28px 1fr auto; gap: 8px; align-items: start; font-size: 12.5px; }
.checklist .tick { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--muted); }
.checklist .tick.ok { background: var(--green-bg); color: var(--green); }
.checklist .tick.miss { background: var(--red-bg); color: var(--red); }
.checklist .num { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

.stage-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted-2); }
.alarm { color: var(--red); font-weight: 700; }

.suggest { position: relative; }
.suggest-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(28,25,23,.12); z-index: 30; max-height: 260px; overflow-y: auto; }
.suggest-list button { display: block; width: 100%; text-align: left; padding: 9px 12px; background: none; border: none; font-size: 12.5px; cursor: pointer; }
.suggest-list button:hover { background: var(--surface-2); }

@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } .topbar { flex-wrap: wrap; } }

/* app.css (CRM GLOBAL) turns every image inside .auth-art into the full-panel background; our login also has the
   SM logo in that panel, which must stay a normal inline image. */
.auth-art .inner img { position: static; width: auto; height: 16px; inset: auto; object-fit: contain; }