/* ═══════════════════════════════════════════════════════════
   IMPERIAL BUSINESS OS — Estilos Internos
   Sistema de diseño: Negro + Dorado + Azul Eléctrico
   USO INTERNO — noindex, nofollow
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:         #060606;
  --surface:    #0f0f0f;
  --surface2:   #161616;
  --surface3:   #1e1e1e;
  --border:     #242424;
  --border2:    #2e2e2e;
  --gold:       #d4af37;
  --gold-light: #f0cc65;
  --gold-dim:   rgba(212,175,55,.12);
  --blue:       #3b82f6;
  --blue-light: #60a5fa;
  --blue-dim:   rgba(59,130,246,.12);
  --green:      #22c55e;
  --green-dim:  rgba(34,197,94,.12);
  --amber:      #f59e0b;
  --amber-dim:  rgba(245,158,11,.12);
  --red:        #ef4444;
  --red-dim:    rgba(239,68,68,.12);
  --text:       #e8e8e8;
  --text2:      #a0a0a0;
  --text3:      #555;
  --radius:     10px;
  --radius-sm:  6px;
  --shadow:     0 4px 20px rgba(0,0,0,.6);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

/* ── Layout ── */
.page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 28px;
}

/* ── Header ── */
.admin-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left { display: flex; align-items: center; gap: 28px; }

.admin-logo {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.admin-logo:hover { color: var(--gold-light); }
.admin-logo-icon { font-size: 16px; }
.admin-logo-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text3);
  background: var(--surface2);
  border: 1px solid var(--border2);
  padding: 1px 5px;
  border-radius: 3px;
}

.admin-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  color: var(--text2);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all .15s;
  font-weight: 500;
}
.nav-link:hover        { color: var(--text); background: var(--surface2); }
.nav-link.active       { color: var(--gold); background: var(--gold-dim); }
.nav-sep { width: 1px; height: 20px; background: var(--border2); margin: 0 4px; }

.header-right { display: flex; align-items: center; gap: 12px; }

.env-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid rgba(245,158,11,.25);
  padding: 3px 8px;
  border-radius: 4px;
}

.btn-logout {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
}
.btn-logout:hover { border-color: var(--red); color: var(--red); }

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}
.page-title { font-size: 22px; font-weight: 700; color: var(--text); }
.page-subtitle { font-size: 13px; color: var(--text2); margin-top: 4px; }

/* ── Stat grid ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  transition: border-color .2s, transform .15s;
  cursor: default;
}
.stat-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.stat-card.gold  { border-color: rgba(212,175,55,.3); }

.stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-card.blue .stat-value  { color: var(--blue-light); }
.stat-card.green .stat-value { color: var(--green); }
.stat-card.red .stat-value   { color: var(--red); }
.stat-card.amber .stat-value { color: var(--amber); }

.stat-label {
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

/* ── Cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Section grid ── */
.section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .section-grid { grid-template-columns: 1fr; } }

/* ── Alerts ── */
.alert-list { display: flex; flex-direction: column; gap: 8px; }

.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.alert-warning { background: var(--amber-dim); border: 1px solid rgba(245,158,11,.25); }
.alert-error   { background: var(--red-dim);   border: 1px solid rgba(239,68,68,.25); }
.alert-info    { background: var(--blue-dim);  border: 1px solid rgba(59,130,246,.25); }

.alert-icon { font-size: 15px; flex-shrink: 0; }
.alert-body { flex: 1; }
.alert-product { font-weight: 600; color: var(--text); }
.alert-msg     { color: var(--text2); font-size: 12px; margin-top: 1px; }
.alert-link    { margin-left: auto; font-size: 11px; color: var(--gold); white-space: nowrap; padding: 3px 8px; border: 1px solid var(--gold-dim); border-radius: 4px; }
.alert-link:hover { background: var(--gold-dim); }

/* ── Table ── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead { background: var(--surface2); }

.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text); }

.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface2); }

.data-table tr.clickable { cursor: pointer; }

.col-id    { font-family: monospace; font-size: 11px; color: var(--text3); }
.col-sku   { font-family: monospace; font-size: 11px; color: var(--text3); }
.col-name  { font-weight: 600; min-width: 180px; }
.col-price { font-family: monospace; white-space: nowrap; }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-activo     { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.badge-borrador   { background: rgba(80,80,80,.15); color: #888; border: 1px solid rgba(80,80,80,.2); }
.badge-incompleto { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.2); }
.badge-cotizacion { background: var(--blue-dim); color: var(--blue-light); border: 1px solid rgba(59,130,246,.2); }
.badge-proximo    { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,158,11,.2); }
.badge-oculto     { background: rgba(80,80,80,.1); color: #666; border: 1px solid rgba(80,80,80,.15); }

.badge-ready     { background: var(--green-dim); color: var(--green); }
.badge-not-ready { background: var(--red-dim); color: var(--red); }
.badge-pending   { background: var(--amber-dim); color: var(--amber); }

.badge-basico      { background: var(--green-dim); color: var(--green); }
.badge-intermedio  { background: var(--blue-dim); color: var(--blue-light); }
.badge-avanzado    { background: var(--amber-dim); color: var(--amber); }
.badge-premium     { background: var(--gold-dim); color: var(--gold); }

/* ── Prep bar ── */
.prep-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.prep-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  min-width: 30px;
  text-align: right;
}
.prep-bar-track {
  flex: 1;
  height: 5px;
  background: var(--border2);
  border-radius: 3px;
  overflow: hidden;
}
.prep-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.prep-bar-fill.high   { background: var(--green); }
.prep-bar-fill.medium { background: var(--amber); }
.prep-bar-fill.low    { background: var(--red); }

/* ── Prep score detail ── */
.prep-score-big {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}
.prep-score-big.high   { color: var(--green); }
.prep-score-big.medium { color: var(--amber); }
.prep-score-big.low    { color: var(--red); }

.prep-verdict {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 16px;
}
.prep-verdict.ready     { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.3); }
.prep-verdict.not-ready { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.3); }

.criterio-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.criterio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
}
.criterio-row.ok  { }
.criterio-row.nok { opacity: .65; }

.criterio-icon { font-size: 14px; flex-shrink: 0; }
.criterio-label { flex: 1; color: var(--text); }
.criterio-peso {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  min-width: 24px;
  text-align: right;
}
.criterio-row.ok .criterio-peso { color: var(--green); }

/* ── Product detail ── */
.product-hero {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}
.product-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border2);
}
.product-hero-body { flex: 1; }
.product-sku { font-size: 11px; font-family: monospace; color: var(--text3); margin-bottom: 4px; }
.product-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.product-subtitle { font-size: 14px; color: var(--text2); margin-bottom: 12px; }
.product-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--gold);
  margin-top: 12px;
}
.product-price.quote { font-size: 18px; color: var(--blue-light); }

/* ── Tabs ── */
.tab-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Field grid ── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-bottom: 16px;
}
@media (max-width: 700px) { .field-grid { grid-template-columns: 1fr; } }

.field-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
}
.field-value {
  font-size: 13px;
  color: var(--text);
}
.field-value.empty { color: var(--text3); font-style: italic; }
.field-value.mono  { font-family: monospace; }

/* ── Lists ── */
.item-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.item-list li {
  font-size: 13px;
  color: var(--text);
  padding: 7px 10px 7px 28px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  position: relative;
}
.item-list li::before {
  content: '—';
  position: absolute;
  left: 10px;
  color: var(--gold);
  font-weight: 700;
}
.item-list.check li::before { content: '✓'; color: var(--green); }
.item-list.cross li::before { content: '✕'; color: var(--red); }
.item-list.steps li { counter-increment: step; }
.item-list.steps { counter-reset: step; }
.item-list.steps li::before { content: counter(step); color: var(--blue-light); }

.item-list li.done   { opacity: .5; text-decoration: line-through; }
.item-list li.empty-note {
  color: var(--text3);
  font-style: italic;
  background: transparent;
  border: 1px dashed var(--border2);
}
.item-list li.empty-note::before { content: '–'; color: var(--text3); }

/* ── Checklist item ── */
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  margin-bottom: 5px;
  font-size: 13px;
  cursor: default;
}
.checklist-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border2);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checklist-box.checked {
  background: var(--green);
  border-color: var(--green);
  color: #000;
  font-size: 10px;
  font-weight: 900;
}

/* ── Process steps ── */
.process-steps {
  font-size: 13px;
  color: var(--text);
  white-space: pre-line;
  line-height: 1.7;
  padding: 12px 16px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text3);
}
.empty-icon { font-size: 36px; margin-bottom: 12px; opacity: .4; }
.empty-text { font-size: 14px; }

/* ── Search / Filter bar ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-input {
  flex: 1;
  min-width: 200px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s;
}
.filter-input::placeholder { color: var(--text3); }
.filter-input:focus { border-color: var(--gold); }

.filter-select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}
.filter-select:focus { border-color: var(--gold); }
.filter-select option { background: var(--surface); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  border: none;
  text-decoration: none;
}
.btn-gold {
  background: var(--gold);
  color: #000;
}
.btn-gold:hover { background: var(--gold-light); color: #000; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ── Warning box ── */
.warning-box {
  background: var(--amber-dim);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.warning-box-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.warning-box-text { font-size: 13px; color: var(--amber); line-height: 1.6; }
.warning-box-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }

/* ── Login page ── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 44px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
}
.login-logo {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo-icon { font-size: 36px; }
.login-logo-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 8px;
}
.login-logo-sub {
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}
.login-form-group { margin-bottom: 16px; }
.login-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text2);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.login-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s;
}
.login-input:focus { border-color: var(--gold); }
.login-input::placeholder { color: var(--text3); }

.login-btn {
  width: 100%;
  padding: 11px;
  background: var(--gold);
  color: #000;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s;
  margin-top: 8px;
}
.login-btn:hover { background: var(--gold-light); }
.login-btn:disabled { opacity: .5; cursor: not-allowed; }

.login-error {
  background: var(--red-dim);
  border: 1px solid rgba(239,68,68,.3);
  color: var(--red);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-top: 10px;
  display: none;
}

.login-notice {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  margin-top: 20px;
  line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .main-content { padding: 20px 16px; }
  .admin-header { padding: 0 16px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .data-table th, .data-table td { padding: 8px 10px; }
  .page-header { flex-direction: column; }
}

@media (max-width: 480px) {
  .admin-nav { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Loader ── */
.loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text3);
  font-size: 14px;
  gap: 12px;
}
.loader-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ═══════════════════════════════════════════════════════════
   IMPERIAL BUSINESS OS — Layout con Sidebar
   ═══════════════════════════════════════════════════════════ */

/* ── OS Layout base ── */
.os-layout { display: flex; min-height: 100vh; }

.os-sidebar {
  width: 212px;
  min-width: 212px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
}

