/* FixHub — Custom UX/UI (FASE A–E) */
:root {
  --fixhub-primary: #1E3A8A;
  --fixhub-accent: #2563EB;
  --fixhub-text: #111827;
  --fixhub-bg: #F9FAFB;
  --fixhub-success: #16A34A;
  --fixhub-white: #FFFFFF;
  --fixhub-border: #E5E7EB;
  --fixhub-muted: #6B7280;
  --fixhub-shadow: 0 1px 3px rgba(0,0,0,.08);
  --fixhub-shadow-lg: 0 10px 40px -10px rgba(30, 58, 138, .15);
  --fixhub-radius: 10px;
  --fixhub-radius-btn: 8px;
  --fixhub-transition: 0.2s ease;
}

/* Base */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--fixhub-text);
  background-color: var(--fixhub-bg);
}

.fixhub-container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .fixhub-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Navbar (FASE B) */
.fixhub-navbar {
  background: var(--fixhub-white) !important;
  box-shadow: var(--fixhub-shadow);
  padding: 0.6rem 0;
}

.fixhub-navbar .navbar-brand {
  color: var(--fixhub-primary) !important;
  font-weight: 700;
  font-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.fixhub-navbar .navbar-brand svg {
  width: 28px;
  height: 28px;
}

.fixhub-navbar .nav-link {
  color: var(--fixhub-text) !important;
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--fixhub-radius-btn);
  transition: background-color var(--fixhub-transition), color var(--fixhub-transition);
}

.fixhub-navbar .nav-link:hover {
  background-color: var(--fixhub-bg);
  color: var(--fixhub-accent) !important;
}

.fixhub-navbar .dropdown-toggle {
  color: var(--fixhub-text) !important;
}

.fixhub-navbar .dropdown-menu {
  border-radius: var(--fixhub-radius);
  box-shadow: var(--fixhub-shadow-lg);
  border: 1px solid var(--fixhub-border);
}

.fixhub-navbar .dropdown-item {
  padding: 0.5rem 1rem;
}

.fixhub-navbar .badge-role {
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--fixhub-accent);
}

/* Buttons (FASE D) */
.btn-fixhub-primary {
  background: var(--fixhub-accent);
  color: var(--fixhub-white);
  border: none;
  border-radius: var(--fixhub-radius-btn);
  font-weight: 600;
  padding: 0.65rem 1.35rem;
  transition: background-color var(--fixhub-transition), transform 0.15s ease;
}

.btn-fixhub-primary:hover {
  background: var(--fixhub-primary);
  color: var(--fixhub-white);
  transform: translateY(-1px);
}

.btn-fixhub-outline {
  background: transparent;
  color: var(--fixhub-accent);
  border: 2px solid var(--fixhub-accent);
  border-radius: var(--fixhub-radius-btn);
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  transition: background-color var(--fixhub-transition), color var(--fixhub-transition);
}

.btn-fixhub-outline:hover {
  background: var(--fixhub-accent);
  color: var(--fixhub-white);
}

/* Hero (FASE A) — full-width escape from container */
.fixhub-hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: linear-gradient(135deg, var(--fixhub-primary) 0%, #1e40af 50%, var(--fixhub-accent) 100%);
  color: var(--fixhub-white);
  padding: 4rem 0 5rem;
  position: relative;
  overflow: hidden;
}

.fixhub-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L35 20H50L38 30L42 45L30 38L18 45L22 30L10 20H25L30 5Z' fill='%23fff' fill-opacity='.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.fixhub-hero .fixhub-container {
  position: relative;
  z-index: 1;
}

.fixhub-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.fixhub-hero .lead {
  font-size: 1.1rem;
  opacity: .95;
  max-width: 520px;
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

.fixhub-hero .btn-fixhub-primary {
  background: var(--fixhub-white);
  color: var(--fixhub-primary);
  padding: 0.85rem 1.75rem;
  font-size: 1.05rem;
}

.fixhub-hero .btn-fixhub-primary:hover {
  background: var(--fixhub-bg);
  color: var(--fixhub-primary);
}

.fixhub-hero .btn-fixhub-outline {
  border-color: rgba(255,255,255,.8);
  color: var(--fixhub-white);
}

.fixhub-hero .btn-fixhub-outline:hover {
  background: rgba(255,255,255,.2);
  color: var(--fixhub-white);
  border-color: var(--fixhub-white);
}

/* Section titles */
.fixhub-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fixhub-text);
  margin-bottom: 0.5rem;
}

.fixhub-section-subtitle {
  color: var(--fixhub-muted);
  margin-bottom: 2rem;
}

/* Cómo funciona (FASE A) */
.fixhub-how {
  padding: 4rem 0;
}

.fixhub-how .card {
  border: none;
  border-radius: var(--fixhub-radius);
  box-shadow: var(--fixhub-shadow);
  transition: box-shadow var(--fixhub-transition), transform var(--fixhub-transition);
  height: 100%;
}

.fixhub-how .card:hover {
  box-shadow: var(--fixhub-shadow-lg);
  transform: translateY(-2px);
}

.fixhub-how .card-body {
  padding: 1.5rem;
}

