/* ============================================
   SHELL.CSS — Esqueleto Visual CSG
   Estilos compartidos por TODA la plataforma.
   NO editar sin verificar impacto en las 3 apps.
   ============================================ */

/* 1. Reset y tipografía base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-main);
  transition: var(--transition);
  height: 100vh;
  overflow: hidden;
}

/* El tema claro se define en un solo lugar: assets/design-tokens.css.
   Aca habia una segunda definicion con valores distintos que lo pisaba. */

/* 2. Layout App Container */
.app-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* 3. Sidebar completo */
.sidebar {
  width: 225px;
  background: linear-gradient(180deg, #0F2D4A 0%, #0A1C2E 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.35);
  padding: 0 24px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  color: #F8FAFC;
  z-index: 50;
}

.sidebar .sidebar-brand.csg-brand {
    background: transparent !important;
    border: none;
    box-shadow: none;
    padding: 25px 0;
    margin-bottom: 20px;
    min-height: 104px;
    box-sizing: border-box;
}

.sidebar-brand.csg-brand,
.auth-brand.csg-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  background: #0F2D4A !important;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.csg-logo-mark {
  font-size: 30px;
  font-weight: 900;
  color: #3b82f6;
  letter-spacing: -1.5px;
  line-height: 1;
  font-family: 'Outfit', sans-serif;
}

.csg-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
}

.csg-word-1 {
  font-size: 8.5px;
  font-weight: 400;
  color: #CBD5E1;
  letter-spacing: 1px;
}

.csg-word-2, .csg-word-3 {
  font-size: 9.5px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.8px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar .sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  margin-top: auto;
}

.sidebar .btn-outline {
  border-color: rgba(255,255,255,0.2);
  color: #CBD5E1;
  background-color: transparent;
}

.sidebar .btn-outline:hover {
  background-color: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.3) !important;
  color: #FFFFFF !important;
}
.sidebar .btn-outline.active-macro-btn,
.sidebar .btn-outline.active {
  background-color: rgba(176,140,69,0.15) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.sidebar .btn i { width: 20px; text-align: center; }

/* 4. Header */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 40px;
  background-color: #0F2D4A;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0;
  gap: 20px;
}

.header-title h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #F8FAFC;
  margin: 0;
  line-height: 1.2;
}

.header-title p {
  color: #94A3B8;
  font-size: 14px;
  margin-top: 4px;
  margin-bottom: 0;
}

.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

/* 5. Main Content */
.main-content {
  flex-grow: 1;
  padding: 0;
  width: calc(100% - 225px);
  height: 100vh;
  overflow-y: auto;
}

/* 6. View Sections */
.view-section {
  padding: 30px 40px;
  display: none;
  animation: fadeIn 0.4s ease;
}
.view-section.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 7. Botones base */
.btn {
  font-family: var(--font-family, 'Inter', sans-serif);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-secondary, #94a3b8);
}

.btn-outline:hover {
  border-color: #38bdf8;
  color: #38bdf8;
  background-color: rgba(255, 255, 255, 0.05);
}

.btn-full { width: 100%; }
.btn-icon-left { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }

.btn-accent {
  background-color: #C5A059;
  color: #0A0F0C;
}
.btn-accent:hover {
  background-color: #B08C45;
  transform: translateY(-1px);
}

/* 8. Modales */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal.active {
  display: flex;
}
.modal-content {
  background: var(--card-bg);
  padding: 30px;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  box-shadow: var(--shadow-md);
}

/* 9. Formularios base */
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.form-control {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: inherit;
  font-size: 15px;
  transition: var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
}

/* 10. Panel Radar de Resultados */
.card-panel.summary-box {
  background: var(--card-bg, #fff);
  border-radius: 16px;
}

.radar-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.radar-row:last-child {
  border-bottom: none;
}

.radar-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 12px;
}

.radar-label {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary, var(--text-main));
}

.radar-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary, var(--text-main));
  text-align: right;
  white-space: nowrap;
}

.margin-indicator {
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  margin: 12px 0;
  border: 2px solid;
}
.margin-indicator h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 5px 0;
}


/* REGLAS PARA IFRAME SPA */
body.in-iframe .sidebar { display: none !important; }
body.in-iframe .main-content { margin-left: 0 !important; width: 100% !important; padding: 0 20px !important; margin-top: 20px !important; }


/* ============================================================
   PRESENTACION DE CIFRAS

   En un estado de resultados la persona recorre la columna de importes
   de arriba hacia abajo para comparar magnitudes. Alineados a la
   izquierda, "$ 1.250.000" y "$ 980" empiezan en el mismo punto y no se
   puede ver de un vistazo cual es mayor. Por eso van a la derecha.

   tabular-nums hace que todos los digitos ocupen el mismo ancho. Sin eso
   el 1 es mas angosto que el 8 y las columnas nunca terminan de alinear,
   ademas de que las cifras "saltan" al actualizarse en vivo. No habia ni
   una sola declaracion de esto en todo el proyecto.

   Vive en shell.css porque es la unica hoja que cargan las tres
   herramientas, tanto dentro del Hub como abiertas por separado.
   ============================================================ */
