/* ==========================================================================
   EasyCheck — Reportes (SPA)
   Reglas del sistema de diseño (tokens.css, components.css, screens.css)
   copiadas tal cual y acotadas a #modulo-reportes, para que el módulo se vea
   igual que la galería sin tocar el resto de las pantallas del SPA, que
   todavía carga easycheck/components.css.

   Secciones: 1) tokens locales  2) componentes (components.css)
              3) pantalla de reportes (screens.css)  4) reglas del módulo (rp-*)
   Si cambia el sistema de diseño, regenerar las secciones 1 a 3.
   ========================================================================== */

/* ===== 1) tokens locales ===== */
#modulo-reportes {
  
  
  --ec-bg:            #0a1628;  
  --ec-surface:       #0f1f38;  
  --ec-surface-2:     #162540;  
  --ec-surface-3:     #1c2e4a;  
  --ec-surface-sunk:  #0b1930;  
  --ec-sidebar-top:   #0f1f38;  
  --ec-sidebar-btm:   #0a1628;  

  
  --ec-border:        #1e3352;  
  --ec-border-strong: #2a4870;  
  --ec-divider:       #16283f;  

  
  --ec-text-strong:   #f3f7fc;  
  --ec-text:          #e2eaf5;  
  --ec-text-muted:    #8fa9c4;  
  --ec-text-soft:     #6b8cae;  
  --ec-text-faint:    #3d6080;  

  
  --ec-accent:        #00c47a;
  --ec-accent-hi:     #0de48a;  
  --ec-accent-dk:     #00a366;  
  --ec-accent-ink:    #04150e;  
  --ec-accent-soft:   rgba(0, 196, 122, .08);  
  --ec-accent-line:   rgba(0, 196, 122, .30);  
  --ec-accent-glow:   rgba(0, 196, 122, .22);  

  
  --ec-warn:          #f5a623;
  --ec-warn-soft:     rgba(245, 166, 35, .08);
  --ec-warn-line:     rgba(245, 166, 35, .28);
  --ec-warn-text:     #f0cf9a;  

  --ec-danger:        #f06060;
  --ec-danger-soft:   rgba(240, 96, 96, .07);
  --ec-danger-line:   rgba(240, 96, 96, .28);
  --ec-danger-text:   #f3b5b5;
  --ec-danger-dk:     #b83a3a;  

  --ec-info:          #4da6ff;
  --ec-info-soft:     rgba(77, 166, 255, .08);
  --ec-info-line:     rgba(77, 166, 255, .28);

  
  --ec-data-1:        #00c47a;
  --ec-data-2:        #4da6ff;
  --ec-data-3:        #a78bfa;
  --ec-data-4:        #f5a623;
  --ec-data-5:        #5ec8c0;
  --ec-data-6:        #c084fc;
  --ec-data-rest:     #4a6a94;  

  
  --ec-font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --ec-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  
  --ec-weight-regular:  400;
  --ec-weight-medium:   500;
  --ec-weight-semibold: 600;
  --ec-weight-bold:     700;

  
  --ec-text-3xs: 10px;    
  --ec-text-2xs: 11px;    
  --ec-text-xs:  12px;    
  --ec-text-sm:  13px;    
  --ec-text-md:  14px;    
  --ec-text-lg:  16px;    
  --ec-text-xl:  19px;    
  --ec-text-2xl: 21px;    
  --ec-text-3xl: 25px;    
  --ec-text-4xl: 33px;    
  --ec-text-hero: clamp(38px, 5.6vw, 66px);  

  
  --ec-tracking-hero:  -0.04em;
  --ec-tracking-title: -0.035em;
  --ec-tracking-value: -0.5px;
  --ec-tracking-label:  0.07em;
  --ec-tracking-kicker: 0.09em;

  
  --ec-leading-tight: 1.05;
  --ec-leading-snug:  1.35;
  --ec-leading-body:  1.6;

  
  --ec-space-1:  4px;
  --ec-space-2:  6px;
  --ec-space-3:  8px;
  --ec-space-4:  10px;
  --ec-space-5:  12px;
  --ec-space-6:  14px;
  --ec-space-7:  16px;
  --ec-space-8:  18px;
  --ec-space-9:  20px;
  --ec-space-10: 22px;
  --ec-space-11: 26px;
  --ec-space-12: 32px;
  --ec-space-13: 40px;
  --ec-space-14: 44px;

  
  --ec-radius-bar:  3px;   
  --ec-radius-sm:   7px;   
  --ec-radius-md:   8px;   
  --ec-radius-lg:   10px;  
  --ec-radius-xl:   12px;  
  --ec-radius-2xl:  16px;  
  --ec-radius-pill: 20px;  
  --ec-radius-full: 50%;   

  
  --ec-shadow-sm:     0 1px 3px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .12);
  --ec-shadow-sticky: 0 6px 20px -12px rgba(0, 0, 0, .80);
  --ec-shadow-lg:     0 24px 64px -28px rgba(0, 0, 0, .75);
  --ec-shadow-accent: 0 4px 14px var(--ec-accent-glow);
  --ec-shadow-cta:    0 6px 18px var(--ec-accent-glow);

  
  --ec-sidebar-w:   220px;  
  --ec-topbar-h:    68px;   
  --ec-index-w:     196px;  
  --ec-content-max: 1180px; 
  --ec-hit:         44px;   

  
  --ec-ease:         cubic-bezier(.4, 0, .2, 1);
  --ec-duration:     140ms;
  --ec-duration-chart: 320ms;
  --ec-duration-enter:  420ms;
}