.fixhub-how .fixhub-step-icon {
  width: 48px;
  height: 48px;
  background: rgba(30, 58, 138, .1);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.fixhub-how .fixhub-step-icon svg {
  width: 26px;
  height: 26px;
  color: var(--fixhub-accent);
}

.fixhub-how .card-title {
  font-weight: 700;
  color: var(--fixhub-text);
  margin-bottom: 0.35rem;
}

.fixhub-how .card-text {
  color: var(--fixhub-muted);
  font-size: 0.95rem;
}

/* Confianza (FASE A) — full-width section */
.fixhub-trust {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 3rem 0 4rem;
  background: var(--fixhub-white);
}

.fixhub-trust .card {
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  transition: box-shadow var(--fixhub-transition), border-color var(--fixhub-transition);
  height: 100%;
}

.fixhub-trust .card:hover {
  box-shadow: var(--fixhub-shadow);
  border-color: var(--fixhub-accent);
}

.fixhub-trust .fixhub-trust-icon {
  width: 44px;
  height: 44px;
  background: rgba(22, 163, 74, .1);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.fixhub-trust .fixhub-trust-icon svg {
  width: 22px;
  height: 22px;
  color: var(--fixhub-success);
}

.fixhub-trust .card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--fixhub-text);
  margin-bottom: 0.25rem;
}

.fixhub-trust .card-text {
  font-size: 0.875rem;
  color: var(--fixhub-muted);
}
.fixhub-trust-alt { background: var(--fixhub-bg); }

/* Category cards (FASE C) */
.fixhub-categories {
  padding: 3rem 0 4rem;
}

.fixhub-cat-card {
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  padding: 1.75rem;
  height: 100%;
  transition: box-shadow var(--fixhub-transition), transform var(--fixhub-transition);
  background: var(--fixhub-white);
}

.fixhub-cat-card:hover {
  box-shadow: var(--fixhub-shadow-lg);
  transform: translateY(-4px);
}

.fixhub-cat-card .fixhub-cat-icon {
  width: 56px;
  height: 56px;
  background: rgba(30, 58, 138, .08);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.fixhub-cat-card .fixhub-cat-icon svg {
  width: 28px;
  height: 28px;
  color: var(--fixhub-accent);
}

.fixhub-cat-card .fixhub-cat-title {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--fixhub-text);
  margin-bottom: 0.35rem;
}

.fixhub-cat-card .fixhub-cat-desc {
  font-size: 0.9rem;
  color: var(--fixhub-muted);
  margin-bottom: 1rem;
}

.fixhub-cat-card .btn {
  border-radius: var(--fixhub-radius-btn);
  font-weight: 600;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Category selection cards (Requests/New) */
.fixhub-category-card {
  display: block;
  border: 2px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  padding: 1rem 0.75rem;
  background: var(--fixhub-white);
  cursor: pointer;
  transition: border-color var(--fixhub-transition), background var(--fixhub-transition), box-shadow var(--fixhub-transition);
}
.fixhub-category-card:hover {
  border-color: var(--fixhub-accent);
  background: rgba(37, 99, 235, .04);
}
.fixhub-category-card-selected,
.fixhub-category-card:has(input:checked) {
  border-color: var(--fixhub-primary);
  background: rgba(30, 58, 138, .08);
  box-shadow: 0 0 0 1px var(--fixhub-primary);
}
.fixhub-category-icon {
  font-size: 1.75rem;
  margin-bottom: 0.35rem;
}
.fixhub-category-card span:last-child {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fixhub-text);
}

/* Main content area (non-home pages) */
.fixhub-main .container {
  max-width: 1140px;
}

.fixhub-main h1, .fixhub-main h2 {
  font-weight: 700;
  color: var(--fixhub-text);
}

/* Alerts (FASE E) */
.alert {
  border-radius: var(--fixhub-radius);
  border: none;
}

.alert-success {
  background: rgba(22, 163, 74, .12);
  color: #0d6832;
}

.alert-danger {
  background: rgba(220, 38, 38, .1);
  color: #b91c1c;
}

/* Footer */
.fixhub-footer {
  background: var(--fixhub-white);
  border-top: 1px solid var(--fixhub-border);
  color: var(--fixhub-muted);
  font-size: 0.875rem;
  padding: 1.25rem 0;
  margin-top: auto;
}

/* Loading state (FASE E) */
.btn-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid #1E3A8A;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fixhub-spin 0.6s linear infinite;
}

.btn-primary.btn-loading::after,
.btn-fixhub-primary.btn-loading::after {
  border-color: rgba(255,255,255,.9);
  border-right-color: transparent;
}

@keyframes fixhub-spin {
  to { transform: rotate(360deg); }
}

/* Utility */
.fixhub-text-muted { color: var(--fixhub-muted); }

/* ═══════════════════════════════════════════════════════════════════════════════
   DASHBOARD TÉCNICO (Jobs/Index cuando rol Technician)
   FASE 1–4: KPIs, secciones por estado, cards, micro UX
   ═══════════════════════════════════════════════════════════════════════════════ */

.fixhub-tech-kpis { padding-top: 0.5rem; }
.fixhub-kpi-card {
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  padding: 1.25rem;
  transition: box-shadow var(--fixhub-transition), transform var(--fixhub-transition);
}
.fixhub-kpi-card:hover {
  box-shadow: var(--fixhub-shadow-lg);
  transform: translateY(-2px);
}
.fixhub-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.fixhub-kpi-icon svg { width: 20px; height: 20px; }
.fixhub-kpi-icon.fixhub-kpi-open { background: rgba(22, 163, 74, .12); color: var(--fixhub-success); }
.fixhub-kpi-icon.fixhub-kpi-assigned { background: rgba(37, 99, 235, .12); color: var(--fixhub-accent); }
.fixhub-kpi-icon.fixhub-kpi-completed { background: rgba(107, 114, 128, .15); color: var(--fixhub-muted); }
.fixhub-kpi-icon.fixhub-kpi-earnings { background: rgba(22, 163, 74, .12); color: var(--fixhub-success); }
.fixhub-kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fixhub-text);
  line-height: 1.2;
}
.fixhub-kpi-label {
  font-size: 0.8rem;
  color: var(--fixhub-muted);
  margin-top: 0.25rem;
}