.os-main {
  flex: 1;
  margin-left: 212px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* ── Sidebar brand ── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 13px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-crown { font-size: 22px; color: var(--gold); line-height: 1; }
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.sidebar-brand-name { font-size: 11.5px; font-weight: 800; color: var(--gold); letter-spacing: .5px; }
.sidebar-brand-sub  { font-size: 9px; font-weight: 700; color: var(--text3); letter-spacing: 3px; text-transform: uppercase; margin-top: 1px; }

/* ── Sidebar nav ── */
.sidebar-nav { padding: 8px 7px; flex: 1; overflow-y: auto; }
.sidebar-section {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--text3); text-transform: uppercase;
  padding: 10px 6px 4px; margin-top: 4px;
}
.sidebar-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  color: var(--text2); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: all .13s;
  position: relative; margin-bottom: 1px;
}
.sidebar-link:hover            { color: var(--text); background: var(--surface2); }
.sidebar-link.active           { color: var(--gold); background: var(--gold-dim); font-weight: 600; }
.sidebar-link.active::before   { content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--gold); border-radius:2px; }
.sidebar-link.coming-soon      { opacity: .45; pointer-events: none; }
.sidebar-link-icon             { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-link-label            { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-badge {
  font-size: 9px; font-weight: 700; background: var(--red); color: #fff;
  border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center;
}
.sidebar-badge-beta {
  font-size: 8px; font-weight: 700; background: var(--blue-dim);
  color: var(--blue-light); border: 1px solid rgba(59,130,246,.3);
  border-radius: 3px; padding: 1px 4px;
}

/* ── Sidebar footer ── */
.sidebar-footer {
  padding: 12px 14px; border-top: 1px solid var(--border);
  text-align: center; flex-shrink: 0;
}
.sidebar-footer-crown { font-size: 18px; color: var(--gold); }
.sidebar-footer-name  { font-size: 9px; font-weight: 800; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }
.sidebar-footer-tag   { font-size: 8.5px; color: var(--text3); margin-top: 2px; line-height: 1.5; }

/* ── OS Topbar ── */
.os-topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  height: 56px; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100; flex-shrink: 0;
}
.topbar-left { display: flex; flex-direction: column; }
.topbar-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.topbar-title-crown { color: var(--gold); font-size: 13px; }
.topbar-subtitle    { font-size: 10px; color: var(--text3); margin-left: 20px; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.sandbox-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  background: var(--amber-dim); color: var(--amber);
  border: 1px solid rgba(245,158,11,.25); padding: 4px 10px; border-radius: 5px;
}

.topbar-notif {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; transition: border-color .15s; flex-shrink: 0;
}
.topbar-notif:hover { border-color: var(--gold); }
.topbar-notif-count {
  position: absolute; top: -3px; right: -3px;
  background: var(--red); color: #fff; font-size: 9px; font-weight: 800;
  border-radius: 10px; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 1.5px solid var(--bg);
}

.user-chip { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.user-avatar-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #7c5c00);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #000; flex-shrink: 0;
  border: 1.5px solid var(--gold);
}
.user-chip-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.user-chip-role { font-size: 10px; color: var(--text3); }

/* ── OS Content area ── */
.os-content { flex: 1; padding: 24px 22px; }

/* ── Welcome banner ── */
.welcome-banner {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(212,175,55,.2);
  display: grid;
  grid-template-columns: 1fr 310px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #080810 0%, #0c1520 50%, #080f00 100%);
  position: relative;
}
.welcome-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(212,175,55,.06) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 20%, rgba(59,130,246,.05) 0%, transparent 50%);
  pointer-events: none;
}
.welcome-left {
  padding: 26px 26px;
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
}
.welcome-greeting { font-size: 13px; color: var(--text2); margin-bottom: 3px; }
.welcome-name {
  font-size: 26px; font-weight: 900; color: var(--gold);
  margin-bottom: 10px; line-height: 1.1;
}
.welcome-desc { font-size: 12.5px; color: var(--text2); line-height: 1.6; max-width: 360px; }

.welcome-right {
  background: rgba(0,0,0,.2);
  border-left: 1px solid rgba(212,175,55,.1);
  padding: 18px 16px;
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
}
.welcome-right-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text2); margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.metrics-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 6px;
}
.metric-cell { text-align: center; }
.metric-val  { font-size: 20px; font-weight: 900; line-height: 1; }
.metric-val.gold  { color: var(--gold); }
.metric-val.green { color: var(--green); }
.metric-val.red   { color: var(--red); }
.metric-val.blue  { color: var(--blue-light); }
.metric-val.amber { color: var(--amber); }
.metric-val.gray  { color: var(--text2); }
.metric-label { font-size: 9.5px; color: var(--text3); margin-top: 2px; line-height: 1.3; }
.metric-sub   { font-size: 8.5px; color: var(--text3); }

/* ── Alerts bar ── */
.alerts-bar {
  background: rgba(245,158,11,.05);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: var(--radius);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.alerts-bar-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--amber); white-space: nowrap;
}
.alert-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 20px; padding: 4px 11px; font-size: 11.5px; color: var(--text2);
  white-space: nowrap;
}
.alert-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.alert-dot.red   { background: var(--red); }
.alert-dot.amber { background: var(--amber); }
.alert-dot.blue  { background: var(--blue); }
.alerts-bar-link { margin-left: auto; font-size: 11px; color: var(--gold); white-space: nowrap; }

/* ── Content columns ── */
.content-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 1100px) { .content-cols { grid-template-columns: 1fr; } }

/* ── Card header row ── */
.card-header-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.card-see-all { font-size: 11px; color: var(--gold); text-decoration: none; }
.card-see-all:hover { color: var(--gold-light); }

/* ── Task items ── */
.task-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface2); margin-bottom: 5px;
  font-size: 12.5px; cursor: default; transition: background .12s;
}
.task-item:hover { background: var(--surface3); }
.task-check {
  width: 15px; height: 15px; border-radius: 3px;
  border: 1.5px solid var(--border2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.task-text { flex: 1; color: var(--text); font-size: 12.5px; }
.task-priority {
  font-size: 9.5px; font-weight: 700; padding: 2px 6px;
  border-radius: 3px; white-space: nowrap;
}
.task-priority.high   { color: var(--red);   background: var(--red-dim); }
.task-priority.medium { color: var(--amber); background: var(--amber-dim); }
.task-priority.low    { color: var(--green); background: var(--green-dim); }
.task-date { font-size: 10px; color: var(--text3); white-space: nowrap; }

/* ── Finance summary ── */
.finance-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.finance-cell {
  background: var(--surface2); border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.finance-val   { font-size: 18px; font-weight: 800; color: var(--text); }
.finance-val.green { color: var(--green); }
.finance-val.gold  { color: var(--gold); }
.finance-val.red   { color: var(--red); }
.finance-label { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* Mini bar chart */
.mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-top: 8px; }
.mini-bar  { flex: 1; background: var(--blue-dim); border-radius: 2px; min-height: 3px; border: 1px solid rgba(59,130,246,.2); }
.mini-bar-labels {
  display: flex; gap: 3px; margin-top: 4px;
}
.mini-bar-label { flex: 1; font-size: 8.5px; color: var(--text3); text-align: center; }

/* ── Quick access ── */
.quick-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
@media (max-width: 900px) { .quick-grid { grid-template-columns: repeat(3, 1fr); } }

.quick-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; color: var(--text2);
  font-size: 10.5px; font-weight: 600; transition: all .14s; text-align: center;
}
.quick-item:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.quick-icon { font-size: 18px; line-height: 1; }

/* ── Oz Widget ── */
.oz-widget {
  position: fixed; bottom: 22px; right: 22px;
  z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

.oz-toggle {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #150f00, #352500);
  border: 2px solid var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 22px rgba(212,175,55,.35), 0 4px 16px rgba(0,0,0,.7);
  transition: all .2s; position: relative; flex-shrink: 0;
}
.oz-toggle:hover {
  box-shadow: 0 0 34px rgba(212,175,55,.55), 0 4px 16px rgba(0,0,0,.7);
  transform: scale(1.06);
}
.oz-toggle-icon { font-size: 24px; line-height: 1; }
.oz-toggle-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--red); color: #fff; font-size: 9px; font-weight: 800;
  border-radius: 10px; min-width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--bg);
}

.oz-panel {
  background: var(--surface);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 14px; width: 294px;
  box-shadow: 0 10px 44px rgba(0,0,0,.75), 0 0 28px rgba(212,175,55,.08);
  overflow: hidden; display: none;
  animation: ozSlideIn .18s ease-out;
}
.oz-panel.open { display: block; }

@keyframes ozSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.oz-panel-header {
  background: linear-gradient(135deg, #0e0900, #1c1400);
  border-bottom: 1px solid rgba(212,175,55,.18);
  padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
}
.oz-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a2800 0%, #150f00 100%);
  border: 2px solid var(--gold); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; box-shadow: 0 0 14px rgba(212,175,55,.3);
}
.oz-header-info { flex: 1; }
.oz-name   { font-size: 13px; font-weight: 700; color: var(--gold); }
.oz-status { font-size: 10px; color: var(--green); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.oz-status-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: ozPulse 2s infinite; }
@keyframes ozPulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.oz-close-btn {
  background: transparent; border: none; color: var(--text3);
  cursor: pointer; font-size: 16px; padding: 2px; transition: color .14s; line-height: 1;
}
.oz-close-btn:hover { color: var(--text); }

.oz-panel-body { padding: 14px; }

.oz-bubble {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 10px; border-top-right-radius: 2px;
  padding: 11px 13px; font-size: 12.5px; color: var(--text);
  line-height: 1.65; margin-bottom: 12px;
}
.oz-bubble strong { color: var(--gold); }

.oz-actions { display: flex; flex-direction: column; gap: 7px; }

.oz-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .14s; border: none; text-decoration: none; width: 100%;
}
.oz-btn-primary  { background: var(--gold); color: #000; }
.oz-btn-primary:hover { background: var(--gold-light); color: #000; }
.oz-btn-secondary { background: var(--surface2); border: 1px solid var(--border2); color: var(--text2); }
.oz-btn-secondary:hover { border-color: var(--gold); color: var(--gold); }

/* ── Finanzas ── */
.fin-stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px;
}
.fin-stat {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.fin-stat-val   { font-size: 22px; font-weight: 800; line-height: 1; }
.fin-stat-label { font-size: 10px; color: var(--text3); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }
.fin-stat-sub   { font-size: 11px; color: var(--text3); margin-top: 6px; }

/* ── Oz page ── */
.oz-page-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 1000px) { .oz-page-grid { grid-template-columns: 1fr; } }

.priority-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; background: var(--surface2);
  border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 13px;
}
.priority-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-dim); border: 1px solid rgba(212,175,55,.3);
  color: var(--gold); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.priority-text { flex: 1; color: var(--text); line-height: 1.5; }
.priority-action { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ── Coming soon module ── */
.coming-soon-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 400px; text-align: center; padding: 40px;
}
.coming-soon-icon  { font-size: 48px; margin-bottom: 16px; opacity: .5; }
.coming-soon-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.coming-soon-desc  { font-size: 13px; color: var(--text2); max-width: 360px; line-height: 1.6; }

/* ── Responsive adjustments ── */
@media (max-width: 900px) {
  .os-sidebar  { transform: translateX(-100%); transition: transform .2s; }
  .os-sidebar.open { transform: translateX(0); }
  .os-main     { margin-left: 0; }
  .welcome-banner { grid-template-columns: 1fr; }
  .welcome-right  { display: none; }
  .quick-grid  { grid-template-columns: repeat(3,1fr); }
  .fin-stat-grid  { grid-template-columns: 1fr 1fr; }
}

/* ── OZ shared component (include in every page) ── */
/* All pages use .oz-widget — styles defined above */

/* ═══════════════════════════════════════════════════════════
   IMPERIAL BUSINESS OZ — Avatar & Fallback Visual
   ═══════════════════════════════════════════════════════════ */

/* ── Variables de color para el avatar ── */
:root {
  --oz-glow-gold:  rgba(212,175,55,.55);
  --oz-glow-blue:  rgba(59,130,246,.6);
  --oz-glow-green: rgba(34,197,94,.5);
  --oz-glow-amber: rgba(245,158,11,.55);
  --oz-glow-red:   rgba(239,68,68,.5);
}

/* ── Contenedor del visual de Oz (canvas Rive o imagen fallback) ── */
.oz-visual-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Elemento unificado — puede ser <canvas>, <img> o <div> */
#oz-visual, .oz-visual {
  display: block;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  transition: filter .4s ease, transform .3s ease;
}

/* ── Canvas Rive (oculto hasta que exista el .riv) ── */
.oz-rive-canvas {
  display: none; /* activar con JS cuando el .riv cargue */
  border-radius: 50%;
}

/* ── Fallback — imagen de avatar con animación CSS ── */
.oz-fallback-img {
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  display: block;
}

/* ── Aura pulsante alrededor del avatar ── */
.oz-aura {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: transparent;
  border: 2px solid var(--gold);
  box-shadow: 0 0 12px var(--oz-glow-gold), inset 0 0 12px var(--oz-glow-gold);
  animation: ozAuraPulse 3s ease-in-out infinite;
}

@keyframes ozAuraPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.04); }
}

/* ── Animación de respiración (idle) ── */
@keyframes ozBreathe {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%       { transform: translateY(-4px) scale(1.01); }
}

/* ── Estados del personaje (controlados por OzController) ── */