/* ===== 2) componentes ===== */
#modulo-reportes .ec-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
#modulo-reportes .ec-display { font-family: var(--ec-font-display); font-weight: var(--ec-weight-bold); letter-spacing: var(--ec-tracking-title);
}
#modulo-reportes .ec-label {
  font-size: 10.5px;
  font-weight: var(--ec-weight-semibold);
  color: var(--ec-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--ec-tracking-label);
}
#modulo-reportes .ec-kicker {
  font-size: var(--ec-text-3xs);
  font-weight: var(--ec-weight-bold);
  color: var(--ec-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--ec-tracking-kicker);
}
#modulo-reportes .ec-note { margin: 0; font-size: var(--ec-text-xs); line-height: 1.55; color: var(--ec-text-soft); max-width: 72ch;
}
#modulo-reportes .ec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 var(--ec-space-7);
  border: 1px solid transparent;
  border-radius: var(--ec-radius-md);
  font-family: inherit;
  font-size: var(--ec-text-sm);
  font-weight: var(--ec-weight-bold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ec-duration) var(--ec-ease),
              border-color var(--ec-duration) var(--ec-ease),
              color var(--ec-duration) var(--ec-ease);
}
#modulo-reportes .ec-btn:disabled { opacity: .45; cursor: not-allowed;
}
#modulo-reportes .ec-btn i { font-size: 15px;
}
#modulo-reportes .ec-btn-secondary {
  background: var(--ec-surface-2);
  border-color: var(--ec-border);
  color: var(--ec-text-muted);
  font-weight: var(--ec-weight-medium);
}
#modulo-reportes .ec-btn-secondary:hover:not(:disabled) { border-color: var(--ec-border-strong); color: var(--ec-text);
}
#modulo-reportes .ec-btn-secondary:active:not(:disabled) { background: var(--ec-surface-3);
}
#modulo-reportes .ec-btn-icon { width: 36px; height: 36px; padding: 0; background: transparent; border-color: var(--ec-border); color: var(--ec-text-soft);
}
#modulo-reportes .ec-btn-icon:hover:not(:disabled) { border-color: var(--ec-border-strong); color: var(--ec-text);
}
#modulo-reportes .ec-btn-icon-sm { width: 32px; height: 32px; border-radius: var(--ec-radius-sm);
}
#modulo-reportes .ec-btn-icon-sm i { font-size: 14px;
}
#modulo-reportes .ec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-pill);
  background: transparent;
  color: var(--ec-text-soft);
  font-family: inherit;
  font-size: var(--ec-text-xs);
  font-weight: var(--ec-weight-regular);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--ec-duration) var(--ec-ease);
}
#modulo-reportes .ec-chip:hover { color: var(--ec-text); border-color: var(--ec-border-strong);
}
#modulo-reportes .ec-chip.is-active {
  background: var(--ec-accent-soft);
  border-color: var(--ec-accent-line);
  color: var(--ec-accent);
  font-weight: var(--ec-weight-semibold);
}
#modulo-reportes .ec-card {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-xl);
  padding: var(--ec-space-9);
  box-shadow: var(--ec-shadow-sm);
}
#modulo-reportes .ec-card-title {
  font-size: var(--ec-text-2xs);
  font-weight: var(--ec-weight-bold);
  color: var(--ec-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--ec-tracking-kicker);
  margin-bottom: var(--ec-space-6);
}
#modulo-reportes .ec-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ec-space-5);
  flex-wrap: wrap;
  margin-bottom: var(--ec-space-1);
}
#modulo-reportes .ec-card-meta { font-size: var(--ec-text-2xs); color: var(--ec-text-soft);
}
#modulo-reportes .ec-card-accent {
  border-color: var(--ec-accent-line);
  background: linear-gradient(135deg, rgba(0, 196, 122, .07) 0%, rgba(15, 31, 56, 0) 65%), var(--ec-surface);
}
#modulo-reportes .ec-card-warn {
  border-color: var(--ec-warn-line);
  background: linear-gradient(135deg, rgba(245, 166, 35, .06) 0%, rgba(15, 31, 56, 0) 60%), var(--ec-surface);
}
#modulo-reportes .ec-metric { display: flex; flex-direction: column; padding: var(--ec-space-8) var(--ec-space-9);
}
#modulo-reportes .ec-metric-value {
  font-family: var(--ec-font-display);
  font-size: 27px;
  font-weight: var(--ec-weight-bold);
  letter-spacing: var(--ec-tracking-hero);
  line-height: var(--ec-leading-tight);
  margin-top: var(--ec-space-4);
  color: var(--ec-text);
}
#modulo-reportes .ec-metric-value-hero { font-size: var(--ec-text-4xl); color: var(--ec-accent);
}
#modulo-reportes .ec-metric-value.is-warn { color: var(--ec-warn);
}
#modulo-reportes .ec-metric-value.is-danger { color: var(--ec-danger);
}
#modulo-reportes .ec-metric-sub { font-size: 11.5px; line-height: 1.45; color: var(--ec-text-soft); margin-top: var(--ec-space-3);
}
#modulo-reportes .ec-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  align-self: flex-start;
  margin-top: var(--ec-space-4);
  padding: 2px 8px;
  border-radius: var(--ec-radius-pill);
  font-size: 11.5px;
  font-weight: var(--ec-weight-bold);
}
#modulo-reportes .ec-delta i { font-size: var(--ec-text-xs);
}
#modulo-reportes .ec-delta-up { color: var(--ec-accent); background: var(--ec-accent-soft);
}
#modulo-reportes .ec-delta-warn { color: var(--ec-warn);   background: var(--ec-warn-soft);
}
#modulo-reportes .ec-delta-down { color: var(--ec-danger); background: var(--ec-danger-soft);
}
#modulo-reportes .ec-delta-neutral { color: var(--ec-text-muted); background: var(--ec-surface-2);
}
#modulo-reportes .ec-grid { display: grid; gap: var(--ec-space-5);
}
#modulo-reportes .ec-grid-metrics { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
#modulo-reportes .ec-grid-thirds { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
#modulo-reportes .ec-input {
  width: 100%;
  padding: 9px 11px;
  background: var(--ec-surface-2);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-md);
  color: var(--ec-text);
  font-family: inherit;
  font-size: var(--ec-text-sm);
  outline: none;
  transition: border-color var(--ec-duration) var(--ec-ease);
}
#modulo-reportes .ec-input:hover { border-color: var(--ec-border-strong);
}
#modulo-reportes .ec-input:focus { border-color: var(--ec-accent); outline: none;
}
#modulo-reportes .ec-input::placeholder { color: var(--ec-text-faint);
}
#modulo-reportes .ec-input:disabled { opacity: .45; cursor: not-allowed;
}
#modulo-reportes .ec-input.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}
#modulo-reportes .ec-input-auto { width: auto;
}
#modulo-reportes .ec-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--ec-radius-pill);
  font-size: var(--ec-text-2xs);
  font-weight: var(--ec-weight-semibold);
  white-space: nowrap;
}
#modulo-reportes .ec-badge i { font-size: var(--ec-text-3xs);
}
#modulo-reportes .ec-badge-ok { background: var(--ec-accent-soft); border-color: var(--ec-accent-line); color: var(--ec-accent);
}
#modulo-reportes .ec-badge-warn { background: var(--ec-warn-soft);   border-color: var(--ec-warn-line);   color: var(--ec-warn);
}
#modulo-reportes .ec-badge-danger { background: var(--ec-danger-soft); border-color: var(--ec-danger-line); color: var(--ec-danger);
}
#modulo-reportes .ec-badge-info { background: var(--ec-info-soft);   border-color: var(--ec-info-line);   color: var(--ec-info);
}
#modulo-reportes .ec-badge-neutral { background: var(--ec-surface-2);   border-color: var(--ec-border);      color: var(--ec-text-muted);
}
#modulo-reportes .ec-badge-unverified { background: var(--ec-surface-2); border: 1px dashed var(--ec-border-strong); color: var(--ec-text-muted); font-size: var(--ec-text-3xs); font-weight: var(--ec-weight-bold);
}
#modulo-reportes .ec-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--ec-radius-full);
  background: var(--ec-surface-3);
  color: var(--ec-text-soft);
  font-size: var(--ec-text-2xs);
  font-weight: var(--ec-weight-bold);
}
#modulo-reportes .ec-rank-1 { background: rgba(245, 166, 35, .15); color: var(--ec-warn);
}
#modulo-reportes .ec-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ec-space-4);
  padding: var(--ec-space-5) var(--ec-space-6);
  border: 1px solid transparent;
  border-radius: var(--ec-radius-lg);
  font-size: 12.5px;
  line-height: 1.55;
}
#modulo-reportes .ec-alert i { font-size: var(--ec-text-lg); flex-shrink: 0;
}
#modulo-reportes .ec-alert-ok { background: var(--ec-accent-soft); border-color: var(--ec-accent-line); color: var(--ec-text);
}
#modulo-reportes .ec-alert-warn { background: rgba(245, 166, 35, .07); border-color: var(--ec-warn-line);   color: var(--ec-warn-text);
}
#modulo-reportes .ec-alert-danger { background: var(--ec-danger-soft);   border-color: var(--ec-danger-line); color: var(--ec-danger-text);
}
#modulo-reportes .ec-alert-info { background: var(--ec-info-soft);     border-color: var(--ec-info-line);   color: var(--ec-text-muted);
}
#modulo-reportes .ec-bar {
  position: relative;
  height: 8px;
  margin-top: var(--ec-space-6);
  border-radius: var(--ec-radius-bar);
  background: var(--ec-divider);
  overflow: hidden;
}
#modulo-reportes .ec-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--ec-radius-bar); background: var(--ec-accent);
}
#modulo-reportes .ec-bar-fill.is-warn { background: var(--ec-warn);
}
#modulo-reportes .ec-bar-fill.is-danger { background: var(--ec-danger);
}
#modulo-reportes .ec-bar-over {
  position: absolute;
  inset: 0 0 0 auto;
  border-radius: 0 var(--ec-radius-bar) var(--ec-radius-bar) 0;
  background: repeating-linear-gradient(135deg, var(--ec-danger) 0 4px, var(--ec-danger-dk) 4px 8px);
  box-shadow: -1px 0 0 var(--ec-surface);
}
#modulo-reportes .ec-minibar { position: relative; flex-shrink: 0; width: 84px; height: 6px; border-radius: var(--ec-radius-bar); background: var(--ec-divider);
}
#modulo-reportes .ec-minibar > span { position: absolute; inset: 0 auto 0 0; border-radius: var(--ec-radius-bar); background: var(--ec-info);
}
#modulo-reportes .ec-minibar > span.is-warn { background: var(--ec-warn);
}
#modulo-reportes .ec-minibar > span.is-danger { background: var(--ec-danger);
}
#modulo-reportes .ec-legend { display: flex; flex-direction: column; gap: 9px; flex: 1 1 260px; min-width: 240px;
}
#modulo-reportes .ec-legend-row { display: flex; align-items: center; gap: 9px;
}
#modulo-reportes .ec-legend-swatch { flex-shrink: 0; width: 10px; height: 10px; border-radius: 2px;
}
#modulo-reportes .ec-legend-label { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ec-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#modulo-reportes .ec-legend-pct { font-size: 12.5px; font-weight: var(--ec-weight-bold); color: var(--ec-text); font-feature-settings: 'tnum';
}
#modulo-reportes .ec-legend-amount { min-width: 80px; text-align: right; font-size: var(--ec-text-2xs); color: var(--ec-text-soft); font-feature-settings: 'tnum';
}
#modulo-reportes .ec-chart { position: relative; height: 300px;
}
#modulo-reportes .ec-chart-sm { position: relative; height: 250px;
}
#modulo-reportes .ec-donut { position: relative; flex-shrink: 0; width: 168px; height: 168px;
}
#modulo-reportes .ec-chart-row { display: flex; align-items: center; gap: var(--ec-space-9); flex-wrap: wrap;
}

