/* ==========================================================================
   OrozcoyCo CC - Estilos Principales
   Sistema de Gestion Contable
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Temas y Variables (Lila | Azul | Oscuro)
   -------------------------------------------------------------------------- */
:root,
[data-color="blue"] {
  --primary:        #2563eb;
  --primary-light:  #3b82f6;
  --primary-dark:   #1d4ed8;
  --primary-bg:     #eff6ff;
  --primary-muted:  rgba(37, 99, 235, 0.12);
  /* Color de texto sobre fondo --primary. Default blanco para que botones
     primary tengan contraste WCAG-AA. Override en temas claros (mono light
     usa #fff porque primary es negro, mono dark usa #000 porque primary
     es blanco). Pensado para reemplazar `color:white` hardcoded en botones. */
  --on-primary:     #ffffff;

  --bg:             #ffffff;
  --surface:        #ffffff;
  --surface-2:      #f8fafc;
  --border:         #e2e8f0;
  --border-2:       #cbd5e1;

  --text:           #0f172a;
  --text-2:         #475569;
  --text-muted:     #94a3b8;

  --sidebar-bg:     #ffffff;
  --sidebar-text:   #475569;
  --sidebar-active: var(--primary);
  --sidebar-hover:  rgba(0,0,0,0.05);
  --sidebar-border: var(--border);

  --success:        #059669;
  --success-bg:     #ecfdf5;
  --warning:        #d97706;
  --warning-bg:     #fffbeb;
  --danger:         #dc2626;
  --danger-bg:      #fef2f2;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  --sidebar-width: 240px;
  --header-height: 60px;
  --transition: 200ms ease;

  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Aliases --color-* para componentes legacy (components.css, responsive.css).
     Mapean al sistema sin prefijo. Mantener hasta migrar el CSS completo. */
  --color-primary:         var(--primary);
  --color-primary-bg:      var(--primary-bg);
  --color-primary-dark:    var(--primary-dark);
  --color-secondary:       var(--primary-light);
  --color-secondary-bg:    var(--primary-bg);
  --color-secondary-dark:  var(--primary-dark);
  --color-accent:          var(--primary);
  --color-accent-bg:       var(--primary-bg);
  --color-accent-dark:     var(--primary-dark);
  --color-bg:              var(--bg);
  --color-bg-alt:          var(--surface-2);
  --color-surface:         var(--surface);
  --color-border:          var(--border);
  --color-border-dark:     var(--border-2);
  --color-text:            var(--text);
  --color-text-secondary:  var(--text-2);
  --color-text-muted:      var(--text-muted);
  --color-danger:          var(--danger);
  --color-danger-bg:       var(--danger-bg);
  --color-danger-dark:     var(--danger);
}

[data-color="lila"] {
  --primary:        #7c3aed;
  --primary-light:  #8b5cf6;
  --primary-dark:   #6d28d9;
  --primary-bg:     #f5f3ff;
  --primary-muted:  rgba(124, 58, 237, 0.12);
  --sidebar-active: var(--primary);
}

/* Tema CUTE: pasteles amarillo + rosa + lila (inspirado en MODELO FINANZAS) */
[data-color="cute"] {
  --primary:        #d48fb8;            /* rosa cute */
  --primary-light:  #ffafcc;
  --primary-dark:   #b27293;
  --primary-bg:     #fff5f8;            /* fondo rosa muy suave */
  --primary-muted:  rgba(212, 143, 184, 0.15);
  --sidebar-active: var(--primary);

  --bg:             #fff8ec;            /* fondo amarillo muy suave */
  --surface:        #ffffff;
  --surface-2:      #fff3e4;
  --border:         #ffe4ea;            /* rosa pastel */
  --border-2:       #fff3b0;            /* amarillo claro */

  --text:           #5d4e6d;            /* lavanda oscuro */
  --text-2:         #8a6b9e;
  --text-muted:     #a892bd;

  --sidebar-bg:     linear-gradient(180deg, #cdb4db 0%, #ffafcc 100%);
  --sidebar-text:   #fff;
  --sidebar-hover:  rgba(255, 255, 255, 0.2);
  --sidebar-border: rgba(255, 255, 255, 0.15);

  --success:        #2d8f4f;
  --success-bg:     #c5f4d4;
  --warning:        #d97706;
  --warning-bg:     #fff3b0;
  --danger:         #c53052;
  --danger-bg:      #ffafcc;
}

/* Cute + oscuro: mantener pasteles pero sobre fondo noche */
[data-theme="dark"][data-color="cute"] {
  --bg:             #2a1e3d;
  --surface:        #3d2f50;
  --surface-2:      #2f2344;
  --border:         #5d4e6d;
  --text:           #ffc8dd;
  --text-2:         #e8d7f5;
  --primary-bg:     rgba(255, 175, 204, 0.15);
}

[data-theme="dark"] {
  --bg:            #0f172a;
  --surface:       #1e293b;
  --surface-2:     #162032;
  --border:        #334155;
  --border-2:      #475569;

  --text:          #f1f5f9;
  --text-2:        #94a3b8;
  --text-muted:    #64748b;

  --sidebar-bg:     #0f172a;
  --sidebar-text:   #94a3b8;
  --sidebar-hover:  rgba(255,255,255,0.06);
  --sidebar-border: rgba(255,255,255,0.08);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.3);

  --success-bg:  rgba(5, 150, 105, 0.15);
  --warning-bg:  rgba(217, 119, 6, 0.15);
  --danger-bg:   rgba(220, 38, 38, 0.15);
  --primary-bg:  rgba(37, 99, 235, 0.15);
}

[data-theme="dark"][data-color="lila"] {
  --primary-bg: rgba(124, 58, 237, 0.15);
}

