/* ================================================================
   ThermoQuality — Portal de Instaladores
   Paleta: Rojo #CB122C | Negro #020101 | Gris #69727D
   Font: Inter (Google Fonts)
   Python 3.6.8 / Flask / cPanel
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --primary:      #CB122C;
  --primary-dark: #a00e22;
  --primary-light:#e01530;
  --negro:        #020101;
  --negro-suave:  #1a1a1a;
  --gris:         #69727D;
  --gris-claro:   #a0a8b1;
  --success:      #22C55E;
  --warning:      #F59E0B;
  --danger:       #CB122C;
  --info:         #69727D;

  --bg:           #F5F5F5;
  --bg-card:      #FFFFFF;
  --border:       #E2E2E2;
  --border-dark:  #C8C8C8;

  --text:         #020101;
  --text-muted:   #69727D;
  --text-light:   #a0a8b1;

  --radius:       10px;
  --radius-sm:    6px;
  --shadow:       0 1px 4px rgba(2,1,1,.08), 0 4px 16px rgba(2,1,1,.06);
  --shadow-hover: 0 4px 12px rgba(2,1,1,.14), 0 8px 32px rgba(2,1,1,.1);

  --header-h:     64px;
  --sidebar-w:    260px;
}

/* ── Reset / Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .9375rem;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.main-content { flex: 1; width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  background: var(--primary);
  height: var(--header-h);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.header-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 1.5rem;
  height: 100%; width: 100%;
  display: flex; align-items: center; gap: 1rem;
}
.logo-link {
  display: flex; align-items: center; text-decoration: none; flex-shrink: 0;
  background: #fff; border-radius: 6px; padding: 4px 10px;
}
.logo-img { height: 34px; width: auto; }
.logo-text { display: flex; align-items: center; font-size: 1.35rem; font-weight: 700; }
.logo-thermo { color: #FFFFFF; }
.logo-quality { color: rgba(255,255,255,.75); }

.main-nav { display: flex; align-items: center; gap: .2rem; flex: 1; overflow: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.nav-link {
  display: flex; align-items: center; gap: .35rem;
  color: rgba(255,255,255,.75); font-size: .82rem; font-weight: 500;
  padding: .4rem .6rem; border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
  white-space: nowrap; flex-shrink: 0;
}
.nav-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-link:hover, .nav-link.active {
  background: rgba(255,255,255,.12); color: #fff;
}
.nav-link.active { background: rgba(255,255,255,.18); color: #fff; }
.badge-discount {
  background: var(--primary-light); color: #fff;
  font-size: .68rem; font-weight: 700; padding: 1px 4px;
  border-radius: 20px; margin-left: 2px;
}

/* User menu */
.header-user { margin-left: auto; position: relative; }
.user-menu-toggle {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; padding: .35rem .75rem;
  border-radius: var(--radius-sm); color: rgba(255,255,255,.9);
  transition: background .15s;
}
.user-menu-toggle:hover { background: rgba(255,255,255,.12); }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.user-name { font-size: .85rem; font-weight: 500; max-width: 120px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { width: 14px; height: 14px; }

.user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-hover); min-width: 220px; z-index: 300;
}
.user-dropdown.open { display: block; }
.dropdown-header {
  padding: .75rem 1rem; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .25rem;
}
.dropdown-item {
  display: block; padding: .55rem 1rem;
  color: var(--text); font-size: .875rem;
  transition: background .1s;
}
.dropdown-item:hover { background: var(--bg); color: var(--primary); }
.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: .25rem 0; }
.dropdown-logout { color: var(--danger); }

.mobile-menu-btn {
  display: none; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.9); padding: .5rem;
}
.mobile-menu-btn svg { width: 22px; height: 22px; }