.fixhub-tech-sections { padding-bottom: 2rem; }
.fixhub-tech-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fixhub-text);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fixhub-tech-section-title-muted { color: var(--fixhub-muted); }
.fixhub-tech-section-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.fixhub-dot-green { background: var(--fixhub-success); }
.fixhub-dot-blue { background: var(--fixhub-accent); }
.fixhub-dot-gray { background: var(--fixhub-muted); }

.fixhub-job-card {
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  transition: box-shadow var(--fixhub-transition), transform var(--fixhub-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.fixhub-job-card:hover {
  box-shadow: var(--fixhub-shadow-lg);
  transform: translateY(-3px);
}
.fixhub-job-card-open { border-left: 4px solid var(--fixhub-success); }
.fixhub-job-card-assigned { border-left: 4px solid var(--fixhub-accent); }
.fixhub-job-card-completed { border-left: 4px solid var(--fixhub-border); }
.fixhub-job-card-body { padding: 1.35rem; flex: 1; }
.fixhub-job-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fixhub-text);
  margin-bottom: 0.25rem;
}
.fixhub-job-card-meta { font-size: 0.875rem; color: var(--fixhub-muted); }
.fixhub-job-card-desc { font-size: 0.9rem; color: var(--fixhub-text); margin-bottom: 0.75rem; }
.fixhub-job-card-budget {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fixhub-success);
  margin-bottom: 0.35rem;
}
.fixhub-job-card-completed .fixhub-job-card-budget { font-weight: 600; }
.fixhub-job-card-date { font-size: 0.8rem; color: var(--fixhub-muted); margin-bottom: 0; }
.fixhub-job-card-footer {
  padding: 1rem 1.35rem;
  border-top: 1px solid var(--fixhub-border);
  background: rgba(249, 250, 251, .6);
  border-radius: 0 0 var(--fixhub-radius) var(--fixhub-radius);
}
.fixhub-badge-open { background: var(--fixhub-success); color: #fff; }
.fixhub-badge-assigned { background: var(--fixhub-accent); color: #fff; }
.fixhub-badge-completed { background: var(--fixhub-muted); color: #fff; }

.fixhub-empty-block {
  padding: 2rem;
  text-align: center;
  background: var(--fixhub-white);
  border: 1px dashed var(--fixhub-border);
  border-radius: var(--fixhub-radius);
}
.fixhub-empty-block-muted { background: rgba(249, 250, 251, .8); }

/* ═══════════════════════════════════════════════════════════════════════════════
   REPUTACIÓN VISUAL (FASE 4–5): estrellas dinámicas
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --fixhub-star-full: #FBBF24;
  --fixhub-star-empty: #D1D5DB;
}
.fixhub-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: opacity var(--fixhub-transition);
}
.fixhub-star {
  display: inline-flex;
  line-height: 0;
}
.fixhub-star svg {
  width: 1em;
  height: 1em;
  transition: transform var(--fixhub-transition);
}
.fixhub-stars:hover .fixhub-star svg { transform: scale(1.05); }
.fixhub-star-full { color: var(--fixhub-star-full); }
.fixhub-star-empty { color: var(--fixhub-star-empty); }
.fixhub-star-half { color: var(--fixhub-star-full); }
.fixhub-stars.fixhub-stars-sm .fixhub-star svg { width: 0.875em; height: 0.875em; }
.fixhub-stars.fixhub-stars-lg .fixhub-star svg { width: 1.35em; height: 1.35em; }

/* Card de reputación (FASE 1) */
.fixhub-rep-card {
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  padding: 1.35rem 1.5rem;
  transition: box-shadow var(--fixhub-transition), border-color var(--fixhub-transition);
}
.fixhub-rep-card:hover {
  box-shadow: var(--fixhub-shadow);
  border-color: var(--fixhub-accent);
}
.fixhub-rep-rating-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--fixhub-text);
  line-height: 1;
}
.fixhub-rep-meta { font-size: 0.85rem; color: var(--fixhub-muted); margin-top: 0.35rem; }
.fixhub-rep-badge-good { color: var(--fixhub-success); font-size: 0.8rem; font-weight: 600; }
.fixhub-rep-badge-warn { color: #B45309; font-size: 0.8rem; font-weight: 600; }
.fixhub-rep-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.fixhub-rep-verified { color: var(--fixhub-success); font-size: 0.85rem; }

/* Propuesta con reputación (FASE 3) */
.fixhub-proposal-card {
  border-radius: var(--fixhub-radius);
  border: 1px solid var(--fixhub-border);
  transition: box-shadow var(--fixhub-transition);
}
.fixhub-proposal-card:hover { box-shadow: var(--fixhub-shadow); }
.fixhub-proposal-name { font-weight: 700; color: var(--fixhub-text); }
.fixhub-proposal-rep { font-size: 0.9rem; color: var(--fixhub-muted); }
.fixhub-proposal-rep .fixhub-stars { margin-right: 0.25rem; }
.badge-verified { background: rgba(22, 163, 74, .15); color: var(--fixhub-success); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════════
   CONFIANZA CLIENTE — Propuestas rediseñadas (FASE 1, 2, 4)
   ═══════════════════════════════════════════════════════════════════════════════ */
.fixhub-proposals-list { display: flex; flex-direction: column; gap: 1.25rem; }
.fixhub-proposal-card-v2 {
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  transition: box-shadow var(--fixhub-transition), border-color var(--fixhub-transition);
}
.fixhub-proposal-card-v2:hover {
  box-shadow: var(--fixhub-shadow-lg);
  border-color: rgba(37, 99, 235, .25);
}
.fixhub-proposal-card-v2-body { padding: 1.5rem; }
.fixhub-proposal-name-v2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fixhub-text);
}
.fixhub-proposal-rating-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fixhub-proposal-rating-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fixhub-text);
}
.fixhub-proposal-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: var(--fixhub-muted);
}
.fixhub-proposal-trust-list li { margin-bottom: 0.2rem; }
.fixhub-proposal-price-block {
  text-align: right;
  padding: 0.75rem 1rem;
  background: rgba(22, 163, 74, .08);
  border-radius: var(--fixhub-radius-btn);
  border: 1px solid rgba(22, 163, 74, .2);
}
.fixhub-proposal-price-label {
  display: block;
  font-size: 0.75rem;
  color: var(--fixhub-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.fixhub-proposal-price-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fixhub-success);
}
.fixhub-proposal-message {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fixhub-border);
}
.fixhub-proposal-message-label {
  font-size: 0.8rem;
  color: var(--fixhub-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.fixhub-proposal-message-text {
  font-size: 0.95rem;
  color: var(--fixhub-text);
  margin-top: 0.35rem;
  margin-bottom: 0;
  line-height: 1.5;
}
.fixhub-proposal-actions {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fixhub-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Sección de protección (FASE 2) */
.fixhub-trust-box {
  background: rgba(30, 58, 138, .06);
  border: 1px solid rgba(30, 58, 138, .12);
  border-radius: var(--fixhub-radius);
  padding: 1.5rem;
}
.fixhub-trust-box-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fixhub-text);
  margin-bottom: 1rem;
}
.fixhub-trust-box-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--fixhub-text);
}
.fixhub-trust-box-icon { font-size: 1.25rem; }
.fixhub-trust-box-text { font-weight: 500; }