.w-amount,
.w-amount input,
.w-amount .table-input,
.w-pct,
.w-pct input,
.col-monto,
td.num,
th.num,
/* En CentroComando el importe no vive en una celda con clase propia, sino
   dentro de .input-money-wrapper, tanto en la vista estatica como en las
   filas que arma el codigo (app.js:679). Ese es el enganche correcto, y
   sin el quedaba sin alinear justamente la tabla mas importante. */
.input-money-wrapper input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* El simbolo de moneda queda pegado a la izquierda del campo y la cifra a
   la derecha; este margen evita que el numero toque el borde. */
.input-money-wrapper input { padding-right: 8px; }



/* El encabezado tiene que quedar alineado con los numeros que lleva debajo:
   si el titulo va a la izquierda y la cifra a la derecha, la columna se lee
   partida. Estas reglas llevan un selector de elemento de mas porque
   .items-table th (CentroComando) es mas especifica que .w-amount sola y le
   ganaba. Y en Rentabilidad el importe es un campo dentro de un div, asi que
   hay que alcanzar el campo, no solo el contenedor. */
table th.w-amount,
table th.w-pct,
table th.num,
table td.num,
.col-monto input,
.col-monto .form-control {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Alinear a la derecha no alcanza: el titulo se dibuja directamente sobre la
   celda, pero la cifra vive dentro de un campo que tiene borde y relleno
   propios. Ese grosor empuja el numero hacia adentro y el titulo queda unos
   milimetros mas afuera, corrido. Aca se le suma al titulo exactamente lo que
   el campo le come al numero, para que los dos bordes derechos coincidan.

   CentroComando: la celda pone 12px + el campo 1px de borde y 8px de relleno.
   Rentabilidad:  la columna pone 15px + el campo 1px de borde y 12px de relleno. */
.items-table th.w-amount { padding-right: 21px; }

.fc-table-header .col-monto {
  text-align: right;
  padding-right: 28px;
}

/* Lo mismo del lado izquierdo, para las columnas de texto: el titulo arranca
   pegado al borde de la columna y el texto de abajo arranca adentro del campo.
   Medido en pantalla, la diferencia era de 7px en Centro de Comando y de 13px
   en las otras dos. */
.items-table th.w-desc { padding-left: 19px; }

.fc-table-header .col-desc { padding-left: 13px; }

/* Grilla de gastos de Real State: los importes eran los unicos de todo el
   sistema que quedaban pegados a la izquierda, asi que no se podian comparar
   de un vistazo con la columna de al lado. */
#gastos-list .numeric-input,
#new-gasto-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Las cifras y los titulos de columnas numericas no se cortan en dos
   renglones: "$ 12.312,00" partido a la mitad es ilegible, y un encabezado
   en dos lineas desalinea toda la fila. Los contenedores de estas tablas ya
   tienen overflow-x: auto, asi que si la tabla no entra se desplaza de
   costado en vez de romper el ancho de la pantalla.
   La columna de acciones tampoco se parte: sus iconos quedaban en dos filas. */
.w-amount,
.w-pct,
.col-monto,
td.num,
th.num,
td.no-print,
th.no-print {
  white-space: nowrap;
}

/* Importes destacados: no forman columna, pero el ancho fijo evita que
   el numero se mueva mientras se recalcula. */
.kpi-value,
.stat-value,
.badge,
.currency-symbol,
.month-amount,
.total-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}



/* ============================================================
   BOTON HAMBURGUESA
   Oculto en escritorio; solo aparece en la version movil.
   ============================================================ */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  color: #F8FAFC;
  font-size: 18px;
  cursor: pointer;
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.sidebar-toggle:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* ============================================================
   MOVIL (hasta 768px)

   El armazon estaba pensado solo para escritorio: body con
   height:100vh y overflow:hidden, y .sidebar con height:100vh.
   En el telefono la barra ocupaba la pantalla entera, el contenido
   quedaba fuera de vista y la pagina no se podia desplazar.

   Estas reglas viven aca, en el archivo dueño del armazon. Antes cada
   herramienta intentaba resolverlo por su cuenta y de forma distinta,
   y se pisaban entre si.
   ============================================================ */

/* ============================================================
   PERFIL DE USUARIO Y LISTA DE EMPRESAS
   Estos estilos estaban escritos dentro del HTML, y por eso no se
   podian adaptar en movil sin recurrir a !important. Se replican
   aca los mismos valores que tenian en linea.
   ============================================================ */
.user-profile {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
}
.user-profile .avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--texto-sobre-acento);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-profile-texto { text-align: left; }
.user-profile-texto h2 { font-size: 14px; margin: 0; }
.user-profile-texto span { color: var(--text-muted); font-size: 11px; }

/* Boton para plegar la lista de empresas: solo aparece en movil. */
.empresas-toggle { display: none; }


/* Fila de titulo y acciones de la seccion de empresas. Estos valores
   estaban en linea en el HTML; se replican tal cual para escritorio. */
.empresas-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.empresas-acciones { display: flex; gap: 15px; }