/* ── Flash / Alerts ────────────────────────────────────────── */
.flash-container { max-width: 1400px; margin: .75rem auto 0; padding: 0 1.5rem; }
.alert {
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; font-size: .875rem; margin-bottom: .5rem;
}
.alert-success { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.alert-danger   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.alert-warning  { background: #FEF9C3; color: #854D0E; border: 1px solid #FEF08A; }
.alert-info     { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; }
.alert-close { background: none; border: none; cursor: pointer; font-size: 1.2rem;
               color: inherit; opacity: .6; line-height: 1; padding: 0; }
.alert-close:hover { opacity: 1; }

/* ── Main content ──────────────────────────────────────────── */
.main-content { max-width: 1400px; margin: 0 auto; padding: 1.5rem; box-sizing: border-box; }

/* ── Page header ───────────────────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem;
}
.page-header-sm { margin-bottom: 1rem; }
.page-title { font-size: 1.6rem; font-weight: 700; color: var(--primary); line-height: 1.2; }
.page-subtitle { color: var(--text-muted); font-size: .9rem; margin-top: .2rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.breadcrumb { font-size: .8rem; color: var(--text-muted); margin-bottom: .3rem; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); }

/* ── Cards ─────────────────────────────────────────────────── */
.card { background: var(--bg-card); border-radius: var(--radius);
        box-shadow: var(--shadow); border: 1px solid var(--border); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.card-title { font-size: 1rem; font-weight: 600; }
.card-link { font-size: .8rem; color: var(--primary); }
.card-body { padding: 1.25rem; }
.card-body.p0 { padding: 0; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500; cursor: pointer;
  border: 1.5px solid transparent; transition: all .15s;
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--border-dark); }
.btn-outline:hover { border-color: var(--primary); background: var(--bg); color: var(--primary); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-warning { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-danger-outline { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: .35rem .75rem; font-size: .8rem; }
.btn-xs { padding: .2rem .5rem; font-size: .72rem; border-radius: 4px; }
.btn-full { width: 100%; justify-content: center; }
/* Botón de pago destacado */
.btn-pay {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #16a34a; color: #fff;
  font-size: 1rem; padding: .7rem 1.75rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(22,163,74,.35);
  animation: pulse-pay 2s ease-in-out infinite;
}
.btn-pay:hover { background: linear-gradient(135deg, #15803d, #166534); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22,163,74,.45); }
@keyframes pulse-pay {
  0%, 100% { box-shadow: 0 4px 14px rgba(22,163,74,.35); }
  50% { box-shadow: 0 4px 22px rgba(22,163,74,.6); }
}

/* ── Forms ─────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-group label { font-size: .875rem; font-weight: 500; color: var(--text); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-control {
  padding: .55rem .8rem; border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm); font-size: .9rem; color: var(--text);
  background: #fff; transition: border-color .15s;
  font-family: inherit; width: 100%;
}
.form-control:focus { outline: none; border-color: var(--primary); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-control-sm { padding: .35rem .65rem; font-size: .8rem; }
.form-check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; margin-bottom: 1rem; }
.form-hint { font-size: .78rem; color: var(--text-muted); }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
.form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
             border: 1px solid var(--border); padding: 1.5rem; max-width: 760px; }
.required { color: var(--danger); }
.inline-form { display: inline-flex; align-items: center; gap: .4rem; }

.input-pw-wrap { position: relative; }
.pw-toggle { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
             background: none; border: none; cursor: pointer; color: var(--text-muted);
             padding: .25rem; }
.pw-toggle svg { width: 17px; height: 17px; }

/* ── Tables ─────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table thead th {
  padding: .65rem 1rem; background: var(--bg);
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.table tbody td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: none; }
.table-row-link { cursor: pointer; }
.table-row-link:hover td { background: rgba(203,18,44,.04); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem; border-radius: 20px;
  font-size: .75rem; font-weight: 600;
}
.badge-open         { background: #DBEAFE; color: #1E40AF; }
.badge-in_progress  { background: #FEF9C3; color: #854D0E; }
.badge-resolved     { background: #DCFCE7; color: #166534; }
.badge-closed       { background: #F1F5F9; color: var(--text-muted); }

.badge-priority-low    { background: #F0FDF4; color: #166534; }
.badge-priority-normal { background: #EFF6FF; color: #1D4ED8; }
.badge-priority-high   { background: #FFF7ED; color: #C2410C; }
.badge-priority-urgent { background: #FEF2F2; color: #991B1B; }

.badge-order-pending    { background: #FEF9C3; color: #854D0E; }
.badge-order-processing { background: #DBEAFE; color: #1E40AF; }
.badge-order-completed  { background: #DCFCE7; color: #166534; }
.badge-order-error      { background: #FEE2E2; color: #991B1B; }
.badge-order-cancelled  { background: #F1F5F9; color: var(--text-muted); }

.role-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem; border-radius: 20px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.role-installer_plus    { background: #E0F2FE; color: #0369A1; }
.role-installer_premium { background: #F3E8FF; color: #6B21A8; }
.role-installer_gold    { background: #FEF9C3; color: #854D0E; border: 1px solid #F59E0B; }
.role-administrator     { background: #FEE2E2; color: #991B1B; }

.tag { background: var(--bg); color: var(--text-muted); padding: .15rem .5rem;
       border-radius: 4px; font-size: .75rem; margin: 0 2px; }
.chip { display: inline-flex; align-items: center; gap: .25rem;
        background: var(--bg); color: var(--text); padding: .2rem .6rem;
        border-radius: 20px; font-size: .8rem; }
.chip-link:hover { background: var(--primary); color: #fff; }

/* ── Stats grid ─────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
              gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: #fff; border-radius: var(--radius); padding: 1.25rem;
             box-shadow: var(--shadow); border: 1px solid var(--border);
             display: flex; align-items: center; gap: 1rem; }
.stat-card-highlight { border-color: var(--primary); }
.stat-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
             display: flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 22px; height: 22px; }
.stat-icon-success { background: #DCFCE7; color: #16A34A; }
.stat-icon-warning { background: #FEF9C3; color: #D97706; }
.stat-icon-danger  { background: #FEE2E2; color: #DC2626; }
.stat-icon-info    { background: #DBEAFE; color: #2563EB; }
.stat-icon-orange  { background: #FFF7ED; color: var(--primary); }
.stat-body { display: flex; flex-direction: column; }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--primary); line-height: 1; }
.stat-label { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }

/* ── Dash grid ──────────────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* ── Filter bar / chips ─────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.filter-chip { padding: .35rem .85rem; border-radius: 20px; font-size: .82rem; font-weight: 500;
               color: var(--text-muted); border: 1.5px solid var(--border);
               transition: all .15s; }
.filter-chip.active, .filter-chip:hover { background: var(--primary); color: #fff;
                                          border-color: var(--primary); }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: .75rem;
              padding: 1rem; }
.page-btn { padding: .4rem .9rem; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
            color: var(--text); font-size: .82rem; transition: all .15s; }
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-info { font-size: .82rem; color: var(--text-muted); }

/* ── Empty state ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state .empty-icon { width: 48px; height: 48px; margin: 0 auto 1rem; }
.empty-state p { margin-bottom: 1rem; }

/* ── Discount chips ─────────────────────────────────────────── */
.discount-chip { background: var(--primary); color: #fff; padding: .15rem .55rem;
                 border-radius: 20px; font-size: .78rem; font-weight: 700; }
.discount-highlight { color: var(--primary); font-size: 1.1rem; }

/* ── Ticket detail layout ───────────────────────────────────── */
.ticket-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1.25rem; }
.ticket-thread { display: flex; flex-direction: column; gap: 1rem; }
.ticket-message { background: #fff; border-radius: var(--radius); padding: 1rem;
                  box-shadow: var(--shadow); border: 1px solid var(--border); }
.ticket-message-original { border-left: 4px solid var(--primary); }
.ticket-message-mine { border-left: 4px solid var(--primary); }
.msg-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.msg-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary);
              color: #fff; display: flex; align-items: center; justify-content: center;
              font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.msg-date { font-size: .78rem; color: var(--text-muted); margin-left: .25rem; }
.msg-tag { background: var(--bg); color: var(--text-muted); padding: .1rem .45rem;
           border-radius: 4px; font-size: .72rem; margin-left: .5rem; }
.msg-tag-admin { background: #FEE2E2; color: #991B1B; }
.msg-body { font-size: .9rem; white-space: pre-wrap; }
.reply-form-card { background: #fff; border-radius: var(--radius); padding: 1.25rem;
                   box-shadow: var(--shadow); border: 1px solid var(--border); }
.reply-form-title { font-size: .95rem; font-weight: 600; margin-bottom: .75rem; }
.reply-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.ticket-sidebar .card-body { display: flex; flex-direction: column; gap: .5rem; }
.sidebar-section-title { font-size: .85rem; font-weight: 700; text-transform: uppercase;
                          letter-spacing: .06em; color: var(--text-muted); margin-bottom: .5rem; }
.info-list { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem;
             font-size: .85rem; }
.info-list dt { color: var(--text-muted); font-weight: 500; }
.meta-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* ── Chat ───────────────────────────────────────────────────── */
.chat-layout { display: grid; grid-template-columns: 1fr 260px; gap: 1.25rem; align-items: start; }
.chat-container { display: flex; flex-direction: column;
                  height: calc(100vh - var(--header-h) - 160px); min-height: 420px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem;
                 display: flex; flex-direction: column; gap: .5rem;
                 scroll-behavior: smooth; }
.chat-bubble { max-width: 75%; display: flex; flex-direction: column; }
.bubble-mine { align-self: flex-end; align-items: flex-end; }
.bubble-other { align-self: flex-start; align-items: flex-start; }
.bubble-author { font-size: .7rem; font-weight: 600; color: var(--text-muted);
                 margin-bottom: .18rem; padding: 0 .5rem; }
.bubble-text {
  padding: .55rem .95rem; border-radius: 18px; font-size: .9rem; line-height: 1.5;
  word-break: break-word;
}
.bubble-mine .bubble-text { background: var(--primary); color: #fff;
                             border-bottom-right-radius: 4px; }
.bubble-other .bubble-text { background: #fff; border: 1px solid var(--border);
                              border-bottom-left-radius: 4px;
                              box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.bubble-time { font-size: .68rem; color: var(--text-light);
               margin-top: .15rem; padding: 0 .4rem; }
.bubble-mine .bubble-time { text-align: right; }
.chat-input-bar { padding: .75rem 1rem; background: #fff;
                  border-top: 1px solid var(--border); flex-shrink: 0; }
.chat-form { display: flex; gap: .5rem; align-items: center; }
.chat-form .form-control { flex: 1; border-radius: 24px; padding: .55rem 1.1rem; }
.chat-form .btn { border-radius: 50%; width: 40px; height: 40px;
                  padding: 0; justify-content: center; flex-shrink: 0; }
.participant-list { display: flex; flex-direction: column; gap: .75rem; list-style: none; }
.participant-item { display: flex; align-items: center; gap: .6rem; font-size: .875rem; }
.participant-avatar { width: 30px; height: 30px; border-radius: 50%;
                      background: var(--primary); color: #fff;
                      display: flex; align-items: center; justify-content: center;
                      font-size: .8rem; font-weight: 700; flex-shrink: 0; }
.participant-role { font-size: .72rem; color: var(--text-muted); margin-left: .25rem; }
.role-chip-admin     { color: var(--danger); font-weight: 600; }
.role-chip-installer { color: var(--primary); font-weight: 600; }
.role-chip-customer  { color: var(--info); font-weight: 600; }
.participants-chip { display: flex; gap: .25rem; }
.avatar-chip { width: 28px; height: 28px; border-radius: 50%; background: var(--primary);
               color: #fff; display: flex; align-items: center; justify-content: center;
               font-size: .75rem; font-weight: 700; border: 2px solid #fff; margin-left: -6px; }
.chat-list-grid { display: flex; flex-direction: column; gap: .75rem; }
.chat-list-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
                  background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
                  box-shadow: var(--shadow); transition: box-shadow .15s; color: var(--text); }
.chat-list-card:hover { box-shadow: var(--shadow-hover); }
.clc-icon { font-size: 1.4rem; flex-shrink: 0; }
.clc-body { flex: 1; min-width: 0; }
.clc-last { display: block; font-size: .8rem; color: var(--text-muted);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clc-meta { font-size: .75rem; color: var(--text-light); flex-shrink: 0; }

/* ── Directory ──────────────────────────────────────────────── */
.dir-filter-bar { margin-bottom: 1.25rem; }
.dir-filter-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.dir-filter-row .form-control { flex: 1; min-width: 160px; }
.search-bar { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.search-bar .form-control { flex: 1; max-width: 400px; }
.installer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                  gap: 1.25rem; }
.inst-works-badge { font-size: .7rem; color: var(--text-light); background: var(--bg);
                    border-radius: 20px; padding: .1rem .5rem; }
.installer-rate { font-size: .8rem; color: var(--success); text-align: center;
                  padding: .1rem 1rem; font-weight: 500; }
.installer-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
                  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
                  transition: box-shadow .2s, transform .2s; color: var(--text); }
.installer-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.installer-card-header { padding: .75rem 1rem .25rem; display: flex; justify-content: flex-end; }
.installer-avatar { width: 64px; height: 64px; border-radius: 50%;
                    background: var(--primary); color: #fff;
                    display: flex; align-items: center; justify-content: center;
                    font-size: 1.5rem; font-weight: 700; margin: 0 auto .75rem; }
.installer-name { font-weight: 600; text-align: center; padding: 0 1rem; }
.installer-location, .installer-specialty { font-size: .82rem; color: var(--text-muted);
                                            text-align: center; padding: .15rem 1rem; }
.installer-card-footer { padding: .75rem 1rem 1rem; margin-top: auto;
                         display: flex; justify-content: center; }

/* Perfil instalador */
.installer-profile { display: flex; flex-direction: column; gap: 1.5rem; }
.profile-hero { }
.profile-hero-body { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; flex-wrap: wrap; }
.profile-avatar-lg { width: 80px; height: 80px; border-radius: 50%;
                     background: var(--primary); color: #fff;
                     display: flex; align-items: center; justify-content: center;
                     font-size: 2rem; font-weight: 700; flex-shrink: 0; }
.profile-avatar-img { object-fit: cover; }
.profile-info { flex: 1; }
.profile-name { font-size: 1.5rem; font-weight: 700; margin-bottom: .35rem; }
.profile-meta-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.profile-chip { background: var(--bg); padding: .25rem .65rem; border-radius: 20px; font-size: .82rem; }
.profile-actions { margin-left: auto; }
.profile-section { }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.section-title { font-size: 1.1rem; font-weight: 600; }

/* Works grid */
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.work-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
             box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
             transition: box-shadow .2s, transform .2s; color: var(--text); }
.work-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.work-card-own { }
/* Imagen adaptativa: detecta orientación vía JS añadiendo clase */
.work-card-img { height: 180px; background-size: cover; background-position: center;
                 overflow: hidden; position: relative; }
.work-card-img.img-portrait  { height: 240px; }
.work-card-img.img-landscape { height: 160px; }
.work-card-img.img-square    { height: 200px; }
.work-card-img-smart { background-size: cover; background-position: center; }
.work-card-img-placeholder { background: var(--bg); display: flex; align-items: center;
                              justify-content: center; }
.work-card-img-placeholder svg { width: 40px; height: 40px; color: var(--border); }
.work-card-body { padding: .9rem; flex: 1; }
.work-card-body h4 { font-size: .9rem; font-weight: 600; margin-bottom: .35rem; }
.work-meta { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .4rem; }
.work-excerpt { font-size: .82rem; color: var(--text-muted); }
.work-date { font-size: .75rem; color: var(--text-light); display: block; margin-top: .4rem; }
.work-card-actions { padding: .75rem; display: flex; gap: .35rem; border-top: 1px solid var(--border); }

/* Post detail */
.post-hero { height: 320px; background-size: cover; background-position: center;
             border-radius: var(--radius) var(--radius) 0 0; }
.post-body .card-body { padding: 1.5rem; }
.post-meta-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.post-title { font-size: 1.6rem; font-weight: 700; margin-bottom: .75rem; }
.installer-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem;
                  color: var(--text-muted); margin-bottom: 1.25rem; }
.installer-mini-avatar { width: 26px; height: 26px; border-radius: 50%;
                         background: var(--primary); color: #fff;
                         display: flex; align-items: center; justify-content: center;
                         font-size: .7rem; font-weight: 700; }
.post-content { font-size: .95rem; line-height: 1.8; white-space: pre-wrap; }
.post-actions { display: flex; gap: .75rem; margin-top: 1rem; }

/* ── Shop ───────────────────────────────────────────────────── */
.shop-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filter-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-form .form-control { max-width: 280px; }

.discount-banner {
  display: flex; align-items: flex-start; gap: .75rem;
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: var(--radius);
  padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: .875rem;
}
.discount-banner-icon { font-size: 1.25rem; flex-shrink: 0; }

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.product-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
                box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.product-in-cart { border-color: var(--success); }
.product-img { height: 160px; background-size: contain; background-repeat: no-repeat;
               background-position: center; background-color: var(--bg); }
.product-img-placeholder { display: flex; align-items: center; justify-content: center; }
.product-img-placeholder svg { width: 40px; height: 40px; color: var(--border); }
.product-body { padding: .85rem; flex: 1; }
.product-sku { font-size: .72rem; color: var(--text-light); display: block; margin-bottom: .2rem; }
.product-name { font-size: .875rem; font-weight: 600; margin-bottom: .5rem; line-height: 1.3; }
.product-prices { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.price-original { font-size: .8rem; color: var(--text-light); text-decoration: line-through; }
.price-discount { font-size: 1.05rem; font-weight: 700; color: var(--primary); }
.product-savings { font-size: .75rem; color: var(--success); margin-top: .2rem; }
.product-footer { padding: .75rem; border-top: 1px solid var(--border); }
.product-footer form { display: flex; gap: .35rem; align-items: center; }
.qty-input { width: 54px; padding: .35rem .5rem; border: 1.5px solid var(--border);
             border-radius: var(--radius-sm); text-align: center; font-size: .85rem; }

/* Cart */
.cart-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: .75rem; }
.cart-row { display: flex; align-items: center; gap: 1rem; background: #fff;
            border-radius: var(--radius); padding: 1rem; border: 1px solid var(--border);
            box-shadow: var(--shadow); }
.cart-img { width: 72px; height: 72px; border-radius: var(--radius-sm); flex-shrink: 0;
            background-size: contain; background-repeat: no-repeat; background-position: center;
            background-color: var(--bg); }
.cart-img-placeholder { background-color: var(--bg); }
.cart-info { flex: 1; }
.cart-prices { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .35rem;
               font-size: .875rem; }
.cart-qty { color: var(--text-muted); }
.cart-line-total { font-weight: 700; color: var(--primary); }
.cart-remove { margin-left: auto; }
.btn-icon { background: none; border: none; cursor: pointer; color: var(--text-muted);
            padding: .4rem; border-radius: var(--radius-sm); transition: color .15s; }
.btn-icon:hover { color: var(--danger); }
.summary-list { display: grid; grid-template-columns: 1fr auto; gap: .6rem; font-size: .875rem; }
.summary-list dt { color: var(--text-muted); }
.total-label { font-weight: 700; font-size: 1rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.total-value { font-weight: 700; font-size: 1.2rem; color: var(--primary);
               padding-top: .5rem; border-top: 1px solid var(--border); }
.cart-note { font-size: .78rem; color: var(--text-muted); margin-top: .75rem; line-height: 1.5; }

/* Checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 1.25rem; align-items: start; }
.checkout-totals { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.checkout-discount { font-size: .875rem; color: var(--text-muted); margin-bottom: .35rem; }
.checkout-total { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
.checkout-info-box { background: var(--bg); border-radius: var(--radius-sm);
                     padding: .85rem; font-size: .875rem; margin: 1rem 0; line-height: 1.6; }

/* Order confirm */
.order-confirm { max-width: 760px; margin: 0 auto; }
.confirm-header { text-align: center; padding: 2rem 1rem; }
.confirm-icon { width: 72px; height: 72px; border-radius: 50%;
                display: flex; align-items: center; justify-content: center;
                font-size: 2rem; margin: 0 auto 1rem; }
.confirm-icon-success { background: #DCFCE7; color: #16A34A; }
.confirm-icon-warning  { background: #FEF9C3; color: #D97706; }
.confirm-header h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: .5rem; }
.order-detail-card { margin: 1.5rem 0; }
.order-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.order-meta-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
                     color: var(--text-muted); font-weight: 600; }
.order-meta-val { display: block; font-size: .95rem; font-weight: 600; margin-top: .15rem; }
.confirm-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* ── Login page ─────────────────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center;
              min-height: 100vh;
              background: #F2F2F2;
              background-image: linear-gradient(135deg, #F2F2F2 0%, #E8E8E8 100%); }
.login-wrapper { position: relative; z-index: 1; width: 100%; max-width: 440px; padding: 1.5rem; }
.login-card { background: #fff; border-radius: 16px; padding: 2.5rem 2rem;
              box-shadow: 0 8px 40px rgba(2,1,1,.12), 0 2px 8px rgba(2,1,1,.08);
              border-top: 4px solid var(--primary); }
.login-logo { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.login-logo img { height: 56px; }
.login-title { font-size: 1.4rem; font-weight: 700; text-align: center; color: var(--negro); }
.login-subtitle { text-align: center; color: var(--text-muted); font-size: .875rem; margin: .35rem 0 1.5rem; }
.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-footer { display: flex; justify-content: center; gap: .75rem; margin-top: 1.25rem;
                font-size: .82rem; color: var(--text-muted); }
.login-bg-pattern { display: none; }

/* ── Text helpers ───────────────────────────────────────────── */
.text-muted  { color: var(--text-muted); }
.text-strong { font-weight: 600; }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background: var(--negro); color: rgba(255,255,255,.65);
               margin-top: auto; padding: 1.5rem; }
.footer-inner { max-width: 1400px; margin: 0 auto; display: flex;
                align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-brand { flex: 1; }
.footer-brand p { font-size: .8rem; margin-top: .25rem; }
.footer-links { display: flex; gap: 1rem; }
.footer-links a { color: rgba(255,255,255,.6); font-size: .82rem; }
.footer-links a:hover { color: var(--primary); }
.footer-copy { font-size: .78rem; color: rgba(255,255,255,.4); }

/* ── Nav admin separator ────────────────────────────────────── */
.nav-divider { width: 1px; height: 24px; background: rgba(255,255,255,.25);
               align-self: center; margin: 0 .25rem; }
.nav-admin { opacity: .9; }
.nav-admin:hover, .nav-admin.active { opacity: 1; }
@media (max-width: 768px) { .nav-divider { display: none; } }

/* ── Admin pages ────────────────────────────────────────────── */
.admin-grid { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: start; }
.admin-sidebar { position: sticky; top: calc(var(--header-h) + 1rem); }
.admin-sidebar .card-body { padding: .5rem 0; }
.admin-sidebar-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1.25rem; font-size: .875rem; font-weight: 500;
  color: var(--text); border-left: 3px solid transparent; transition: all .15s;
}
.admin-sidebar-link:hover { background: var(--bg); color: var(--primary); }
.admin-sidebar-link.active { background: var(--bg); color: var(--primary);
                              border-left-color: var(--primary); font-weight: 600; }
.admin-sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.admin-sidebar-sep { height: 1px; background: var(--border); margin: .4rem 0; }

.config-section { margin-bottom: 2rem; }
.config-section-title { font-size: 1rem; font-weight: 700; color: var(--primary);
                         border-bottom: 2px solid var(--primary); padding-bottom: .4rem;
                         margin-bottom: 1rem; }
.config-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 1rem;
              align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.config-row:last-child { border-bottom: none; }
.config-label { font-size: .875rem; font-weight: 500; }
.config-hint { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }

.integration-card { padding: 1rem; background: var(--bg); border-radius: var(--radius-sm);
                    border: 1px solid var(--border); margin-bottom: .75rem; }
.integration-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.integration-name { font-weight: 600; font-size: .9rem; }
.integration-status { font-size: .78rem; font-weight: 600; }
.status-ok   { color: var(--success); }
.status-fail { color: var(--danger); }
.status-warn { color: var(--warning); }
.integration-meta { font-size: .78rem; color: var(--text-muted); margin-top: .35rem; }

.user-row { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr auto; gap: 1rem;
            align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.user-row:last-child { border-bottom: none; }
.user-info { display: flex; flex-direction: column; }
.user-meta { font-size: .78rem; color: var(--text-muted); }

.gestion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.gestion-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
                box-shadow: var(--shadow); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.gestion-card-title { font-size: .95rem; font-weight: 700; }
.gestion-card-value { font-size: 2rem; font-weight: 800; color: var(--primary); }
.gestion-card-sub { font-size: .78rem; color: var(--text-muted); }

/* ── Data table base ── */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: .75rem 1rem; font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted);
  background: var(--bg); border-bottom: 2px solid var(--border);
}
.data-table td {
  padding: .75rem 1rem; font-size: .875rem; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg); }

/* ── Portfolio grid base ── */
.portfolio-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

@media (max-width: 1024px) { .admin-grid { grid-template-columns: 1fr; } .admin-sidebar { position: static; } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1150px) {
  /* Nav scroll horizontal en tablets grandes en vez de ocultar */
  .main-nav { overflow-x: auto; overflow-y: visible; }
  .nav-link { padding: .4rem .5rem; font-size: .78rem; }
  .nav-link svg { display: none; }
}

@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr; }
  .ticket-layout { grid-template-columns: 1fr; }
  .chat-layout { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .chat-sidebar { display: none; }
}

@media (max-width: 900px) {
  /* Fuerza menú móvil también en horizontal móvil/tablet para evitar solapado */
  .main-nav {
    display: none; flex-direction: column;
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--primary-dark); padding: 1.25rem 1rem;
    gap: .2rem; overflow-y: auto; z-index: 100;
  }
  .main-nav.mobile-open { display: flex; }
  .nav-link { font-size: .95rem; padding: .7rem 1rem; border-radius: 8px; }
  .nav-divider { width: 100%; height: 1px; background: rgba(255,255,255,.15); margin: .4rem 0; }
  .mobile-menu-btn { display: flex; }
  .header-user .user-name { display: none; }
}

@media (max-width: 768px) {
  /* ── Layout ── */
  .main-content { padding: 1rem; }
  .page-header { flex-direction: column; gap: .75rem; align-items: flex-start; }
  .page-actions { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
  .page-actions .btn { flex: 1; justify-content: center; min-width: 120px; }

  /* ── Grids ── */
  .form-row { grid-template-columns: 1fr; }
  .page-title { font-size: 1.3rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .installer-grid { grid-template-columns: 1fr 1fr; }
  .dir-filter-row { flex-direction: column; align-items: stretch; }
  .dir-filter-row .form-control { max-width: 100%; }
  .works-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }

  /* ── Cards ── */
  .card { border-radius: 10px; }
  .card-body { padding: 1rem; }

  /* ── Tables — horizontal scroll ── */
  .data-table-wrap, .card .card-body:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 540px; }
  .data-table th, .data-table td { padding: .6rem .75rem; font-size: .82rem; }

  /* ── Tickets ── */
  .ticket-layout { display: block; }
  .ticket-sidebar { margin-top: 1rem; }

  /* ── Chat ── */
  .chat-sidebar { order: -1; }
  .chat-container { height: 55vw; min-height: 280px; }
  .chat-bubble { max-width: 90%; }
  .chat-form .form-control { font-size: .95rem; }

  /* ── Chat list ── */
  .chat-list-card { flex-wrap: wrap; gap: .5rem; }
  .clc-meta { width: 100%; text-align: right; }

  /* ── Portfolio ── */
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-card .portfolio-info { padding: .75rem; }

  /* ── Chat responsive ── */
  .chat-layout { grid-template-columns: 1fr; }
  .chat-sidebar { order: -1; }
  .chat-container { height: calc(100vh - var(--header-h) - 340px); min-height: 300px; }
  .chat-bubble { max-width: 85%; }

  /* ── Badge discount nav ── */
  .badge-discount { display: none; }

  /* ── Dropdown admin ── */
  .user-dropdown { right: -1rem; left: -1rem; min-width: unset; }

  /* ── Gestion cards ── */
  .gestion-grid { grid-template-columns: repeat(2,1fr); gap: .75rem; }
  .gestion-card { padding: 1rem; }

  /* ── Config tabs ── */
  .cfg-tabs-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .cfg-tab-btn { flex-shrink: 0; font-size: .82rem; }
}

@media (max-width: 480px) {
  /* ── Header ── */
  .header-inner { padding: 0 .75rem; gap: .75rem; }
  .logo-img { height: 32px; }

  /* ── Content ── */
  .main-content { padding: .75rem; }
  .page-title { font-size: 1.15rem; }

  /* ── Grids ── */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .products-grid { grid-template-columns: 1fr; }
  .installer-grid { grid-template-columns: 1fr 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .gestion-grid { grid-template-columns: 1fr 1fr; }
  .works-grid { grid-template-columns: 1fr; }

  /* ── Stat cards ── */
  .stat-card { padding: .85rem; }
  .stat-value { font-size: 1.5rem; }

  /* ── Buttons ── */
  .btn { padding: .55rem 1rem; font-size: .875rem; }
  .btn-sm { padding: .4rem .75rem; font-size: .78rem; }

  /* ── Forms ── */
  .form-control { font-size: .95rem; }
  .form-group { margin-bottom: 1rem; }

  /* ── Tables full-width ── */
  .data-table { min-width: 400px; font-size: .78rem; }

  /* ── Flash alerts ── */
  .flash-container { padding: .5rem .75rem; }
  .alert { font-size: .875rem; padding: .65rem 1rem; }

  /* ── Chat ── */
  .bubble-text { font-size: .88rem; }
  .bubble-time { font-size: .68rem; }

  /* ── Page header compact ── */
  .breadcrumb { font-size: .75rem; }
  .page-subtitle { font-size: .82rem; }

  /* ── Tickets detail ── */
  .ticket-message { padding: .85rem; }
  .msg-header { flex-wrap: wrap; gap: .35rem; }
  .msg-avatar { width: 28px; height: 28px; font-size: .75rem; }

  /* ── User dropdown ── */
  .user-dropdown { position: fixed; top: var(--header-h); left: 0; right: 0;
                   border-radius: 0 0 var(--radius) var(--radius); }
}

/* ── Tablet landscape ── */
@media (min-width: 481px) and (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .gestion-grid { grid-template-columns: repeat(3,1fr); }
}

/* ── Portfolio Cards ──────────────────────────────────────── */
.portfolio-card {
  display:flex; flex-direction:column; border-radius:var(--radius);
  overflow:hidden; background:var(--card-bg); border:1px solid var(--border);
  text-decoration:none; color:inherit; transition:box-shadow .2s,transform .2s;
}
.portfolio-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.portfolio-thumb {
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg);
}
.portfolio-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.portfolio-thumb-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,var(--bg) 0%,var(--border) 100%);
}
.portfolio-tag {
  position:absolute; top:.5rem; right:.5rem;
  background:rgba(0,0,0,.65); color:#fff;
  font-size:.72rem; font-weight:600; padding:.2rem .55rem;
  border-radius:20px; backdrop-filter:blur(4px);
}
.portfolio-info { padding:1rem; flex:1; }
.portfolio-title { font-size:.95rem; font-weight:700; margin:0 0 .35rem; color:var(--primary-dark); }
.portfolio-meta { display:flex; gap:.5rem; flex-wrap:wrap; font-size:.75rem; color:var(--text-muted); margin-bottom:.4rem; }
.portfolio-excerpt { font-size:.82rem; color:var(--text-muted); line-height:1.5; margin:0; }