/* Comentarios recientes en perfil (FASE 3) */
.fixhub-reviews-list { display: flex; flex-direction: column; gap: 1rem; }
.fixhub-review-item {
  padding: 1rem;
  background: var(--fixhub-bg);
  border-radius: var(--fixhub-radius-btn);
  border: 1px solid var(--fixhub-border);
}
.fixhub-review-stars-num { font-size: 0.9rem; font-weight: 600; color: var(--fixhub-text); }
.fixhub-review-comment { font-size: 0.9rem; color: var(--fixhub-text); line-height: 1.5; }
.fixhub-reviews-empty { font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════════
   BADGES SEMÁNTICOS DE ESTADO (cliente-facing, en español)
   Reemplazan bg-success/bg-warning de Bootstrap con colores con significado real
   ═══════════════════════════════════════════════════════════════════════════════ */
.fixhub-badge-pending    { background: #D97706; color: #fff; } /* ámbar — en espera */
.fixhub-badge-assigned   { background: var(--fixhub-accent); color: #fff; } /* azul */
.fixhub-badge-inprogress { background: #D97706; color: #fff; } /* ámbar — en curso */
.fixhub-badge-completed  { background: var(--fixhub-success); color: #fff; } /* verde — éxito */
.fixhub-badge-cancelled  { background: #DC2626; color: #fff; } /* rojo */

/* ═══════════════════════════════════════════════════════════════════════════════
   STEPPER VISUAL DE ESTADO (Jobs/Detail — vista cliente)
   ═══════════════════════════════════════════════════════════════════════════════ */
.fixhub-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 0.5rem;
}
.fixhub-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.fixhub-step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid var(--fixhub-border);
  background: var(--fixhub-white);
  color: var(--fixhub-muted);
  flex-shrink: 0;
  transition: background var(--fixhub-transition), border-color var(--fixhub-transition);
}
.fixhub-step-label {
  font-size: 0.72rem;
  color: var(--fixhub-muted);
  margin-top: 0.4rem;
  text-align: center;
  line-height: 1.3;
  padding: 0 0.15rem;
}
.fixhub-step-done .fixhub-step-circle {
  background: var(--fixhub-success);
  border-color: var(--fixhub-success);
  color: #fff;
}
.fixhub-step-done .fixhub-step-label { color: var(--fixhub-success); }
.fixhub-step-active .fixhub-step-circle {
  background: var(--fixhub-accent);
  border-color: var(--fixhub-accent);
  color: #fff;
}
.fixhub-step-active .fixhub-step-label {
  color: var(--fixhub-accent);
  font-weight: 600;
}
.fixhub-step-line {
  flex: 1;
  height: 2px;
  background: var(--fixhub-border);
  margin-top: 16px; /* alinea con el centro del círculo */
  align-self: flex-start;
  transition: background var(--fixhub-transition);
}
.fixhub-step-line-done { background: var(--fixhub-success); }

/* ═══════════════════════════════════════════════════════════════════════════════
   TÉCNICO ASIGNADO — Hero card (arriba del pliegue)
   ═══════════════════════════════════════════════════════════════════════════════ */
.fixhub-assigned-hero {
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-left: 4px solid var(--fixhub-success);
  border-radius: var(--fixhub-radius);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: var(--fixhub-shadow);
}
.fixhub-assigned-hero-left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.fixhub-assigned-avatar { font-size: 3rem; line-height: 1; }
.fixhub-assigned-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--fixhub-text);
  margin-bottom: 0.25rem;
}
.fixhub-assigned-meta { flex-shrink: 0; }
.fixhub-eta-label {
  font-size: 0.72rem;
  color: var(--fixhub-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fixhub-eta-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fixhub-text);
  margin-top: 0.15rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CTA DE RESEÑA (post-completado)
   ═══════════════════════════════════════════════════════════════════════════════ */
.fixhub-review-cta {
  background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .45);
  border-radius: var(--fixhub-radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BARRA DE SOPORTE (siempre visible para cliente/dueño)
   ═══════════════════════════════════════════════════════════════════════════════ */
.fixhub-support-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: var(--fixhub-bg);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  font-size: 0.9rem;
  color: var(--fixhub-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PANTALLA DE CONFIRMACIÓN POST-SOLICITUD (Requests/Confirmation)
   ═══════════════════════════════════════════════════════════════════════════════ */
.fixhub-confirm-icon { font-size: 4rem; line-height: 1; display: block; }
.fixhub-confirm-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  color: var(--fixhub-text);
}
.fixhub-confirm-steps li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--fixhub-border);
}
.fixhub-confirm-steps li:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   TOAST SYSTEM — Notificaciones elegantes (FASE 4)
   ═══════════════════════════════════════════════════════════════════════════════ */
.fixhub-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 380px;
  pointer-events: none;
}
.fixhub-toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--fixhub-radius);
  box-shadow: 0 8px 32px -4px rgba(0,0,0,.18);
  background: var(--fixhub-white);
  border-left: 4px solid var(--fixhub-border);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--fixhub-text);
  pointer-events: all;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.16,.84,.44,1);
}
.fixhub-toast-visible {
  opacity: 1;
  transform: translateX(0);
}
.fixhub-toast-success { border-left-color: var(--fixhub-success); }
.fixhub-toast-error   { border-left-color: #DC2626; }
.fixhub-toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.fixhub-toast-msg  { flex: 1; }
.fixhub-toast-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--fixhub-muted);
  cursor: pointer;
  padding: 0 0.15rem;
  line-height: 1;
  transition: color var(--fixhub-transition);
}
.fixhub-toast-close:hover { color: var(--fixhub-text); }