@media (max-width: 768px) {

  /* En movil el titulo y los tres botones no entran en una sola fila: el
     texto de cada boton se partia en dos y tres lineas. El titulo pasa a
     ocupar su propia linea y los botones se reparten debajo. */
  .empresas-encabezado {
    flex-wrap: wrap;
    gap: 12px;
  }
  .empresas-encabezado > h3 { flex: 1 0 100%; }
  .empresas-acciones {
    flex: 1 1 auto;
    gap: 8px;
  }
  .empresas-acciones .btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
  }

  /* El perfil se reduce a un icono: la tarjeta completa ocupaba casi todo
     el ancho de la pantalla. Sigue siendo tocable y abre el mismo panel. */
  .user-profile {
    padding: 0;
    background: transparent;
    border: none;
    gap: 0;
  }
  .user-profile-texto { display: none; }

  /* La lista de empresas arranca plegada. Con varias empresas ocupaba la
     pantalla entera y tapaba las herramientas que estan debajo. */
  .empresas-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .empresas-toggle i { transition: transform 0.2s ease; }
  .empresas-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  .empresas-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
  }

  #preHubCompanyList { display: none; }
  #preHubCompanyList.lista-abierta { display: grid; }

  body {
    height: auto;
    overflow: auto;
  }

  .app-container {
    flex-direction: column;
    min-height: 100vh;
  }

  /* La barra lateral pasa a ser un encabezado pegado arriba. */
  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  }

  .sidebar .sidebar-brand.csg-brand {
    padding: 0;
    margin: 0;
    min-height: 0;
    flex: 1 1 auto;
  }

  .sidebar-toggle { display: inline-flex; }

  /* El menu se despliega debajo del encabezado al tocar el boton. */
  .sidebar .sidebar-section,
  .sidebar .sidebar-footer {
    display: none;
    order: 3;
    width: 100%;
    margin: 0;
    padding-top: 12px;
  }
  .sidebar.menu-abierto .sidebar-section {
    display: flex;
  }
  .sidebar.menu-abierto .sidebar-footer {
    display: block;
  }
  .sidebar.menu-abierto { padding-bottom: 14px; }

  .main-content {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .view-section { padding: 20px 16px; }

  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}


/* ============================================================
   FILAS DE CARGA: UNA SOLA ESTETICA

   Las tres herramientas piden lo mismo -un concepto y un importe- pero
   cada una lo dibujaba distinto: distinto gris en la barra de titulos,
   distinto separador entre filas, distinta tipografia. Puestas una al
   lado de la otra no parecian el mismo producto.

   La referencia es Centro de Comando, que es la herramienta principal:
   barra de titulos gris con letra chica en mayusculas, y filas separadas
   por una linea dorada muy tenue, la misma que usa .items-table.

   El selector lleva .finance-card adelante a proposito: las hojas de las
   herramientas se cargan DESPUES de esta, asi que con la misma
   especificidad ganarian ellas. Con un nivel de mas, no.
   ============================================================ */
.finance-card .fc-table-header {
  background-color: var(--table-header);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--card-border);
}

.finance-card .fc-row {
  border-bottom: 1px solid rgba(197, 160, 89, 0.08);
}

/* Centro de Comando no pinta el pie de carga de otro color; el recuadro
   de carga es una fila mas de la tabla. */
.finance-card .fc-footer {
  background: transparent;
  border-top: 1px solid var(--card-border);
}

/* El boton "Agregar Fila" nunca puede desbordar su columna.
   En Rentabilidad vive en un bloque de ancho fijo (20% de la fila) alineado a
   la derecha. Cuando ese 20% es menor que el texto del boton, el sobrante NO
   se va hacia afuera de la pantalla sino hacia la IZQUIERDA, encimandose con
   el campo del importe. Medido: 87px de encimado en una pantalla angosta, y
   todavia 15px en una de 720. Con esto el boton se achica y recorta su texto
   antes que pisar al vecino. */
