/* ======================= 
   ESTILOS GROWIN V 2025
   ======================= */
   /* ===== SIDEBAR (Menú lateral) ===== */

/* Fondo del menú */
.skin-blue .main-sidebar,
.skin-blue .left-side{
  background: #f5f7fb !important;   /* gris claro */
  border-right: 1px solid #e6ecf2;
}

/* Texto del menú */
.skin-blue .sidebar{
  color: #374151; /* gris oscuro legible */
}

/* Items nivel 1 */
.skin-blue .sidebar-menu>li>a{
  background: transparent !important;
  color: #475569 !important;   /* texto normal */
  border-left: 3px solid transparent;
  padding: 10px 12px 10px 16px;
  font-weight: 500;
}

/* Hover */
.skin-blue .sidebar-menu>li:hover>a{
  background: #eaf2fb !important;  /* azul muy suave */
  color: #111827 !important;       /* texto más oscuro */
}

/* Activo */
.skin-blue .sidebar-menu>li.active>a,
.skin-blue .sidebar-menu>li.menu-open>a{
  background: #dbeafe !important;  /* celeste pálido */
  border-left-color: #139EE8 !important;
  color: #0f172a !important;
  font-weight: 600;
}

/* Submenús */
.skin-blue .sidebar-menu .treeview-menu{
  background: #f0f4fa !important;
  border-left: 1px solid #e1e8f0;
}
.skin-blue .sidebar-menu .treeview-menu>li>a{
  color: #5b6777 !important;
  padding: 8px 12px 8px 28px;
}
.skin-blue .sidebar-menu .treeview-menu>li>a:hover,
.skin-blue .sidebar-menu .treeview-menu>li.active>a{
  background: #e7eef8 !important;
  color: #3F9B74 !important;
}