/* ═══════════════════════════════════════════════════════════════════════════════
   MICRO-INTERACCIONES Y ANIMACIONES (FASE 4)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Animación de entrada para elementos de la página (stepper, hero, CTA) */
@keyframes fixhub-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fixhub-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fixhub-step-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.fixhub-animate-in {
  animation: fixhub-slide-up 0.4s cubic-bezier(.16,.84,.44,1) both;
}
.fixhub-step-enter {
  animation: fixhub-step-pop 0.35s cubic-bezier(.16,.84,.44,1) both;
}

/* Pulso verde — indicador "en vivo" junto al timestamp */
.fixhub-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fixhub-success);
  vertical-align: middle;
  animation: fixhub-pulse 2s ease-in-out infinite;
}
@keyframes fixhub-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

/* Línea "actualizado hace X" */
.fixhub-updated-ago {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
}

/* Tiempo del paso en el stepper */
.fixhub-step-time {
  font-size: 0.68rem;
  color: var(--fixhub-muted);
  margin-top: 0.2rem;
  text-align: center;
}

/* ETA estimate bajo el estado del técnico */
.fixhub-eta-estimate {
  font-size: 0.82rem;
  color: var(--fixhub-muted);
}

/* Link de teléfono clickable */
.fixhub-phone-link {
  color: var(--fixhub-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--fixhub-transition);
}
.fixhub-phone-link:hover { color: var(--fixhub-primary); text-decoration: underline; }

/* Card de detalles del job */
.fixhub-detail-title { font-size: 1.4rem; font-weight: 700; color: var(--fixhub-text); }
.fixhub-detail-desc  { color: var(--fixhub-text); line-height: 1.65; }
.fixhub-status-badge { font-size: 0.85rem !important; }

/* Footer de la card de detalles */
.fixhub-detail-footer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 1rem 1.25rem;
}

/* Trust box con spinner de espera */
.fixhub-trust-box-waiting { border-color: rgba(217, 119, 6, .25); background: rgba(217, 119, 6, .06); }
.fixhub-spinner-icon { font-size: 1.5rem; flex-shrink: 0; animation: fixhub-spin 3s linear infinite; }

/* Info de técnico — layout */
.fixhub-assigned-info { min-width: 0; }