.fc-footer > div[style*="0 0 20%"] {
  min-width: 0;
}
.fc-add-btn {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* El boton "Agregar Fila" lleva el color de su seccion ya en reposo, como en
   Centro de Comando (.btn-income / .btn-cogs / .btn-opex). En Real State era
   gris y solo se pintaba al pasar el mouse, asi que no se leia como el mismo
   boton que en las otras dos herramientas. */
.card-green .fc-add-btn  { background: var(--income-bg-alpha); color: var(--income-color); border: 1px solid transparent; font-weight: 600; }
.card-orange .fc-add-btn { background: var(--cogs-bg-alpha);   color: var(--cogs-color);   border: 1px solid transparent; font-weight: 600; }
.card-red .fc-add-btn    { background: var(--opex-bg-alpha);   color: var(--opex-color);   border: 1px solid transparent; font-weight: 600; }

/* Con el cuerpo de la tarjeta ya con sus 20px de relleno, las filas llevan
   12px propios: 32px en total desde el borde, igual que en Centro de Comando
   (.panel-body 20px + .items-table td 12px). Antes eran 20px y la barra gris
   de Rentabilidad arrancaba pegada al borde de la tarjeta. */
.finance-card .fc-table-header,
.finance-card .fc-row,
.finance-card .fc-footer {
  padding-left: 12px;
  padding-right: 12px;
}


/* ============================================================
   LAS HERRAMIENTAS EN UN TELEFONO

   El bloque movil de mas arriba adapta el armazon del Hub: la barra lateral,
   el menu, la lista de empresas. Pero las tres herramientas no viven en
   .view-section sino en .view-content, que ese bloque no toca. Resultado: en
   un telefono conservaban el relleno de escritorio y las tablas de ancho fijo,
   y la pagina se iba 171px de costado.
   ============================================================ */
@media (max-width: 768px) {

  /* 80px de relleno lateral sobre una pantalla de 375 es el 21% del ancho. */
  .view-content {
    padding: 16px 12px 24px !important;
  }

  /* Y la seccion que la envuelve sumaba otros 40 de cada lado, escritos en el
     atributo style del Hub, asi que ninguna hoja los pisaba sin !important.
     Entre las dos, en un telefono de 375px el contenido util quedaba en 231:
     el 38% de la pantalla era relleno y las tablas entraban por la mitad. */
  .view-section {
    padding: 16px 10px !important;
  }

  /* Las rejillas de campos estan escritas en el atributo style de cada div
     ("2fr 1fr 1fr", "1.5fr 1fr", ...), asi que ninguna hoja las puede pisar
     sin !important. Sin esto quedaban campos de 46px: en el de importe, con el
     simbolo $ adelante, sobraban 42px para escribir el numero. */
  #app-canvas [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* La barra del mes lleva tres bloques en una linea que no entran. */
  .active-month-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }
  .active-month-bar .banner-center-title {
    justify-content: flex-start !important;
  }

  /* Un elemento flexible NO se encoge por debajo del ancho de su contenido a
     menos que se le diga explicitamente. Es la causa de casi todo el desborde:
     la fila de meses tiene overflow-x: auto para desplazarse de costado, pero
     como no podia encogerse, se ensanchaba y empujaba la pagina entera 550px
     hacia afuera. Lo mismo el nombre de la empresa, que en una pantalla de
     375px medía 415. */
  .horizontal-month-list,
  .active-month-bar .banner-center-title,
  .active-month-bar .banner-month-info,
  .active-month-bar .banner-analytics-info {
    min-width: 0;
  }

  /* En un telefono los tres bloques de la barra van uno debajo del otro, cada
     uno a lo ancho. El separador de la derecha, que solo existe para centrar
     el nombre en escritorio, sobra. */
  .active-month-bar .banner-month-info,
  .active-month-bar .banner-analytics-info,
  .active-month-bar .banner-center-title {
    flex: 1 1 100% !important;
  }
  .active-month-bar .banner-dummy-right {
    display: none;
  }

  /* El selector lleva .banner-center-title adelante a proposito: la hoja de
     Centro de Comando declara ".banner-center-title h2 { max-width: none }" y
     se carga despues que esta, asi que con la misma especificidad ganaba ella
     y el nombre de la empresa medía 415px en una pantalla de 375. */
  .active-month-bar .banner-center-title h2 {
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }
  /* El desplegable se encoge y recorta el nombre si hace falta, en vez de
     empujar la flecha al renglon de abajo. */
  .active-month-bar .company-select {
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    text-overflow: ellipsis;
  }

  /* Las tablas de carga tienen anchos de columna fijos que suman mas que la
     pantalla. Con table-layout: fixed, la columna de Descripcion se aplastaba
     a CERO y su texto se encimaba con el de Monto.
     La tabla no se rompe: se desplaza de costado dentro de su panel, y el
     resto de la pagina deja de desbordar. */
  .panel-body,
  .tabla-scroll {
    overflow-x: auto;
  }

  /* Concepto, importe y boton, uno debajo del otro y a lo ancho. Es la
     forma normal de cargar datos en un telefono. */
  #app-canvas .fila-agregar {
    flex-wrap: wrap;
    gap: 8px;
  }
  #app-canvas .fila-agregar > div {
    flex: 1 1 100% !important;
  }
  .items-table {
    min-width: 430px;
  }
  /* Y en la pantalla angosta las celdas van mas ajustadas, para que haya que
     arrastrar lo menos posible: de 520px de tabla se paso a 430. */
  .items-table th,
  .items-table td {
    padding-left: 8px;
    padding-right: 8px;
  }
  .items-table .w-recurring {
    width: 44px !important;
  }
  .items-table .w-amount {
    width: 108px !important;
  }

  /* Y hay que dejar que la columna que la contiene se encoja.
     Una celda de rejilla, igual que un elemento flexible, no baja del ancho de
     su contenido salvo que se le diga. Con la tabla pidiendo 520px, la columna
     se quedaba en 562 y empujaba la pagina afuera, aunque el panel ya
     estuviera preparado para desplazarse de costado. minmax(0, 1fr) es la
     forma de decir "una columna, y puede ser mas angosta que su contenido". */
  #app-canvas .content-columns,
  #app-canvas .lab-container {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #app-canvas .content-columns > *,
  #app-canvas .lab-container > *,
  #app-canvas .items-column > *,
  #app-canvas .insights-column > * {
    min-width: 0;
  }

  /* Los catalogos son tablas de ocho columnas; mismo criterio. */
  .card-panel {
    overflow-x: auto;
  }

  /* Los indicadores grandes de a uno por fila. */
  .kpi-grid-container .kpi-card {
    width: 100% !important;
  }

  /* Las filas de carga de Rentabilidad reparten el ancho en tres columnas
     (55% / 25% / 20%). En una pantalla de 375px el campo del importe quedaba
     en 44px: no entra un numero. Se apilan, con el concepto a lo ancho y el
     importe debajo.
     El encabezado de columnas se oculta porque, apilado, ya no encabeza nada:
     los campos se entienden solos por su texto de ayuda y por el simbolo $. */
  #app-canvas .fc-table-header {
    display: none;
  }
  #app-canvas .fc-row,
  #app-canvas .fc-footer {
    flex-wrap: wrap;
  }
  #app-canvas .fc-row .col-desc,
  #app-canvas .fc-footer .col-desc {
    flex: 1 1 100%;
    padding-right: 0;
    margin-bottom: 8px;
  }
  #app-canvas .fc-row .col-monto,
  #app-canvas .fc-footer .col-monto {
    flex: 1 1 auto;
  }

  /* El bloque del boton deja de ser el 20% y pasa a ocupar el renglon entero,
     debajo del importe. Su ancho esta escrito en el atributo style, asi que
     hay que responder con !important. */
  #app-canvas .fc-footer > div[style*="0 0 20%"] {
    flex: 1 1 100% !important;
    width: auto !important;
    padding-right: 0 !important;
    justify-content: stretch !important;
    margin-top: 8px;
  }
  #app-canvas .fc-footer > div[style*="0 0 20%"] .fc-add-btn {
    width: 100%;
  }

  /* La fila de carga de gastos de Real State: el nombre a lo ancho, y debajo
     el importe con el boton. Sin esto el boton se salia hasta 47px. */
  #app-canvas #gastos-list ~ .fc-footer > input,
  #app-canvas .fc-footer > #new-gasto-name {
    flex: 1 1 100% !important;
    margin-bottom: 8px;
  }

  /* El desplegable de concepto de Centro de Comando trae min-width: 150px en
     su atributo style y por eso se salia 17px de su celda. */
  #app-canvas .concept-select {
    min-width: 0 !important;
  }

  /* -----------------------------------------------------------------------
     Tamanos de telefono
     -----------------------------------------------------------------------
     Los tamanos pensados para un monitor se comen la pantalla chica: el
     encabezado oscuro medía 182px de los 812 que tiene un telefono comun,
     antes de mostrar un solo dato. Titulos mas chicos y menos relleno no es
     achicar el sistema: es dejar que entre lo que importa. */
  .app-header {
    padding: 16px 14px;
    gap: 8px;
  }
  .header-title h1 {
    font-size: 21px;
    letter-spacing: -0.3px;
  }
  .header-title p {
    font-size: 12.5px;
  }
  .sidebar-header h2 {
    font-size: 18px;
  }

  /* El circulo del perfil con su relleno medía 79x63 para mostrar un
     monigote. */
  .app-header .avatar {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
  .app-header .user-profile {
    padding: 4px 8px;
  }

  /* Los rotulos de cada bloque adentro de las herramientas. */
  #app-canvas h3 {
    font-size: 17px;
  }

  /* El campo del importe de la fila de gastos quedaba en 78px y, con el
     simbolo $ adelante, sobraban 68 para escribir el numero. Se le saca
     lugar al boton, que tiene texto de sobra. */
  /* El importe y el boton comparten el segundo renglon; si no entran los dos,
     bajan uno debajo del otro. El min-width de 55px viene en el atributo
     style, por eso el !important. */
  #app-canvas .fc-footer > div[style*="min-width: 0"] {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  #app-canvas .fc-footer .input-with-prefix {
    flex: 1 1 130px !important;
    min-width: 118px !important;
  }
  #app-canvas .fc-footer .fc-add-btn {
    flex: 1 1 140px !important;
    min-width: 130px !important;
  }

  /* Un separador de 30px que solo existe para alinear con la columna de la
     papelera: en el telefono se come el 12% del renglon. */
  #app-canvas .fc-footer > div[style*="width: 30px"] {
    display: none;
  }
}

