:root { --flujo-bg:#ffffff; --flujo-surface:#f6f8fa; --flujo-border:#e2e6ea; --flujo-text:#1f2937; --flujo-muted:#6b7280; --flujo-primary:#2563eb; --flujo-primary-600:#1d4ed8; --flujo-shadow:0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.06); }
.abogados-flujo { box-sizing:border-box; width:100%; max-width:980px; margin:0 auto; padding:16px; background:var(--flujo-bg); color:var(--flujo-text); }
.abogados-flujo-form { display:grid; gap:16px; }
.abogados-flujo fieldset { border:1px solid var(--flujo-border); border-radius:12px; padding:16px; background:var(--flujo-surface); box-shadow:var(--flujo-shadow); }
.abogados-flujo legend { padding:0 8px; font-weight:600; color:var(--flujo-muted); }
.abogados-flujo label { display:block; font-size:14px; color:var(--flujo-text); }
.abogados-flujo input[type="text"], .abogados-flujo input[type="email"], .abogados-flujo select, .abogados-flujo textarea { width:100%; margin-top:6px; margin-bottom:12px; padding:10px 12px; border:1px solid var(--flujo-border); border-radius:10px; background:#fff; color:var(--flujo-text); outline:none; }
.abogados-flujo input[type="text"]:focus, .abogados-flujo input[type="email"]:focus, .abogados-flujo select:focus, .abogados-flujo textarea:focus { border-color:var(--flujo-primary); box-shadow:0 0 0 3px rgba(37,99,235,0.15); }
.abogados-flujo textarea { resize:vertical; min-height:100px; }
.abogados-flujo button[type="submit"] { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--flujo-primary); border-radius:10px; background:var(--flujo-primary); color:#fff; font-weight:600; cursor:pointer; transition:background 0.2s, transform 0.02s; }
.abogados-flujo button[type="submit"]:hover { background:var(--flujo-primary-600); }
.abogados-flujo button[type="submit"]:active { transform:translateY(1px); }
.abogados-flujo .abogados-flujo-resumen { border:1px dashed var(--flujo-border); background:#fff; border-radius:12px; box-shadow:var(--flujo-shadow); }
.abogados-listado { margin-top:8px; background:#fff; border:1px solid var(--flujo-border); border-radius:12px; box-shadow:var(--flujo-shadow); }
.abogados-listado ul { list-style:none; margin:0; padding:0; }
.abogados-listado li { padding:14px 16px; border-bottom:1px solid var(--flujo-border); }
.abogados-listado li:last-child { border-bottom:none; }
.abogados-listado .card-header { font-size:16px; margin-bottom:6px; }
.abogados-listado .card-body span { display:inline-block; margin-top:6px; margin-right:10px; padding:2px 8px; font-size:12px; color:var(--flujo-muted); background:var(--flujo-surface); border:1px solid var(--flujo-border); border-radius:999px; }
.flujo-steps-header { display:flex; justify-content:center; margin-bottom:16px; }
.flujo-steps { list-style:none; display:flex; gap:8px; padding:0; margin:0; }
.flujo-steps .step { padding:8px 12px; border-radius:20px; background:#eef2f7; color:#5a6b7b; border:1px solid #d9e1ea; font-size:0.95rem; }
.flujo-steps .step.active { background:#e6f0ff; color:#1d4ed8; border-color:#2563eb; font-weight:600; }
.flujo-steps .step.completed { background:#e9f7ef; color:#1f7a52; border-color:#34d399; }
.flujo-steps-nav { display:flex; gap:10px; align-items:center; margin-top:8px; }
.flujo-steps-nav .btn-primary { background:#2563eb; color:#fff; border:none; border-radius:6px; padding:10px 14px; cursor:pointer; }
.flujo-steps-nav .btn-primary:hover { background:#1e40af; }
.flujo-steps-nav .btn-secondary { background:#eef2f7; color:#5a6b7b; border:1px solid #d9e1ea; border-radius:6px; padding:10px 14px; cursor:pointer; }
.flujo-steps-nav .btn-secondary:hover { background:#e6ebf2; }
.ciudad-search-wrap { display:grid; grid-template-columns:1fr; gap:8px; }
.alert-error { color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; border-radius:8px; padding:8px; }
@media (max-width:640px) { .abogados-flujo { padding:12px; } .abogados-flujo fieldset { padding:12px; } }
.flujo-spinner { display:inline-block; width:16px; height:16px; border:2px solid #cbd5e1; border-top-color:var(--flujo-primary); border-radius:50%; animation:flujo-spin 0.6s linear infinite; margin-left:8px; vertical-align:middle; }
@keyframes flujo-spin { to { transform:rotate(360deg); } }