/* Hover elevado en cards ya definidas (refuerzo) */
.fixhub-job-card:hover,
.fixhub-kpi-card:hover,
.fixhub-proposal-card-v2:hover {
  box-shadow: var(--fixhub-shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST OPTIMIZATIONS (FASE 5)
   Breakpoint principal: < 768px
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Helper global: botón full-width en mobile */
.fixhub-btn-w100-mobile { /* se aplica via @media abajo */ }

@media (max-width: 767.98px) {

  /* Botones full-width en mobile */
  .fixhub-btn-w100-mobile {
    width: 100%;
    text-align: center;
    display: block;
  }

  /* ── Stepper vertical en mobile ── */
  .fixhub-stepper {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 0;
  }
  .fixhub-step {
    flex-direction: row;
    align-items: flex-start;
    flex: none;
    width: 100%;
    gap: 1rem;
    padding: 0.35rem 0;
  }
  .fixhub-step-circle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
  }
  .fixhub-step-label {
    font-size: 0.85rem;
    margin-top: 0.35rem;
    text-align: left;
    font-weight: 500;
  }
  .fixhub-step-time {
    font-size: 0.72rem;
    margin-top: 0.1rem;
    text-align: left;
  }
  /* Línea vertical entre pasos */
  .fixhub-step-line {
    width: 2px;
    height: 20px;
    margin: 0 0 0 14px;   /* centrada bajo el círculo (30px/2 - 1px) */
    align-self: auto;
    margin-top: 0;
  }

  /* ── Técnico asignado — stack vertical ── */
  .fixhub-assigned-hero {
    flex-direction: column;
    gap: 1rem;
  }
  .fixhub-assigned-meta {
    text-align: left;
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px solid var(--fixhub-border);
  }

  /* ── Cards de detalles ── */
  .fixhub-detail-footer {
    flex-direction: column;
  }
  .fixhub-detail-footer .btn {
    width: 100%;
  }

  /* ── KPI cards — 2 columnas en mobile ── */
  .fixhub-kpi-card {
    padding: 1rem;
  }
  .fixhub-kpi-value { font-size: 1.5rem; }

  /* ── CTA reseña — stack vertical ── */
  .fixhub-review-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ── Barra de soporte — stack ── */
  .fixhub-support-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .fixhub-support-bar .btn { width: 100%; }

  /* ── Toast — full width en mobile ── */
  .fixhub-toast-container {
    bottom: 0;
    right: 0;
    left: 0;
    max-width: 100%;
    padding: 0.75rem;
    border-radius: 0;
  }
  .fixhub-toast {
    border-radius: var(--fixhub-radius);
    transform: translateY(24px);
  }
  .fixhub-toast-visible { transform: translateY(0); }

  /* ── Legibilidad móvil ── */
  .fixhub-section-title    { font-size: 1.35rem; }
  .fixhub-assigned-name    { font-size: 1.15rem; }
  .fixhub-detail-title     { font-size: 1.2rem; }
  .fixhub-job-card-title   { font-size: 1rem; }
  .fixhub-kpi-label        { font-size: 0.75rem; }

  /* ── Padding vertical extra en main ── */
  .fixhub-main main { padding-top: 1.25rem; }

  /* ── Formulario de solicitud — más espacio vertical ── */
  .fixhub-category-card { padding: 0.85rem 0.5rem; }
  .fixhub-category-icon { font-size: 1.5rem; }

  /* ── Propuestas — forzar stack en layout ── */
  .fixhub-proposal-card-v2-body .d-flex { flex-direction: column; }
  .fixhub-proposal-price-block { text-align: left; margin-top: 0.75rem; }

  /* ── Paginación más pequeña ── */
  .pagination { font-size: 0.875rem; }
  .page-link  { padding: 0.35rem 0.6rem; }

  /* ── Timeline — stack mobile ── */
  .fixhub-timeline-list { padding-left: 1.25rem; }
  .fixhub-support-block .d-flex { flex-direction: column; }
  .fixhub-support-block .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FASE 6 — HISTORIAL, SOPORTE Y CANCELACIONES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Timeline de historial de eventos ── */
.fixhub-timeline { }
.fixhub-timeline-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fixhub-text);
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  color: var(--fixhub-muted);
}
.fixhub-timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 0.5rem;
}
.fixhub-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.55rem 0;
  position: relative;
}
/* Línea vertical continua entre ítems */
.fixhub-timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6px;          /* center of 14px dot */
  top: 22px;
  bottom: -4px;
  width: 2px;
  background: var(--fixhub-border);
}
.fixhub-timeline-item.fixhub-timeline-done:not(:last-child)::after {
  background: var(--fixhub-success);
}
.fixhub-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--fixhub-border);
  background: var(--fixhub-white);
  flex-shrink: 0;
  margin-top: 2px;
}
.fixhub-timeline-done .fixhub-timeline-dot {
  background: var(--fixhub-success);
  border-color: var(--fixhub-success);
}
.fixhub-timeline-pending .fixhub-timeline-dot {
  background: var(--fixhub-white);
  border-color: var(--fixhub-border);
}
.fixhub-timeline-cancelled .fixhub-timeline-dot {
  background: #DC2626;
  border-color: #DC2626;
}
.fixhub-timeline-dot-success {
  background: var(--fixhub-success) !important;
  border-color: var(--fixhub-success) !important;
}
.fixhub-timeline-dot-danger {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
}
.fixhub-timeline-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fixhub-timeline-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fixhub-text);
  line-height: 1.3;
}
.fixhub-timeline-pending .fixhub-timeline-label {
  color: var(--fixhub-muted);
  font-weight: 400;
}
.fixhub-timeline-time {
  font-size: 0.75rem;
  color: var(--fixhub-muted);
  margin-top: 0.1rem;
}
.fixhub-timeline-sub {
  font-size: 0.78rem;
  color: var(--fixhub-muted);
  margin-top: 0.1rem;
}

/* ── Bloque de soporte expandido (con email + teléfono) ── */
.fixhub-support-block {
  background: var(--fixhub-bg);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  padding: 1.25rem 1.5rem;
}
.fixhub-support-block-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.fixhub-support-icon { font-size: 1.25rem; }
.fixhub-support-block-text {
  font-size: 0.88rem;
  color: var(--fixhub-muted);
  margin-bottom: 0.85rem;
}

