/**********************************************************************************************************************/
:root {
    --color-primary: #5E729C;     /* Azul acero lavanda, más definido que el #5B6B95 */
    --color-secondary: #D8A47F;   /* Terracota pastel, calidez suave */
    --color-light: #E7E9F3;       /* Gris azulado claro, tipo neblina */
    --color-white: #FFFFFF;       /* Blanco puro */
    --color-dark: #414356;        /* Azul grisáceo oscuro, un poco más suave que #383A4C */
    --color-cab: #BDC7E6;         /* Azul lavanda un poco más fresco para cabeceras */
    --color-tex: #2C2F3A;         /* Gris oscuro legible */
    --color-btn: #5E729C;         /* Botón azul acero lavanda, consistente con el primary */
    --color-nuevo: #F2F5FA;       /* Gris frío muy claro */
    --color-fondo: #FAFBFD;       /* Blanco azulado apenas perceptible */

    /* Escala acordeón más aireada en azules lavanda */
    --color-acordeon-0: #414356;
    --color-acordeon-1: #51546A;
    --color-acordeon-2: #63657F;
    --color-acordeon-3: #757794;
    --color-acordeon-4: #8889AA;
    --color-acordeon-5: #9C9EC0;
    --color-acordeon-6: #B0B3D5;
    --color-acordeon-7: #C6C9E7;
    --color-acordeon-8: #D9DCF3;
    --color-acordeon-9: #E9EBF9;
    --color-acordeon-10: #F3F5FC;
    --color-acordeon-11: #FCFCFE;

    --color-m: #F3F5FA; /* Fondo módulos, aún más limpio */
}




/**********************************************************************************************************************/

/* ===============================
   Aplicación global limitada
   =============================== */

.nuevo-ui {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  padding: 20px;
}

/* ===============================
   Tarjetas / Widgets
   =============================== */
.custom-card {
  background-color: #FFFFFF; /* blanco para contraste real */
  border: 1px solid #C2CCE4; /* más frío pero definido */
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* sutil profundidad */
}

/* Hover: más luz, más elevación, sin perder elegancia */
.custom-card:hover {
  background-color: #F4F7FB; /* muy claro, apenas azul grisáceo */
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  border-color: #AAB8D6;
}

/* Título dentro del card */
.custom-card h5 {
  color: #2A2A2A; /* más fuerte que #444 para jerarquía */
  font-weight: 600;
  margin-bottom: 10px;
}

/* Texto secundario */
.custom-card p {
  color: #555; /* más neutral, mayor legibilidad */
  font-size: 15px;
}




.nuevo-ui .widget-card {
  /*background-color: var(--color-soft);*/
  background-color: var(--color-acordeon-11);
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.nuevo-ui .widget-card:hover {
  transform: translateY(-4px);
}

/* ===============================
   Títulos
   =============================== */

.nuevo-ui .section-title {
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--color-text);
}

/* ===============================
   Botones
   =============================== */

.nuevo-ui .button-primary {
  background-color: var(--color-acordeon-2);
  color: var(--color-white);
  border: 1px solid var(--color-secondary);  /* borde fino */
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
}

.nuevo-ui .button-primary:hover {
  background-color: #5b9bd5;
  font-size: 14px;
}

/* ===============================
   KPIs y Contadores
   =============================== */

.nuevo-ui .kpi-box {
  background-color: var(--color-white);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.2em;
  font-weight: 600;
}

/* ===============================
   Mensaje de bienvenida
   =============================== */

.nuevo-ui #bienvenida {

  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--color-dark);
  text-align: center;
}

/* ===============================
   Actividades urgentes
   =============================== */

.nuevo-ui .actividad-item {
  border-left: 4px solid var(--color-secondary);
  padding-left: 12px;
  margin-bottom: 10px;
  font-size: 1em;
}

/* ===============================
   Responsive sencillo
   =============================== */

@media (max-width: 768px) {
  .nuevo-ui .widget-card {
    padding: 12px;
  }
  .nuevo-ui .kpi-box {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* === CONTENEDOR PRINCIPAL EXPANDIDO === */
.nuevo-ui .container {
  max-width: 100%;
  padding-left: 30px;
  padding-right: 30px;
}

/* === KPIs Visualmente Destacados === */
.nuevo-ui .kpi-box {
  background: var(--color-white);
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  color: var(--color-tex);
  transition: all 0.2s ease-in-out;
}

.nuevo-ui .kpi-box i {
  margin-right: 10px;
  font-size: 16px;
  color: var(--color-primary);
}

/* === FILAS DE WIDGETS CON DISTRIBUCIÓN ADAPTATIVA === */
.nuevo-ui .widget-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.nuevo-ui .widget-card {
  flex: 1;
  min-width: 300px;
  max-width: 100%;
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
  padding: 20px;
  transition: transform 0.2s ease-in-out;
}

.nuevo-ui .widget-card:hover {
  transform: translateY(-4px);
}

/* === TÍTULOS DE SECCIÓN MÁS VISUALES === */
.nuevo-ui .section-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--color-tex);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* === BLOQUES DE ACTIVIDAD + MARCA LATERAL === */
.nuevo-ui .actividad-item {
  margin-bottom: 1.5rem;
}

.nuevo-ui .actividad-item .alert {
  border-radius: 8px;
  border-left: 6px solid var(--color-primary);
  background-color: var(--color-fondo);
  color: var(--color-tex);
}



/* === EFECTOS VISUALES ADICIONALES INTEGRADOS === */

.nuevo-ui .widget-card {
  background: linear-gradient(180deg, var(--color-soft), var(--color-muted));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-light);
}

.nuevo-ui .widget-card:hover {
  transform: scale(1.01);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.nuevo-ui .section-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 20px;
  background-color: var(--color-acordeon-5);
  border-radius: 2px;
  margin-right: 8px;
}

.nuevo-ui .kpi-box {
  background: rgba(255, 255, 255, 0.8);
  border-left: 6px solid var(--color-secondary);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.nuevo-ui .alert.alert-light {
  border-left: 4px solid var(--color-acordeon-5);
  background-color: var(--color-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: background-color 0.2s ease;
}

.nuevo-ui .alert.alert-light:hover {
  background-color: var(--color-fondo);
}


/* ==== AJUSTES VISUALES PARA CONTRASTE Y ACENTO ==== */

.nuevo-ui .widget-card {
  background: var(--color-white);
  border: 1px solid var(--color-light);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.nuevo-ui .kpi-box {
  border-left: 6px solid var(--color-secondary);
  background-color: var(--color-white);
  color: var(--color-tex);
}

.nuevo-ui .section-title {
  color: var(--color-dark);
  border-left: 4px solid var(--color-secondary);
  padding-left: 12px;
}

.nuevo-ui .actividad-item .alert {
  background-color: var(--color-soft);
  border-left: 5px solid var(--color-secondary);
}

.nuevo-ui .actividad-item .alert:hover {
  background-color: var(--color-muted);
}

.nuevo-ui .actividad-item {
  border-left: none;
  padding-left: 0;
}


/* === REFINAMIENTO DE ESTILO CON JERARQUÍA VISUAL Y CALIDEZ === */

.nuevo-ui {
  background-color: #f7f9fc; /* fondo más cálido, ligeramente azuloso */
}

/* Cards con separación y estilo neumórfico sutil */
.nuevo-ui .widget-card {
  background-color: var(--color-white);
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), inset 0 0 3px rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 20px;
  /*height: 100%;
  max-height: 15vh !important;*/
}

.nuevo-ui .widget-card-bienvenida {
  background-color: var(--color-acordeon-9);
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), inset 0 0 3px rgba(255,255,255,0.7);
  border-radius: 12px;
  padding: 20px;
}

/* Sombra extra sutil al hacer hover */
.nuevo-ui .widget-card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.08), inset 0 0 3px rgba(255,255,255,0.4);

}

/* Títulos con fondo ligeramente coloreado */
.nuevo-ui .section-title {
  background-color: var(--color-acordeon-9); /* tono crema claro */
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 4px solid var(--color-secondary);
  color: var(--color-dark);
}

/* Separadores visuales entre tarjetas */
.nuevo-ui .separador {
  height: 1px;
  background-color: #eaeaea;
  margin: 20px 0;
}

/* KPI visual más definido */
.nuevo-ui .kpi-box {
  border: 1px solid #e0e0e0;
  background-color: var(--color-white);
  background: var(--color-acordeon-11);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border-left: 5px solid var(--color-secondary);
  padding: 16px;
}

/* Actividad-item con línea más clara y hover definido */
.nuevo-ui .actividad-item .alert {
  background-color: #fefefe;
  border-left: 4px solid var(--color-secondary);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.03);
}

.nuevo-ui .actividad-item .alert:hover {
  background-color: #f9f9f9;
}

.nuevo-ui .kpi-box {
  border-radius: 12px;
  padding: 16px 32px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  background-color: #f8f9fa;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  min-width: 220px;
}
/********************************************************************************************************************/
.nuevo-ui .kpi-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background-color: var(--color-acordeon-11);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  flex: 1 1 calc(25% - 20px);
  /*min-width: 250px;*/
  min-width: 260px;
  max-width: 100%;
}
.nuevo-ui .kpi-box {
  display: flex;
  align-items: center;
  gap: 8px;                    /* Menor separación entre ícono y texto */
  padding: 8px 12px;           /* Menos espacio interno (alto y ancho) */
  border-radius: 6px;          /* Bordes más sutiles */
  background-color: var(--color-acordeon-11);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);  /* Sombra más discreta */
  flex: 1 1 calc(25% - 20px);
  min-width: 220px;            /* Opcional: más compactos en ancho mínimo */
  max-width: 100%;
  font-size: 0.9rem;           /* Texto un poco más pequeño */
}

.nuevo-ui .kpi-box i {
  font-size: 16px;
  /*color: var(--color-secondary);*/
}
.nuevo-ui .kpi-box p {
  margin: 0;
  font-size: 16px;
  color: var(--color-dark);
}
.nuevo-ui .kpi-box strong {
  font-size: 16px;

}

.nuevo-ui .btn.button-primary {
  background-color: var(--color-acordeon-2);
  color: #fff;
  border: 1px solid var(--color-secondary);
  /*border-radius: 6px;*/
  /*padding: 8px 16px;*/
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;

}
.nuevo-ui .btn-outline-secondary {
  border-color: var(--color-acordeon-1);
  color: var(--color-acordeon-1);
  font-size: 14px;
}

.nuevo-ui .btn.button-primary {
  background-color: var(--color-acordeon-2);
  color: #fff;
  border: 1px solid var(--color-secondary);
  border-radius: 6px;         /* Bordes más discretos */
  padding: 6px 12px;          /* Menos alto y menos ancho */
  font-size: 14px;            /* Letra más contenida */
}

.nuevo-ui .btn-outline-secondary {
  border-color: var(--color-acordeon-1);
  color: var(--color-acordeon-1);
  padding: 6px 12px;          /* Igual que el principal */
  font-size: 16px;
}



/********************************************************************************************************************/




.nuevo-ui .kpi-success {
  background-color: #CFF9E0;  /* Verde suave fresco */
  color: #137547;             /* Verde Betis intenso */
}

.nuevo-ui .kpi-warning {
  background-color: #FFE8C2;  /* Naranja suave */
  color: #C06900;             /* Naranja profundo vibrante */
}

.nuevo-ui .kpi-danger {
  background-color: #FFD6D6;  /* Rojo pastel elegante */
  color: #B00020;             /* Rojo fuerte, más sobrio que caramelo */
}

/* === Cabecera de Tabla Estilo Contactos === */
/* === Estilo para la cabecera de la tabla de contactos === */
.nuevo-ui .tabla-contactos thead tr th {
  background-color: var(--color-acordeon-9) !important;
  color: var(--color-dark) !important;
  font-weight: bold;
  border-bottom: 2px solid var(--color-acordeon-1);
}

.nuevo-ui .alert-kpi {
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.nuevo-ui .alert-section-title {
  font-weight: bold;
  font-size: 16px;
  background-color: var(--color-light);
  padding: 0.4rem 0.7rem;
  border-radius: 5px;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}
/*****************************************************************/
/* Base de cada tarjeta de jerarquía */
.hierarchy-card {
  border-radius: 8px;
  overflow: hidden;
}

/* Cabecera con fondo uniforme */
.hierarchy-header {
  background-color: var(--color-acordeon-4);
  color: var(--color-white);
  padding: 0.75rem 1rem;
}
.hierarchy-title a {
  text-decoration: none;
  color: inherit;
}

/* Cuerpo de la tarjeta */
.hierarchy-body {
  background-color: var(--color-acordeon-11);
  padding: 0;
}
.hierarchy-body .table {
  margin-bottom: 0;
}


/* Anchos de columna predefinidos */
.col-desc    { width: 60%; }
.col-monto   { width: 15%; }
.col-estado  { width: 15%; }
.col-acciones{ width: 10%; }

/* Niveles de jerarquía: bordes y fondos */
.hierarchy-level-0 {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-acordeon-11);
}
.hierarchy-level-1 {
  border: 1px dashed var(--color-acordeon-5);
  background-color: var(--color-acordeon-10);
}
.hierarchy-level-2 {
  border: 1px dashed var(--color-acordeon-5);
  background-color: var(--color-acordeon-9);
}
.hierarchy-level-3 {
  border: 1px dashed var(--color-acordeon-5);
  background-color: var(--color-acordeon-8);
}
/* Y así sucesivamente hasta el nivel que necesites… */
/* Permitir que los nodos sangrados no se corten */
.hierarchy-card {
  overflow-x: visible;
}

/* Estilos base para la jerarquía */
.hierarchy-content {
  background: white;
  border-radius: 8px;
  /* ya defines bordes en línea según nivel */
}

.hierarchy-header {
  background-color: var(--color-acordeon-4);
  color: var(--color-white);
  padding: 12px 16px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.hierarchy-title a {
  text-decoration: none;
  color: inherit;
}

.hierarchy-body {
  padding: 0; /* la sangría ya la pone padding-left en .hierarchy-content */
}

.table-responsive {
  overflow-x: auto;
}

.table th {
  font-size: 14px; /* Ajusta según lo necesites */
  }

 .table td {
  font-size: 12px; /* Ajusta el tamaño de texto en las celdas */
}

/* Ajustes de columna para mantener todo visible */
.col-desc {
  width: 60%;
}
.col-monto {
  width: 15%;
}
.col-estado {
  width: 15%;
}
.col-acciones {
  width: 10%;
}
#####



.oportunidad_grafo {
    color: var(--color-dark) !important;
    /*background-color: rgba(0, 123, 255, 0.1); /* Azul pastel suave */
}

.text-primary {
  color: var(--color-dark) !important;
  text-align: left !important;
}

.text-init {
  color: var(--color-dark) !important;
  text-align: center !important;
}


.proyecto_grafo {

    background-color: rgba(253, 126, 20, 0.1); /* Naranja pastel suave */
}


.campaña_grafo {

    background-color: rgba(23, 162, 184, 0.1); /* Azul claro pastel suave */
}

/* Afecta solo al botón activo (expandido) del accordion */
.accordion-button:not(.collapsed) {
  background-color: #ffffff !important; /* o cualquier color claro que prefieras */
  color: #000000; /* texto oscuro para mejor contraste */
  box-shadow: none; /* opcional: elimina la sombra predeterminada */
}

.bg-soft-gradient {
  background: linear-gradient(to right, #f4f6f8, #eaf0ff);
}

.img-consistente {
  max-height: 450px;
  width: auto;
  object-fit: contain;
}
/*********************************************************************************************************************/
.nav-synap {
    color: white;
    transition: all 0.3s ease;
    position: relative;
  }

.nav-synap:hover {
    color: #FFD300; /* Amarillo eléctrico */
  }

.nav-synap::after {
    content: "";
    display: block;
    margin: auto;
    height: 2px;
    width: 0;
    background: #C133FF; /* Acento fucsia */
    transition: width 0.3s ease;
  }

.nav-synap:hover::after {
    width: 100%;
  }

.nav-synap {
  color: white !important;
  transition: color 0.3s ease;
}
.nav-synap:hover {
  color: #ff9100 !important; /* tono naranja de Synap */
}

.card-hover-effect:hover {
    background-color: #ECEFF1;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}
.icono-estado-activo { color: #28a745; }
.icono-estado-inactivo { color: #B80028; }
.lista-productos{max-height:80vh;padding-right:.5rem}
.lista-productos{scrollbar-width:thin;scrollbar-color:var(--color-secondary) #F0F1F5}
.lista-productos::-webkit-scrollbar{width:10px}
.lista-productos::-webkit-scrollbar-track{background:#F0F1F5}
.lista-productos::-webkit-scrollbar-thumb{background:var(--color-secondary);border-radius:8px}
.lista-productos {
  overflow-y: auto;
}

.lista-proyectos {
  max-height: 80vh;
  height: 65vh;
  padding-right: 0.5rem;
  overflow-y: auto;

  /* Estilo para scroll en Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) #F0F1F5;
}

/* Estilo para scroll en WebKit (Chrome, Edge, Safari) */
.lista-proyectos::-webkit-scrollbar {
  width: 10px;
}

.lista-proyectos::-webkit-scrollbar-track {
  background: #F0F1F5;
}

.lista-proyectos::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: 8px;

}

.lista-presupuestos {
  /*max-height: 100vh;*/
  min-height: 400px; /* <--- Ajusta este valor al gusto */
  height: 100vh;
  padding-right: 0.5rem;
  overflow-y: auto;

  /* Estilo para scroll en Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) #F0F1F5;
}

/* Estilo para scroll en WebKit (Chrome, Edge, Safari) */
.lista-presupuestos::-webkit-scrollbar {
  width: 10px;
}

.lista-presupuestos::-webkit-scrollbar-track {
  background: #F0F1F5;
}

.lista-presupuestos::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: 8px;

}

/**************************** NAV VERTICAL **************************************************************************/
.sidebar {
    width: 220px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    /*background: linear-gradient(180deg, #2c3e50, #2980b9);*/
    background: linear-gradient(180deg, #1e3c72, #2a5298);
    padding: 1rem;
    color: white;
    z-index: 100;
    transition: width 0.3s ease;
    overflow-y: auto;
}

.sidebar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    text-decoration: none;
    margin-bottom: 2rem;
}

.sidebar .nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .nav li {
    margin: 0.5rem 0;
}

.sidebar .nav a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.sidebar .nav a:hover {
    background: rgba(255, 255, 255, 0.1);
}


.main-content {
    margin-left: 220px;
    padding: 2rem;
}

.sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
}


.sidebar.collapsed .nav a {
  font-size: 0;
  /*padding-left: 10px;*/
  padding-left: 0px;
}

.sidebar.collapsed .logo span {
  display: none;
}

.sidebar.collapsed ~ .correo-cinta {
  left: 0;
  width: 100%;
}



.sidebar.collapsed ~ .main-content {
  margin-left: 60px;
}

.sidebar .user-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}


/* Para el contenido principal */
.main-content {
  margin-left: 220px;
  transition: margin-left 0.3s ease;
}



.sidebar a.nav-link {
  transition: background 0.3s, padding-left 0.3s;
  border-radius: 8px;
}
.sidebar a.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  padding-left: 1.5rem;
}
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 👈 espacio entre el checkbox y el texto */
  }

.form-check-input {
    margin-top: 0 !important; /* evita desalineación vertical */
    flex-shrink: 0; /* evita que el checkbox se achique */
  }

.form-check-label {
    flex: 1; /* permite que el texto tome el espacio restante */
  }

.nuevo-ui .grafico-card {
  flex: 1;
  min-width: 150px;
  max-width: 100%;
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
  padding: 16px;
  transition: transform 0.2s ease-in-out;
  height: 150px; /* controla la altura total de cada tarjeta */
  display: flex;
  flex-direction: column;
  justify-content: start;
  overflow: hidden;
}

.nuevo-ui .grafico-card:hover {
  transform: translateY(-4px);
}

.nuevo-ui .grafico-contenido {
  flex: 1;
  overflow: hidden;
  height: 100%;
  margin-top: 10px;
}

/*unificacion de botones*/
.btn-primary,
.btn-success,
.btn-rect {
    /*width: 100%; /* Asegura que todos los botones ocupen el 100% del contenedor */
    width: auto;
    min-width: 200px; /* Controla el tamaño máximo del botón */
    max-width: 240px; /* Controla el tamaño máximo del botón */
    padding: 12px 20px; /* Añade suficiente espacio interno */
    margin-bottom: 15px; /* Espaciado uniforme */
    border-radius: 10px; /* Bordes redondeados */
    text-align: center; /* Centra el texto */
    font-size: 14px !important;
} /* Asegura que el tamaño de fuente sea uniforme */
    background-color: var(--color-dark) !important; /* Fondo oscuro */
    color: var(--color-white); /* Texto blanco */
    border: 1px solid var(--color-secondary); /* Borde anaranjado */
    transition: all 0.3s ease-in-out;
}

.btn-primary:hover,
.btn-success:hover,
.btn-rect:hover {
    background-color: var(--color-secondary); /* Fondo naranja en hover */
    color: var(--color-dark); /* Texto en oscuro */
    border-color: var(--color-dark); /* Borde oscuro en hover */
    /*transform: translateY(-2px); /* Efecto de elevación */
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra al hacer hover */
    font-size: 14px !important;
}
/*unificacion de botones*/
.btn-guardar
{
    /*width: 100%; /* Asegura que todos los botones ocupen el 100% del contenedor */
    width: auto;
    min-width: 200px; /* Controla el tamaño máximo del botón */
    max-width: 240px; /* Controla el tamaño máximo del botón */
    padding: 12px 20px; /* Añade suficiente espacio interno */
    margin-bottom: 15px; /* Espaciado uniforme */
    border-radius: 10px; /* Bordes redondeados */
    text-align: center; /* Centra el texto */
    font-size: 14px !important;
 /* Asegura que el tamaño de fuente sea uniforme */
    background-color: var(--color-secondary) !important; /* Fondo oscuro */
    color: var(--color-white); /* Texto blanco */
    border: 1px solid var(--color-dark); /* Borde anaranjado */
    transition: all 0.3s ease-in-out;
}


.btn-guardar:hover {
    background-color: var(--color-dark); /* Fondo naranja en hover */
    color: var(--color-dark); /* Texto en oscuro */
    border-color: var(--color-secondary); /* Borde oscuro en hover */
    /*transform: translateY(-2px); /* Efecto de elevación */
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra al hacer hover */
    font-size: 14px !important;
}


/* Estilo base del contenedor de cada archivo */
.archivo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background-color: var(--color-acordeon-3); /* Mismo fondo para todos */
  font-weight: 600;
  font-size: 14px;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.archivo-item:hover {
  background-color: var(--color-secondary);
}

.archivo-item input[type="checkbox"] {
  accent-color: var(--color-white); /* Color de check visible */
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.archivo-item label {
  margin-bottom: 0;
  color: var(--color-white); /* Texto blanco uniforme */
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*********************************************************************************************************************/
.metricas-container {
  background-color: #F0F1F5;
  border-radius: 20px;
  padding: 20px;
  margin: 20px auto;
  max-width: 100%;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
  border: 2px solid #D0D3D9;
}

.metricas-grid {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.metrica-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 15px;
  padding: 20px 25px;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
  width: 28%;
  height: 130px;
  border: 1px solid var(--color-secondary);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.metrica-card:hover {
  transform: scale(1.05);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
}

.metrica-icon {
  font-size: 2.5vw;
  color: var(--color-secondary);
  margin-right: 15px;
}

.metrica-texto {
  text-align: center;
}

.metrica-valor {
  font-size: 1.8vw;
  font-weight: bold;
  margin: 0;
  color: #FFFFFF;
}

.metrica-nombre {
  font-size: 1.1vw;
  font-weight: bold;
  color: var(--color-acordeon-9);
  margin-top: 5px;
}

/* Colores dinámicos por tipo */
.bg-ejecucion {
  background-color: var(--color-acordeon-1);
}

.bg-desviacion {
  background-color: var(--color-acordeon-2);
}

.bg-ajustes {
  background-color: var(--color-acordeon-3);
}

.bg-otros {
  background-color: var(--color-acordeon-5);
}
.presupuesto-form {
  /* Reutilizable si hay más formularios similares */
}

.bloque-formulario {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 15px;
  border: 1px solid var(--color-acordeon-4);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.bloque-titulo {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--color-acordeon-9);
}
.bloque-formulario-transacciones {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--color-secondary);
}

.titulo-transaccion {
  color: white;
  margin: 0;
}

.tabla-transacciones-head {
  background-color: var(--color-acordeon-4);
  color: var(--color-white);
  border: 1px solid var(--color-secondary);
}

/******************************************/
/* Hero base (desktop y tablets) */
#inicio {
  /* usa el background que ya tienes */
  min-height: 100vh;           /* fallback */
  min-height: 100svh;          /* mejor en móviles modernos */
  min-height: 100dvh;          /* aún mejor (Chrome/iOS nuevos) */
  display: flex;
  align-items: center;
  justify-content: center;     /* o 'space-between' según tu layout */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 80px 24px;          /* deja respiro para el navbar fijo */
}

/* Contenido del hero */
.hero-content {
  max-width: 1100px;
  width: 100%;
}

/* Títulos grandes: escalado fluido */
.hero-title {
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.15;
  margin-bottom: 12px;
}
.hero-subtitle {
  font-size: clamp(16px, 3.8vw, 24px);
  opacity: .9;
}

/* Imagen ilustración del hero (si es <img>) */
.hero-illustration {
  max-width: 420px;
  width: 100%;
  height: auto;
}

/* Ajustes específicos móviles */
@media (max-width: 768px) {
  #inicio {
    padding: 72px 18px 48px;    /* reduce padding */
    background-position: center top;
  }
  .hero-layout {
    flex-direction: column;     /* apila texto + imagen */
    gap: 20px;
    text-align: center;
  }
}

/* Móviles muy pequeños */
@media (max-width: 420px) {
  #inicio {
    padding: 64px 14px 40px;
  }
}