/* ── WC Error Banner ─────────────────────────────────────── */
.wc-error-banner {
  display: flex; align-items: flex-start; gap: 1rem;
  background: #FEF2F2; border: 1px solid #FECACA;
  border-radius: var(--radius); padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.wc-error-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.wc-error-body strong { display: block; font-size: .95rem; color: #991B1B; margin-bottom: .35rem; }
.wc-error-body p { font-size: .875rem; color: #7F1D1D; margin: 0; }

/* ── Input password wrapper ───────────────────────────────── */
.input-pw-wrap { position:relative; display:flex; }
.input-pw-wrap .form-control { flex:1; padding-right:2.5rem; }
.pw-toggle {
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--text-muted);
  display:flex; align-items:center; padding:.25rem;
}
.pw-toggle svg { width:18px; height:18px; }

/* ── Filter chips ─────────────────────────────────────────── */
.filter-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .85rem; border-radius:20px;
  border:1.5px solid var(--border); font-size:.82rem; font-weight:500;
  color:var(--text-muted); text-decoration:none; transition:all .15s;
}
.filter-chip:hover { border-color:var(--primary); color:var(--primary); }
.filter-chip.active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ── stat-icon-orange ─────────────────────────────────────── */
.stat-icon-orange { background: rgba(249,115,22,.12); color:#EA580C; }

/* ── form-control-sm ──────────────────────────────────────── */
.form-control-sm { padding:.3rem .6rem; font-size:.82rem; }
.btn-sm { padding:.35rem .75rem; font-size:.82rem; }
.btn-danger-outline { border:1.5px solid #EF4444; color:#EF4444; background:transparent; }
.btn-danger-outline:hover { background:#EF4444; color:#fff; }
.btn-success { background:#16A34A; border-color:#16A34A; color:#fff; }
.btn-success:hover { background:#15803D; }

/* ── gestion-card as link ─────────────────────────────────── */
a.gestion-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* ── admin-sidebar-sep ────────────────────────────────────── */
.admin-sidebar-sep { height:1px; background:var(--border); margin:.5rem 0; }

/* ══════════════════════════════════════════════════════════
   MODAL SYSTEM
══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem; animation:fadeIn .15s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-box {
  background:#fff; border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.2);
  width:100%; max-width:480px; max-height:90vh;
  overflow-y:auto; display:flex; flex-direction:column;
  animation:slideUp .2s ease;
}
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-lg { max-width:720px; }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:#fff; z-index:2; border-radius:16px 16px 0 0;
}
.modal-header h2 { font-size:1.15rem; font-weight:700; margin:0; }
.modal-close {
  width:32px; height:32px; border-radius:50%; border:none;
  background:var(--bg); color:var(--text-muted); cursor:pointer;
  font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.modal-close:hover { background:var(--border); color:var(--text); }
.modal-body { padding:1.5rem; flex:1; }
.modal-footer {
  display:flex; gap:.75rem; justify-content:flex-end;
  padding:1.25rem 1.5rem; border-top:1px solid var(--border);
  background:#fafafa; border-radius:0 0 16px 16px;
}

/* Form layout helpers */
.form-row-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
@media (max-width:540px) { .form-row-2 { grid-template-columns:1fr; } }
.required { color:var(--primary); font-weight:700; }
.form-hint { font-size:.75rem; color:var(--text-muted); margin-top:.25rem; display:block; }
.text-muted { color:var(--text-muted); }
.mb-3 { margin-bottom:.75rem; }

/* Button variants for modal */
.btn-ghost {
  background:transparent; border:1.5px solid var(--border);
  color:var(--text-muted); cursor:pointer;
  padding:.45rem 1rem; border-radius:var(--radius);
  font-size:.9rem; font-weight:500; transition:all .15s;
}
.btn-ghost:hover { border-color:var(--text-muted); color:var(--text); }
.btn-spinner { display:none; }

/* ══════════════════════════════════════════════════════════
   DIRECTORIO — REDISEÑO MODERNO
══════════════════════════════════════════════════════════ */
.installer-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.5rem;
}
.installer-card {
  background:#fff; border-radius:16px;
  border:1px solid #e5e7eb;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .2s, transform .2s; color:var(--text);
  text-decoration:none; position:relative;
}
.installer-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--primary), #e53e3e);
  opacity:0; transition:opacity .2s;
}
.installer-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.12); transform:translateY(-3px); }
.installer-card:hover::before { opacity:1; }
.installer-card-header {
  padding:.75rem 1rem .25rem;
  display:flex; justify-content:space-between; align-items:center;
  min-height:2rem;
}
.installer-avatar {
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), #e53e3e);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:700; margin:0 auto .65rem;
  box-shadow:0 4px 12px rgba(203,18,44,.3);
}
.installer-name { font-weight:700; text-align:center; padding:0 1rem; font-size:1rem; color:#111827; }
.installer-location, .installer-specialty {
  font-size:.8rem; color:#6b7280; text-align:center; padding:.15rem 1rem;
}
.installer-card-footer {
  padding:.85rem 1rem 1rem; margin-top:auto;
  display:flex; justify-content:center;
  border-top:1px solid #f3f4f6;
}
.inst-works-badge {
  font-size:.7rem; color:#6b7280; background:#f3f4f6;
  border-radius:20px; padding:.15rem .55rem; font-weight:500;
}

/* ══════════════════════════════════════════════════════════
   PERFIL INSTALADOR — HERO REDISEÑADO
══════════════════════════════════════════════════════════ */
.profile-hero {
  background:#fff; border-radius:16px;
  border:1px solid #e5e7eb; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.profile-hero-cover {
  height:140px;
  background:linear-gradient(135deg, var(--primary) 0%, #8b0a1c 60%, #1a0508 100%);
  position:relative;
}
.profile-hero-body {
  display:flex; align-items:flex-end; gap:1.5rem;
  padding:0 1.75rem 1.75rem; flex-wrap:wrap;
  margin-top:-40px; position:relative;
}
.profile-avatar-lg {
  width:90px; height:90px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), #e53e3e);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; font-weight:700; flex-shrink:0;
  border:4px solid #fff;
  box-shadow:0 4px 16px rgba(203,18,44,.35);
}
.profile-avatar-img { object-fit:cover; }
.profile-info { flex:1; padding-top:1rem; }
.profile-name { font-size:1.5rem; font-weight:800; margin:0 0 .3rem; color:#111827; }
.profile-meta-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.profile-chip {
  background:#f3f4f6; padding:.25rem .75rem; border-radius:20px;
  font-size:.8rem; color:#374151; font-weight:500;
}
.profile-actions { margin-left:auto; padding-top:1rem; display:flex; flex-direction:column; gap:.5rem; }
.profile-section { margin-top:.5rem; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.section-title { font-size:1.15rem; font-weight:700; color:#111827; }
.profile-stats-row {
  display:flex; gap:1px; background:#e5e7eb; border-top:1px solid #e5e7eb;
}
.profile-stat {
  flex:1; background:#fff; padding:.85rem; text-align:center;
}
.profile-stat .stat-num { font-size:1.4rem; font-weight:800; color:var(--primary); line-height:1; }
.profile-stat .stat-lbl { font-size:.72rem; color:#6b7280; margin-top:.2rem; }

/* ══════════════════════════════════════════════════════════
   PORTFOLIO — BADGE INSTALADOR + CONTACTAR
══════════════════════════════════════════════════════════ */
.portfolio-installer-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:600; padding:.2rem .6rem;
  border-radius:20px; border:1px solid currentColor;
}
.portfolio-contact-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .85rem; border-radius:20px;
  background:var(--primary); color:#fff;
  font-size:.75rem; font-weight:600;
  text-decoration:none; transition:background .15s;
  border:none; cursor:pointer;
}
.portfolio-contact-btn:hover { background:#8b0a1c; color:#fff; }

/* ══════════════════════════════════════════════════════════
   LANDING EDITOR EN VIVO (admin)
══════════════════════════════════════════════════════════ */
.lp-edit-trigger {
  position:absolute; top:.75rem; right:.75rem; z-index:10;
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.95); color:#0f172a;
  border:1px solid #e2e8f0; border-radius:8px;
  padding:.35rem .75rem; font-size:.78rem; font-weight:600;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:box-shadow .15s;
}
.lp-edit-trigger:hover { box-shadow:0 4px 16px rgba(0,0,0,.18); }
[data-editable] { outline:none; }
[data-editable]:focus { outline:2px dashed rgba(203,18,44,.5); border-radius:4px; }
[contenteditable="true"] { outline:2px dashed rgba(203,18,44,.5); border-radius:4px; }
.lp-edit-saved-toast {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  background:#16a34a; color:#fff; padding:.6rem 1.25rem;
  border-radius:10px; font-size:.85rem; font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  animation:toastIn .2s ease; pointer-events:none;
}
@keyframes toastIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }