/* H2A Studio · Design System B "Brand Forward Magenta" */
/* Single source of truth para todos los módulos y áreas. */

:root {
  --magenta: #CD0985;
  --magenta-dark: #9F0668;
  --magenta-light: #FCE7F3;
  --cyan: #0BD1FF;
  --purple: #8500BC;

  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --hover: #F9FAFB;
  --border: #E5E7EB;
  --border-strong: #D4D4D8;

  --text: #111;
  --muted: #6B7280;
  --subtle: #9CA3AF;

  --ok: #10B981;
  --warn: #F59E0B;
  --danger: #DC2626;
  --info: #3B82F6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Roboto', -apple-system, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   APP LAYOUT (sidebar + main)
   ===================================================================== */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* =====================================================================
   SIDEBAR (black · magenta accents)
   ===================================================================== */
.sidebar {
  background: #0F0F12;
  color: #fff;
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .22);
  border-right: 1px solid #1F1F24;
}

.sidebar .brand {
  padding: 6px 8px 26px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}
.sidebar .brand img {
  height: 64px;
  display: block;
  margin: 0 auto;
  filter: brightness(0) invert(1);
}
.sidebar .brand .sub {
  font-family: 'Montserrat'; font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin-top: 14px; font-weight: 600;
}

.sidebar .nav-section { margin-bottom: 18px; }
.sidebar .nav-title {
  font-family: 'Montserrat'; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); padding: 6px 12px; margin-bottom: 4px; font-weight: 600;
}
.sidebar .nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 9px; color: rgba(255, 255, 255, .82);
  font-size: 13.5px; font-weight: 500; cursor: pointer; transition: .15s;
}
.sidebar .nav-item:hover {
  background: rgba(205, 9, 133, .14);
  color: #fff;
}
.sidebar .nav-item.active {
  background: var(--magenta);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(205, 9, 133, .35);
}
.sidebar .nav-item svg { width: 18px; height: 18px; }

.sidebar .nav-sub { padding-left: 26px; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 1px; }
.sidebar .nav-sub a {
  padding: 6px 10px; border-radius: 6px; color: rgba(255, 255, 255, .65);
  font-size: 12.5px;
}
.sidebar .nav-sub a:hover { color: #fff; background: rgba(205, 9, 133, .12); }
.sidebar .nav-sub a.active { color: #fff; font-weight: 600; background: rgba(205, 9, 133, .22); }

.sidebar-footer {
  margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 16px; display: flex; align-items: center; gap: 11px;
}
.sidebar-footer .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--magenta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  box-shadow: 0 2px 8px rgba(205, 9, 133, .35);
}
.sidebar-footer .user-info { font-size: 12.5px; line-height: 1.3; }
.sidebar-footer .user-info b { color: #fff; font-weight: 600; font-size: 13px; }
.sidebar-footer .user-info span { color: rgba(255, 255, 255, .55); font-size: 11px; display: block; margin-top: 2px; }
.sidebar-footer form { margin-left: auto; }
.sidebar-footer .logout-btn {
  background: transparent; border: none; color: rgba(255, 255, 255, .55); cursor: pointer;
  padding: 6px; border-radius: 6px;
}
.sidebar-footer .logout-btn:hover { color: #fff; background: rgba(205, 9, 133, .18); }

/* =====================================================================
   MAIN
   ===================================================================== */
.main { display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar-left { flex: 1; max-width: 520px; }
.search {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: #fff;
  border: 1.5px solid var(--border); border-radius: 10px;
  color: var(--muted); font-size: 13px;
}
.search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 13.5px; font-family: 'Roboto';
}
.search .kbd {
  font-family: 'Montserrat'; font-size: 10.5px; padding: 2px 7px;
  background: #F3F4F6; border: 1px solid var(--border);
  border-radius: 4px; color: var(--muted);
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.company-switch {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border: 1.5px solid var(--magenta); border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--magenta); background: #fff;
  cursor: pointer;
}
.company-switch .pill {
  font-size: 9px; padding: 2px 7px; background: var(--magenta); color: #fff;
  border-radius: 4px; font-family: 'Montserrat'; letter-spacing: .08em; font-weight: 700;
}
.icon-btn {
  position: relative; width: 38px; height: 38px;
  border: 1px solid var(--border); background: #fff; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted);
}
.icon-btn .badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--magenta); color: #fff;
  font-size: 9px; font-weight: 700; border-radius: 10px;
  padding: 1px 5px; font-family: 'Montserrat'; box-shadow: 0 0 0 2px #fff;
}

/* =====================================================================
   CONTENT BLOCKS
   ===================================================================== */
.content { padding: 30px 32px; max-width: 1480px; }

.hero { display: flex; justify-content: space-between; align-items: end; margin-bottom: 26px; }
.hero h1 {
  font-family: 'Roboto'; font-size: 40px; font-weight: 900;
  letter-spacing: -.025em; line-height: 1.05; color: var(--text);
}
.hero h1 span { color: var(--magenta); }
.hero .greeting { color: var(--muted); font-size: 14px; margin-top: 8px; font-family: 'Montserrat'; }
.hero .date {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--magenta-light);
  border: 1px solid rgba(205, 9, 133, .3); border-radius: 10px;
  font-family: 'Montserrat'; font-size: 12px; color: var(--magenta-dark); font-weight: 600;
}

.section-title {
  display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px;
}
.section-title h2 {
  font-family: 'Roboto'; font-size: 22px; font-weight: 900;
  letter-spacing: -.015em; color: var(--text);
}
.section-title .link {
  color: var(--magenta); font-size: 12.5px; font-weight: 700;
  font-family: 'Montserrat';
}

/* =====================================================================
   KPI cards
   ===================================================================== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.kpi {
  background: #fff; border-radius: 14px; padding: 22px;
  border: 1px solid var(--border); position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
}
.kpi.accent-magenta::before { background: var(--magenta); }
.kpi.accent-cyan::before { background: var(--cyan); }
.kpi.accent-purple::before { background: var(--purple); }
.kpi.accent-amber::before { background: var(--warn); }
.kpi.accent-green::before { background: var(--ok); }

.kpi .label {
  font-family: 'Montserrat'; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
  font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.kpi .label .badge {
  font-size: 9px; background: #F3F4F6; padding: 2px 7px;
  border-radius: 4px; letter-spacing: .06em; color: var(--text); font-weight: 700;
}
.kpi .value {
  font-family: 'Roboto'; font-size: 30px; font-weight: 900;
  letter-spacing: -.02em; color: var(--text);
}
.kpi .delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; margin-top: 8px;
  padding: 3px 9px; border-radius: 5px; font-family: 'Montserrat';
}
.kpi .delta.up { color: #059669; background: #D1FAE5; }
.kpi .delta.down { color: var(--danger); background: #FEE2E2; }
.kpi .breakdown { font-size: 11.5px; color: var(--muted); margin-top: 10px; font-family: 'Montserrat'; }
.kpi .breakdown b { color: var(--text); font-weight: 600; }

/* =====================================================================
   Areas grid (Home overview)
   ===================================================================== */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.area {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 22px; cursor: pointer; transition: .2s;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.area:hover { border-color: var(--magenta); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(205, 9, 133, .1); }
.area::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; border-radius: 14px 14px 0 0;
}
.area.admin::before { background: linear-gradient(90deg, var(--magenta), var(--purple)); }
.area.social::before { background: linear-gradient(90deg, var(--cyan), #0EA5E9); }
.area.news::before { background: linear-gradient(90deg, var(--warn), var(--danger)); }
.area.rrhh::before { background: linear-gradient(90deg, var(--ok), var(--cyan)); }
.area.comercial::before { background: linear-gradient(90deg, var(--purple), var(--magenta)); }
.area.soon::before { background: var(--border); }
.area-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.area-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px; color: #fff; font-family: 'Montserrat';
}
.area.admin .area-icon { background: linear-gradient(135deg, var(--magenta), var(--purple)); }
.area.social .area-icon { background: linear-gradient(135deg, var(--cyan), #0EA5E9); }
.area.news .area-icon { background: linear-gradient(135deg, var(--warn), var(--danger)); }
.area.rrhh .area-icon { background: linear-gradient(135deg, var(--ok), var(--cyan)); }
.area.comercial .area-icon { background: linear-gradient(135deg, var(--purple), var(--magenta)); }
.area.soon .area-icon { background: var(--border); color: var(--subtle); }
.area h3 { font-family: 'Roboto'; font-size: 17px; font-weight: 700; color: var(--text); }
.area .desc { color: var(--muted); font-size: 12.5px; font-family: 'Montserrat'; margin-top: 1px; }
.area-stats { display: flex; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.area-stat .v { font-family: 'Roboto'; font-size: 19px; font-weight: 900; color: var(--text); }
.area-stat .l {
  font-size: 10.5px; color: var(--muted); font-family: 'Montserrat';
  letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; font-weight: 600;
}
.area-stat .v.alert { color: #D97706; }
.area.soon { opacity: .6; cursor: not-allowed; }
.area.soon .pill {
  position: absolute; top: 18px; right: 18px;
  font-family: 'Montserrat'; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  background: #F3F4F6; padding: 3px 9px; border-radius: 5px; border: 1px solid var(--border);
}

/* =====================================================================
   Activity feed
   ===================================================================== */
.lower-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.panel {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.panel-head {
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.panel-head h3 { font-family: 'Roboto'; font-size: 16px; font-weight: 700; }
.panel-head .link { color: var(--magenta); font-size: 12px; font-weight: 700; font-family: 'Montserrat'; }

.activity { padding: 8px 0; }
.activity-item {
  display: flex; gap: 14px; padding: 14px 22px;
  border-bottom: 1px solid #F3F4F6; align-items: flex-start;
}
.activity-item:last-child { border-bottom: none; }
.a-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0; color: #fff; font-family: 'Montserrat';
}
.a-icon.success { background: var(--ok); }
.a-icon.warn { background: var(--warn); }
.a-icon.magenta { background: linear-gradient(135deg, var(--magenta), var(--purple)); }
.a-icon.cyan { background: var(--cyan); color: #055; }
.a-body { flex: 1; font-size: 13px; line-height: 1.5; }
.a-body b { color: var(--text); font-weight: 700; }
.a-body .meta { color: var(--muted); font-size: 11.5px; margin-top: 3px; font-family: 'Montserrat'; }
.a-amount { font-family: 'Roboto'; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* Quick actions */
.quick-list { padding: 14px; }
.quick {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 9px; cursor: pointer;
  color: var(--text); font-size: 13px;
}
.quick:hover { background: var(--magenta-light); }
.q-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--magenta-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--magenta); flex-shrink: 0; font-family: 'Montserrat';
}
.quick b { font-weight: 700; display: block; line-height: 1.3; }
.quick small { color: var(--muted); font-size: 11px; font-family: 'Montserrat'; }
.q-arrow { margin-left: auto; color: var(--magenta); font-size: 14px; font-weight: 700; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 9px; border: 1.5px solid var(--border);
  background: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--text); text-decoration: none; font-family: 'Montserrat';
}
.btn:hover { background: var(--hover); border-color: var(--magenta); color: var(--magenta); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--magenta); background: var(--magenta-light); }
.btn.primary {
  background: var(--magenta); color: #fff; border-color: var(--magenta);
  box-shadow: 0 8px 20px rgba(205, 9, 133, .4);
}
.btn.primary:hover { background: var(--magenta-dark); border-color: var(--magenta-dark); color: #fff; }
.btn svg { width: 16px; height: 16px; }

/* =====================================================================
   LOGIN PAGE (split layout)
   ===================================================================== */
.login-layout {
  display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh;
}

.login-left {
  background: linear-gradient(135deg, var(--magenta) 0%, var(--magenta-dark) 50%, var(--purple) 100%);
  color: #fff; padding: 60px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login-left::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 209, 255, .35), transparent 60%);
  pointer-events: none;
}
.login-left::after {
  content: ''; position: absolute; bottom: -150px; left: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 60%);
  pointer-events: none;
}
.login-brand { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.login-brand img { height: 42px; filter: brightness(0) invert(1); }
.login-brand .name {
  font-family: 'Montserrat'; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8); font-weight: 700;
  border-left: 1px solid rgba(255, 255, 255, .3); padding-left: 14px; line-height: 1.4;
}
.login-brand .name b { color: #fff; font-weight: 900; display: block; font-size: 13px; letter-spacing: .18em; }
.narrative { position: relative; z-index: 1; }
.narrative .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 30px;
  font-family: 'Montserrat'; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
  margin-bottom: 24px; backdrop-filter: blur(8px);
}
.narrative .badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}
.narrative h1 {
  font-family: 'Roboto'; font-size: 58px; font-weight: 900;
  letter-spacing: -.035em; line-height: 1.02; margin-bottom: 22px; color: #fff;
}
.narrative h1 em { font-style: normal; color: var(--cyan); position: relative; }
.narrative h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 6px; background: rgba(11, 209, 255, .3); border-radius: 3px; z-index: -1;
}
.narrative p {
  color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.65;
  max-width: 480px; margin-bottom: 32px;
}
.pillars { display: flex; gap: 12px; flex-wrap: wrap; }
.pillar {
  padding: 8px 16px; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px;
  font-family: 'Montserrat'; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  display: flex; align-items: center; gap: 8px; backdrop-filter: blur(6px);
}
.pillar .dot { width: 7px; height: 7px; border-radius: 50%; }
.pillar:nth-child(1) .dot { background: #fff; }
.pillar:nth-child(2) .dot { background: var(--cyan); }
.pillar:nth-child(3) .dot { background: rgba(255, 255, 255, .6); }
.login-footer { position: relative; z-index: 1; color: rgba(255, 255, 255, .75); font-size: 12.5px; font-family: 'Montserrat'; font-weight: 500; }
.login-footer b { color: #fff; font-weight: 700; }

.login-right {
  display: flex; align-items: center; justify-content: center;
  padding: 40px; background: #fff;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card-tag {
  font-family: 'Montserrat'; font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--magenta); font-weight: 700;
  margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
}
.auth-card-tag .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--magenta); box-shadow: 0 0 10px var(--magenta);
}
.auth-card h2 {
  font-family: 'Roboto'; font-size: 32px; font-weight: 900;
  letter-spacing: -.025em; margin-bottom: 8px; color: var(--text);
}
.auth-card h2 span { color: var(--magenta); }
.auth-card .lede {
  color: var(--muted); font-size: 14px; margin-bottom: 32px; font-family: 'Montserrat';
}

.field { margin-bottom: 16px; }
.field label {
  font-family: 'Montserrat'; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); margin-bottom: 8px; display: block;
}
.input {
  width: 100%; padding: 13px 16px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 10px; color: var(--text); font-size: 14.5px;
  font-family: 'Roboto'; outline: none; transition: .15s; font-weight: 500;
}
.input:focus { border-color: var(--magenta); box-shadow: 0 0 0 4px rgba(205, 9, 133, .12); }
.input::placeholder { color: var(--subtle); }

.row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 20px 0 24px; font-size: 13px;
}
.check { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.check input { accent-color: var(--magenta); width: 16px; height: 16px; }
.link { color: var(--magenta); font-weight: 700; font-family: 'Montserrat'; }
.link:hover { text-decoration: underline; }

.btn-primary-full {
  width: 100%; padding: 14px;
  background: var(--magenta); color: #fff; border: none;
  border-radius: 10px; font-family: 'Montserrat'; font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 8px 24px rgba(205, 9, 133, .4);
  transition: .15s; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-primary-full:hover { background: var(--magenta-dark); transform: translateY(-1px); }

.divider {
  display: flex; align-items: center; gap: 12px; margin: 24px 0;
  color: var(--subtle); font-size: 11px; font-family: 'Montserrat';
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.sso { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sso-btn {
  padding: 11px; background: #fff;
  border: 1.5px solid var(--border); border-radius: 9px;
  color: var(--text); font-family: 'Montserrat'; font-weight: 600; font-size: 12.5px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sso-btn:hover { border-color: var(--magenta); background: var(--magenta-light); }
.sso-btn svg { width: 16px; height: 16px; }

.switch { margin-top: 26px; text-align: center; font-size: 13px; color: var(--muted); font-family: 'Montserrat'; }
.switch a { color: var(--magenta); font-weight: 700; }

/* Flash messages (login errors etc.) */
.flash {
  padding: 12px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 600; margin-bottom: 16px;
  font-family: 'Montserrat';
}
.flash.error { background: #FEE2E2; color: var(--danger); border: 1px solid #FECACA; }
.flash.success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }

/* HTMX indicator (spinner) */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Clickable rows (bandeja) */
.row-clickable { cursor: pointer; }

/* Action button (icon-only en tabla) */
.action-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1.5px solid var(--magenta);
  background: var(--magenta); color: #fff;
  cursor: pointer; font-size: 14px;
  box-shadow: 0 4px 10px rgba(205, 9, 133, .25);
  transition: .15s;
}
.action-btn:hover { background: var(--magenta-dark); transform: translateY(-1px); }
.action-btn.ghost { background: #fff; color: var(--magenta); box-shadow: none; }
.action-btn.ghost:hover { background: var(--magenta-light); }

/* =====================================================================
   Sub-nav del módulo Administrativa (debajo del topbar)
   ===================================================================== */
.admin-subnav {
  display: flex; gap: 4px; padding: 12px 32px 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: thin;
}
.adminsub-item {
  padding: 10px 16px; font-family: 'Montserrat'; font-size: 12.5px;
  font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: .15s;
}
.adminsub-item:hover { color: var(--text); }
.adminsub-item.active {
  color: var(--magenta); border-bottom-color: var(--magenta);
}

/* =====================================================================
   Tabs (bandeja por estado)
   ===================================================================== */
.tabs { display: flex; gap: 6px; }
.tab {
  padding: 7px 14px; font-size: 13px; color: var(--muted);
  cursor: pointer; border-radius: 8px; font-weight: 600; font-family: 'Montserrat';
}
.tab:hover { background: var(--hover); color: var(--text); }
.tab.active { background: var(--magenta); color: #fff; }
.tab .count {
  font-size: 11px; background: #F3F4F6; padding: 1px 7px;
  border-radius: 10px; margin-left: 6px;
}
.tab.active .count { background: rgba(255, 255, 255, .25); color: #fff; }

/* =====================================================================
   Data table (bandeja facturación)
   ===================================================================== */
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  text-align: left; padding: 12px 22px;
  font-family: 'Montserrat'; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
  background: #FAFAFB; border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 14px 22px; border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #FFF8FB; }
.data-table .client b { font-weight: 700; }
.data-table .client small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; font-family: 'Montserrat'; }
.data-table .amount { font-family: 'Roboto'; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Status badges */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; font-size: 11.5px; font-weight: 700;
  border-radius: 6px; font-family: 'Montserrat';
  letter-spacing: .03em; text-transform: uppercase;
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; }
.status.draft { background: #F3F4F6; color: #374151; }
.status.draft .dot { background: #9CA3AF; }
.status.ready { background: #DBEAFE; color: #1E40AF; }
.status.ready .dot { background: #3B82F6; }
.status.approved { background: #FEF3C7; color: #92400E; }
.status.approved .dot { background: #F59E0B; }
.status.invoiced { background: #D1FAE5; color: #065F46; }
.status.invoiced .dot { background: #10B981; }
.status.cancelled { background: #FEE2E2; color: #991B1B; }
.status.cancelled .dot { background: #DC2626; }

/* Cost center chips */
.cc-chip {
  display: inline-block; padding: 3px 9px;
  font-size: 11px; border-radius: 5px;
  font-family: 'Montserrat'; font-weight: 600;
  letter-spacing: .02em; margin-right: 4px; color: #fff;
}

/* Empty state */
.empty {
  padding: 64px 32px; text-align: center;
  color: var(--muted); font-family: 'Montserrat';
}
.empty h3 { font-family: 'Roboto'; color: var(--text); margin-bottom: 8px; }

/* =====================================================================
   Slide-over (nueva factura, etc.)
   ===================================================================== */
.so-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(17, 17, 17, .4); backdrop-filter: blur(3px);
}
.slideover {
  position: fixed; top: 0; right: 0;
  width: min(740px, 96vw); height: 100vh; z-index: 51;
  background: #fff; border-left: 1px solid var(--border);
  box-shadow: -30px 0 80px rgba(205, 9, 133, .15);
  display: flex; flex-direction: column;
  animation: so-slide .4s ease-out;
}
@keyframes so-slide {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.slideover::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--magenta), var(--purple), var(--cyan));
}
.so-head {
  padding: 24px 28px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
  background: linear-gradient(180deg, var(--magenta-light) 0%, #fff 100%);
}
.so-head-left { display: flex; gap: 14px; align-items: center; }
.so-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--magenta); display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-family: 'Montserrat'; font-size: 20px;
  box-shadow: 0 8px 20px rgba(205, 9, 133, .4);
}
.so-head h2 {
  font-family: 'Roboto'; font-size: 24px; font-weight: 900;
  letter-spacing: -.02em; color: var(--text); line-height: 1.15;
}
.so-head .crumb {
  font-family: 'Montserrat'; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--magenta); font-weight: 700; margin-bottom: 4px;
}
.so-close {
  width: 36px; height: 36px; border-radius: 9px;
  background: #fff; border: 1.5px solid var(--border);
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px;
}
.so-close:hover { color: var(--magenta); border-color: var(--magenta); }

/* Fix de scroll: si hay un <form> entre .slideover y .so-body/.so-foot,
   el form rompe la cadena flex. Hacemos que el form herede el mismo comportamiento. */
.slideover > form {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0;  /* clave: sin esto los flex items no se comprimen */
}
.so-body { flex: 1; overflow-y: auto; padding: 24px 28px; min-height: 0; }

.form-section { margin-bottom: 24px; }
.form-section-title {
  font-family: 'Montserrat'; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--magenta); font-weight: 700;
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.form-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }

.field .input,
.field select.input,
.field textarea.input {
  font-family: 'Roboto'; font-weight: 500;
}
.field select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CD0985' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 16px; padding-right: 36px;
}
.field textarea.input { resize: vertical; min-height: 74px; }

/* Selected client highlighted */
.selected-client {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--magenta-light), #fff 80%);
  border: 1.5px solid var(--magenta); border-radius: 10px;
  display: flex; align-items: center; gap: 14px;
}
.sc-logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--magenta); display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; font-size: 13px; font-family: 'Montserrat';
}
.sc-info b { font-weight: 700; color: var(--text); font-size: 14px; display: block; line-height: 1.2; }
.sc-info small { color: var(--muted); font-size: 11.5px; font-family: 'Montserrat'; }
.sc-meta {
  margin-left: auto;
  font-family: 'Montserrat'; font-size: 10.5px; color: var(--muted);
  text-align: right; line-height: 1.5; font-weight: 600;
}
.sc-meta b { color: var(--magenta); font-weight: 700; }

/* CC rows */
.cc-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cc-row {
  display: grid; grid-template-columns: 1fr 160px 36px;
  gap: 10px; align-items: center;
}
.cc-row select.input { padding: 9px 14px; font-size: 13px; }
.cc-row input.input { padding: 9px 14px; font-size: 13px; text-align: right; font-weight: 700; }
.cc-row .remove {
  width: 36px; height: 36px; border-radius: 9px;
  background: #fff; border: 1.5px solid #FECACA;
  color: #DC2626; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.cc-row .remove:hover { background: #FEE2E2; border-color: #DC2626; }

.add-cc {
  padding: 11px 14px; background: #fff;
  border: 1.5px dashed var(--magenta); border-radius: 9px;
  color: var(--magenta); font-family: 'Montserrat'; font-size: 12.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 8px; width: 100%;
}
.add-cc:hover { background: var(--magenta-light); }

/* Agent suggestion card */
.agent-suggest {
  margin-top: 12px; padding: 14px 16px;
  background: linear-gradient(135deg, var(--magenta-light), #fff 80%);
  border: 1.5px solid var(--magenta); border-radius: 10px;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5;
}
.agent-suggest .ai {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--magenta), var(--purple));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 11px; font-family: 'Montserrat';
  flex-shrink: 0; box-shadow: 0 4px 12px rgba(205, 9, 133, .4);
}
.agent-suggest .txt b { color: var(--text); font-weight: 700; }
.agent-suggest .txt small { color: var(--muted); display: block; margin-top: 2px; font-family: 'Montserrat'; }
.agent-suggest .apply {
  margin-left: auto; background: var(--magenta); color: #fff; border: none;
  padding: 7px 14px; border-radius: 8px;
  font-family: 'Montserrat'; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  flex-shrink: 0; box-shadow: 0 4px 12px rgba(205, 9, 133, .4);
}
.agent-suggest .apply:hover { background: var(--magenta-dark); }

/* Totals box */
.totals {
  background: #FAFAFB; border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; margin-top: 16px;
}
.totals-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 13.5px; color: var(--muted);
}
.totals-row b {
  color: var(--text); font-family: 'Roboto';
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.totals-row.grand {
  padding-top: 14px; margin-top: 8px;
  border-top: 1.5px solid var(--border); font-size: 15px;
  color: var(--text); font-weight: 700;
}
.totals-row.grand b { font-size: 24px; font-weight: 900; color: var(--magenta); }

.so-foot {
  padding: 18px 28px; border-top: 1px solid var(--border);
  background: #FAFAFB;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.so-foot-left { font-size: 11.5px; color: var(--muted); font-family: 'Montserrat'; }
.so-foot-left b { color: var(--text); font-weight: 700; }
.so-foot-right { display: flex; gap: 8px; }

/* =====================================================================
   COMERCIAL · Dashboard
   ===================================================================== */

/* Range selector (3m / 6m / 12m / YTD) */
.range-selector { display: inline-flex; gap: 4px; padding: 4px; background: #fff;
  border: 1.5px solid var(--border); border-radius: 10px; }
.range-selector a {
  padding: 6px 14px; font-family: 'Montserrat'; font-size: 12px; font-weight: 700;
  color: var(--muted); border-radius: 7px; letter-spacing: .04em;
}
.range-selector a:hover { color: var(--text); background: var(--hover); }
.range-selector a.active { background: var(--magenta); color: #fff;
  box-shadow: 0 4px 10px rgba(205, 9, 133, .25); }

/* Dashboard grid (paneles 2x2) */
.dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.dash-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.dash-grid-2, .dash-grid-1-2, .dash-grid-2-1 { margin-bottom: 16px; }
.dash-grid-2 .panel, .dash-grid-1-2 .panel, .dash-grid-2-1 .panel { height: 100%; }

.panel-body { padding: 18px 22px 22px; }

/* Vertical bar chart (ventas por mes) */
.chart-bars {
  display: grid;
  grid-template-columns: repeat(var(--n-bars, 6), 1fr);
  gap: 14px;
  align-items: end;
  height: 220px;
  padding: 10px 4px 0;
}
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.bar-col .bar-wrap {
  flex: 1; width: 100%; max-width: 70px; min-height: 180px;
  display: flex; align-items: flex-end; position: relative;
}
.bar-col .bar {
  width: 100%; min-height: 2px;
  background: linear-gradient(180deg, var(--magenta) 0%, var(--purple) 100%);
  border-radius: 6px 6px 0 0;
  position: relative;
  transition: .3s;
}
.bar-col .bar::after {
  content: attr(data-value);
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: 'Roboto'; font-size: 11.5px; font-weight: 700;
  color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bar-col.current .bar { background: linear-gradient(180deg, var(--magenta) 0%, var(--magenta-dark) 100%); }
.bar-col.current .bar::after { color: var(--magenta); }
.bar-col.dim .bar { background: var(--border); opacity: .6; }
.bar-col.dim .bar::after { color: var(--muted); }
.bar-col .bar-label {
  font-family: 'Montserrat'; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
}
.bar-col.current .bar-label { color: var(--magenta); }

/* Ranking rows (top clientes, top ejecutivas) */
.ranking { display: flex; flex-direction: column; gap: 14px; }
.rank-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; }
.rank-pos {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--magenta-light); color: var(--magenta);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat'; font-weight: 700; font-size: 11px;
}
.rank-row:first-child .rank-pos { background: var(--magenta); color: #fff; }
.rank-body { min-width: 0; }
.rank-body .name {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Roboto'; font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.rank-body .name small {
  font-family: 'Montserrat'; font-size: 11px; color: var(--muted);
  font-weight: 500; margin-left: 6px;
}
.rank-body .meter {
  height: 8px; background: #F3F4F6; border-radius: 4px; overflow: hidden;
}
.rank-body .meter .fill {
  height: 100%; background: linear-gradient(90deg, var(--magenta), var(--purple));
  border-radius: 4px;
}
.rank-row.cyan .rank-pos { background: #DBF7FF; color: #0284A8; }
.rank-row.cyan .meter .fill { background: linear-gradient(90deg, var(--cyan), #0284A8); }
.rank-amount {
  font-family: 'Roboto'; font-weight: 900; font-size: 13.5px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.rank-amount small {
  display: block; font-family: 'Montserrat'; font-size: 10.5px;
  color: var(--muted); font-weight: 500; text-align: right; margin-top: 2px;
}

/* Donut: usa CSS custom prop --gradient para el conic-gradient */
.donut-wrap { display: flex; align-items: center; gap: 22px; padding: 6px 0; }
.donut {
  width: 180px; height: 180px; border-radius: 50%;
  background: var(--gradient, conic-gradient(var(--magenta) 0% 100%));
  position: relative; flex-shrink: 0;
}
.donut::after {
  content: ''; position: absolute; inset: 28px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.donut .donut-center {
  position: absolute; inset: 28px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; z-index: 1;
}
.donut .donut-center .v {
  font-family: 'Roboto'; font-size: 22px; font-weight: 900; color: var(--text);
  letter-spacing: -.02em;
}
.donut .donut-center .l {
  font-family: 'Montserrat'; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 2px;
}
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.legend-row {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center;
  font-size: 13px;
}
.legend-row .dot {
  width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
}
.legend-row .name {
  font-family: 'Roboto'; font-weight: 700; color: var(--text); font-size: 13px;
}
.legend-row .pct {
  font-family: 'Montserrat'; font-size: 11px; font-weight: 700;
  color: var(--muted); letter-spacing: .04em;
}

/* Empty state para paneles del dashboard */
.dash-empty {
  padding: 36px 18px; text-align: center; color: var(--muted);
  font-family: 'Montserrat'; font-size: 13px;
}

@media (max-width: 1100px) {
  .dash-grid-2, .dash-grid-1-2, .dash-grid-2-1 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .login-layout { grid-template-columns: 1fr; }
  .narrative h1 { font-size: 36px; }
}

/* =====================================================================
   RESPONSIVE — laptop 14" (1280-1440px). Punto crítico que estaba muerto.
   ===================================================================== */

/* Hard global: nada hace scroll horizontal a nivel página. Las tablas
   scrolean DENTRO de su contenedor (.table-scroll), no del body. */
html, body { overflow-x: hidden; max-width: 100vw; }
.app { max-width: 100vw; }
.main { min-width: 0; }            /* sin esto el grid 230px+1fr hace overflow */
.content { min-width: 0; }
.panel { min-width: 0; max-width: 100%; }

/* Tablas anchas: scroll horizontal SIEMPRE dentro del wrapper, no del viewport. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table-scroll .data-table { min-width: 100%; }

@media (max-width: 1400px) {
  .content { max-width: none; padding: 22px 18px; }
  .sidebar { padding: 22px 14px; }
  .app { grid-template-columns: 220px 1fr; }
  .topbar { padding: 12px 18px; }
  .admin-subnav { padding: 10px 18px 0; }
  .adminsub-item { padding: 9px 12px; font-size: 12px; }
  .hero h1 { font-size: 30px; }
  .hero { gap: 12px; }
  /* KPIs: 4 cards no caben dignos en 14" → 2x2 */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
  .kpi { padding: 18px; }
  .kpi .value { font-size: 26px; }
  /* Antigüedad CxP panel-body: flex con min-width 150 desborda. Reducir y wrappear */
  .panel-body[style*="flex-wrap"] > div[style*="min-width:150px"] { min-width: 120px !important; }
  /* Tablas: tipografía un toque más compacta */
  .data-table th, .data-table td { padding: 11px 14px; }
  .data-table { font-size: 12.5px; }
  /* Sub-nav: que cualquier item largo no fuerce overflow */
  .admin-subnav { overflow-x: auto; }
}

@media (max-width: 1200px) {
  .content { padding: 20px 16px; }
  .app { grid-template-columns: 200px 1fr; }
  .areas { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .lower-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 26px; }
  .hero { flex-direction: column; align-items: stretch; gap: 14px; }
  .slideover { width: min(640px, 92vw); }
}

@media (max-width: 1024px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .areas { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .app { grid-template-columns: 1fr; }
}

/* Iconos lucide compartidos (usados por macro icon()) */
.ic { display: inline-block; vertical-align: -2px; }
.btn .ic, .adminsub-item .ic, .nav-item .ic { flex-shrink: 0; }

/* =====================================================================
   TX-047 — refuerzo pantallas pequeñas (revisión Pao 3-jul: "se pierden
   cositas"). Toda tabla scrollea dentro de su panel aunque el template
   no la haya envuelto en .table-scroll; slideovers a ancho completo.
   ===================================================================== */
.panel:has(> .data-table),
.panel-body:has(> .data-table),
.panel > div:has(> .data-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1440px) {
  .so-body .field .input { max-width: 100%; }
  .cc-row { flex-wrap: wrap; }
}

/* =====================================================================
   TX-057 — revisión Pao 8-jul: "la tabla está demasiado grande y toca
   correr la pantalla para llegar al botón; se siente muy maluco".
   Tres armas: tabla compacta, columna de acciones PEGADA a la derecha
   (siempre visible aunque haya scroll) y scrollbar horizontal VISIBLE.
   ===================================================================== */

/* Tablas operativas densas: menos aire por celda */
.data-table.compact { font-size: 12.5px; }
.data-table.compact th { padding: 10px 10px; font-size: 10.5px; letter-spacing: .06em; }
.data-table.compact td { padding: 10px 10px; }

/* Columnas secundarias (OC, nº factura…) desaparecen en pantallas chicas:
   siguen en el slideover de edición, no se pierde nada. */
@media (max-width: 1366px) {
  .col-sec { display: none; }
}

/* La última columna (acciones) queda fija a la derecha: los botones se ven
   SIN scrollear. El fondo tapa lo que pasa por debajo. */
.sticky-actions th:last-child,
.sticky-actions td:last-child {
  position: sticky; right: 0; z-index: 2;
  background: #fff;
  box-shadow: -8px 0 8px -8px rgba(0,0,0,.08);
}
.sticky-actions thead th:last-child { background: #FAFAFB; }
.sticky-actions tr:hover td:last-child { background: #FFF8FB; }

/* Botones DENTRO de tablas: planos y compactos. El glow magenta de
   .btn.primary es para CTAs de hero — dentro de una fila "deforma la
   tabla" (Sergio, 10-jul). Aplica a TODAS las data-table. */
.data-table .btn,
.data-table .btn.primary { box-shadow: none; }
.data-table .btn {
  padding: 5px 10px; font-size: 11.5px; border-radius: 7px; gap: 5px;
}
.data-table .btn svg { width: 13px; height: 13px; }

/* Botón de acción SOLO ICONO para filas de tabla: tamaño fijo 28x28, borde
   suave, color semántico via style inline. Cuatro acciones = 124px, no 260. */
.data-table .btn.act-ico {
  width: 28px; height: 28px; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--border); background: #fff; border-radius: 7px;
}
.data-table .btn.act-ico:hover {
  border-color: currentColor; background: #FAFAFB; color: inherit;
}

/* Fila de cabecera de grupo (Mi Facturación agrupada): la celda sticky de
   acciones hereda el gris del grupo en vez de quedar blanca flotando. */
.sticky-actions tr.grp-row td:last-child { background: #F9FAFB; }
.sticky-actions tr.grp-row:hover td:last-child { background: #FFF8FB; }

/* Scrollbar horizontal SIEMPRE visible (Pao no veía "la linecita") */
.table-scroll { scrollbar-width: thin; scrollbar-color: #C4C9D4 #F3F4F6; }
.table-scroll::-webkit-scrollbar { height: 10px; }
.table-scroll::-webkit-scrollbar-track { background: #F3F4F6; border-radius: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: #C4C9D4; border-radius: 6px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* Barras de acción en lote: pegadas al borde del sidebar; sin sidebar (móvil) a 0 */
@media (max-width: 1400px) {
  #cxp-action-bar, #mifact-action-bar, #fact-action-bar { left: 220px; }
}
@media (max-width: 1200px) {
  #cxp-action-bar, #mifact-action-bar, #fact-action-bar { left: 200px; }
}
@media (max-width: 1024px) {
  #cxp-action-bar, #mifact-action-bar, #fact-action-bar { left: 0; }
}

@media (max-width: 1200px) {
  /* filas de formularios: que los campos bajen en vez de desbordarse */
  .form-row, .fields-row, .so-body div[style*="display:flex"] { flex-wrap: wrap; }
}

@media (max-width: 1024px) {
  .slideover { width: 100vw; }
  .so-body { padding: 16px; }
  .so-foot { flex-wrap: wrap; gap: 10px; }
}

/* =====================================================================
   RESPONSIVE TX-052 — topbar que no se desorganiza + sidebar con
   hamburguesa en pantallas angostas (antes: display:none sin salida).
   Bloque ADITIVO: no modifica reglas anteriores.
   ===================================================================== */

/* Los switches de rol/empresa envuelven con aire en vez de desbordar */
.topbar { flex-wrap: wrap; row-gap: 8px; }
.topbar-right { flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
.topbar-left { min-width: 180px; }

/* Hamburguesa: oculta en desktop */
.sidebar-burger {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 40px; height: 40px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--magenta); color: #fff; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
.sidebar-scrim { display: none; }

@media (max-width: 1024px) {
  .sidebar-burger { display: flex; }
  /* la topbar deja sitio al boton flotante */
  .topbar { padding-left: 64px; }
  /* sidebar como overlay deslizante (la regla previa la ocultaba con display:none) */
  .app .sidebar {
    display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 55;
    transform: translateX(-102%); transition: transform .2s ease; height: 100vh !important;
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open .sidebar-scrim {
    display: block; position: fixed; inset: 0; background: rgba(15,15,20,.4); z-index: 50;
  }
}

/* =====================================================================
   TX-078 — Sidebar en pantallas cortas (revisión 16-jul, pantalla de Pao)
   Bloque ADITIVO.
   1) El sidebar mide exactamente 100vh sin scroll interno: en portátiles
      (768px de alto o menos, o con zoom) el bloque de abajo (EMPRESA /
      VER COMO / sesión) quedaba cortado e inalcanzable.
   2) "Barra blanca en el menú": lo que desborda el box negro de 100vh
      pinta sobre el fondo blanco de la columna. La columna del grid queda
      SIEMPRE negra por debajo, pase lo que pase con el box.
   ===================================================================== */
.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3A3A42 #0F0F12;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #3A3A42; border-radius: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Columna izquierda siempre negra (mismos anchos que el grid por breakpoint) */
.app { background: linear-gradient(90deg, #0F0F12 0, #0F0F12 260px, transparent 260px); }
@media (max-width: 1400px) {
  .app { background: linear-gradient(90deg, #0F0F12 0, #0F0F12 220px, transparent 220px); }
}
@media (max-width: 1200px) {
  .app { background: linear-gradient(90deg, #0F0F12 0, #0F0F12 200px, transparent 200px); }
}
@media (max-width: 1024px) {
  .app { background: none; }  /* sin sidebar en layout (overlay con hamburguesa) */
}