/* Tema MARCA: paleta oficial orozco&co (azul #4F6BFF + lila #A78BFA) */
[data-color="marca"] {
  --primary:        #4F6BFF;
  --primary-light:  #7B92FF;
  --primary-dark:   #3950d8;
  --primary-bg:     #f0eeff;
  --primary-muted:  rgba(139, 111, 232, 0.14);

  --bg:             #fafaff;
  --surface:        #ffffff;
  --surface-2:      #f5f3ff;
  --border:         #e6e3f5;
  --border-2:       #d4cfee;

  --text:           #0A0A0F;
  --text-2:         #4a4a5e;
  --text-muted:     #8a8ba0;

  --sidebar-bg:     #ffffff;
  --sidebar-text:   #4a4a5e;
  --sidebar-active: #8B6FE8;
  --sidebar-hover:  rgba(139, 111, 232, 0.08);
  --sidebar-border: #e6e3f5;

  --font:           'Geist', 'Inter', system-ui, sans-serif;
}

/* Tema MONO: blanco/negro puro, neutro sin tinte de color */
[data-color="mono"] {
  --primary:        #000000;
  --primary-light:  #333333;
  --primary-dark:   #000000;
  --primary-bg:     #f5f5f5;
  --primary-muted:  rgba(0, 0, 0, 0.10);

  --bg:             #ffffff;
  --surface:        #ffffff;
  --surface-2:      #fafafa;
  --border:         #e5e5e5;
  --border-2:       #d4d4d4;

  --text:           #000000;
  --text-2:         #333333;
  --text-muted:     #737373;

  --sidebar-bg:     #ffffff;
  --sidebar-text:   #333333;
  --sidebar-active: #000000;
  --sidebar-hover:  rgba(0, 0, 0, 0.05);
  --sidebar-border: #e5e5e5;
}

/* Marca + oscuro: fondos casi-negros del manual de marca */
[data-theme="dark"][data-color="marca"] {
  --bg:             #07070C;
  --surface:        #12131F;
  --surface-2:      #191A29;
  --border:         rgba(255, 255, 255, 0.08);
  --border-2:       rgba(255, 255, 255, 0.14);

  --text:           #F5F5F7;
  --text-2:         #8A8B9A;
  --text-muted:     #5E5F70;

  --sidebar-bg:     #07070C;
  --sidebar-text:   #8A8B9A;
  --sidebar-hover:  rgba(255, 255, 255, 0.04);
  --sidebar-border: rgba(255, 255, 255, 0.08);

  --primary-bg:     rgba(79, 107, 255, 0.15);
  --primary-muted:  rgba(167, 139, 250, 0.18);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
fieldset { border: none; }

/* --------------------------------------------------------------------------
   3. Login Page
   -------------------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 1.5rem;
}

.login-container { width: 100%; max-width: 400px; }

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-md);
}

.login-card__header { text-align: center; margin-bottom: 2rem; }

.login-card__logo { margin-bottom: 1rem; }

.login-card__logo-fallback {
  width: 52px;
  height: 52px;
  background: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.login-card__logo-text { color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; }
.login-card__logo-img { height: 48px; margin: 0 auto; }
.login-card__title { font-size: 1.375rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; letter-spacing: -0.02em; }
.login-card__subtitle { font-size: 0.875rem; color: var(--text-2); }

.login-card__form { display: flex; flex-direction: column; gap: 1.25rem; }

.login-card__footer { text-align: center; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.login-card__copyright { font-size: 0.75rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   4. Form elements
   -------------------------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); }
.form-input-wrapper { position: relative; }

.form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-input-wrapper .form-input { padding-right: 2.75rem; }
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-muted);
}
.form-input::placeholder { color: var(--text-muted); }

.form-input-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.form-input-icon:hover { color: var(--text-2); }

.form-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  outline: none;
  appearance: none;
  cursor: pointer;
}
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-muted);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--outline {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-2);
}
.btn--outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }

.btn--ghost {
  background: transparent;
  color: var(--text-2);
}
.btn--ghost:hover { background: var(--surface-2); }

.btn--danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn--danger:hover { background: #b91c1c; }

.btn--full { width: 100%; margin-top: 0.5rem; }
.btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn--lg { padding: 0.75rem 1.5rem; font-size: 1rem; }

/* --------------------------------------------------------------------------
   6. Alert
   -------------------------------------------------------------------------- */
.alert { padding: 0.625rem 0.875rem; border-radius: var(--radius-md); font-size: 0.875rem; }
.alert--error { background: var(--danger-bg); border: 1px solid rgba(220,38,38,0.25); color: var(--danger); }
.alert--success { background: var(--success-bg); border: 1px solid rgba(5,150,105,0.25); color: var(--success); }
.alert--warning { background: var(--warning-bg); border: 1px solid rgba(217,119,6,0.25); color: var(--warning); }

/* --------------------------------------------------------------------------
   7. App Layout
   -------------------------------------------------------------------------- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   8. Sidebar
   -------------------------------------------------------------------------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border, var(--border));
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform var(--transition);
  overflow: hidden;
}

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: var(--header-height);
  border-bottom: 1px solid var(--sidebar-border, var(--border));
  flex-shrink: 0;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  overflow: hidden;
}

.sidebar__brand-icon {
  width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.sidebar__brand-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__close-btn {
  color: var(--sidebar-text);
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  display: none;
}
.sidebar__close-btn:hover { background: var(--sidebar-hover); }

.sidebar__nav {
  flex: 1;
  padding: 0.75rem 0.75rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar__menu { display: flex; flex-direction: column; gap: 2px; }

.sidebar__item {}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 0.875rem;
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.sidebar__link:hover {
  background: var(--sidebar-hover);
  color: var(--primary);
}
.sidebar__item--active .sidebar__link {
  background: var(--primary);
  color: #fff;
}
.sidebar__item--active .sidebar__link:hover {
  background: var(--primary-light);
}

.sidebar__icon {
  flex-shrink: 0;
  opacity: 0.85;
}
.sidebar__item--active .sidebar__icon,
.sidebar__link:hover .sidebar__icon { opacity: 1; }

.sidebar__footer {
  padding: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.sidebar__logout-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5625rem 0.875rem;
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.sidebar__logout-btn:hover { background: rgba(220,38,38,0.15); color: #f87171; }

/* --------------------------------------------------------------------------
   9. Main Wrapper & Header
   -------------------------------------------------------------------------- */
.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--header-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  gap: 1rem;
}

.header__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--text-2);
}
.header__menu-btn:hover { background: var(--surface-2); }

.header__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
}

.header__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Theme switcher */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 3px;
}

.theme-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.theme-btn:hover { transform: scale(1.1); }
.theme-btn--active { border-color: var(--text); }
.theme-btn--blue  { background: #2563eb; }
.theme-btn--lila  { background: #7c3aed; }
.theme-btn--cute  { background: linear-gradient(135deg, #fff3b0 0%, #ffafcc 50%, #cdb4db 100%); }
.theme-btn--marca { background: linear-gradient(135deg, #4F6BFF 0%, #A78BFA 100%); }
.theme-btn--mono  { background: linear-gradient(135deg, #ffffff 0% 50%, #000000 50% 100%); }
.theme-btn--dark  { background: #0f172a; }

.header__user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.header__user-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header__user-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   10. Main Content
   -------------------------------------------------------------------------- */
.main-content {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1400px;
  width: 100%;
  background: var(--bg);
}

/* --------------------------------------------------------------------------
   11. KPI Cards
   -------------------------------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.kpi-card:hover { box-shadow: var(--shadow-md); }

.kpi-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-card__icon--blue   { background: var(--primary-bg); color: var(--primary); }
.kpi-card__icon--green  { background: var(--success-bg); color: var(--success); }
.kpi-card__icon--yellow { background: var(--warning-bg); color: var(--warning); }
.kpi-card__icon--red    { background: var(--danger-bg);  color: var(--danger);  }

.kpi-card__content { min-width: 0; }
.kpi-card__label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   12. Charts Grid
   -------------------------------------------------------------------------- */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   13. Card
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}

.card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.card__body { padding: 1.25rem; }

.chart-container {
  position: relative;
  height: 220px;
}

/* --------------------------------------------------------------------------
   14. Table
   -------------------------------------------------------------------------- */
.table-responsive { overflow-x: auto; }

.table { width: 100%; }
.table thead tr {
  background: var(--surface-2);
}
.table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------------------
   15. Empty State
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 0.75rem;
  text-align: center;
}
.empty-state__text { color: var(--text-muted); font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   16. Badge / Tag
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}
.badge--blue    { background: var(--primary-bg); color: var(--primary); }
.badge--green   { background: var(--success-bg); color: var(--success); }
.badge--yellow  { background: var(--warning-bg); color: var(--warning); }
.badge--red     { background: var(--danger-bg);  color: var(--danger);  }
.badge--gray    { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   17. Toast notifications
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  color: var(--text);
  animation: toast-in 250ms ease;
  max-width: 360px;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.toast--success { border-left: 3px solid var(--success); }
.toast--error   { border-left: 3px solid var(--danger); }
.toast--warning { border-left: 3px solid var(--warning); }
.toast--info    { border-left: 3px solid var(--primary); }

/* --------------------------------------------------------------------------
   18. Modal
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fade-in 200ms ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slide-up 200ms ease;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.modal__title { font-size: 1rem; font-weight: 600; color: var(--text); }
.modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   19. Spinner
   -------------------------------------------------------------------------- */
.spinner {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   20. Sidebar overlay (mobile)
   -------------------------------------------------------------------------- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}
.sidebar-overlay--visible { display: block; }

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 260px;
  }
  .sidebar--open {
    transform: translateX(0);
  }
  .sidebar__close-btn { display: flex; }
  .main-wrapper { margin-left: 0; }
  .header__menu-btn { display: flex; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .main-content { padding: 1rem; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .header { padding: 0 1rem; }
}

/* --------------------------------------------------------------------------
   22. Sidebar logo & layout alternativo (servicios/calendario/pagos)
   -------------------------------------------------------------------------- */
.sidebar__logo {
  height: 34px;
  width: auto;
  max-width: 170px;
  display: block;
  color: #fff;
}

/* sidebar__brand directo en <aside> (sin sidebar__header wrapper) */
.sidebar > .sidebar__brand {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  height: var(--header-height);
  border-bottom: 1px solid var(--sidebar-border, var(--border));
  flex-shrink: 0;
}

/* sidebar__link--active (clases directas, sin sidebar__item) */
.sidebar__link--active {
  background: var(--primary) !important;
  color: #fff !important;
}

/* .sidebar ~ .main-content: layout wrapper en servicios/cal/pagos */
.sidebar ~ .main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* .page-content: zona interior de contenido */
.page-content {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Header dentro de .main-content directo */
.main-content > .header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Responsive para sidebar ~ main-content */
@media (max-width: 768px) {
  .sidebar ~ .main-content { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   23. Modal overlay (backdrop para modales custom)
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1rem;
  overflow-y: auto;
}
.modal--large { max-width: 1100px; }
.modal--sm    { max-width: 440px; }

/* --------------------------------------------------------------------------
   24. Toolbar (barra de herramientas: búsqueda + filtros + acciones)
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  box-shadow: var(--shadow-sm);
}
.toolbar__search { flex: 1 1 220px; }
.toolbar__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.toolbar__actions { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }

/* --------------------------------------------------------------------------
   25. Search box
   -------------------------------------------------------------------------- */
.search-box { position: relative; display: flex; align-items: center; }
.search-box__icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
}
.search-box__input {
  width: 100%;
  padding: 0.5rem 0.875rem 0.5rem 2.5rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-box__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-muted);
}
.search-box__input::placeholder { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   26. Form layout: rows y anchos relativos
   -------------------------------------------------------------------------- */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}
.form-group--half    { flex: 1 1 calc(50% - 0.5rem);    min-width: 160px; }
.form-group--third   { flex: 1 1 calc(33.333% - 0.67rem); min-width: 130px; }
.form-group--quarter { flex: 1 1 calc(25% - 0.75rem);   min-width: 110px; }
.form-group--sixth   { flex: 0 0 72px; }
.form-group--inline  { display: flex; flex-direction: column; gap: 0.25rem; }
.form-select--sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; height: auto; }
.form-input--sm  { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.form-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  resize: vertical;
  min-height: 80px;
  outline: none;
  font-family: inherit;
  line-height: 1.5;
}
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-muted);
}
.required { color: var(--danger); margin-left: 2px; }

/* --------------------------------------------------------------------------
   27. Collapsible sections (fieldset con legend clickeable)
   -------------------------------------------------------------------------- */
.collapsible-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.collapsible-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
  width: 100%;
  text-align: left;
}
.collapsible-section__title { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.collapsible-section__chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition);
}
.collapsible-section__content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--surface);
}
.collapsible-section:not(.collapsible-section--open) .collapsible-section__content { display: none; }
.collapsible-section--open .collapsible-section__chevron { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   28. Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 0;
  gap: 0.75rem;
}
.pagination__btn {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--text-2);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--transition);
}
.pagination__btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-bg);
}
.pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination__info { font-size: 0.8125rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   29. Checkbox grid (obligaciones tributarias)
   -------------------------------------------------------------------------- */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition);
  font-size: 0.875rem;
  color: var(--text);
}
.checkbox-item:hover { background: var(--surface-2); }
.checkbox-item input[type="checkbox"] { flex-shrink: 0; accent-color: var(--primary); }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }

/* --------------------------------------------------------------------------
   30. Dynamic entries (matrículas, campos extra)
   -------------------------------------------------------------------------- */
.dynamic-entry {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dynamic-entry__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.dynamic-entry__title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin: 0; }
.dynamic-entry--inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   31. Upload zone (importar)
   -------------------------------------------------------------------------- */
.upload-zone {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.upload-zone:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.upload-zone__text { font-size: 0.875rem; font-weight: 500; color: var(--text-2); }
.upload-zone__hint { font-size: 0.75rem; color: var(--text-muted); }
.upload-zone__input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* --------------------------------------------------------------------------
   32. Obligacion items (con campos condicionales)
   -------------------------------------------------------------------------- */
.obligacion-item { margin-bottom: 0.5rem; }
.obligacion-campos { gap: 0.5rem; margin-left: 1.5rem; margin-top: 4px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   33. Misc utility
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.btn--xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.empty-state__sub { font-size: 0.8125rem; color: var(--text-muted); }
.btn__loader { display: inline-flex; align-items: center; }
.import-preview { margin-top: 1rem; }
.import-preview__info { font-size: 0.875rem; color: var(--text-2); margin-bottom: 0.5rem; }
.import-preview__errors { background: var(--danger-bg); border: 1px solid rgba(220,38,38,0.2); border-radius: var(--radius-md); padding: 0.75rem; font-size: 0.8125rem; color: var(--danger); }

/* --------------------------------------------------------------------------
   34. Collapsible JS toggle (via data-toggle)
   -------------------------------------------------------------------------- */
[data-toggle] { cursor: pointer; user-select: none; }

@media (max-width: 640px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar__actions { margin-left: 0; }
  .form-group--half, .form-group--third, .form-group--quarter { min-width: 100%; }
}

/* =================================================================
   CALENDARIO TRIBUTARIO — Grid mensual
   ================================================================= */
.calendario__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 900px) {
  .calendario__layout { grid-template-columns: 1fr; }
}
.calendario__grid { display: flex; flex-direction: column; }
.calendario__header-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
}
.calendario__celdas {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dia {
  aspect-ratio: 1;
  min-height: 70px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.15s;
  overflow: hidden;
}
.cal-dia:hover:not(.cal-dia--vacio) {
  background: var(--primary-muted);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.cal-dia--vacio { background: transparent; border: none; cursor: default; }
.cal-dia--hoy { border: 2px solid var(--primary); background: var(--primary-muted); }
.cal-dia--con-obligaciones { border-left: 3px solid var(--primary); }
.cal-dia--success { background: var(--success-bg); }
.cal-dia--warning { background: var(--warning-bg); }
.cal-dia--danger  { background: var(--danger-bg); }
.cal-dia__numero { font-weight: 600; font-size: 14px; color: var(--text); }
.cal-dia__badges { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.cal-dia__badge {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}
.cal-dia__badge--more { background: var(--text-muted); }
.cal-dia__count {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 10px;
  color: var(--text-2);
  font-weight: 600;
}
.calendario__sidebar {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 12px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}
.cal-sidebar__title { margin: 0 0 8px; font-size: 14px; color: var(--text); }
.mes-actual-label {
  font-size: 16px;
  font-weight: 600;
  padding: 0 12px;
  color: var(--text);
}
.tabs__btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  transition: all 0.15s;
}
.tabs__btn:hover { background: var(--surface-2); }
.tabs__btn--active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tabs__list { display: flex; gap: 6px; flex-wrap: wrap; }

/* =================================================================
   GESTIÓN DE SERVICIOS — resaltado suave de filas con valor
   ================================================================= */
.servicio-row--con-valor {
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.08), rgba(5, 150, 105, 0.03));
}
.servicio-row--con-valor td:first-child {
  border-left: 3px solid #059669;
}
[data-color="cute"] .servicio-row--con-valor {
  background: linear-gradient(90deg, rgba(255, 175, 204, 0.18), rgba(255, 243, 176, 0.08));
}
[data-color="cute"] .servicio-row--con-valor td:first-child {
  border-left: 3px solid #d48fb8;
}
[data-theme="dark"] .servicio-row--con-valor {
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.18), rgba(5, 150, 105, 0.05));
}

/* =================================================================
   CONFIG: tablas con scroll horizontal cuando no caben
   ================================================================= */
#config-bancos-tabla,
#config-clasif-gasto-tabla,
#config-grupos-gasto-tabla,
#config-cat-gasto-tabla,
#config-categorias-tabla,
#config-tipos-tabla,
#config-obligaciones-tabla,
#config-estados-tabla,
#config-municipios-tabla,
#config-tiposdoc-tabla {
  overflow-x: auto;
  max-width: 100%;
}
#config-bancos-tabla table,
#config-clasif-gasto-tabla table,
#config-grupos-gasto-tabla table,
#config-cat-gasto-tabla table,
#config-categorias-tabla table,
#config-tipos-tabla table,
#config-obligaciones-tabla table,
#config-estados-tabla table,
#config-municipios-tabla table,
#config-tiposdoc-tabla table {
  min-width: 520px;
}

/* Padding final para evitar que se corte el contenido al hacer scroll */
.finanzas-page .page-content {
  padding-bottom: 60px !important;
}

/* Botones de acción de la última columna: no compactar */
.fin-table th:last-child,
.fin-table td:last-child {
  white-space: nowrap;
  min-width: 80px;
}

/* =================================================================
   CALENDARIO — Toggle de vista (Día / Semana / Mes) + listas
   ================================================================= */
.view-btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.view-btn:last-child { border-right: none; }
.view-btn:hover { background: var(--surface-2); }
.view-btn--active { background: var(--primary); color: #fff; }

/* Lista detallada (para vista Día o Semana) */
.cal-lista {
  padding: 12px;
  max-height: 600px;
  overflow-y: auto;
}
.cal-lista__dia {
  margin-bottom: 16px;
  border-left: 3px solid var(--primary);
  padding-left: 10px;
}
.cal-lista__dia--hoy { border-left-color: var(--success); }
.cal-lista__dia-titulo {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin: 0 0 6px;
  padding: 6px 10px;
  background: var(--primary-muted);
  border-radius: 6px;
}
.cal-lista__item {
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px dashed var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
}
.cal-lista__item:last-child { border-bottom: none; }
.cal-lista__badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* =================================================================
   BUSQUEDA GLOBAL (Ctrl+K)
   ================================================================= */
.bg-item:hover, .bg-item--active {
  background: var(--primary-muted);
}
.bg-grupo { margin-bottom: 4px; }
#bg-trigger:hover { transform: translateY(-2px); transition: all 0.15s; }

/* =================================================================
   FIN-CHIP — chips de filtro (CxC, etc.)
   ================================================================= */
.fin-chip {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.fin-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.fin-chip--active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-muted);
}

/* ==========================================================================
   OROZCO&CO — Sistema de marca (Abril 2026)
   Prefijo "oz-" para aislar estilos — no pisa nada existente.
   Auto-adapta al tema: claro por defecto, oscuro con [data-theme="dark"].
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,400;1,500&display=swap');

.oz-logo {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
  user-select: none;
  color: #0A0A0F;
}
.oz-logo__text {
  position: relative;
  z-index: 3;
  white-space: nowrap;
}
.oz-logo__amp {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #4F6BFF 0%, #8B6FE8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 0.02em;
}
.oz-logo__symbol {
  position: absolute;
  right: -0.6em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  width: 1.8em;
  height: 2.1em;
}
.oz-logo__symbol svg {
  width: 100%;
  height: 100%;
  display: block;
}
.oz-logo__symbol svg path {
  stroke: #8B6FE8;
  opacity: 0.35;
}

/* Dark: cuando el tema global está en oscuro o un padre lo fuerza */
[data-theme="dark"] .oz-logo,
.oz-logo--dark {
  color: #F5F5F7;
}
[data-theme="dark"] .oz-logo .oz-logo__amp,
.oz-logo--dark .oz-logo__amp {
  background: linear-gradient(135deg, #7B92FF 0%, #A78BFA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .oz-logo .oz-logo__symbol svg path,
.oz-logo--dark .oz-logo__symbol svg path {
  stroke: #A78BFA;
  opacity: 0.5;
}

/* Light explícito (sobre fondos claros forzados) */
.oz-logo--light { color: #0A0A0F; }
.oz-logo--light .oz-logo__amp {
  background: linear-gradient(135deg, #4F6BFF 0%, #8B6FE8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.oz-logo--light .oz-logo__symbol svg path {
  stroke: #8B6FE8;
  opacity: 0.35;
}

/* Tamaños */
.oz-logo--sm { font-size: 1.25rem; }
.oz-logo--md { font-size: 1.5rem; }
.oz-logo--lg { font-size: 2.25rem; }
.oz-logo--xl { font-size: 3.5rem; }

/* Ajuste específico para el sidebar del despacho (navbar lateral fija) */
.sidebar__brand .oz-logo {
  font-size: 1.35rem;
  padding-right: 1.2em; /* deja aire para el Chōkurei */
}

/* App icon squircle (favicon-like, opcional) */
.oz-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4F6BFF 0%, #A78BFA 100%);
  border-radius: 25%;
  position: relative;
  box-shadow: 0 10px 30px rgba(79,107,255,0.35),
              inset 0 1px 0 rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.oz-icon::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent 50%);
  pointer-events: none;
}
.oz-icon svg {
  position: relative;
  z-index: 2;
  width: 58%;
  height: 68%;
}
.oz-icon svg path { stroke: white; }
.oz-icon--xs { width: 32px; height: 32px; border-radius: 8px; }
.oz-icon--sm { width: 44px; height: 44px; border-radius: 11px; }
.oz-icon--md { width: 64px; height: 64px; border-radius: 16px; }
.oz-icon--lg { width: 96px; height: 96px; border-radius: 24px; }
.oz-icon--xl { width: 128px; height: 128px; border-radius: 32px; }

/* =========================================================================
   TEMA MARCA — overrides globales para colores hardcodeados en JS
   (js/agenda.js, js/dashboard.js, js/clientes.js, js/calendario.js
    usan inline styles con pasteles que no respetan el tema activo)
   ========================================================================= */

/* ── Dashboard KPI cards (js/agenda.js líneas 339-363) ──────────── */
[data-theme="dark"][data-color="marca"] .kpi[style*="#bde0fe"] {
  background: linear-gradient(135deg, #12131F 0%, rgba(99, 102, 241, 0.28) 100%) !important;
  border-color: rgba(167, 139, 250, 0.25) !important;
}
[data-theme="dark"][data-color="marca"] .kpi[style*="#c5f4d4"] {
  background: linear-gradient(135deg, #12131F 0%, rgba(34, 197, 94, 0.25) 100%) !important;
  border-color: rgba(34, 197, 94, 0.40) !important;
}
[data-theme="dark"][data-color="marca"] .kpi[style*="#fff3b0"] {
  background: linear-gradient(135deg, #12131F 0%, rgba(251, 191, 36, 0.25) 100%) !important;
  border-color: rgba(251, 191, 36, 0.40) !important;
}
[data-theme="dark"][data-color="marca"] .kpi[style*="#ffafcc"] {
  background: linear-gradient(135deg, #12131F 0%, rgba(239, 68, 68, 0.25) 100%) !important;
  border-color: rgba(239, 68, 68, 0.40) !important;
}
[data-color="marca"] .kpi[style*="linear-gradient"] > div[style*="color:#334155"] {
  color: #C4B5FD !important;
}
[data-color="marca"] .kpi[style*="linear-gradient"] > div[style*="color:#1e293b"] {
  color: #F5F5F7 !important;
}
[data-theme="dark"][data-color="marca"] .kpi > div[style*="color:#5d4e6d"],
[data-theme="dark"][data-color="marca"] .kpi > div[style*="color:#166534"],
[data-theme="dark"][data-color="marca"] .kpi > div[style*="color:#92400e"],
[data-theme="dark"][data-color="marca"] .kpi > div[style*="color:#9f1239"] {
  color: #8A8B9A !important;
}

/* Light marca: fondos claros con tinte lila en vez de pasteles */
[data-color="marca"]:not([data-theme="dark"]) .kpi[style*="#bde0fe"] {
  background: linear-gradient(135deg, #ffffff 0%, #dce4ff 100%) !important;
}
[data-color="marca"]:not([data-theme="dark"]) .kpi[style*="#c5f4d4"] {
  background: linear-gradient(135deg, #ffffff 0%, #d1fae5 100%) !important;
}
[data-color="marca"]:not([data-theme="dark"]) .kpi[style*="#fff3b0"] {
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%) !important;
}
[data-color="marca"]:not([data-theme="dark"]) .kpi[style*="#ffafcc"] {
  background: linear-gradient(135deg, #ffffff 0%, #fde0ea 100%) !important;
}

/* ── Alertas / banners (js/agenda.js líneas 414, 428) ──────────── */
[data-theme="dark"][data-color="marca"] [style*="background:#fff3b0"][style*="border:2px solid #ffd166"] {
  background: rgba(251, 191, 36, 0.10) !important;
  border-color: rgba(251, 191, 36, 0.40) !important;
  color: #fde68a !important;
}
[data-theme="dark"][data-color="marca"] [style*="background:#ffe4e6"][style*="border:2px solid #f43f5e"] {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.40) !important;
  color: #fca5a5 !important;
}
[data-theme="dark"][data-color="marca"] [style*="background:#fff3b0"][style*="border:2px solid #ffd166"] a,
[data-theme="dark"][data-color="marca"] [style*="background:#ffe4e6"][style*="border:2px solid #f43f5e"] a {
  color: #F5F5F7 !important;
}

/* ── Badges de entidad y estado inline en agenda.js y calendario.js ── */
[data-theme="dark"][data-color="marca"] .badge[style*="background:#fff3b0"] {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #fde68a !important;
}
[data-theme="dark"][data-color="marca"] .badge[style*="background:#ffafcc"] {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}
[data-theme="dark"][data-color="marca"] .badge[style*="background:#bde0fe"] {
  background: rgba(99, 102, 241, 0.20) !important;
  color: #93c5fd !important;
}
[data-theme="dark"][data-color="marca"] .badge[style*="background:#c5f4d4"] {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #86efac !important;
}
[data-theme="dark"][data-color="marca"] .badge[style*="background:#cdb4db"] {
  background: rgba(167, 139, 250, 0.20) !important;
  color: #c4b5fd !important;
}

/* ── Filas de tabla con alerta de vencimiento (js/dashboard.js, js/clientes.js) ── */
[data-theme="dark"][data-color="marca"] tr[style*="background:#fff5f5"],
[data-theme="dark"][data-color="marca"] tr[style*="background:#fff0f2"] {
  background: rgba(239, 68, 68, 0.08) !important;
}

/* ── Modal headers con fondo pastel hardcoded ── */
[data-theme="dark"][data-color="marca"] .modal__header[style*="background:#fff3b0"] {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fde68a !important;
}

/* ──────────────────────────────────────────────────────────────────
   Sidebar — grupo colapsable (Conciliación, etc.)
   Patrón: <details class="sidebar__group"> con summary + submenu.
   ────────────────────────────────────────────────────────────────── */
.sidebar__group {
    margin: 2px 0;
}
.sidebar__group > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    /* hereda look del sidebar__link via clase compartida en el HTML */
}
.sidebar__group > summary::-webkit-details-marker { display: none; }
.sidebar__group-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sidebar__group-arrow {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.15s ease;
}
.sidebar__group[open] > summary .sidebar__group-arrow {
    transform: rotate(180deg);
}
.sidebar__submenu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 12px;
    padding-left: 10px;
    border-left: 2px solid var(--sidebar-hover, rgba(255,255,255,0.08));
    margin-top: 2px;
}
.sidebar__sublink {
    font-size: 0.825rem !important;
    padding: 0.4375rem 0.75rem !important;
    opacity: 0.92;
}
.sidebar__sublink:hover {
    opacity: 1;
}

/* =========================================================================
   DARK MODE "TIPO CÓDIGO" — fondo NEGRO + letras del color del tema
   Pedido literal usuaria 2026-06-13:
   "si lo tengo oscuro en azul entonces todo sea negro y todas las letras
    en azul, y así con el morado y con el rosado [...] tipo código todo
    con fondo negro y letras de colores"
   Aplica a TODOS los temas (blue, lila, cute, marca) en data-theme=dark.
   Va al final del archivo para tener prioridad por orden sobre los bloques
   previos de [data-theme="dark"] (especificidad equivalente).
   ========================================================================= */

/* 1. Fondos base NEGROS reales (override del dark anterior) */
[data-theme="dark"] {
  --bg:             #000000;
  --surface:        #0a0a0a;
  --surface-2:      #050505;
  --border:         rgba(255, 255, 255, 0.10);
  --border-2:       rgba(255, 255, 255, 0.18);
  --sidebar-bg:     #000000;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-hover:  rgba(255, 255, 255, 0.06);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.6);
  --shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.6);
}

/* 2. Letras del color del tema por cada combinación */
[data-theme="dark"][data-color="blue"] {
  --text:           #93c5fd;
  --text-2:         #60a5fa;
  --text-muted:     #475569;
  --sidebar-text:   #60a5fa;
  --primary-bg:     rgba(96, 165, 250, 0.12);
  --primary-muted:  rgba(96, 165, 250, 0.18);
}

[data-theme="dark"][data-color="lila"] {
  --text:           #c4b5fd;
  --text-2:         #a78bfa;
  --text-muted:     #6d28d9;
  --sidebar-text:   #a78bfa;
  --primary-bg:     rgba(167, 139, 250, 0.12);
  --primary-muted:  rgba(167, 139, 250, 0.18);
}

[data-theme="dark"][data-color="cute"] {
  --bg:             #000000;
  --surface:        #0a0a0a;
  --surface-2:      #050505;
  --border:         rgba(255, 175, 204, 0.20);
  --text:           #ffafcc;
  --text-2:         #ff85a8;
  --text-muted:     #b27293;
  --sidebar-bg:     #000000;
  --sidebar-text:   #ffafcc;
  --primary-bg:     rgba(255, 175, 204, 0.10);
  --primary-muted:  rgba(255, 175, 204, 0.18);
}

[data-theme="dark"][data-color="marca"] {
  --bg:             #000000;
  --surface:        #0a0a0a;
  --surface-2:      #050505;
  --border:         rgba(167, 139, 250, 0.20);
  --text:           #c4b5fd;
  --text-2:         #a78bfa;
  --text-muted:     #5E5F70;
  --sidebar-bg:     #000000;
  --sidebar-text:   #a78bfa;
  --primary-bg:     rgba(167, 139, 250, 0.12);
  --primary-muted:  rgba(167, 139, 250, 0.18);
}

/* Mono + oscuro: fondo NEGRO + letras BLANCAS puras
   (pedido usuaria 2026-06-13: "un tema oscuro con toda la letra blanca") */
[data-theme="dark"][data-color="mono"] {
  --bg:             #000000;
  --surface:        #0a0a0a;
  --surface-2:      #050505;
  --border:         rgba(255, 255, 255, 0.15);
  --border-2:       rgba(255, 255, 255, 0.25);
  --text:           #ffffff;
  --text-2:         #e5e5e5;
  --text-muted:     #a3a3a3;
  --primary:        #ffffff;
  --primary-light:  #f5f5f5;
  --primary-dark:   #e5e5e5;
  --primary-bg:     rgba(255, 255, 255, 0.10);
  --primary-muted:  rgba(255, 255, 255, 0.16);
  --on-primary:     #000000;  /* primary es blanco, el texto sobre primary debe ser negro */
  --sidebar-bg:     #000000;
  --sidebar-text:   #ffffff;
  --sidebar-active: #ffffff;
  --sidebar-hover:  rgba(255, 255, 255, 0.08);
  --sidebar-border: rgba(255, 255, 255, 0.12);
}

/* 3. Backgrounds pastel hardcoded inline → negro con texto del tema.
   Cubre los pasteles más comunes que aparecen en js/*.js como
   <tr style="background:#fff5f8"> o <div style="background:#d1fae5">. */
[data-theme="dark"] [style*="background:#fff5f8"],
[data-theme="dark"] [style*="background:#fff0f2"],
[data-theme="dark"] [style*="background:#fff5f5"],
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background:#fff3b0"],
[data-theme="dark"] [style*="background:#fff3e4"],
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background:#fde68a"],
[data-theme="dark"] [style*="background:#ffe4ea"],
[data-theme="dark"] [style*="background:#ffe4e6"],
[data-theme="dark"] [style*="background:#ffafcc"],
[data-theme="dark"] [style*="background:#fde0ea"],
[data-theme="dark"] [style*="background:#d1fae5"],
[data-theme="dark"] [style*="background:#ecfdf5"],
[data-theme="dark"] [style*="background:#c5f4d4"],
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background:#bde0fe"],
[data-theme="dark"] [style*="background:#cdb4db"],
[data-theme="dark"] [style*="background:#faf5ff"],
[data-theme="dark"] [style*="background:#f5f3ff"],
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background:#fecaca"],
[data-theme="dark"] [style*="background:#fef9c3"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#fff"] {
  background: #0a0a0a !important;
  color: var(--text) !important;
}

/* 4. Texto oscuro hardcoded → color del tema activo */
[data-theme="dark"] [style*="color:#5d1232"],
[data-theme="dark"] [style*="color:#92400e"],
[data-theme="dark"] [style*="color:#78350f"],
[data-theme="dark"] [style*="color:#7a4d05"],
[data-theme="dark"] [style*="color:#065f46"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color:#5d4e6d"],
[data-theme="dark"] [style*="color:#166534"],
[data-theme="dark"] [style*="color:#9f1239"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color:#111827"] {
  color: var(--text) !important;
}

/* 5. Semánticos en dark: mantener distinguibles pero claros */
[data-theme="dark"] [style*="color:#dc2626"],
[data-theme="dark"] [style*="color:#ef4444"],
[data-theme="dark"] [style*="color:#991b1b"],
[data-theme="dark"] [style*="color:#c53052"] {
  color: #fca5a5 !important;
}
[data-theme="dark"] [style*="color:#059669"],
[data-theme="dark"] [style*="color:#16a34a"],
[data-theme="dark"] [style*="color:#15803d"],
[data-theme="dark"] [style*="color:#2d8f4f"] {
  color: #86efac !important;
}
[data-theme="dark"] [style*="color:#d97706"],
[data-theme="dark"] [style*="color:#fbbf24"],
[data-theme="dark"] [style*="color:#ca8a04"],
[data-theme="dark"] [style*="color:#b45309"] {
  color: #fde68a !important;
}

/* 6. Badges con background pastel inline → outline con texto del tema */
[data-theme="dark"] .fin-badge[style*="background"],
[data-theme="dark"] .badge[style*="background"],
[data-theme="dark"] span[class*="badge"][style*="background"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--text-muted) !important;
  color: var(--text) !important;
}

/* 7. Headers de modal con fondo pastel */
[data-theme="dark"] .modal__header[style*="background"] {
  background: #0a0a0a !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* 8. Filas <tr> con background inline (rosa/amarillo/lila para alertas).
   Por defecto fondo casi-transparente, pero los semánticos (rojo vencido,
   amarillo warning) conservan tinte para que sigan distinguibles. */
[data-theme="dark"] tr[style*="background"] {
  background: rgba(255, 255, 255, 0.025) !important;
}
[data-theme="dark"] tr[style*="background:#fff5f5"],
[data-theme="dark"] tr[style*="background:#fff0f2"],
[data-theme="dark"] tr[style*="background:#fee2e2"],
[data-theme="dark"] tr[style*="background:#fecaca"] {
  background: rgba(239, 68, 68, 0.10) !important;
  border-left: 3px solid #fca5a5 !important;
}
[data-theme="dark"] tr[style*="background:#fffbeb"],
[data-theme="dark"] tr[style*="background:#fff3b0"],
[data-theme="dark"] tr[style*="background:#fef3c7"],
[data-theme="dark"] tr[style*="background:#fde68a"] {
  background: rgba(251, 191, 36, 0.10) !important;
  border-left: 3px solid #fde68a !important;
}

/* 8.b <code>, <pre> con background hardcoded blanco (modal accesos en
   js/clientes.js): forzar fondo casi-negro + texto del tema para legibilidad. */
[data-theme="dark"] code[style*="background"],
[data-theme="dark"] pre[style*="background"] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* 9. Cards / divs con gradients pastel hardcoded (KPI no-marca, etc.) */
[data-theme="dark"] [style*="linear-gradient"][style*="#bde0fe"],
[data-theme="dark"] [style*="linear-gradient"][style*="#c5f4d4"],
[data-theme="dark"] [style*="linear-gradient"][style*="#fff3b0"],
[data-theme="dark"] [style*="linear-gradient"][style*="#ffafcc"],
[data-theme="dark"] [style*="linear-gradient"][style*="#cdb4db"],
[data-theme="dark"] [style*="linear-gradient"][style*="#fde68a"],
[data-theme="dark"] [style*="linear-gradient"][style*="#fff5f8"] {
  background: linear-gradient(135deg, #0a0a0a 0%, #050505 100%) !important;
  border: 1px solid var(--text-muted) !important;
  color: var(--text) !important;
}

/* 10. Inputs / selects en dark: fondo casi-negro + texto claro del tema */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7;
}