/* IDLE — respiración suave, prefers-reduced-motion la desactiva */
#oz-visual.oz-state-idle,
.oz-visual.oz-state-idle {
  animation: ozBreathe 4s ease-in-out infinite;
}
#oz-visual.oz-state-idle ~ .oz-aura,
.oz-visual.oz-state-idle ~ .oz-aura {
  box-shadow: 0 0 12px var(--oz-glow-gold), inset 0 0 12px var(--oz-glow-gold);
  animation: ozAuraPulse 3s ease-in-out infinite;
}

/* WELCOME — brillo más intenso */
#oz-visual.oz-state-welcome,
.oz-visual.oz-state-welcome {
  animation: ozBreathe 2s ease-in-out infinite;
  filter: brightness(1.15) drop-shadow(0 0 18px var(--oz-glow-gold));
}

/* LISTENING — pulso azul */
#oz-visual.oz-state-listening,
.oz-visual.oz-state-listening {
  filter: brightness(1.05) drop-shadow(0 0 14px var(--oz-glow-blue));
  animation: ozBreathe 2.5s ease-in-out infinite;
}
.oz-state-listening ~ .oz-aura {
  border-color: var(--blue);
  box-shadow: 0 0 20px var(--oz-glow-blue), inset 0 0 20px var(--oz-glow-blue);
}

/* THINKING — parpadeo rápido */
@keyframes ozThink {
  0%, 100% { opacity: 1;   transform: scale(1); }
  30%       { opacity: .85; transform: scale(.99); }
  60%       { opacity: 1;   transform: scale(1.01); }
}
#oz-visual.oz-state-thinking,
.oz-visual.oz-state-thinking {
  animation: ozThink 1.6s ease-in-out infinite;
  filter: brightness(1.1) drop-shadow(0 0 16px var(--oz-glow-blue));
}

/* ANALYZING — rotación del aura */
@keyframes ozAuraRotate {
  0%   { transform: rotate(0deg)   scale(1); }
  100% { transform: rotate(360deg) scale(1.06); }
}
#oz-visual.oz-state-analyzing ~ .oz-aura,
.oz-visual.oz-state-analyzing ~ .oz-aura {
  animation: ozAuraRotate 2.5s linear infinite;
  border-color: var(--blue);
  border-style: dashed;
  box-shadow: 0 0 24px var(--oz-glow-blue);
}

/* SPEAKING — pulso moderado */
@keyframes ozSpeak {
  0%, 100% { transform: scale(1);    }
  25%       { transform: scale(1.02); }
  75%       { transform: scale(.99); }
}
#oz-visual.oz-state-speaking,
.oz-visual.oz-state-speaking {
  animation: ozSpeak 1.2s ease-in-out infinite;
}

/* SUCCESS — brillo verde */
#oz-visual.oz-state-success,
.oz-visual.oz-state-success {
  filter: brightness(1.2) drop-shadow(0 0 20px var(--oz-glow-green));
  animation: ozBreathe 1.5s ease-in-out 2;
}
.oz-state-success ~ .oz-aura {
  border-color: var(--green);
  box-shadow: 0 0 24px var(--oz-glow-green), inset 0 0 24px var(--oz-glow-green);
}

/* WARNING — pulso ámbar */
@keyframes ozWarn {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 10px var(--oz-glow-amber)); }
  50%       { filter: brightness(1.15) drop-shadow(0 0 22px var(--oz-glow-amber)); }
}
#oz-visual.oz-state-warning,
.oz-visual.oz-state-warning {
  animation: ozWarn 1.8s ease-in-out infinite;
}
.oz-state-warning ~ .oz-aura {
  border-color: var(--amber);
  box-shadow: 0 0 18px var(--oz-glow-amber);
}

/* CRITICAL — pulso rojo controlado (no villano) */
#oz-visual.oz-state-critical,
.oz-visual.oz-state-critical {
  filter: brightness(1.05) drop-shadow(0 0 16px var(--oz-glow-red));
  animation: ozWarn 1.2s ease-in-out infinite;
}
.oz-state-critical ~ .oz-aura {
  border-color: var(--red);
  box-shadow: 0 0 20px var(--oz-glow-red);
}

/* OFFLINE — apagado */
#oz-visual.oz-state-offline,
.oz-visual.oz-state-offline {
  filter: grayscale(.7) brightness(.7);
  animation: none;
}
.oz-state-offline ~ .oz-aura {
  opacity: .25;
  animation: none;
}

/* SLEEP — mínimo */
#oz-visual.oz-state-sleep,
.oz-visual.oz-state-sleep {
  filter: brightness(.6) saturate(.3);
  animation: ozBreathe 6s ease-in-out infinite;
}

/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #oz-visual, .oz-visual, .oz-aura {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Oz en el banner del dashboard (busto/medio cuerpo) ── */
.oz-banner-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.oz-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius);
  display: block;
}

.oz-banner-glow {
  position: absolute;
  inset: -4px;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 100%, rgba(59,130,246,.25) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Oz page — avatar principal (grande) ── */
.oz-page-avatar {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
}
.oz-page-avatar .oz-fallback-img {
  width: 200px;
  height: 200px;
}
.oz-page-avatar .oz-aura { inset: -8px; }

/* ── Oz page — avatar chat (pequeño) ── */
.oz-chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
}

/* ── Chat panel ── */
.oz-chat-wrap {
  display: flex;
  flex-direction: column;
  height: 420px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.oz-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oz-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 88%;
}
.oz-msg.user-msg  { flex-direction: row-reverse; align-self: flex-end; }
.oz-msg.oz-msg-oz { align-self: flex-start; }

.oz-msg-bubble {
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.65;
}
.oz-msg.user-msg .oz-msg-bubble {
  background: var(--gold-dim);
  border: 1px solid rgba(212,175,55,.25);
  color: var(--text);
  border-top-right-radius: 2px;
}
.oz-msg.oz-msg-oz .oz-msg-bubble {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text);
  border-top-left-radius: 2px;
}

.oz-msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.oz-msg-action-btn {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 4px;
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--gold); text-decoration: none; cursor: pointer;
  transition: border-color .13s;
}
.oz-msg-action-btn:hover { border-color: var(--gold); }

.oz-msg-mode {
  font-size: 9.5px; color: var(--text3); margin-top: 3px;
  display: flex; align-items: center; gap: 4px;
}

.oz-chat-typing {
  display: flex; gap: 5px; align-items: center; padding: 4px 0;
}
.oz-typing-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text3); animation: ozDotBounce .8s ease infinite;
}
.oz-typing-dot:nth-child(2) { animation-delay: .15s; }
.oz-typing-dot:nth-child(3) { animation-delay: .30s; }
@keyframes ozDotBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}

.oz-chat-input-row {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--border); background: var(--surface);
}
.oz-chat-input {
  flex: 1; background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 8px 12px;
  color: var(--text); font-size: 13px; outline: none;
  transition: border-color .14s;
}
.oz-chat-input:focus { border-color: var(--gold); }
.oz-chat-send {
  background: var(--gold); color: #000; border: none;
  border-radius: var(--radius-sm); padding: 8px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .14s;
}
.oz-chat-send:hover    { background: var(--gold-light); }
.oz-chat-send:disabled { opacity: .5; cursor: not-allowed; }

/* ── Suggested questions ── */
.oz-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.oz-suggestion-btn {
  font-size: 11px; padding: 5px 11px; border-radius: 14px;
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text2); cursor: pointer; transition: all .13s;
}
.oz-suggestion-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── Status indicator ── */
.oz-status-indicator {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text2);
}
.oz-status-dot-animated {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); animation: ozPulse 2s infinite;
}
.oz-status-offline .oz-status-dot-animated { background: var(--text3); animation: none; }
.oz-status-rules .oz-status-dot-animated   { background: var(--amber); }
.oz-status-ai .oz-status-dot-animated      { background: var(--green); }

/* ════════════════════════════════════════════════════════════════
   FASE B — INTEGRACIÓN VISUAL OFICIAL DE IMPERIAL BUSINESS OZ
   ════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   HERO DASHBOARD — Composición fusionada (Fase C)
   Oz como capa absoluta, sin recorte, sin bloques pegados.
   ══════════════════════════════════════════════════════════════ */

.oz-hero-banner {
  position: relative;
  height: 288px;
  overflow: hidden;
  background: linear-gradient(145deg, #06060f 0%, #090e1a 55%, #060a06 100%);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: var(--radius);
  margin-bottom: 18px;
}

/* Gradiente izquierdo — protege legibilidad del texto */
.oz-hero-banner::before {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(6,6,15,1)    0%,
      rgba(6,6,15,0.97) 22%,
      rgba(6,6,15,0.8)  40%,
      rgba(6,6,15,0.3)  58%,
      transparent       70%
    ),
    radial-gradient(ellipse at 18% 65%, rgba(212,175,55,.09) 0%, transparent 48%),
    radial-gradient(ellipse at 60% 15%, rgba(59,130,246,.07) 0%, transparent 45%);
}

/* Gradiente derecho — velo suave que deja sangrar la energía de Oz */
.oz-hero-banner::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(270deg,
    rgba(6,6,15,0.82) 0%,
    rgba(6,6,15,0.68) 12%,
    rgba(6,6,15,0.38) 26%,
    transparent       40%
  );
}

/* ── Texto — capa z-index:3, alineado a la izquierda ── */
.oz-hero-text {
  position: relative; z-index: 3;
  padding: 30px 30px;
  max-width: 420px;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.oz-hero-greeting { font-size: 12.5px; color: var(--text2); margin-bottom: 3px; }
.oz-hero-name {
  font-size: 24px; font-weight: 900; color: var(--gold);
  margin-bottom: 8px; line-height: 1.15;
}
.oz-hero-desc { font-size: 12px; color: var(--text2); line-height: 1.65; max-width: 340px; }

/* ── Oz — capa absoluta, sin recorte, mantiene proporciones ── */
.oz-hero-bust {
  position: absolute;
  /* centrar horizontalmente entre texto y métricas */
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  height: 108%;      /* ligeramente más alto → emerge del borde inferior */
  z-index: 1;        /* bajo los gradientes pero sobre el fondo */
  pointer-events: none;
  display: flex; align-items: flex-end;
}
.oz-hero-bust-img {
  height: 100%;
  width: auto;           /* proporciones intactas — sin distorsión */
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  /* fade suave inferior para fusionarse con el fondo */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 45%,
    rgba(0,0,0,.88) 72%,
    rgba(0,0,0,.45) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 45%,
    rgba(0,0,0,.88) 72%,
    rgba(0,0,0,.45) 88%,
    transparent 100%
  );
}
.oz-hero-bust-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(59,130,246,.24) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 25%, rgba(212,175,55,.18) 0%, transparent 50%);
}

/* ── Métricas — glassmorphism imperial fusionado con Oz ── */
.oz-hero-metrics {
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 216px;
  /* opaco arriba-izq (legibilidad), translúcido abajo-der (se funde con Oz) */
  background: linear-gradient(
    135deg,
    rgba(5,7,14,0.92) 0%,
    rgba(8,10,20,0.76) 48%,
    rgba(10,14,26,0.56) 100%
  );
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  /* borde derecho dorado, borde izquierdo azul eléctrico (hacia Oz) */
  border-top:    1px solid rgba(212,175,55,.22);
  border-right:  1px solid rgba(212,175,55,.18);
  border-bottom: 1px solid rgba(212,175,55,.12);
  border-left:   1px solid rgba(59,130,246,.28);
  border-radius: var(--radius-sm);
  padding: 13px 12px 11px;
  box-shadow:
    0 10px 36px rgba(0,0,0,.52),          /* sombra exterior profunda */
    0 2px 8px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(212,175,55,.16),   /* borde superior dorado interior */
    inset 0 0 32px rgba(212,175,55,.04),  /* resplandor dorado interior suave */
    -16px 0 32px rgba(59,130,246,.06);    /* halo azul hacia Oz */
}
.oz-hero-metrics-title {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px; overflow: hidden; flex-wrap: nowrap;
}
.oz-hero-metrics-title span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1 1 0%;
}
.oz-hero-metrics-title span:last-child { flex-shrink: 0; }

/* ── Responsive ── */
/* 1100px: compactar ligeramente */
@media (max-width: 1100px) {
  .oz-hero-bust  { left: 52%; }
  .oz-hero-metrics { width: 200px; }
}
/* 880px: Oz más pequeño, métricas compactas */
@media (max-width: 880px) {
  .oz-hero-banner { height: 240px; }
  .oz-hero-bust   { left: 54%; height: 100%; }
  .oz-hero-metrics { width: 175px; right: 12px; }
  .oz-hero-metrics .metrics-grid { gap: 6px 4px; }
  .oz-hero-metrics-title { font-size: 8px; letter-spacing: 0.8px; }
  .oz-hero-text { padding: 22px 22px; max-width: 360px; }
}
/* 640px: columna única, Oz oculto, métricas debajo del texto */
@media (max-width: 640px) {
  .oz-hero-banner  { height: auto; overflow: visible; }
  .oz-hero-bust    { display: none; }
  .oz-hero-metrics {
    position: relative; right: auto; top: auto; transform: none;
    width: auto; margin: 0 18px 18px;
    background: linear-gradient(135deg, rgba(5,7,14,.88) 0%, rgba(8,10,20,.72) 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(212,175,55,.12);
  }
  .oz-hero-text    { max-width: 100%; padding: 22px 18px 10px; height: auto; }
  .oz-hero-banner::after { display: none; }
}

/* ── Sidebar: avatar circular de Oz ── */
.sidebar-oz-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(212,175,55,.5);
  object-fit: cover; object-position: top center;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(212,175,55,.3);
}

/* ── Widget panel: imagen visual de Oz ── */
.oz-panel-visual {
  width: 100%; overflow: hidden;
  border-bottom: 1px solid rgba(212,175,55,.12);
  position: relative;
  height: 120px;
  background: linear-gradient(135deg, #0a0800, #12100a);
}
.oz-panel-visual-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: opacity .3s ease;
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.oz-panel-visual-state {
  position: absolute; bottom: 6px; left: 10px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase;
}

/* ── Oz imagen principal en la página /oz — transición de estado ── */
#oz-visual {
  transition: opacity .25s ease;
}
#oz-visual.oz-img-changing { opacity: 0; }

/* ── Responsive: widget más compacto en mobile ── */
@media (max-width: 640px) {
  .oz-panel { width: calc(100vw - 32px); right: 0; }
  .oz-hero-bust { display: none; }
  .oz-hero-name { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .oz-panel-visual-img, #oz-visual { transition: none !important; }
  .oz-sidebar-oz-avatar { box-shadow: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   OZ CONTEXTUAL GUIDE — Fase D
   Componente compacto para guía contextual en cada módulo.
   ══════════════════════════════════════════════════════════════ */

.oz-ctx-wrap { margin-bottom: 16px; }

.oz-ctx {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, rgba(5,7,14,.92) 0%, rgba(8,10,20,.78) 55%, rgba(10,14,26,.62) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212,175,55,.18);
  border-left: 3px solid rgba(212,175,55,.45);
  border-radius: var(--radius);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.oz-ctx::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 4% 55%, rgba(212,175,55,.06) 0%, transparent 48%);
}

/* Variantes de estado — acento izquierdo de color */
.oz-ctx--warning  { border-left-color: rgba(245,158,11,.65); }
.oz-ctx--warning::before  { background: radial-gradient(ellipse at 4% 55%, rgba(245,158,11,.07) 0%, transparent 48%); }
.oz-ctx--success  { border-left-color: rgba(34,197,94,.55); }
.oz-ctx--success::before  { background: radial-gradient(ellipse at 4% 55%, rgba(34,197,94,.06) 0%, transparent 48%); }
.oz-ctx--analyzing { border-left-color: rgba(59,130,246,.55); }
.oz-ctx--analyzing::before { background: radial-gradient(ellipse at 4% 55%, rgba(59,130,246,.07) 0%, transparent 48%); }
.oz-ctx--offline  { border-left-color: rgba(100,116,139,.45); }

/* ── Imagen circular ── */
.oz-ctx-img-wrap {
  flex-shrink: 0;
  position: relative;
  width: 52px; height: 52px;
}
.oz-ctx-img {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover; object-position: top center;
  border: 2px solid rgba(212,175,55,.35);
  box-shadow: 0 0 10px rgba(212,175,55,.2), 0 0 0 1px rgba(212,175,55,.08);
  display: block;
}
.oz-ctx-state-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid #0b0d14;
  background: var(--green);
}
.oz-ctx--warning   .oz-ctx-state-dot { background: var(--amber); }
.oz-ctx--analyzing .oz-ctx-state-dot { background: var(--blue-light); }
.oz-ctx--offline   .oz-ctx-state-dot { background: var(--text3); }

/* ── Contenido ── */
.oz-ctx-content { flex: 1; min-width: 0; }

.oz-ctx-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.oz-ctx-name {
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--gold);
}
.oz-ctx-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; padding: 2px 7px;
  border-radius: 4px;
  background: rgba(212,175,55,.1); color: var(--text3);
  border: 1px solid rgba(212,175,55,.18);
}
.oz-ctx--warning   .oz-ctx-badge { background: rgba(245,158,11,.1); color: var(--amber);      border-color: rgba(245,158,11,.22); }
.oz-ctx--success   .oz-ctx-badge { background: rgba(34,197,94,.08); color: var(--green);       border-color: rgba(34,197,94,.18); }
.oz-ctx--analyzing .oz-ctx-badge { background: rgba(59,130,246,.08); color: var(--blue-light); border-color: rgba(59,130,246,.18); }
.oz-ctx--offline   .oz-ctx-badge { background: rgba(100,116,139,.1); color: var(--text3);      border-color: rgba(100,116,139,.18); }

.oz-ctx-msg {
  font-size: 12.5px; color: var(--text2);
  line-height: 1.65; margin-bottom: 10px;
}

/* ── Insights ── */
.oz-ctx-insights {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  margin-bottom: 10px;
}
.oz-ctx-insight {
  font-size: 11px; color: var(--text3);
  padding: 2px 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 4px;
}
.oz-ctx-insight::before { content: '· '; color: var(--gold); }

/* ── Botones de acción ── */
.oz-ctx-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.oz-ctx-btn {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 5px; border: 1px solid;
  text-decoration: none; cursor: pointer;
  white-space: nowrap; line-height: 1.4;
  transition: background .15s, border-color .15s;
}
.oz-ctx-btn-primary {
  color: var(--gold);
  background: rgba(212,175,55,.1);
  border-color: rgba(212,175,55,.3);
}
.oz-ctx-btn-primary:hover {
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.5);
}
.oz-ctx-btn-secondary {
  color: var(--text2);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
.oz-ctx-btn-secondary:hover {
  color: var(--text);
  background: rgba(255,255,255,.08);
}
.oz-ctx-btn-oz {
  color: var(--blue-light);
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.2);
}
.oz-ctx-btn-oz:hover {
  background: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.35);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .oz-ctx { flex-direction: column; gap: 10px; padding: 12px 14px; }
  .oz-ctx-img-wrap { width: 42px; height: 42px; }
  .oz-ctx-img      { width: 42px; height: 42px; }
  .oz-ctx-actions  { flex-direction: column; }
  .oz-ctx-btn      { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   OZ WIDGET — CHAT INTERACTIVO — Fase E
   Panel flotante con historial de conversación real.
   ══════════════════════════════════════════════════════════════ */

/* Panel expandido cuando tiene chat */
.oz-panel--chat {
  max-height: 540px;
  display: none;
}
.oz-panel--chat.open { display: flex; flex-direction: column; }

.oz-panel--chat .oz-panel-visual {
  flex-shrink: 0;
}

.oz-panel--chat .oz-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Historial de conversación ── */
.oz-chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,.18) transparent;
}
.oz-chat-history::-webkit-scrollbar { width: 4px; }
.oz-chat-history::-webkit-scrollbar-thumb { background: rgba(212,175,55,.2); border-radius: 2px; }

/* ── Burbujas de mensaje ── */
.oz-msg { display: flex; max-width: 94%; }
.oz-msg--user { align-self: flex-end; }
.oz-msg--oz   { align-self: flex-start; }

.oz-msg-bubble {
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  word-break: break-word;
}
.oz-msg--user .oz-msg-bubble {
  background: rgba(212,175,55,.13);
  border: 1px solid rgba(212,175,55,.22);
  color: var(--text);
  border-radius: 12px 12px 0 12px;
}
.oz-msg--oz .oz-msg-bubble {
  background: rgba(59,130,246,.07);
  border: 1px solid rgba(59,130,246,.18);
  color: var(--text);
  border-radius: 12px 12px 12px 0;
}

.oz-msg-text { margin-bottom: 4px; }

/* Modo del mensaje */
.oz-msg-mode {
  font-size: 9px;
  margin-top: 5px;
  opacity: .55;
  letter-spacing: .3px;
}
.oz-mode-ai      { color: var(--green); }
.oz-mode-rules   { color: var(--gold); }
.oz-mode-offline { color: var(--red); }

/* Acciones dentro del mensaje */
.oz-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.oz-msg-action-btn {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(59,130,246,.28);
  color: var(--blue-light);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .13s, background .13s;
}
.oz-msg-action-btn:hover {
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.1);
}

/* ── Preguntas rápidas ── */
.oz-quick-questions {
  padding: 0 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.oz-qq-buttons-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oz-qq-label.oz-qq-toggle {
  background: transparent;
  border: none;
  padding: 0 0 3px 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--text3);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: left;
  line-height: 1.4;
  transition: color .12s;
}
.oz-qq-label.oz-qq-toggle:hover { color: var(--text2); }
.oz-qq-arrow { margin-left: auto; font-size: 8px; }
/* En modo lectura: solo el toggle visible, botones colapsados por defecto */
.oz-panel--reading .oz-quick-questions .oz-qq-buttons-wrap { display: none; }
.oz-panel--reading .oz-quick-questions.oz-qq-expanded .oz-qq-buttons-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oz-panel--reading .oz-qq-label.oz-qq-toggle {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text2);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.oz-qq-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 3px;
}
.oz-qq-btn {
  font-size: 11.5px;
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(212,175,55,.12);
  border-radius: 7px;
  color: var(--text2);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: border-color .14s, background .14s, color .14s;
  font-family: inherit;
}
.oz-qq-btn:hover {
  border-color: rgba(212,175,55,.3);
  background: rgba(212,175,55,.06);
  color: var(--text);
}

/* Defensa universal: [hidden] siempre oculta — admin.css tenía display:flex
   en .oz-thinking-indicator que sobreescribía el atributo hidden sin !important */
[hidden] { display: none !important; }

/* ── Indicador de escritura ── */
.oz-thinking-indicator {
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.oz-typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.oz-typing-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  animation: ozDotBounce 1.2s infinite both;
  display: block;
}
.oz-typing-dots span:nth-child(2) { animation-delay: .2s; }
.oz-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ozDotBounce {
  0%,60%,100% { transform: translateY(0); opacity: .45; }
  30%          { transform: translateY(-4px); opacity: 1; }
}
.oz-thinking-text {
  font-size: 11px;
  color: var(--text3);
}

/* ── Input de chat ── */
.oz-chat-input-wrap {
  padding: 8px 12px 6px;
  border-top: 1px solid rgba(212,175,55,.1);
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.oz-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.oz-chat-input {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(212,175,55,.17);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  padding: 7px 10px;
  resize: none;
  line-height: 1.45;
  font-family: inherit;
  max-height: 150px;
  overflow-y: auto;
  transition: border-color .14s;
}
.oz-chat-input:focus {
  outline: none;
  border-color: rgba(212,175,55,.38);
}
.oz-chat-input::placeholder { color: var(--text3); font-size: 11.5px; }
.oz-char-counter {
  font-size: 10px;
  color: var(--text3);
  text-align: right;
  line-height: 1;
  min-height: 12px;
  padding-right: 1px;
  transition: color .2s;
}
.oz-char-counter--warn  { color: #f59e0b; }
.oz-char-counter--limit { color: #ef4444; font-weight: 600; }
.oz-chat-send {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #000;
  transition: opacity .14s, transform .1s;
}
.oz-chat-send:hover   { opacity: .85; }
.oz-chat-send:active  { transform: scale(.93); }
.oz-chat-send:disabled { opacity: .35; cursor: not-allowed; }

/* ── Burbuja proactiva ── */
.oz-proactive {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 256px;
  background: linear-gradient(135deg, rgba(5,7,14,.97) 0%, rgba(10,14,26,.92) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212,175,55,.22);
  border-bottom: 2px solid rgba(212,175,55,.38);
  border-radius: 12px 12px 0 12px;
  padding: 12px 14px 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.06);
  animation: ozProactiveIn .22s ease-out;
  z-index: 9;
}
@keyframes ozProactiveIn {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.oz-proactive-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: none;
  color: var(--text3); font-size: 12px;
  cursor: pointer; padding: 2px 4px; line-height: 1;
  transition: color .13s;
}
.oz-proactive-close:hover { color: var(--text); }
.oz-proactive-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text2);
  margin: 0 18px 8px 0;
}
.oz-proactive-ask {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .14s;
}
.oz-proactive-ask:hover { opacity: .75; }

/* ── Responsive móvil ── */
@media (max-width: 640px) {
  .oz-panel--chat { max-height: 92dvh; width: calc(100vw - 24px); right: 0; border-radius: 16px 16px 0 0; }
  .oz-proactive   { width: calc(100vw - 32px); right: 0; border-radius: 10px 10px 0 10px; }
  .oz-chat-input  { font-size: 16px; } /* prevents iOS zoom */
}

/* ══════════════════════════════════════════════════════════════════
   FASE F — Respuestas estructuradas tipo mentor operativo
   Todos los componentes son seguros: el contenido llega via esc()
   desde oz-widget.js — sin riesgo XSS.
══════════════════════════════════════════════════════════════════ */

/* A. Diagnóstico */
.oz-msg-diagnosis {
  font-size: 0.82em;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 5px;
  line-height: 1.35;
}

/* B. Ruta */
.oz-msg-route {
  font-size: 0.76em;
  color: rgba(212,175,55,.65);
  margin: 4px 0 5px;
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.4;
  overflow-x: auto;
  white-space: nowrap;
}
.oz-msg-route-label {
  font-weight: 700;
  font-style: normal;
}

/* C. Checklist numerado */
.oz-msg-steps {
  margin: 5px 0 5px 16px;
  padding: 0;
  list-style: decimal;
}
.oz-msg-steps li {
  font-size: 0.8em;
  line-height: 1.45;
  margin-bottom: 3px;
  color: rgba(255,255,255,.86);
}

/* D. Recomendación ejecutiva */
.oz-msg-recommendation {
  font-size: 0.8em;
  color: var(--blue, #3b82f6);
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(59,130,246,.08);
  border-left: 2px solid rgba(59,130,246,.35);
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}

/* E. Advertencia */
.oz-msg-warning {
  font-size: 0.78em;
  color: #f59e0b;
  margin-top: 5px;
  padding: 4px 8px;
  background: rgba(245,158,11,.08);
  border-left: 2px solid rgba(245,158,11,.35);
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}

/* F. Siguiente paso */
.oz-msg-next-step {
  font-size: 0.79em;
  color: #10b981;
  margin-top: 6px;
  font-style: italic;
  line-height: 1.4;
}

/* Espaciado entre bloques hermanos */
.oz-msg-diagnosis + .oz-msg-text,
.oz-msg-text + .oz-msg-route,
.oz-msg-route + .oz-msg-steps,
.oz-msg-steps + .oz-msg-recommendation,
.oz-msg-recommendation + .oz-msg-warning,
.oz-msg-warning + .oz-msg-next-step {
  margin-top: 2px;
}

/* En móvil la ruta puede sobresalir — contenemos con scroll interno */
@media (max-width: 640px) {
  .oz-msg-route { max-width: 100%; }
  .oz-msg-steps { margin-left: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   IMPERIAL PRODUCT FACTORY
   ═══════════════════════════════════════════════════════════ */

/* ── Selector de tipo de creación ── */
.pf-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.pf-type-card {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.pf-type-card:hover  { border-color: var(--gold-dim); }
.pf-type-card.active { border-color: var(--gold); background: var(--gold-dim); }
.pf-type-icon  { font-size: 18px; margin-bottom: 6px; }
.pf-type-label { font-size: 11.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.pf-type-card.active .pf-type-label { color: var(--gold-light); }

/* ── Textarea ── */
.pf-textarea {
  width: 100%;
  min-height: 110px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color .15s;
}
.pf-textarea::placeholder { color: var(--text3); }
.pf-textarea:focus { border-color: var(--gold); }

/* ── Selector de producto base ── */
.pf-base-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.pf-base-card {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 12px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pf-base-card:hover  { border-color: var(--gold-dim); }
.pf-base-card.active { border-color: var(--gold); background: var(--gold-dim); }
.pf-base-icon { font-size: 20px; flex-shrink: 0; }
.pf-base-name { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
.pf-base-cat  { font-size: 10px; color: var(--text3); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Nivel comercial (pills) ── */
.pf-level-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-level-pill {
  flex: 1;
  min-width: 140px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.pf-level-pill:hover  { border-color: var(--gold-dim); }
.pf-level-pill.active { border-color: var(--gold); background: var(--gold-dim); }
.pf-level-name  { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .5px; }
.pf-level-pill.active .pf-level-name { color: var(--gold-light); }
.pf-level-price { font-size: 15px; font-weight: 800; color: var(--gold); margin-top: 4px; }

/* ── Botón generar ── */
.pf-generate-btn {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  justify-content: center;
}

/* ── Estados del producto (Factory) ── */
.badge-pf-borrador        { background: rgba(80,80,80,.15); color: #888; border: 1px solid rgba(80,80,80,.2); }
.badge-pf-revision        { background: var(--blue-dim); color: var(--blue-light); border: 1px solid rgba(59,130,246,.2); }
.badge-pf-listo-venta     { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.badge-pf-listo-entrega   { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.badge-pf-requiere-ajustes{ background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.2); }

/* ── Precios en tab Comercial ── */
.pf-price-card {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
}
.pf-price-card.selected { border-color: var(--gold); background: var(--gold-dim); }
.pf-price-level { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; }
.pf-price-value { font-size: 20px; font-weight: 800; color: var(--gold); margin-top: 6px; }

/* ── Caja de mensaje / prompt con botón copiar ── */
.pf-copy-box {
  position: relative;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap;
  font-family: inherit;
}
.pf-copy-box.mono { font-family: monospace; font-size: 12px; }
.pf-copy-btn-row  { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ── Acciones del resultado ── */
.pf-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ── Borradores guardados ── */
.pf-draft-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background .15s;
}
.pf-draft-row:hover { background: var(--surface3); }
.pf-draft-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.pf-draft-meta { font-size: 11px; color: var(--text3); }

/* ── Modal genérico (Preguntar a Oz) ── */
.pf-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pf-modal-overlay.open { display: flex; }
.pf-modal-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 26px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
}
.pf-modal-icon  { font-size: 30px; margin-bottom: 10px; }
.pf-modal-title { font-size: 15px; font-weight: 700; color: var(--gold); margin-bottom: 10px; }
.pf-modal-text  { font-size: 13px; color: var(--text2); line-height: 1.7; margin-bottom: 20px; }

@media (max-width: 700px) {
  .pf-base-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: none; }
  .pf-type-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════
   FASE G — QA CENTER Y ENTREGABLES VISIBLES POR PRODUCTO
   localStorage: persistencia provisional (no sincroniza con servidor)
   ════════════════════════════════════════════════════════════════ */

/* ── Criterio Acordeones ── */
.criterio-accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 5px;
  overflow: hidden;
  transition: border-color .15s;
}
.criterio-accordion.ok  { border-color: rgba(34,197,94,.2); }
.criterio-accordion.nok { border-color: rgba(100,100,100,.18); }
.criterio-accordion.ok.expanded  { border-color: rgba(34,197,94,.4); }
.criterio-accordion.nok.expanded { border-color: rgba(245,158,11,.3); }

.criterio-acc-header {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  background: transparent; transition: background .13s; user-select: none;
}
.criterio-acc-header:hover { background: var(--surface2); }

.criterio-acc-icon { font-size: 13px; flex-shrink: 0; width: 16px; text-align: center; }
.criterio-accordion.ok  .criterio-acc-icon { color: var(--green); }
.criterio-accordion.nok .criterio-acc-icon { color: var(--text3); }

.criterio-acc-info { flex: 1; min-width: 0; }
.criterio-acc-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.criterio-acc-sub   { display: block; font-size: 10.5px; color: var(--text3); margin-top: 1px; }

.criterio-acc-pct {
  font-size: 11.5px; font-weight: 700; flex-shrink: 0;
  padding: 2px 7px; border-radius: 4px;
}
.pct-ok  { color: var(--green); background: var(--green-dim); }
.pct-nok { color: var(--text3); background: var(--surface3); }

.criterio-acc-chevron {
  font-size: 11px; color: var(--text3); flex-shrink: 0; transition: transform .15s;
}
.criterio-accordion.expanded .criterio-acc-chevron { transform: rotate(180deg); }

.criterio-acc-body {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
.criterio-acc-field {
  font-size: 12px; color: var(--text2); margin-bottom: 7px; line-height: 1.55;
}
.criterio-acc-field:last-child { margin-bottom: 0; }
.cacc-k   { font-weight: 700; color: var(--text3); margin-right: 4px; }
.cacc-ok  { color: var(--green); }
.cacc-nok { color: var(--red); }
.cacc-qa  { color: var(--blue-light); font-style: italic; }

.criterio-acc-actions { margin-top: 10px; }
.criterio-acc-btn {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 4px;
  background: var(--surface3); border: 1px solid var(--border2);
  color: var(--gold); text-decoration: none; transition: border-color .13s;
}
.criterio-acc-btn:hover { border-color: var(--gold); color: var(--gold-light); }

/* ── QA State Badge (hero del producto) ── */
.qa-state-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 4px;
}
.qa-state-draft     { color: var(--text3);      background: var(--surface3);   border: 1px solid var(--border2); }
.qa-state-warn      { color: var(--amber);       background: var(--amber-dim);  border: 1px solid rgba(245,158,11,.25); }
.qa-state-validated { color: var(--green);       background: var(--green-dim);  border: 1px solid rgba(34,197,94,.3); }
.qa-state-approved  { color: var(--green);       background: var(--green-dim);  border: 1px solid rgba(34,197,94,.2); }
.qa-state-ready-qa  { color: var(--blue-light);  background: var(--blue-dim);   border: 1px solid rgba(59,130,246,.25); }
.qa-state-pending   { color: var(--amber);       background: var(--amber-dim);  border: 1px solid rgba(245,158,11,.2); }
.qa-state-prep      { color: var(--text3);       background: var(--surface3);   border: 1px solid var(--border2); }

/* ── Lo que recibe el cliente ── */
.entregables-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 860px) { .entregables-grid { grid-template-columns: 1fr; } }

.entregable-full { grid-column: span 2; }
@media (max-width: 860px) { .entregable-full { grid-column: span 1; } }

.ent-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 8px;
}
.ent-list { list-style: none; padding: 0; margin: 0; }
.ent-list li {
  padding: 6px 0; font-size: 12.5px; color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 8px;
}
.ent-list li:last-child { border-bottom: none; }
.ent-list li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }

.ent-meta-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--surface2); margin-bottom: 4px;
}
.ent-meta-icon  { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.ent-meta-label { font-size: 10.5px; color: var(--text3); font-weight: 600; flex: 0 0 110px; }
.ent-meta-value { font-size: 12px; color: var(--text); flex: 1; line-height: 1.45; }
.ent-meta-value.empty { color: var(--text3); font-style: italic; }

.ent-req-list { list-style: decimal; padding-left: 18px; margin: 0; }
.ent-req-list li { font-size: 12px; color: var(--text); padding: 4px 0; line-height: 1.5; }

.ent-proceso-text {
  font-size: 12px; color: var(--text); line-height: 1.7;
  white-space: pre-wrap; padding: 10px 12px;
  background: var(--surface2); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.ent-empty { font-size: 12px; color: var(--red); font-style: italic; padding: 4px 0; }

/* ── Centro de QA del Producto ── */
.qa-center-card { border-color: rgba(212,175,55,.22) !important; }

.qa-provisional-note {
  font-size: 11px; color: var(--amber); background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.18); border-radius: var(--radius-sm);
  padding: 8px 12px; margin-bottom: 16px; line-height: 1.5;
}
.qa-provisional-note code { font-family: monospace; font-size: 10.5px; }

.qa-state-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 18px;
}
.qa-state-banner.approved { background: var(--green-dim); border: 1px solid rgba(34,197,94,.25); }
.qa-state-banner.pending  { background: var(--amber-dim); border: 1px solid rgba(245,158,11,.2); }
.qa-banner-icon { font-size: 20px; flex-shrink: 0; }
.qa-state-banner.approved .qa-banner-icon { color: var(--green); }
.qa-state-banner.pending  .qa-banner-icon { color: var(--amber); }
.qa-banner-body { flex: 1; min-width: 0; }
.qa-banner-title { font-size: 13px; font-weight: 700; color: var(--text); }
.qa-banner-sub   { font-size: 11px; color: var(--text3); margin-top: 2px; }
.qa-banner-reset {
  background: transparent; border: 1px solid rgba(34,197,94,.3);
  color: var(--green); font-size: 11px; padding: 4px 10px;
  border-radius: 4px; cursor: pointer; transition: all .13s; white-space: nowrap;
  font-family: inherit;
}
.qa-banner-reset:hover { background: var(--green-dim); }

.qa-checklist-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3); margin-bottom: 10px;
}
.qa-checklist { margin-bottom: 18px; }
.qa-checklist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface2); margin-bottom: 4px;
  border: 1px solid var(--border); transition: border-color .13s;
}
.qa-checklist-item[data-state="aprobado"] { border-color: rgba(34,197,94,.3); }
.qa-checklist-item[data-state="ajuste"]   { border-color: rgba(239,68,68,.3); }
.qa-checklist-item[data-state="revision"] { border-color: rgba(245,158,11,.25); }

.qa-item-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface3); border: 1px solid var(--border2);
  color: var(--text3); font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.qa-checklist-item[data-state="aprobado"] .qa-item-num {
  background: var(--green-dim); border-color: rgba(34,197,94,.35); color: var(--green);
}
.qa-checklist-item[data-state="ajuste"] .qa-item-num {
  background: var(--red-dim); border-color: rgba(239,68,68,.3); color: var(--red);
}
.qa-item-label { flex: 1; font-size: 12.5px; color: var(--text); }
.qa-item-state {
  background: var(--surface3); border: 1px solid var(--border2);
  color: var(--text2); font-size: 11px; padding: 3px 6px;
  border-radius: 4px; cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.qa-item-state:focus { outline: none; border-color: var(--gold); }

.qa-actions-row { margin-bottom: 8px; }
.btn-qa-approve {
  background: var(--gold); color: #000; border: none;
  padding: 10px 22px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .14s;
}
.btn-qa-approve:hover { background: var(--gold-light); }
.btn-qa-approve.approved { background: var(--green); color: #fff; cursor: default; }

.qa-localStorage-note {
  font-size: 10.5px; color: var(--text3); font-style: italic; margin-top: 6px; line-height: 1.4;
}

/* ── Guía compra de prueba ── */
.qa-guide-wrap {
  padding-top: 22px; border-top: 1px solid var(--border); margin-top: 22px;
}
.qa-guide-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.qa-guide-steps { list-style: none; padding: 0; counter-reset: qa-step; }
.qa-guide-steps li {
  counter-increment: qa-step;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; font-size: 12px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.qa-guide-steps li:last-child { border-bottom: none; }
.qa-guide-steps li::before {
  content: counter(qa-step);
  min-width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-dim); border: 1px solid rgba(59,130,246,.25);
  color: var(--blue-light); font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── Formulario Sandbox ── */
.sandbox-form-wrap {
  padding-top: 20px; border-top: 1px solid var(--border); margin-top: 20px;
}
.sandbox-form-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 10px;
}
.sandbox-test-saved {
  font-size: 12px; color: var(--green); background: var(--green-dim);
  border: 1px solid rgba(34,197,94,.2); padding: 6px 12px;
  border-radius: var(--radius-sm); margin-bottom: 12px;
}
.sandbox-form { display: flex; flex-direction: column; gap: 12px; }
.sbf-checks { display: flex; flex-direction: column; gap: 8px; }
.sbf-check-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
}
.sbf-checkbox { width: 15px; height: 15px; accent-color: var(--gold); flex-shrink: 0; cursor: pointer; }
.sbf-row { display: flex; flex-direction: column; gap: 4px; }
.sbf-label { font-size: 10.5px; font-weight: 700; color: var(--text3); }
.sbf-select, .sbf-input {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); font-size: 12.5px; padding: 7px 10px;
  border-radius: var(--radius-sm); outline: none; transition: border-color .13s;
  font-family: inherit;
}
.sbf-select:focus, .sbf-input:focus { border-color: var(--gold); }
.sbf-textarea {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); font-size: 12.5px; padding: 8px 10px;
  border-radius: var(--radius-sm); outline: none; resize: vertical;
  transition: border-color .13s; line-height: 1.5; font-family: inherit;
}
.sbf-textarea:focus { border-color: var(--blue); }
.btn-sandbox-save {
  background: var(--blue); color: #fff; border: none;
  padding: 9px 20px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .14s; align-self: flex-start;
}
.btn-sandbox-save:hover { background: var(--blue-light); color: #000; }

/* ── Modal Imperial (reutilizable) ── */
.imperial-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.imperial-modal-overlay.open { display: flex; }

.imperial-modal {
  background: var(--surface);
  border: 1px solid rgba(212,175,55,.3);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  width: 100%; max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,.8), 0 0 40px rgba(212,175,55,.06);
  animation: imperialModalIn .18s ease-out;
  max-height: 90dvh; overflow-y: auto;
}
@keyframes imperialModalIn {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.imperial-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(6,6,6,1) 0%, rgba(15,12,5,1) 100%);
}
.imperial-modal-title {
  font-size: 14px; font-weight: 700; color: var(--gold);
  display: flex; align-items: center; gap: 8px;
}
.imperial-modal-close {
  background: none; border: none; color: var(--text3);
  font-size: 16px; cursor: pointer; padding: 2px 6px; line-height: 1;
  transition: color .13s; font-family: inherit;
}
.imperial-modal-close:hover { color: var(--text); }
.imperial-modal-body { padding: 18px 20px; }
.imperial-modal-warning {
  background: var(--red-dim); border: 1px solid rgba(239,68,68,.25);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 12px; color: var(--red); margin-top: 14px; line-height: 1.55;
}
.imperial-modal-info {
  background: var(--amber-dim); border: 1px solid rgba(245,158,11,.2);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 11.5px; color: var(--amber); margin-top: 10px; line-height: 1.55;
}
.imperial-modal-list { list-style: none; padding: 0; margin: 0 0 4px; }
.imperial-modal-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text); padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.imperial-modal-list li:last-child { border-bottom: none; }
.modal-list-ok  { color: var(--green); flex-shrink: 0; }
.modal-list-nok { color: var(--red);   flex-shrink: 0; }
.imperial-modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px 16px; border-top: 1px solid var(--border);
}
.btn-modal-cancel {
  background: transparent; border: 1px solid var(--border2);
  color: var(--text2); font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: var(--radius-sm); cursor: pointer;
  transition: all .14s; font-family: inherit;
}
.btn-modal-cancel:hover { border-color: var(--text2); color: var(--text); }
.btn-modal-confirm {
  background: var(--gold); color: #000; border: none;
  font-size: 13px; font-weight: 700;
  padding: 8px 20px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .14s; font-family: inherit;
}
.btn-modal-confirm:hover { background: var(--gold-light); }
.btn-modal-confirm.danger { background: var(--red); color: #fff; }
.btn-modal-confirm.danger:hover { background: #f87171; }

@media (max-width: 640px) {
  .imperial-modal { max-width: 100%; }
  .imperial-modal-footer { flex-direction: column-reverse; }
  .btn-modal-cancel, .btn-modal-confirm { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   MÓDULO PEDIDOS — Listado y detalle (Fase Pedidos B)
   ═══════════════════════════════════════════════════════════ */

.imperial-modal.modal-wide { max-width: 720px; }

.pedido-cliente-sub { font-size: 10.5px; color: var(--text3); margin-top: 1px; }

.badge-pd-draft       { background: rgba(80,80,80,.15); color: #888; border: 1px solid rgba(80,80,80,.2); }
.badge-pd-pending     { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,158,11,.2); }
.badge-pd-processing  { background: var(--blue-dim); color: var(--blue-light); border: 1px solid rgba(59,130,246,.2); }
.badge-pd-paid        { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.badge-pd-failed      { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.2); }
.badge-pd-cancelled   { background: rgba(80,80,80,.15); color: #888; border: 1px solid rgba(80,80,80,.2); }
.badge-pd-production  { background: var(--blue-dim); color: var(--blue-light); border: 1px solid rgba(59,130,246,.2); }
.badge-pd-ready        { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.badge-pd-delivered    { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); }
.badge-pd-refunded     { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,158,11,.2); }
.badge-pd-disputed     { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.2); }
.badge-pd-default      { background: var(--surface2); color: var(--text2); border: 1px solid var(--border2); }
.badge-origen           { background: var(--blue-dim); color: var(--blue-light); border: 1px solid rgba(59,130,246,.2); }
.badge-rec-recuperar    { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.3); }
.badge-rec-alternativa  { background: rgba(168,85,247,.12); color: #c084fc; border: 1px solid rgba(168,85,247,.25); }

.pedido-detail-section { margin-bottom: 20px; }
.pedido-detail-section:last-child { margin-bottom: 0; }
.pedido-detail-section-title {
  font-size: 11px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

.empty-state.error-state .empty-icon { color: var(--red); opacity: .7; }
.load-more-wrap { text-align: center; margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════
   FASE H — Edición Asistida + Oz Inline Advisor + Contenido Entregable
   ═══════════════════════════════════════════════════════════ */

/* ── Oz Inline Advisor ─────────────────────────────────────── */
.oz-inline-btn {
  background: none; border: 1px solid rgba(212,175,55,.25);
  color: var(--gold); font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 4px; cursor: pointer;
  font-family: inherit; transition: all .13s; white-space: nowrap;
  letter-spacing: .3px;
}
.oz-inline-btn:hover { background: rgba(212,175,55,.08); border-color: var(--gold); }

.oz-inline-tip {
  background: var(--surface); border: 1px solid rgba(212,175,55,.3);
  border-top: 2px solid var(--gold); border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(0,0,0,.4); padding: 12px 14px;
  margin: 8px 0 4px; animation: imperialModalIn .15s ease-out;
}
.oz-tip-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.oz-tip-label { font-size: 11px; font-weight: 700; color: var(--gold); }
.oz-tip-close {
  background: none; border: none; color: var(--text3);
  cursor: pointer; padding: 0 4px; font-size: 14px;
  line-height: 1; font-family: inherit;
}
.oz-tip-close:hover { color: var(--text2); }
.oz-tip-body { font-size: 12px; color: var(--text); line-height: 1.65; margin-bottom: 10px; }
.oz-tip-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.oz-tip-chat-btn {
  background: var(--blue-dim); border: 1px solid rgba(59,130,246,.25);
  color: var(--blue-light); font-size: 11px; font-weight: 600;
  padding: 5px 11px; border-radius: 4px; cursor: pointer; font-family: inherit;
  transition: background .13s;
}
.oz-tip-chat-btn:hover { background: rgba(59,130,246,.2); }

/* ── Editbar: título + botones acción ────────────────────────── */
.card-editbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.card-editbar .card-title { margin-bottom: 0; flex: 1; }
.card-editbar-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.edit-section-btn {
  background: none; border: 1px solid var(--border2);
  color: var(--text2); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 4px; cursor: pointer;
  font-family: inherit; transition: all .13s; white-space: nowrap;
}
.edit-section-btn:hover { border-color: var(--gold); color: var(--gold); }
.edit-section-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,.06); }

/* ── Formulario de edición inline ────────────────────────────── */
.edit-form-wrap { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; display: none; }
.edit-form-wrap.open { display: block; }

.ef-draft-note {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--amber);
  background: var(--amber-dim); border: 1px solid rgba(245,158,11,.2);
  border-radius: 4px; padding: 4px 9px; margin-bottom: 12px;
}

.ef-row { margin-bottom: 10px; }
.ef-label { font-size: 10.5px; font-weight: 700; color: var(--text3); margin-bottom: 4px; display: block; }
.ef-input, .ef-select {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); font-size: 12.5px; padding: 7px 10px;
  border-radius: var(--radius-sm); outline: none;
  transition: border-color .13s; font-family: inherit;
  width: 100%; box-sizing: border-box;
}
.ef-input:focus, .ef-select:focus { border-color: var(--gold); }
.ef-textarea {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); font-size: 12.5px; padding: 8px 10px;
  border-radius: var(--radius-sm); outline: none; resize: vertical;
  transition: border-color .13s; font-family: inherit;
  width: 100%; box-sizing: border-box; line-height: 1.55;
}
.ef-textarea:focus { border-color: var(--gold); }
.ef-hint { font-size: 10px; color: var(--text3); margin-top: 3px; }

.ef-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn-ef-save {
  background: var(--gold); color: #000; border: none;
  padding: 7px 18px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .14s;
}
.btn-ef-save:hover { background: var(--gold-light); }
.btn-ef-cancel {
  background: transparent; border: 1px solid var(--border2);
  color: var(--text2); padding: 7px 14px;
  border-radius: var(--radius-sm); font-size: 12px;
  cursor: pointer; font-family: inherit; transition: all .14s;
}
.btn-ef-cancel:hover { border-color: var(--text2); color: var(--text); }
.btn-ef-oz {
  background: transparent; border: 1px solid rgba(212,175,55,.25);
  color: var(--gold); padding: 7px 14px;
  border-radius: var(--radius-sm); font-size: 12px;
  cursor: pointer; font-family: inherit; transition: all .14s;
}
.btn-ef-oz:hover { background: rgba(212,175,55,.08); }

/* ── Draft banner ──────────────────────────────────────────── */
.draft-panel-bar {
  background: var(--amber-dim); border: 1px solid rgba(245,158,11,.25);
  border-radius: var(--radius-sm); padding: 8px 14px;
  font-size: 11.5px; color: var(--amber);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.draft-panel-bar-label { flex: 1; }
.btn-draft-clear {
  background: none; border: 1px solid rgba(245,158,11,.3);
  color: var(--amber); font-size: 10.5px; padding: 2px 8px;
  border-radius: 4px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn-draft-clear:hover { background: rgba(245,158,11,.12); }

/* ── Contenido Entregable ──────────────────────────────────── */
.ent-content-card { border-color: rgba(59,130,246,.18) !important; }

.ent-content-item {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden;
}
.ent-content-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; user-select: none;
}
.ent-content-icon { font-size: 16px; flex-shrink: 0; }
.ent-content-info { flex: 1; min-width: 0; }
.ent-content-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ent-content-sub { font-size: 11px; color: var(--text3); margin-top: 1px; }
.ent-content-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.btn-ent-copy {
  background: transparent; border: 1px solid rgba(59,130,246,.25);
  color: var(--blue-light); font-size: 11px; padding: 4px 10px;
  border-radius: 4px; cursor: pointer; font-family: inherit; transition: background .13s;
}
.btn-ent-copy:hover { background: var(--blue-dim); }
.btn-ent-oz-audit {
  background: transparent; border: 1px solid rgba(212,175,55,.25);
  color: var(--gold); font-size: 11px; padding: 4px 10px;
  border-radius: 4px; cursor: pointer; font-family: inherit; transition: background .13s;
}
.btn-ent-oz-audit:hover { background: rgba(212,175,55,.06); }
.ent-content-body { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.ent-content-text {
  font-size: 12px; color: var(--text); line-height: 1.65;
  white-space: pre-wrap; padding-top: 10px; font-family: monospace;
}
.ent-no-download { font-size: 12px; color: var(--text3); font-style: italic; padding: 8px 0; }
.ent-content-audit-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; background: rgba(212,175,55,.06); border: 1px solid rgba(212,175,55,.2);
  color: var(--gold); font-size: 12px; font-weight: 600;
  padding: 10px 14px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; transition: all .13s; margin-top: 12px;
}
.ent-content-audit-btn:hover { background: rgba(212,175,55,.12); }

/* ── Guía de agendamiento ─────────────────────────────────── */
.session-guide-block {
  background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(212,175,55,.04));
  border: 1px solid rgba(59,130,246,.2); border-radius: var(--radius);
  padding: 16px 18px; margin-top: 16px;
}
.session-guide-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 10px;
}
.session-guide-steps {
  padding-left: 18px; font-size: 12.5px; color: var(--text);
  line-height: 1.8; margin: 0 0 8px;
}
.session-guide-note {
  font-size: 11px; color: var(--text3);
  padding-top: 8px; border-top: 1px solid var(--border);
}

/* ── Oz badge contador ────────────────────────────────────── */
.oz-badge-count {
  position: absolute; top: -3px; right: -3px;
  background: var(--amber); color: #000;
  font-size: 9.5px; font-weight: 700; border-radius: 50%;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg); line-height: 1; pointer-events: none;
}

@media (max-width: 640px) {
  .card-editbar { flex-wrap: wrap; }
  .ef-actions { gap: 6px; }
  .ent-content-actions { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   FASE H.2 — Chat header, timestamps, modal borrar
   ════════════════════════════════════════════════════════════ */

/* ── Cabecera del chat ─────────────────────────────────────── */
.oz-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 6px 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  background: rgba(8, 8, 20, 0.6);
  flex-shrink: 0;
}
.oz-chat-header-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px;
  color: rgba(212, 175, 55, 0.7); text-transform: uppercase;
}
.oz-clear-chat-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 5px;
  color: var(--text2); line-height: 1.4;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.oz-clear-chat-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.3);
  color: var(--gold);
}

/* ── Timestamps en mensajes ────────────────────────────────── */
.oz-msg-timestamp {
  display: block;
  font-size: 9.5px;
  color: var(--text3);
  opacity: 0.55;
  text-align: right;
  margin-top: 5px;
  letter-spacing: 0.2px;
  user-select: none;
}
.oz-msg--user .oz-msg-timestamp {
  color: rgba(255, 255, 255, 0.45);
}

/* ── Modal de confirmación "Borrar chat" ───────────────────── */
.oz-clear-modal-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center;
  animation: ozFadeIn 0.12s ease;
}
.oz-clear-modal {
  background: linear-gradient(145deg, #0c0d17, #111320);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  padding: 24px 28px 20px;
  max-width: 340px; width: 92%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
}
.oz-clear-modal-title {
  font-size: 14px; font-weight: 700; color: var(--gold);
  margin-bottom: 10px; letter-spacing: 0.3px;
}
.oz-clear-modal-body {
  font-size: 12.5px; color: var(--text2); line-height: 1.5;
  margin: 0 0 18px;
}
.oz-clear-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.oz-clear-modal-cancel {
  padding: 7px 14px; border-radius: 5px; font-size: 12px; font-weight: 500;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text2); cursor: pointer; transition: background 0.15s;
}
.oz-clear-modal-cancel:hover { background: rgba(255, 255, 255, 0.1); }
.oz-clear-modal-confirm {
  padding: 7px 14px; border-radius: 5px; font-size: 12px; font-weight: 600;
  background: rgba(212, 175, 55, 0.15); border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--gold); cursor: pointer; transition: background 0.15s;
}
.oz-clear-modal-confirm:hover { background: rgba(212, 175, 55, 0.25); }

@keyframes ozFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
  .oz-clear-modal { padding: 18px 16px 16px; }
  .oz-clear-modal-actions { flex-direction: column-reverse; }
  .oz-clear-modal-cancel,
  .oz-clear-modal-confirm { width: 100%; text-align: center; padding: 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   AUDITORÍA INTELIGENTE DE ENTREGABLES — Fase I
   #oz-audit-panel · .oz-audit-*
══════════════════════════════════════════════════════════════════ */
.oz-audit-card {
  margin-top: 18px;
  border: 1px solid rgba(212, 175, 55, .18);
}

/* Header */
.oz-audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.oz-audit-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.oz-audit-icon { font-size: 16px; }

.oz-audit-subtitle {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text3);
  letter-spacing: .2px;
}

.oz-audit-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Buttons */
.oz-audit-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border2);
  color: var(--text2);
  background: var(--surface2);
  transition: background .16s, color .16s;
  white-space: nowrap;
}
.oz-audit-btn:hover { background: var(--surface3, #1a1a1a); color: var(--text); }
.oz-audit-btn:disabled { opacity: .6; cursor: not-allowed; }

.oz-audit-btn-primary {
  border-color: rgba(212, 175, 55, .5);
  color: var(--gold);
  background: rgba(212, 175, 55, .06);
}
.oz-audit-btn-primary:hover { background: rgba(212, 175, 55, .14); color: var(--gold); }

/* Empty state */
.oz-audit-empty {
  text-align: center;
  padding: 28px 16px 20px;
  color: var(--text3);
}
.oz-audit-empty-icon { font-size: 28px; opacity: .35; margin-bottom: 10px; }
.oz-audit-empty-text { font-size: 13px; margin-bottom: 5px; line-height: 1.5; }
.oz-audit-empty-sub  { font-size: 11px; opacity: .75; line-height: 1.5; }

/* Score row */
.oz-audit-score-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: 8px;
  margin-bottom: 18px;
}

.oz-audit-score-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0d0a00 0%, #1a1300 100%);
}

.oz-audit-score-num {
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}

.oz-audit-score-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 1px;
}

/* Status badge */
.oz-audit-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid transparent;
}
.oz-audit-status--excelente       { background: rgba(34,197,94,.13);  color: #4ade80; border-color: rgba(34,197,94,.3); }
.oz-audit-status--aprobable       { background: rgba(59,130,246,.12); color: #60a5fa; border-color: rgba(59,130,246,.3); }
.oz-audit-status--requiere_mejora { background: rgba(234,179,8,.10);  color: #fbbf24; border-color: rgba(234,179,8,.3); }
.oz-audit-status--riesgo          { background: rgba(239,68,68,.10);  color: #f87171; border-color: rgba(239,68,68,.3); }

.oz-audit-summary {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.6;
}

/* Section title */
.oz-audit-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text3);
  margin: 16px 0 8px;
}

/* Criteria grid */
.oz-audit-criteria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}

@media (max-width: 640px) {
  .oz-audit-criteria-grid { grid-template-columns: 1fr; }
}

.oz-audit-criterion {
  background: var(--surface2);
  border-radius: 7px;
  padding: 9px 11px;
  border-left: 3px solid var(--border2);
  min-height: 52px;
}
.oz-audit-criterion--ok   { border-left-color: #4ade80; }
.oz-audit-criterion--warn { border-left-color: #fbbf24; }
.oz-audit-criterion--fail { border-left-color: #f87171; }
.oz-audit-criterion--na   { border-left-color: var(--border); opacity: .7; }

.oz-audit-criterion-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.oz-audit-crit-icon         { font-size: 11px; font-weight: 800; }
.oz-audit-crit-icon--ok     { color: #4ade80; }
.oz-audit-crit-icon--warn   { color: #fbbf24; }
.oz-audit-crit-icon--fail   { color: #f87171; }
.oz-audit-crit-icon--na     { color: var(--text3); }

.oz-audit-criterion-score   { font-size: 11px; color: var(--text3); margin-bottom: 4px; }
.oz-audit-criterion-issue   { font-size: 10.5px; color: #fbbf24; line-height: 1.4; }
.oz-audit-criterion-strength{ font-size: 10.5px; color: #4ade80;  line-height: 1.4; }

/* Risks */
.oz-audit-risks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }

.oz-audit-risk-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 11px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
}
.oz-audit-risk--alto  { background: rgba(239,68,68,.07);  border: 1px solid rgba(239,68,68,.2); }
.oz-audit-risk--medio { background: rgba(234,179,8,.06);  border: 1px solid rgba(234,179,8,.2); }

.oz-audit-risk-level {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  margin-top: 2px;
  min-width: 38px;
}
.oz-audit-risk--alto  .oz-audit-risk-level { color: #f87171; }
.oz-audit-risk--medio .oz-audit-risk-level { color: #fbbf24; }

/* Next actions */
.oz-audit-actions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.oz-audit-action-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.45;
}
.oz-audit-action-item:last-child { border-bottom: none; }

.oz-audit-action-priority {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  margin-top: 2px;
  flex-shrink: 0;
}
.oz-audit-action-priority--alta  { background: rgba(239,68,68,.15);  color: #f87171; }
.oz-audit-action-priority--media { background: rgba(59,130,246,.14); color: #60a5fa; }

/* QA recommendation */
.oz-audit-qa-rec {
  padding: 12px 14px;
  border-radius: 8px;
  margin-top: 16px;
  background: var(--surface2);
  border: 1px solid rgba(212, 175, 55, .15);
}

.oz-audit-qa-rec-verdict {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 5px;
}

.oz-audit-qa-rec-note {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.55;
}

/* Storage note */
.oz-audit-storage-note {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 14px;
  padding: 7px 10px;
  background: var(--surface2);
  border-radius: 5px;
  border-left: 2px solid var(--border2);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════
   OZ CHAT — MODO EXPANDIBLE — Fase I.1
   .oz-panel--chat.oz-panel--expanded
   .oz-expand-chat-btn · .oz-chat-header-actions
══════════════════════════════════════════════════════════════════ */

/* Transición suave al expandir/contraer */
.oz-panel--chat {
  transition: width .22s cubic-bezier(0.4, 0, 0.2, 1),
              max-height .22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modo expandido */
.oz-panel--chat.oz-panel--expanded {
  width: 640px;
  max-height: 80vh;
}

/* Mensajes más legibles en modo expandido */
.oz-panel--chat.oz-panel--expanded .oz-msg {
  max-width: 90%;
}

.oz-panel--chat.oz-panel--expanded .oz-msg-bubble {
  font-size: 13px;
  line-height: 1.6;
}

/* Contenedor de acciones del header */
.oz-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Botón expandir/contraer */
.oz-expand-chat-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 5px;
  color: var(--text3);
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  user-select: none;
}
.oz-expand-chat-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.28);
  color: var(--gold);
}

/* Responsive: en pantallas pequeñas el expandido usa casi todo el ancho */
@media (max-width: 768px) {
  .oz-panel--chat.oz-panel--expanded {
    width: calc(100vw - 24px);
    max-height: 85dvh;
  }
}

/* En pantallas muy pequeñas, no tiene sentido el modo expandido */
@media (max-width: 400px) {
  .oz-expand-chat-btn { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FASE J — Cerebro Gemini Ahorrativo: etiquetas de fuente y estado de IA
   ═══════════════════════════════════════════════════════════════════ */

/* Etiqueta de fuente adicionales (Fase J) */
.oz-mode-fallback {
  background: rgba(251, 146, 60, 0.12);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.25);
}
.oz-mode-pro {
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.25);
}

/* Encabezado del chat: fila título + estado de IA */
.oz-chat-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

/* Indicador de estado de IA en el encabezado */
.oz-ai-status {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: background .3s, color .3s;
}
.oz-ai-status--local,
.oz-ai-status--fallback {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text3);
  border-color: rgba(148, 163, 184, 0.2);
}
.oz-ai-status--gemini-flash-lite,
.oz-ai-status--gemini-flash {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.25);
}
.oz-ai-status--gemini-pro {
  background: rgba(167, 139, 250, 0.12);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.25);
}
/* ── Fase J.1 — Selector de modo Local / Auto / IA Gemini ────── */
.oz-mode-selector-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 4px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.oz-mode-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
}
.oz-mode-selector {
  display: flex;
  gap: 3px;
  background: var(--surface2);
  border-radius: 6px;
  padding: 2px;
  border: 1px solid var(--border);
}
.oz-mode-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 3px 10px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.oz-mode-btn:hover {
  background: var(--surface3);
  color: var(--text);
}
.oz-mode-btn--active,
.oz-mode-btn[aria-pressed="true"] {
  background: var(--surface3);
  color: var(--gold);
  border: 1px solid rgba(212,175,55,.25);
}
#oz-mode-btn-ai.oz-mode-btn--active {
  color: var(--blue);
  border-color: rgba(59,130,246,.25);
}

/* ── Micro-aviso de cambio de modo ──────────────────────────── */
.oz-mode-notice {
  font-size: 10px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  transition: opacity .3s;
}
.oz-mode-notice--local   { color: var(--text2); background: var(--surface); }
.oz-mode-notice--auto    { color: var(--gold);  background: rgba(212,175,55,.06); }
.oz-mode-notice--ai      { color: var(--blue);  background: rgba(59,130,246,.06); }

/* ── Markdown renderizado en respuestas Gemini (Fase J.1 corrección) ── */
.oz-msg-text--rich { line-height: 1.55; }

.oz-resp-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 10px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(212,175,55,.18);
}
.oz-resp-h:first-child { margin-top: 2px; }

.oz-resp-p {
  margin: 4px 0;
  line-height: 1.6;
}
.oz-resp-p:first-child { margin-top: 0; }

.oz-resp-ul,
.oz-resp-ol {
  margin: 6px 0;
  padding-left: 18px;
  line-height: 1.55;
}
.oz-resp-ul li,
.oz-resp-ol li {
  margin-bottom: 4px;
}
.oz-resp-ul li:last-child,
.oz-resp-ol li:last-child { margin-bottom: 0; }

.oz-resp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 0;
  opacity: .5;
}

.oz-msg-text--rich strong { font-weight: 700; }
.oz-msg-text--rich em     { font-style: italic; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════════
   FASE J.2.1 — Chat redimensionable + Modo lectura + Copiar respuesta
   ═══════════════════════════════════════════════════════════════════ */

/* ── Handles de redimensionamiento ── */
.oz-panel--chat { position: relative; }

.oz-resize-handle {
  position: absolute;
  z-index: 10;
  background: transparent;
  transition: background .15s;
}
.oz-resize-handle:hover,
.oz-resize-handle.oz-resize-active {
  background: rgba(212,175,55,.22);
}

/* Líneas cardinales */
.oz-resize-n  { top: -4px;    left: 14px;  right: 14px;  height: 8px; cursor: n-resize;  }
.oz-resize-s  { bottom: -4px; left: 14px;  right: 14px;  height: 8px; cursor: s-resize;  }
.oz-resize-e  { right: -4px;  top: 14px;   bottom: 14px; width: 8px;  cursor: e-resize;  }
.oz-resize-w  { left: -4px;   top: 14px;   bottom: 14px; width: 8px;  cursor: w-resize;  }

/* Esquinas */
.oz-resize-ne { top: -5px;    right: -5px;  width: 18px; height: 18px; cursor: ne-resize; border-radius: 0 4px 0 0; }
.oz-resize-nw { top: -5px;    left: -5px;   width: 18px; height: 18px; cursor: nw-resize; border-radius: 4px 0 0 0; }
.oz-resize-se { bottom: -5px; right: -5px;  width: 18px; height: 18px; cursor: se-resize; border-radius: 0 0 4px 0; }
.oz-resize-sw { bottom: -5px; left: -5px;   width: 18px; height: 18px; cursor: sw-resize; border-radius: 0 0 0 4px; }

/* Indicador visual en las esquinas al hover */
.oz-resize-ne::after, .oz-resize-nw::after,
.oz-resize-se::after, .oz-resize-sw::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  background: rgba(212,175,55,.0);
  transition: background .15s;
}
.oz-resize-ne:hover::after, .oz-resize-nw:hover::after,
.oz-resize-se:hover::after, .oz-resize-sw:hover::after,
.oz-resize-ne.oz-resize-active::after, .oz-resize-nw.oz-resize-active::after,
.oz-resize-se.oz-resize-active::after, .oz-resize-sw.oz-resize-active::after {
  background: rgba(212,175,55,.35);
}

/* ── Modo lectura amplia — solo overrides visuales ──────────────
   Tamaño y posición se asignan vía JS en _toggleReadingMode()
   para que _initResizable pueda seguir actuando.
─────────────────────────────────────────────────────────────── */

/* 1. Ocultar banner/imagen grande de Oz */
.oz-panel--chat.oz-panel--reading .oz-panel-visual {
  display: none;
}

/* 2. Cabecera superior (avatar + nombre + estado + cerrar) más compacta */
.oz-panel--chat.oz-panel--reading .oz-panel-header {
  padding: 7px 12px;
}
.oz-panel--chat.oz-panel--reading .oz-avatar {
  width: 26px; height: 26px; font-size: 14px;
  box-shadow: 0 0 8px rgba(212,175,55,.2);
}
.oz-panel--chat.oz-panel--reading .oz-name   { font-size: 11px; }
.oz-panel--chat.oz-panel--reading .oz-status { font-size: 9px; }
.oz-panel--chat.oz-panel--reading .oz-status-dot { width: 5px; height: 5px; }

/* 3. Cabecera del chat: ocultar título/badge duplicado, solo botones de acción */
.oz-panel--chat.oz-panel--reading .oz-chat-header-title-wrap {
  display: none; /* "Chat con Oz" + badge — ya visibles en oz-panel-header */
}
.oz-panel--chat.oz-panel--reading .oz-chat-header {
  padding: 2px 8px;
  background: transparent;
  border-bottom: none;
  min-height: 28px;
}

/* 4. Selector de modo más compacto */
.oz-panel--chat.oz-panel--reading .oz-mode-selector-row {
  padding: 3px 10px 2px;
}
.oz-panel--chat.oz-panel--reading .oz-mode-label  { font-size: 9px; }
.oz-panel--chat.oz-panel--reading .oz-mode-btn    { font-size: 9.5px; padding: 2px 7px; }

/* 5. Mensajes más legibles */
.oz-panel--chat.oz-panel--reading .oz-msg         { max-width: 98%; }
.oz-panel--chat.oz-panel--reading .oz-msg-bubble  { font-size: 13.5px; line-height: 1.7; }
.oz-panel--chat.oz-panel--reading .oz-msg-steps li { line-height: 1.65; }

/* 6. Área de texto de entrada más compacta */
.oz-panel--chat.oz-panel--reading .oz-chat-input-wrap { padding: 6px 10px 4px; }

/* 7. El historial de mensajes crece para llenar el espacio extra */
.oz-panel--chat.oz-panel--reading .oz-chat-history {
  padding: 12px 16px;
}

/* 8. Botón modo lectura activo se ilumina dorado */
.oz-panel--chat.oz-panel--reading #oz-reading-mode-btn {
  color: var(--gold);
  background: rgba(212,175,55,.1);
}

/* ── Botón modo lectura ── */
.oz-reading-mode-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 5px;
  transition: color .15s, background .15s;
}
.oz-reading-mode-btn:hover,
.oz-reading-mode-btn[aria-pressed="true"] {
  color: var(--gold);
  background: rgba(212,175,55,.1);
}

/* ── Botón copiar respuesta ── */
.oz-copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text3);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .03em;
  margin-top: 6px;
  padding: 2px 8px;
  transition: color .15s, border-color .15s, background .15s;
  display: inline-block;
}
.oz-copy-btn:hover {
  color: var(--text);
  border-color: rgba(212,175,55,.4);
  background: rgba(212,175,55,.06);
}

/* Ocultar handles en mobile donde no tiene sentido drag */
@media (max-width: 640px) {
  .oz-resize-handle { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FASE J.2.1 — Panel arrastrable tipo ventana (drag + safe position)
   ═══════════════════════════════════════════════════════════════════ */

/* Cursor grab en el header del panel */
.oz-panel-header { cursor: grab; }

/* Durante el drag: grabbing en todo el documento */
.oz-panel.oz-dragging .oz-panel-header { cursor: grabbing; }
.oz-panel.oz-dragging * { user-select: none; }

/* Botón restaurar posición */
.oz-reset-pos-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 5px;
  transition: color .15s, background .15s;
}
.oz-reset-pos-btn:hover {
  color: var(--text2);
  background: rgba(148,163,184,.1);
}

/* Sombra sutil extra mientras se arrastra */
.oz-panel.oz-dragging {
  box-shadow: 0 16px 60px rgba(0,0,0,.85), 0 0 40px rgba(212,175,55,.12);
}

/* Mantener z-index alto durante drag */
.oz-panel.oz-dragging { z-index: 1010; }