/* ===== 3) pantalla de reportes ===== */
#modulo-reportes .ec-period-bar {
  position: sticky;
  top: var(--ec-topbar-h);
  z-index: 25;
  display: flex; align-items: center; gap: var(--ec-space-4); flex-wrap: wrap;
  padding: var(--ec-space-5) var(--ec-space-7);
  margin-bottom: var(--ec-space-9);
  background: rgba(15, 31, 56, .94);
  backdrop-filter: blur(14px);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-xl);
  box-shadow: var(--ec-shadow-sticky);
}
#modulo-reportes .ec-period-bar .spacer { flex: 1;
}
#modulo-reportes .ec-period-bar > i { font-size: var(--ec-text-lg); color: var(--ec-text-soft); margin-right: 2px;
}
#modulo-reportes .ec-period-presets { display: flex; align-items: center; gap: var(--ec-space-2); flex-wrap: wrap;
}
#modulo-reportes .ec-inline-control { display: flex; align-items: center; gap: var(--ec-space-2);
}
#modulo-reportes .ec-inline-control > span { font-size: 11.5px; color: var(--ec-text-soft);
}
#modulo-reportes .ec-cap-pct { font-family: var(--ec-font-display); font-size: 30px; font-weight: var(--ec-weight-bold); letter-spacing: var(--ec-tracking-hero); line-height: 1; color: var(--ec-accent);
}
#modulo-reportes .ec-cap-pct.is-warn { color: var(--ec-warn);
}
#modulo-reportes .ec-cap-pct.is-danger { color: var(--ec-danger);
}
#modulo-reportes .ec-cap-cat { font-size: 12.5px; color: var(--ec-text-soft); white-space: nowrap;
}
#modulo-reportes .ec-cap-figures { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ec-space-4); margin-top: var(--ec-space-3); font-size: var(--ec-text-xs);
}
#modulo-reportes .ec-cap-support { margin: var(--ec-space-5) 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ec-text-muted);
}
#modulo-reportes .ec-cap-support.is-warn { color: var(--ec-warn-text);
}
#modulo-reportes .ec-cap-support.is-danger { color: var(--ec-danger-text);
}
#modulo-reportes .ec-cap-legal { margin: var(--ec-space-5) 0 0; padding-top: var(--ec-space-4); border-top: 1px solid var(--ec-divider); font-size: 10.5px; line-height: 1.5; color: var(--ec-text-soft);
}
#modulo-reportes .ec-cap-card.state-warn { border-color: var(--ec-warn-line);
}
#modulo-reportes .ec-cap-card.state-danger { border-color: rgba(240, 96, 96, .45);
}
#modulo-reportes .ec-cap-card.state-unverified { border: 1px dashed var(--ec-border-strong);
}
@media (max-width: 860px) {
  #modulo-reportes .ec-chart { height: 240px;
  }
}
#modulo-reportes .ec-chart-row .ec-legend-label { white-space: normal; overflow: visible; text-overflow: clip;
}