/* ── Opciones de radio en modal de reporte ── */
.fixhub-radio-option {
  display: flex;
  align-items: center;
  font-size: 0.92rem;
  color: var(--fixhub-text);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius-btn);
  cursor: pointer;
  transition: background var(--fixhub-transition), border-color var(--fixhub-transition);
}
.fixhub-radio-option:hover {
  background: rgba(37, 99, 235, .05);
  border-color: var(--fixhub-accent);
}
.fixhub-radio-option input[type="radio"] {
  accent-color: var(--fixhub-accent);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FASE 7 — DASHBOARD OPERATIVO ADMIN
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Etiqueta de sección ── */
.fixhub-ops-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fixhub-muted);
  margin-bottom: 0.75rem;
}

/* ── KPI Cards ── */
.fixhub-ops-kpi-card {
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  padding: 1.1rem 1rem;
  border-top: 3px solid var(--fixhub-border);
  transition: box-shadow var(--fixhub-transition);
}
.fixhub-ops-kpi-card:hover { box-shadow: var(--fixhub-shadow-lg); }
.fixhub-ops-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--fixhub-text);
  line-height: 1.1;
}
.fixhub-ops-kpi-label {
  font-size: 0.75rem;
  color: var(--fixhub-muted);
  margin-top: 0.2rem;
}
/* Color de tope según tipo */
.fixhub-ops-kpi-total      { border-top-color: var(--fixhub-primary); }
.fixhub-ops-kpi-open       { border-top-color: #D97706; }
.fixhub-ops-kpi-assigned   { border-top-color: var(--fixhub-accent); }
.fixhub-ops-kpi-inprogress { border-top-color: #D97706; }
.fixhub-ops-kpi-completed  { border-top-color: var(--fixhub-success); }
.fixhub-ops-kpi-issues     { border-top-color: #DC2626; }
.fixhub-ops-kpi-ok         { border-top-color: var(--fixhub-success); }

/* ── Lista de alertas SLA ── */
.fixhub-ops-alert-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fixhub-ops-alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  padding: 0.85rem 1.1rem;
  border-left: 4px solid #DC2626;
}
.fixhub-ops-alert-left { display: flex; align-items: center; gap: 0.85rem; min-width: 0; flex: 1; }
.fixhub-ops-alert-badge { white-space: nowrap; }
.fixhub-ops-alert-title { display: flex; flex-direction: column; min-width: 0; }
.fixhub-ops-alert-meta {
  font-size: 0.78rem;
  color: var(--fixhub-muted);
  margin-top: 0.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.fixhub-ops-elapsed {
  font-size: 0.72rem;
  background: rgba(217, 119, 6, .1);
  color: #92400E;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
}
.fixhub-ops-elapsed-danger {
  background: rgba(220, 38, 38, .1);
  color: #7F1D1D;
}
.fixhub-ops-alert-cta { white-space: nowrap; flex-shrink: 0; }

/* ── Estado vacío ── */
.fixhub-ops-empty-state {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(22, 163, 74, .06);
  border: 1px solid rgba(22, 163, 74, .2);
  border-radius: var(--fixhub-radius);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #15803D;
}
.fixhub-ops-empty-icon { font-size: 1.25rem; }

/* ── Paneles de contenido ── */
.fixhub-ops-panel {
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  overflow: hidden;
}
.fixhub-ops-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--fixhub-border);
  background: var(--fixhub-bg);
}
.fixhub-ops-panel-title { font-size: 0.9rem; font-weight: 700; color: var(--fixhub-text); }
.fixhub-ops-panel-body { padding: 0.75rem 1.25rem; }

/* ── Lista de incidencias en panel ── */
.fixhub-ops-issue-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fixhub-ops-issue-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--fixhub-border);
}
.fixhub-ops-issue-item:last-child { border-bottom: none; }
.fixhub-ops-issue-reason { flex-shrink: 0; }
.fixhub-ops-issue-meta { display: flex; flex-direction: column; min-width: 0; }

/* ── Tabla de solicitudes recientes ── */
.fixhub-ops-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fixhub-muted);
  border-bottom: 2px solid var(--fixhub-border);
  padding: 0.6rem 1rem;
}
.fixhub-ops-table tbody td { padding: 0.6rem 1rem; vertical-align: middle; }
.fixhub-ops-table tbody tr:hover { background: rgba(37, 99, 235, .03); }

/* ── Responsive dashboard ── */
@media (max-width: 767.98px) {
  .fixhub-ops-kpi-value { font-size: 1.6rem; }
  .fixhub-ops-alert-item { flex-direction: column; align-items: flex-start; }
  .fixhub-ops-alert-cta { width: 100%; text-align: center; }
  .fixhub-ops-panel-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .fixhub-ops-panel-header .btn { width: 100%; text-align: center; }
}

/* ══ FASE 7.2 — Dashboard accionable ══════════════════════════════════════ */