.skin-blue .main-header .navbar {
    background-color: #3F9B74;
}
.skin-blue .main-header .navbar .nav>li>a {
    color: #ffff;
    font-weight: 600;   /* o 600, 700, 800 según el grosor que quieras */
}
/* === ESTILO GENERAL === */
body {
  background-color: #f4f6f9;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}

/* === MODALES === */
.modal-content {
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.modal-header {
  border-bottom: 1px solid #dcdcdc;
  background-color: #f8f9fa;
}
.modal-title {
  color: #3c8dbc;
  font-weight: 600;
  font-size: 18px;
}

/* === INPUTS === */
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: #3c8dbc;
  box-shadow: 0 0 6px rgba(60, 141, 188, 0.3);
}

/* === BOTONES === */
.btn-primary {
  background-color: #3c8dbc;
  border-color: #367fa9;
}
.btn-primary:hover {
  background-color: #367fa9;
  border-color: #265a88;
}
.btn-success {
  background-color: #00a65a;
  border-color: #008d4c;
}
.btn-danger {
  background-color: #dd4b39;
  border-color: #d73925;
}
.btn-warning {
  background-color: #f39c12;
  border-color: #e08e0b;
}
.btn-outline-info {
  background-color: #f8f9fa;
  color: #17a2b8;
  border: 1px solid #17a2b8;
}
.btn-outline-success {
  background-color: #f8f9fa;
  color: #28a745;
  border: 1px solid #28a745;
}
.btn-outline-primary {
  background-color: #f8f9fa;
  color: #007bff;
  border: 1px solid #007bff;
}
.btn i {
  margin-right: 4px;
}
.btn-xs {
  padding: 4px 7px;
  font-size: 12px;
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}
.btn-xs:hover {
  transform: scale(1.05);
}

/* === TABLAS === */
.table {
  border-radius: 8px;
  background-color: #ffffff;
}
.table > thead > tr {
  background-color: #eaf3fa;
  color: #333;
}
.table thead th {
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
}
.table-hover > tbody > tr:hover {
  background-color: #f1f1f1;
}
.table td,
.table th {
  vertical-align: middle !important;
}
.table td img.img-thumbnail {
  border-radius: 50%;
  border: 2px solid #dcdcdc;
  transition: transform 0.3s ease;
}
.table td img.img-thumbnail:hover {
  transform: scale(1.1);
}
.table .btn {
  margin: 2px;
  min-width: 32px;
  padding: 3px 6px;
}

/* === BOX / CARDS / SECCIONES === */
.box {
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.box-header {
  background: #f0f0f0;
  padding: 10px 15px;
  border-bottom: 1px solid #d2d6de;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.box-footer {
  background: #f9f9f9;
  border-top: 1px solid #eee;
  padding: 10px 15px;
}

/* === AVATAR FOTO === */
.img-thumbnail.previsualizar {
  width: 120px;
  border-radius: 50%;
  margin-top: 10px;
}

/* === TOOLTIPS === */
.tooltip-inner {
  background-color: #3c8dbc;
  padding: 5px 10px;
  font-size: 13px;
}
.tooltip.top .tooltip-arrow {
  border-top-color: #3c8dbc;
}

/* === ENCABEZADO DE SECCIONES === */
.titulo-seccion {
  font-size: 26px;
  font-weight: bold;
  color: #007bff;
  background-color: #f9f9f9;
  padding: 12px 20px;
  border-radius: 8px;
  display: inline-block;
  box-shadow: inset 0 0 0 1px #e0e0e0;
}
.titulo-seccion i {
  color: #007bff;
  margin-right: 10px;
}

/* === BOTONES DE ENCABEZADO === */
.acciones-seccion .btn {
  margin: 5px 3px;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}
.acciones-seccion .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* === CARDS DE RESUMEN (Dashboard) === */
.card-resumen {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  text-align: center;
  margin-bottom: 20px;
  border-top: 3px solid #3c8dbc;
  min-height: 130px; /* <- fuerza altura uniforme */
}
.card-resumen i {
  font-size: 28px;
  color: #3c8dbc;
  margin-bottom: 5px;
}
.card-resumen h3 {
  font-size: 20px;
  margin: 0;
  color: #333;
  font-weight: bold;
}
.card-resumen p {
  font-size: 13px;
  margin: 0;
  color: #888;
}

/* === SECCIÓN DE FILTROS === */
.filtros-section {
  background-color: #ffffff;
  padding: 15px;
  border: 1px solid #e0e0e0;
  margin-bottom: 15px;
  border-radius: 6px;
}

/* === NAV TABS (Pestañas) === */
.nav-tabs > li > a {
  font-weight: 500;
  color: #3c8dbc;
}
.nav-tabs > li.active > a {
  background-color: #ffffff;
  border-color: #ddd #ddd transparent;
  color: #000;
}
.card-resumen i.fa-percent {
  color: #f39c12;
}
/* ===== ENCABEZADO CON FONDO BLANCO SUAVE ===== */
.encabezado-blanco {
  background-color: #fefefe;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Evitar padding y margen duplicado */
.row.no-margin {
  margin-left: 0;
  margin-right: 0;
}

/* Centrado vertical con Bootstrap 3 simulación */
.align-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Botones de acción en header */
.acciones-seccion .btn {
  margin: 5px 3px;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
}
/* === ESTILOS MODERNOS PARA MODALES === */
.modal-header {
  background-color: #fefefe;
  border-bottom: 2px solid #3c8dbc;
  padding: 15px 20px;
}

.modal-title {
  color: #3c8dbc;
  font-weight: bold;
  font-size: 18px;
}

.modal-footer {
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
  padding: 10px 20px;
}

.modal-body {
  padding: 20px;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 5px;
  color: #333;
}

.input-group-addon {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.panel {
  background-color: #f8f8f8;
  padding: 8px 12px;
  border: 1px solid #ccc;
  font-weight: 500;
  color: #333;
  border-radius: 4px;
}

.placeholder-mover {
  background: #f0f0f0;
  border: 2px dashed #ccc;
  height: 60px;
  margin-bottom: 10px;
}

/* Barra de título como ventas */
.encabezado-gastos{
  background:#fff;
  border:1px solid #fff;
  border-radius:6px;
  margin:6px 0 8px;
  padding:8px 10px;
  font-weight:600;
  color:#23395d;
}
.encabezado-gastos > div:not(:last-child){
  border-right:1px dashed #cfd8ea;
}

/* Card/fila */
.bloqueGasto{
  border:1px solid #e2e6ef;
  border-radius:6px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  margin-bottom:8px;
}
.fila-gasto{
  padding:8px 10px;
  align-items:center;
}
.fila-gasto .form-control.input-sm{
  height:30px;
  line-height:30px;
}
.fila-gasto .input-group-addon{
  padding:3px 8px;
}
.fila-gasto .plancuenta[readonly],
.fila-gasto .nombrecuenta[readonly]{
  background:#f7f9ff;
}
.lbl-exento{
  font-weight:normal;
  margin:0;
  display:inline-flex;
  gap:6px;
  align-items:center;
  color:#495057;
}

/* Suaviza transición visual al agregar filas */
.bloqueGasto + .bloqueGasto{ margin-top:6px; }

/* Tamaño más grande de las cajas */
.small-box {
  min-height: 160px;            /* más altas */
  padding: 20px 15px;
  border-radius: 14px !important;
}

/* Texto principal grande y blanco */
.small-box .inner h2 {
  font-size: 38px;              /* más grande */
  font-weight: 800;             /* más grueso */
  color: #fff !important;       /* siempre blanco */
  margin: 0 0 5px 0;
}

/* Subtítulo (Empresas, Ventas, Gastos...) */
.small-box .inner h4 {
  font-size: 22px;
  font-weight: 700;             /* más grueso */
  color: #fff !important;       /* blanco */
  margin: 0;
}

/* Iconos */
.small-box .icon {
  font-size: 50px;
  top: 14px;
  right: 18px;
  opacity: 0.9;
  color: rgba(255,255,255,0.9) !important;
}

/* Footer */
.small-box-footer {
  font-size: 14px;
  font-weight: 600;
  background: rgba(0,0,0,0.08);
  color: #fff !important;
  border-radius: 0 0 14px 14px;
}
/* ===== Dashboard centrado y estable ===== */
.row.dash-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-evenly;   /* reparte y centra */
  align-items:stretch;
  gap:20px;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Desactiva floats SOLO en esta fila y convierte cols a “tarjetas” fijas */
.row.dash-grid > [class*="col-"]{
  float:none !important;       /* evita conflicto con Bootstrap */
  flex:0 0 300px;              /* ancho de cada caja */
  max-width:300px;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Asegura que la small-box ocupe el ancho del contenedor */
.row.dash-grid > [class*="col-"] .small-box{
  width:100%;
  min-height:160px;            /* tu tamaño grande */
}

/* Responsive: 2 por fila en tablets, 1 en móviles */
@media (max-width: 1200px){
  .row.dash-grid > [class*="col-"]{ flex:0 0 45%; max-width:45%; }
}
@media (max-width: 600px){
  .row.dash-grid > [class*="col-"]{ flex:0 0 100%; max-width:100%; }
}
/* Cartas limpias */
.chart-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:14px 16px 8px; margin-bottom:14px;
  box-shadow:0 4px 16px rgba(15,23,42,.05);
}
.chart-card__title{ font-weight:700; color:#0f172a; margin:0 0 6px; }

/* Contenedores de gráfico */
.gc-chart{ width:100%; }
.h-40vh{ height:40vh; min-height:320px; }   /* gráfico principal */
.h-34vh{ height:34vh; min-height:280px; }   /* secundarios */

/* Reduce separaciones de la fila de gráficos */
.charts-grid{ margin-top:8px; }

/* Responsivo: en móviles, un gráfico por fila y un poco más alto */
@media (max-width: 991px){
  .h-34vh{ height:40vh; }
}
@media (max-width: 600px){
  .h-40vh{ height:44vh; }
}

.dash-wrap{padding:6px 8px 14px}
.kpi-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
.kpi-card{
  flex:1 1 220px; min-width:220px; background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:14px 16px; position:relative; overflow:hidden; box-shadow:0 6px 20px rgba(15,23,42,.06)
}
.kpi-card__label{font-size:13px; color:#64748b; font-weight:600; margin:0 0 6px}
.kpi-card__value{font-size:26px; font-weight:800; color:#0f172a; margin:0}
.kpi-card__badge{position:absolute; right:12px; top:12px; font-size:11px; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-weight:700}

.chart-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:14px 16px; margin:10px 0; box-shadow:0 6px 20px rgba(15,23,42,.06)
}
.chart-title{margin:0 0 8px; font-weight:800; color:#0f172a}
.gc{width:100%}
.h-360{height:360px; min-height:320px}
.h-320{height:320px; min-height:300px}

.table-proy{
  width:100%; border-collapse:separate; border-spacing:0; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden
}
.table-proy th{background:#f8fafc; color:#334155; font-weight:700; padding:10px; text-transform:uppercase; font-size:12px}
.table-proy td{padding:10px; border-top:1px solid #e5e7eb; font-size:14px; color:#0f172a}
.badge-pos{color:#065f46; background:#ecfdf5; padding:2px 8px; border-radius:999px; font-weight:700}
.badge-neg{color:#991b1b; background:#fef2f2; padding:2px 8px; border-radius:999px; font-weight:700}
.text-right{text-align:right}
.text-center{text-align:center}
.small{font-size:12px; color:#64748b}

/* Botón flotante (solo en pantalla) */
.print-btn{
  position: fixed; right: 16px; bottom: 16px;
  background:#111827; color:#fff; border:0; border-radius:999px;
  padding:10px 14px; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.18);
  z-index: 9999; cursor:pointer;
}
.print-btn:hover{ opacity:.9 }

/* Forzar tamaño y márgenes del PDF */
@page { size: A4 landscape; margin: 12mm; }

/* Ocultar elementos que no quieres en el PDF */
@media print{
  .no-print, .sidebar, .navbar, .main-footer { display:none !important; }
  /* Que las tarjetas aprovechen el ancho */
  .chart-card{ box-shadow:none !important; border:0 !important; break-inside: avoid; }
  .kpi-grid{ gap:8px }
  .kpi-card{ box-shadow:none !important; border:1px solid #ddd }
  /* Ajustar tipografía para imprimir */
  body{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Si quieres cortes manuales de página: agrega class="page-break" a un contenedor */
@media print{
  .page-break{ page-break-after: always; }

  /* Tamaño de página y márgenes */
@page { size: A4 portrait; margin: 14mm; }

/* Layout más estrecho para que los charts no se “reacomoden” */
@media print {
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .content-wrapper { max-width: 1080px !important; margin: 0 auto !important; }

  /* Evita que un gráfico se corte entre páginas */
  .chart-card, .kpi-grid, .table-proy { page-break-inside: avoid; break-inside: avoid; }

  /* Fuerza saltos antes de bloques grandes si lo necesitas */
  .break-before { page-break-before: always; break-before: page; }

  /* Oculta elementos interactivos que no sirven en PDF */
  #btnPrint, .gc-pager, .sticky-toolbar, .gc-tooltip { display: none !important; }

  /* Asegura alto suficiente del lienzo */
  .gc { height: 360px !important; }
}
}

/* ====== Tarjetas y tabla estilo “Top 10” ====== */
.chart-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:14px 16px; margin:12px 0; box-shadow:0 6px 20px rgba(15,23,42,.06)
}
.chart-title{margin:0 0 10px; font-weight:800; color:#0f172a}
.small{font-size:12px; color:#64748b}

.ratio-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:12px;
}
@media (max-width: 1300px){ .ratio-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 800px){ .ratio-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 500px){ .ratio-grid{ grid-template-columns: 1fr; } }

.ratio-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
}
.ratio-card__label{
  font-size:14px;
  font-weight:700;
  margin:0;
  color:#0f172a;
}
.ratio-card__gauge{
  width:110px;
  height:110px;
}
.kpi-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.kpi-chip{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;
  font-weight:600;
}
.kpi-chip.small{ font-weight:500; }

.ratio-desc{
  font-size:12px;
  color:#475569;
  margin:2px 0;
  line-height:1.3;
}
.ratio-ideal{
  font-size:12px;
  color:#2563eb;
  margin:0 0 4px;
}
.ratio-formula{
  font-size:11px;
  color:#64748b;
  margin-top:4px;
  line-height:1.3;
}
.ratio-formula code{
  font-family:monospace;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:6px;
  padding:1px 4px;
}
/* ==== Tablas Top 10 (ranking) ==== */
.table-top10 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.table-top10 thead th {
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
  padding: 10px;
  text-transform: uppercase;
  font-size: 12px;
}
.table-top10 tbody td {
  padding: 10px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px;
  color: #0f172a;
}

/* ==== Tabla de evolución de ratios ==== */
.table-ratios {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 14px;
}
.table-ratios th, .table-ratios td {
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  text-align: center;
}
.table-ratios th {
  background: #f8fafc;
  font-weight: 700;
  color: #334155;
}
.table-ratios td {
  color: #0f172a;
}
.table-ratios tr:last-child td {
  font-weight: bold;
  background: #f1fdf4;
}
.kpi-row {
  display:flex;
  justify-content:center; /* o left si prefieres alineado */
  margin-top:12px;
  background:transparent !important; /* quita cualquier gris heredado */
  padding:0;
  border:none;
}

.kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.kpi-card.kpi-negativo {
  background: #fef2f2;   /* rojo claro */
  border-color: #dc2626; /* borde rojo */
  color: #991b1b;        /* texto rojo oscuro */
}


.loader {
  margin: 15px auto;
  border: 4px solid #e0e0e0; 
  border-top: 4px solid #007bff; 
  border-radius: 50%;
  width: 35px;
  height: 35px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



    .card-fe {
        background: #e8f1ff;
        border-left: 5px solid #3c8dbc;
        border-radius: 6px;
        padding: 20px;
        margin-bottom: 25px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }
    .card-fe h3 {
        margin-top: 0;
        font-size: 17px;
        font-weight: 600;
        color: #3c8dbc;
    }
    .card-fe .form-control[readonly] {
        background: #f1f5fb;
        border: 1px solid #d3d9e3;
        color: #333;
        font-weight: 600;
    }
    .card-fe label {
        font-weight: 600;
        color: #3a3a3a;
    }

    /* SOLO PARA EL BLOQUE DE TOTALES */
    .grupo-totales {
        background: #f7faff;
        border: 1px solid #d8e4f7;
        padding: 15px 15px 5px 15px;
        border-radius: 5px;
        margin-top: 10px;
    }
    .grupo-totales label {
        font-weight: 600;
        color: #2c3e50;
    }
    .grupo-totales .form-control[readonly] {
        background: #e9eef7;
        border: 1px solid #c8d2e3;
        font-weight: 600;
    }

/* Bloque tipo card para CXC */
.cxc-card{
  margin: 8px 0 12px 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  padding: 8px 10px;
}

.cxc-card-header{
  background: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  padding: 6px 8px;
  margin: -8px -10px 10px -10px;
  border-radius: 6px 6px 0 0;
}

.cxc-title{
  font-weight: 700;
  font-size: 13px;
  color: #333;
}

.cxc-sub{
  font-size: 11px;
  color: #777;
  margin-top: 2px;
}

.cxc-fields-head{
  font-size: 11px;
  font-weight: 700;
  color: #666;
  text-align: center;
  margin-bottom: 4px;
}

.cxc-fields .form-control{
  height: 30px;
  padding: 4px 6px;
}

.cxc-mark{
  border-left: 3px solid rgba(185,74,72,.25) !important; /* ↓CxC */
}
.banco-mark{
  border-left: 3px solid rgba(60,141,188,.25) !important; /* ↑Banco */
}

.addon-cxc i{ color:#b94a48; }
.addon-banco i{ color:#3c8dbc; }