/* ===== 4) reglas del módulo ===== */
#modulo-reportes {
  margin: -1.5rem;
  min-height: calc(100vh - 120px);
  background: var(--ec-bg);
  color: var(--ec-text);
  font-family: var(--ec-font-body);
  font-size: var(--ec-text-md);
  line-height: var(--ec-leading-body);
  -webkit-font-smoothing: antialiased;
}
#modulo-reportes *,
#modulo-reportes *::before,
#modulo-reportes *::after { box-sizing: border-box;
}
#modulo-reportes button { font-family: inherit;
}
#modulo-reportes ::selection { background: rgba(0, 196, 122, .15); color: var(--ec-text);
}
#modulo-reportes .rp-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 26px 56px;
  display: flex;
  flex-direction: column;
  gap: var(--ec-space-7);
}
#modulo-reportes .rp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ec-space-7); flex-wrap: wrap;
}
#modulo-reportes .rp-h1 { margin: 0; font-size: 30px; line-height: 1.1; color: var(--ec-text-strong);
}
#modulo-reportes .rp-periodo { margin-top: var(--ec-space-2); font-size: 12.5px; color: var(--ec-text-soft);
}
#modulo-reportes .ec-period-bar { top: 60px; z-index: 30; margin-bottom: 0;
}
#modulo-reportes .rp-custom { display: none; align-items: center; gap: var(--ec-space-3); flex-wrap: wrap;
}
#modulo-reportes .rp-custom.is-open { display: flex;
}
#modulo-reportes .rp-custom .ec-input { width: auto; padding: 6px 10px; font-size: var(--ec-text-xs); color-scheme: dark;
}
#modulo-reportes .rp-custom .rp-sep { color: var(--ec-text-faint); font-size: var(--ec-text-xs);
}
#modulo-reportes .rp-export { display: flex; align-items: center; gap: var(--ec-space-3);
}
#modulo-reportes .rp-label { display: flex; align-items: center; gap: 7px;
}
#modulo-reportes .rp-label i { font-size: 15px;
}
#modulo-reportes .rp-metric-in {
  border-color: var(--ec-accent-line);
  background: linear-gradient(135deg, rgba(0, 196, 122, .06) 0%, rgba(15, 31, 56, 0) 62%), var(--ec-surface);
  box-shadow: inset 3px 0 0 var(--ec-accent), var(--ec-shadow-sm);
}
#modulo-reportes .rp-metric-in .rp-label i { color: var(--ec-accent);
}
#modulo-reportes .rp-metric-out {
  border-color: var(--ec-danger-line);
  background: linear-gradient(135deg, rgba(240, 96, 96, .07) 0%, rgba(15, 31, 56, 0) 62%), var(--ec-surface);
  box-shadow: inset 3px 0 0 var(--ec-danger), var(--ec-shadow-sm);
}
#modulo-reportes .rp-metric-out .rp-label i { color: var(--ec-danger);
}
#modulo-reportes .rp-metric-neg {
  border-color: var(--ec-danger-line);
  background: linear-gradient(135deg, rgba(240, 96, 96, .08) 0%, rgba(15, 31, 56, 0) 60%), var(--ec-surface);
}
#modulo-reportes .ec-metric-value.is-pos { color: var(--ec-accent);
}
#modulo-reportes .rp-res-label { color: var(--ec-accent); font-weight: var(--ec-weight-bold);
}
#modulo-reportes .rp-metric-neg .rp-res-label { color: var(--ec-danger);
}
#modulo-reportes .rp-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--ec-space-6); align-items: stretch;
}
#modulo-reportes .rp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ec-space-6); align-items: stretch;
}
#modulo-reportes .rp-legend-inline { display: flex; gap: 18px; margin-top: var(--ec-space-5); font-size: var(--ec-text-xs); color: var(--ec-text-soft);
}
#modulo-reportes .rp-legend-inline span { display: inline-flex; align-items: center; gap: 7px;
}
#modulo-reportes .rp-kpis { display: flex; flex-direction: column; gap: var(--ec-space-4); margin-top: var(--ec-space-6);
}
#modulo-reportes .rp-kpi {
  display: flex; align-items: center; gap: var(--ec-space-5);
  padding: var(--ec-space-5) var(--ec-space-6);
  background: var(--ec-surface-2);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-lg);
}
#modulo-reportes .rp-kpi-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--ec-radius-md);
  background: var(--ec-accent-soft); color: var(--ec-accent); font-size: 18px;
}
#modulo-reportes .rp-kpi-ic.is-info { background: var(--ec-info-soft);   color: var(--ec-info);
}
#modulo-reportes .rp-kpi-ic.is-warn { background: var(--ec-warn-soft);   color: var(--ec-warn);
}
#modulo-reportes .rp-kpi-ic.is-danger { background: var(--ec-danger-soft); color: var(--ec-danger);
}
#modulo-reportes .rp-kpi-v { font-family: var(--ec-font-display); font-size: var(--ec-text-xl); font-weight: var(--ec-weight-bold); letter-spacing: var(--ec-tracking-title); line-height: 1.15; color: var(--ec-text-strong);
}
#modulo-reportes .rp-kpi-v.is-danger { color: var(--ec-danger);
}
#modulo-reportes .rp-kpi-l { margin-top: 2px; font-size: var(--ec-text-xs); line-height: 1.4; color: var(--ec-text-soft);
}
#modulo-reportes .rp-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
#modulo-reportes .rp-donut-c b { font-family: var(--ec-font-display); font-size: 17px; font-weight: var(--ec-weight-bold); letter-spacing: var(--ec-tracking-title); color: var(--ec-text-strong); font-feature-settings: 'tnum';
}
#modulo-reportes .rp-donut-c span { margin-top: 1px; font-size: 10px; font-weight: var(--ec-weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--ec-text-soft);
}
#modulo-reportes .rp-sub { display: block; margin: 1px 0 0; white-space: nowrap; font-size: var(--ec-text-2xs); line-height: 1.3; color: var(--ec-text-faint);
}
#modulo-reportes .rp-prods { display: flex; flex-direction: column; margin-top: var(--ec-space-2);
}
#modulo-reportes .rp-prod { display: flex; align-items: center; gap: var(--ec-space-5); padding: 11px 0; border-bottom: 1px solid var(--ec-divider);
}
#modulo-reportes .rp-prod:last-child { border-bottom: 0; padding-bottom: 0;
}
#modulo-reportes .rp-prod-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px;
}
#modulo-reportes .rp-prod-name { font-size: 13.5px; font-weight: var(--ec-weight-medium); color: var(--ec-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#modulo-reportes .rp-prod-bar { position: relative; height: 6px; border-radius: var(--ec-radius-bar); background: var(--ec-divider); overflow: hidden;
}
#modulo-reportes .rp-prod-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: var(--ec-radius-bar); background: var(--ec-accent);
}
#modulo-reportes .rp-prod-amt { flex-shrink: 0; font-size: var(--ec-text-sm); font-weight: var(--ec-weight-bold); color: var(--ec-text); text-align: right;
}
#modulo-reportes .rp-prod-u { flex-shrink: 0; min-width: 46px; font-size: var(--ec-text-2xs); color: var(--ec-text-soft); text-align: right;
}
#modulo-reportes .rp-iva { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ec-space-5); margin-top: var(--ec-space-6);
}
#modulo-reportes .rp-tile { display: flex; flex-direction: column; gap: var(--ec-space-2); padding: var(--ec-space-6) var(--ec-space-7); background: var(--ec-surface-2); border: 1px solid var(--ec-border); border-radius: var(--ec-radius-lg);
}
#modulo-reportes .rp-tile-v { font-family: var(--ec-font-display); font-size: 24px; font-weight: var(--ec-weight-bold); letter-spacing: var(--ec-tracking-hero); line-height: 1.1; color: var(--ec-text);
}
#modulo-reportes .rp-tile.is-pagar { border-color: var(--ec-warn-line);   background: var(--ec-warn-soft);
}
#modulo-reportes .rp-tile.is-pagar .rp-tile-v { color: var(--ec-warn);
}
#modulo-reportes .rp-tile.is-favor { border-color: var(--ec-accent-line); background: var(--ec-accent-soft);
}
#modulo-reportes .rp-tile.is-favor .rp-tile-v { color: var(--ec-accent);
}
#modulo-reportes .rp-cap-row { display: flex; align-items: baseline; gap: var(--ec-space-3); flex-wrap: wrap; margin-top: var(--ec-space-4);
}
#modulo-reportes .rp-loading,
#modulo-reportes .rp-empty { padding: var(--ec-space-9) 0; font-size: var(--ec-text-sm); color: var(--ec-text-soft); text-align: center;
}
#modulo-reportes .rp-empty i { display: block; margin-bottom: var(--ec-space-3); font-size: 26px; color: var(--ec-text-faint);
}
@media (max-width: 900px) {
#modulo-reportes .rp-main,
#modulo-reportes .rp-pair,
#modulo-reportes .rp-iva { grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 640px) {
#modulo-reportes .rp-wrap { padding: 18px 14px 40px;
}
#modulo-reportes .rp-h1 { font-size: 24px;
}
#modulo-reportes .rp-btn-txt { display: none;
}
#modulo-reportes .ec-period-bar { padding: var(--ec-space-4) var(--ec-space-5);
}
}
@media (max-width: 480px) {
#modulo-reportes { margin: -1rem;
}
}
@media print {
#modulo-reportes { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
#modulo-reportes .ec-period-bar { display: none;
}
}