/* ── Barra de métricas operativas ── */
.fixhub-ops-metrics-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  padding: 0.75rem 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fixhub-ops-metric-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 150px;
}
.fixhub-ops-metric-icon { font-size: 1.4rem; line-height: 1; }
.fixhub-ops-metric-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fixhub-text);
  line-height: 1.1;
}
.fixhub-ops-metric-label {
  font-size: 0.72rem;
  color: var(--fixhub-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fixhub-ops-metric-danger .fixhub-ops-metric-value { color: #DC2626; }
.fixhub-ops-metric-divider {
  width: 1px;
  height: 2.5rem;
  background: var(--fixhub-border);
  flex-shrink: 0;
  margin: 0 0.5rem;
}

/* ── Severidad de alertas ── */
.fixhub-ops-alert-severity-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.fixhub-ops-alert-critical {
  background: rgba(220, 38, 38, .06);
  border-left: 3px solid #DC2626;
}
.fixhub-ops-alert-critical .fixhub-ops-alert-title a { color: #DC2626; }
.fixhub-ops-alert-warning {
  background: rgba(217, 119, 6, .06);
  border-left: 3px solid #D97706;
}

/* ── Columna de acciones en tabla ── */
.fixhub-ops-actions-col { width: 1%; white-space: nowrap; }

/* ── Botones inline extra pequeños ── */
.fixhub-ops-inline-btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Responsive FASE 7.2 ── */
@media (max-width: 767.98px) {
  .fixhub-ops-metrics-bar { gap: 0.75rem; }
  .fixhub-ops-metric-divider { display: none; }
  .fixhub-ops-metric-item { min-width: calc(50% - 0.5rem); }
  .fixhub-ops-actions-col { min-width: 160px; }
  .fixhub-ops-inline-btn { font-size: 0.68rem; padding: 0.18rem 0.45rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FASE 12 — Experiencia Premium Cliente (Jobs/Detail, mobile-first)
   ═══════════════════════════════════════════════════════════════════════════════ */
.fixhub-premium-wrapper { padding: 0 0 2rem; }
.fixhub-premium-progress {
  height: 6px;
  background: var(--fixhub-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: background 0.3s ease;
}
.fixhub-premium-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--fixhub-accent), var(--fixhub-success));
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(.16,.84,.44,1);
}
.fixhub-premium-progress.fixhub-premium-progress-cancelled .fixhub-premium-progress-bar {
  background: #DC2626;
}
.fixhub-premium-status-msg {
  font-size: 0.95rem;
  color: var(--fixhub-text);
  line-height: 1.5;
  padding: 1rem 1.25rem;
  background: rgba(30, 58, 138, .06);
  border-radius: var(--fixhub-radius);
  border-left: 4px solid var(--fixhub-accent);
  margin-bottom: 1.5rem;
}
.fixhub-premium-status-msg.fixhub-premium-status-cancelled {
  background: rgba(220, 38, 38, .08);
  border-left-color: #DC2626;
  color: #991b1b;
}
.fixhub-premium-tech-card {
  background: var(--fixhub-white);
  border: 1px solid var(--fixhub-border);
  border-radius: var(--fixhub-radius);
  padding: 1.5rem;
  box-shadow: var(--fixhub-shadow);
  margin-bottom: 1.5rem;
  animation: fixhub-slide-up 0.4s cubic-bezier(.16,.84,.44,1) both;
}
.fixhub-premium-tech-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.fixhub-premium-tech-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fixhub-primary), var(--fixhub-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}
.fixhub-premium-tech-info { flex: 1; min-width: 0; }
.fixhub-premium-tech-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fixhub-text);
  margin-bottom: 0.35rem;
}
.fixhub-premium-tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.fixhub-premium-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: rgba(22, 163, 74, .12);
  color: var(--fixhub-success);
}
.fixhub-premium-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.fixhub-premium-actions .btn { min-width: 0; }
@media (max-width: 575.98px) {
  .fixhub-premium-actions { flex-direction: column; }
  .fixhub-premium-actions .btn { width: 100%; }
}
.fixhub-premium-timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.fixhub-premium-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--fixhub-border);
  transition: opacity 0.3s ease;
}
.fixhub-premium-timeline-item:last-child { border-bottom: none; }
.fixhub-premium-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fixhub-border);
  flex-shrink: 0;
  margin-top: 0.35rem;
  transition: background 0.3s ease;
}
.fixhub-premium-timeline-item.fixhub-premium-timeline-done .fixhub-premium-timeline-dot {
  background: var(--fixhub-success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .2);
}
.fixhub-premium-timeline-item.fixhub-premium-timeline-pending .fixhub-premium-timeline-label { color: var(--fixhub-muted); }
.fixhub-premium-timeline-label { font-weight: 600; font-size: 0.9rem; color: var(--fixhub-text); }
.fixhub-premium-timeline-time { font-size: 0.8rem; color: var(--fixhub-muted); margin-top: 0.2rem; display: block; }
.fixhub-premium-cta-rating {
  background: linear-gradient(135deg, rgba(251, 191, 36, .15), rgba(251, 191, 36, .08));
  border: 2px solid rgba(251, 191, 36, .5);
  border-radius: var(--fixhub-radius);
  padding: 1.75rem;
  text-align: center;
  margin: 1.5rem 0;
  animation: fixhub-slide-up 0.4s cubic-bezier(.16,.84,.44,1) 0.1s both;
}
.fixhub-premium-cta-rating-title { font-size: 1.25rem; font-weight: 700; color: var(--fixhub-text); margin-bottom: 0.35rem; }
.fixhub-premium-cta-rating-sub { font-size: 0.9rem; color: var(--fixhub-muted); margin-bottom: 1rem; }
.fixhub-premium-cta-rating .btn { padding: 0.85rem 2rem; font-size: 1.05rem; }
.fixhub-premium-btn-loading {
  position: relative;
  pointer-events: none;
}
.fixhub-premium-btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: fixhub-spin 0.6s linear infinite;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}
@keyframes fixhub-spin { to { transform: translateY(-50%) rotate(360deg); } }