/* ===========================================================================
   IMPRESION / GUARDAR COMO PDF
   ===========================================================================
   El boton "Descargar PDF" imprimia solo la primera hoja y el resto salia en
   blanco. La causa estaba en el esqueleto, no en cada herramienta:

     - body queda en display:flex (assets/global.css). Chrome no reparte en
       varias hojas el contenido que esta dentro de un contenedor flex: imprime
       lo que entra en la primera y descarta el resto.
     - body y .main-content estan clavados en 100vh con el desplazamiento
       adentro, o sea "una pantalla", que al imprimir es "una hoja".

   Va aca, en la hoja compartida, porque el problema es del armazon y afecta a
   las tres herramientas por igual. Cada herramienta conserva ademas sus
   propias reglas de impresion para lo suyo.
   =========================================================================== */
@media print {
  html,
  body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  /* La cadena entera tiene que dejar crecer al contenido, o el recorte vuelve
     a aparecer un nivel mas abajo. */
  #hubScreen,
  .app-container,
  .main-content,
  #app-canvas,
  #app-canvas > .view-section.active {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Solo se imprime la pantalla en la que esta parado el usuario, no todas
     las de la herramienta una debajo de la otra. */
  #app-canvas > .view-section:not(.active) {
    display: none !important;
  }

  /* Lo que no tiene sentido en una hoja de papel. */
  .sidebar,
  #loginScreen,
  .modal,
  .swal2-container,
  #nl-badge-frame,
  [id^="PING_CONTENT"] {
    display: none !important;
  }

  /* Sin animaciones ni transiciones al imprimir.
     .view-section trae "animation: fadeIn", que arranca en opacity:0 y con un
     transform. Eso rompia la impresion por dos motivos a la vez: un elemento
     con transform no se reparte entre varias hojas, asi que Chrome soltaba
     todo lo que no entraba en la primera; y al armar el documento para la
     impresora la animacion volvia a empezar desde invisible, de modo que lo
     poco que si entraba salia en blanco. Solo se salvaba el encabezado, que
     esta fuera de la seccion. En pantalla no se notaba nunca, porque para
     cuando uno mira la animacion ya termino. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .view-section,
  #app-canvas > .view-section.active {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Una sola columna. La pantalla mide unos 1500px y una hoja A4 deja apenas
     unos 800: los diseños de dos columnas no entran, y la de la derecha (la de
     resultados y graficos) se cortaba entera, sin sus cifras. Es el mismo
     criterio que ya usamos para el telefono. */
  #app-canvas [style*="grid-template-columns"],
  #app-canvas .lab-container,
  #app-canvas .content-columns,
  #app-canvas .dash-charts-grid,
  #app-canvas .charts-grid {
    display: block !important;
  }

  #app-canvas [style*="grid-template-columns"] > *,
  #app-canvas .lab-container > *,
  #app-canvas .content-columns > *,
  #app-canvas .dash-charts-grid > *,
  #app-canvas .charts-grid > * {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 14px !important;
  }

  /* Nada mas ancho que la hoja. */
  #app-canvas * {
    max-width: 100% !important;
  }

  /* La tabla entra a lo ancho, pero sin repartir las columnas por igual:
     "table-layout: fixed" hacia que un nombre largo se saliera de su celda y
     se pisara con la cifra de al lado. Se deja que el navegador reparta, y el
     texto largo se corta en varias lineas en vez de desbordar. */
  #app-canvas table {
    width: 100% !important;
  }

  #app-canvas th,
  #app-canvas td {
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 7px 8px !important;
    font-size: 10px !important;
  }

  /* Que no se parta un grafico ni una fila entre dos hojas.
     Aca NO van .card-panel ni .finance-card: son los paneles grandes, y
     pedirle a Chrome que no los parta hacia que saltaran enteros a la hoja
     siguiente. Por eso la primera pagina salia con el encabezado solo. */
  .chart-wrapper,
  canvas,
  .radar-row,
  .fc-row,
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Los colores de fondo de los encabezados y las etiquetas se imprimen. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ===========================================================================
   INFORME PARA IMPRIMIR
   ===========================================================================
   El documento que arma assets/informe.js. En pantalla no se ve nunca; solo
   existe mientras dura la impresion. La pantalla de la aplicacion se esconde y
   en su lugar sale esto: mismo contenido, acomodado para leer en papel.
   =========================================================================== */
#csg-informe {
  display: none;
}

@media print {
  /* Cuando hay informe, la aplicacion no se imprime. Se usa una clase en el
     body y no :has(), que no esta en todos los navegadores. */
  body.csg-con-informe #hubScreen {
    display: none !important;
  }

  /* Margenes de la hoja. Sin esto queda lo que decida cada impresora, y el
     contenido llegaba pegado al borde. */
  @page {
    margin: 14mm 13mm;
  }

  #csg-informe {
    display: block !important;
    font-family: var(--font-family, 'Inter', system-ui, sans-serif);
    color: #1a1a1a;
    background: #fff;
    padding: 0;
    margin: 0;
    font-size: 10px;
    line-height: 1.35;
  }

  #csg-informe .inf-encabezado {
    text-align: center;
    padding: 0 0 10px;
    border-bottom: 2px solid #0F2D4A;
    margin-bottom: 14px;
  }
  #csg-informe .inf-encabezado h1 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #0F2D4A;
    letter-spacing: -0.2px;
  }
  /* El renglon que dice de que son los numeros: el producto, el mes, la
     propiedad. Grande y en el azul de la marca, porque es lo primero que hay
     que reconocer despues del nombre de la herramienta. */
  #csg-informe .inf-sub {
    margin: 5px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #0F2D4A;
  }
  #csg-informe .inf-fecha {
    margin: 7px 0 0;
    font-size: 10px;
    color: #777;
  }

  /* La empresa, la sucursal, la ciudad, el pais: cada una en su cartelito.
     Antes iban todas juntas en un renglon gris y habia que buscarlas. */
  #csg-informe .inf-marca {
    display: inline-block;
    margin: 0 5px 3px 0;
    padding: 2px 10px;
    border: 1px solid #c9d6e3;
    border-radius: 20px;
    background: #eef3f8;
    font-size: 10.5px;
    font-weight: 700;
    color: #0F2D4A;
  }
  /* La fecha de emision: mas legible que antes, pero sin cartelito, para
     que se distinga de los datos que dicen de que es la hoja. */
  #csg-informe .inf-emitido {
    display: inline-block;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: #5b6672;
  }

  /* Tarjetas de resumen: la fila de cifras principales. */
  #csg-informe .inf-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 6px;
    margin-bottom: 14px;
  }
  #csg-informe .inf-tarjeta {
    border: 1px solid #dcdcdc;
    border-left: 3px solid #94a3b8;
    border-radius: 5px;
    padding: 6px 8px;
    background: #fafafa;
    break-inside: avoid;
  }
  #csg-informe .inf-tarjeta-et {
    font-size: 7.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
  }
  #csg-informe .inf-tarjeta-val {
    font-size: 14px;
    font-weight: 800;
    color: #0F2D4A;
    margin-top: 1px;
  }
  /* El margen que va debajo de la cifra de la tarjeta. En 7,5px gris quedaba
     como una nota al pie, y es un numero que se mira tanto como el de arriba. */
  #csg-informe .inf-tarjeta-det {
    font-size: 10.5px;
    font-weight: 700;
    color: #555;
    margin-top: 2px;
  }
  /* Tonos fijos, para las cifras que no son un veredicto. El verde, el ambar
     y el rojo quedan reservados para el semaforo: si el precio de venta va en
     verde y el costo en rojo, parecen una calificacion cuando son solo el
     dato de entrada y el dato de salida. */
  #csg-informe .inf-entrada { border-left-color: #3b82f6; }
  #csg-informe .inf-entrada .inf-tarjeta-val { color: #3b82f6; }
  #csg-informe .inf-entrada .inf-tarjeta-det { color: #3b82f6; }
  #csg-informe .inf-costo   { border-left-color: #f97316; }
  #csg-informe .inf-costo .inf-tarjeta-val   { color: #f97316; }
  #csg-informe .inf-costo .inf-tarjeta-det   { color: #f97316; }

  /* Los tres del semaforo, para las cifras que si son un veredicto. */
  #csg-informe .inf-bueno  { border-left-color: #10b981; }
  #csg-informe .inf-bueno .inf-tarjeta-val  { color: #10b981; }
  #csg-informe .inf-bueno .inf-tarjeta-det  { color: #10b981; }
  #csg-informe .inf-malo   { border-left-color: #ef4444; }
  #csg-informe .inf-malo .inf-tarjeta-val   { color: #ef4444; }
  #csg-informe .inf-malo .inf-tarjeta-det   { color: #ef4444; }
  #csg-informe .inf-alerta { border-left-color: #f59e0b; }
  #csg-informe .inf-alerta .inf-tarjeta-val { color: #f59e0b; }
  #csg-informe .inf-alerta .inf-tarjeta-det { color: #f59e0b; }

  /* Un grupo: recuadro con titulo que adentro lleva varias secciones.
     No se parte entre dos hojas: partido quedaba un titulo al pie de una
     pagina y su tabla al principio de la otra, y las dos mitades se leian
     como dos informes distintos. */
  #csg-informe .inf-grupo {
    break-inside: avoid;
    border: 1px solid #d9dde2;
    border-radius: 6px;
    padding: 8px 10px 2px;
    margin-bottom: 12px;
  }
  #csg-informe .inf-grupo-suelto {
    border: 0;
    padding: 0;
    margin-bottom: 0;
  }
  #csg-informe .inf-grupo-tit {
    margin: 0 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e6e9ed;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #0F2D4A;
  }

  /* Secciones y tablas apretadas. */
  #csg-informe .inf-seccion {
    margin-bottom: 12px;
  }
  /* Un titulo nunca queda solo al pie de una hoja. */
  #csg-informe .inf-seccion-tit {
    break-after: avoid;
    margin: 0 0 4px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #0F2D4A;
  }
  #csg-informe .inf-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
  }
  #csg-informe .inf-tabla th {
    background: #0F2D4A;
    color: #fff;
    text-align: left;
    padding: 4px 6px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  #csg-informe .inf-tabla td {
    padding: 3.5px 6px;
    border-bottom: 1px solid #ececec;
    overflow-wrap: anywhere;
  }
  #csg-informe .inf-tabla tbody tr:nth-child(even) { background: #f7f8fa; }
  #csg-informe .inf-tabla tfoot td {
    background: #eef1f5;
    font-weight: 800;
    border-top: 1.5px solid #0F2D4A;
  }
  #csg-informe .inf-tabla .der { text-align: right; }

  /* Un segundo renglon chico debajo del numero, para el porcentaje que lo
     acompana sin gastar otra columna. */
  #csg-informe .inf-tabla .celda-det {
    display: block;
    font-size: 7.5px;
    font-weight: 600;
    color: #6b7280;
    margin-top: 1px;
  }

  /* Separa un bloque de columnas del anterior. */
  #csg-informe .inf-tabla th.sep-izq,
  #csg-informe .inf-tabla td.sep-izq { border-left: 2px solid #9aa3ad; }

  /* --- Colores del sistema ---------------------------------------------
     El encabezado de cada tabla lleva el color que ese bloque tiene en la
     pantalla, para que el informe se lea igual que la herramienta:
       ingreso  verde   #10b981   (INGRESOS, renta)
       gasto    rojo    #ef4444   (COSTOS FIJOS, gastos)
       variable naranja #f97316   (COSTOS VARIABLES)
       venta    azul    #3b82f6   (proyeccion de venta / flip)
       neto     turquesa #14b8a6  (resultado)
     -------------------------------------------------------------------- */
  #csg-informe .inf-s-ingreso  .inf-tabla th { background: #10b981; }
  #csg-informe .inf-s-ingreso  .inf-seccion-tit { color: #10b981; }
  #csg-informe .inf-s-ingreso  .inf-tabla tfoot td { background: rgba(16,185,129,.12); border-top-color: #10b981; color: #10b981; }

  #csg-informe .inf-s-gasto    .inf-tabla th { background: #ef4444; }
  #csg-informe .inf-s-gasto    .inf-seccion-tit { color: #ef4444; }
  #csg-informe .inf-s-gasto    .inf-tabla tfoot td { background: rgba(239,68,68,.12); border-top-color: #ef4444; color: #ef4444; }

  #csg-informe .inf-s-variable .inf-tabla th { background: #f97316; }
  #csg-informe .inf-s-variable .inf-seccion-tit { color: #f97316; }
  #csg-informe .inf-s-variable .inf-tabla tfoot td { background: rgba(249,115,22,.12); border-top-color: #f97316; color: #f97316; }

  /* El credito queda en azul; el resultado de venta pasa a verde. Antes los
     dos eran azules y el resultado se confundia con la tabla del prestamo.
     Los dos resultados son verdes, pero distintos entre si: la renta en
     turquesa y la venta en verde hoja. */
  #csg-informe .inf-s-credito  .inf-tabla th { background: #3b82f6; }
  #csg-informe .inf-s-credito  .inf-seccion-tit { color: #3b82f6; }
  #csg-informe .inf-s-credito  .inf-tabla tfoot td { background: rgba(59,130,246,.12); border-top-color: #3b82f6; color: #3b82f6; }

  #csg-informe .inf-s-venta    .inf-tabla th { background: #16a34a; }
  #csg-informe .inf-s-venta    .inf-seccion-tit { color: #16a34a; }
  #csg-informe .inf-s-venta    .inf-tabla tfoot td { background: rgba(22,163,74,.12); border-top-color: #16a34a; color: #16a34a; }

  #csg-informe .inf-s-neto     .inf-tabla th { background: #14b8a6; }
  #csg-informe .inf-s-neto     .inf-seccion-tit { color: #14b8a6; }
  #csg-informe .inf-s-neto     .inf-tabla tfoot td { background: rgba(20,184,166,.12); border-top-color: #14b8a6; color: #14b8a6; }

  /* Semaforo en los numeros, el mismo que usa la pantalla. */
  /* El renglon destacado manda por encima del color del bloque: la proyeccion
     de venta pinta su pie de verde, y asi un margen negativo se leia en verde
     aunque la cifra estuviera marcada como mala. */
  #csg-informe .inf-tabla tfoot tr.fila-bueno  td { background: rgba(16,185,129,.12); border-top-color: #10b981; color: #10b981; }
  #csg-informe .inf-tabla tfoot tr.fila-alerta td { background: rgba(245,158,11,.12); border-top-color: #f59e0b; color: #f59e0b; }
  #csg-informe .inf-tabla tfoot tr.fila-malo   td { background: rgba(239,68,68,.12);  border-top-color: #ef4444; color: #ef4444; }

  #csg-informe .val-bueno  { color: #10b981; font-weight: 700; }
  #csg-informe .val-alerta { color: #f59e0b; font-weight: 700; }
  #csg-informe .val-malo   { color: #ef4444; font-weight: 700; }
  #csg-informe .inf-vacio {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 8px !important;
  }
  #csg-informe .inf-tabla tr { break-inside: avoid; }

  /* Una tabla larga que cruza de hoja simplemente sigue.
     El navegador, por su cuenta, repite el encabezado arriba y el renglon de
     total abajo en CADA hoja: la tabla parecia empezar de nuevo, y el total
     aparecia a mitad de camino como si ahi terminara. Con table-row-group los
     dos van una sola vez, en su lugar. */
  #csg-informe .inf-tabla thead { display: table-row-group; }
  #csg-informe .inf-tabla tfoot { display: table-row-group; }

  /* Dos tablas por fila, como Activos y Pasivos en el modelo. Las dos van
     juntas: si una cae en la hoja siguiente, dejan de leerse como un par. */
  #csg-informe .inf-par {
    break-inside: avoid;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }

  /* Graficos: las fotos que saca informe.js de los lienzos de la pantalla. */
  #csg-informe .inf-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  #csg-informe .inf-grafico {
    margin: 0;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    padding: 6px;
    text-align: center;
    break-inside: avoid;
  }
  #csg-informe .inf-grafico figcaption {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 3px;
  }
  #csg-informe .inf-grafico img {
    width: 100%;
    height: auto;
    display: block;
  }
}