/* Core Layout & Backgrounds */

* {
    box-sizing: border-box;
}
.main-content {
  background-color: #060606; /* Very light grey/white background */
  height: 100vh;
  padding: 10px;
}

/* Ajuste en tu archivo .css */
.sidebar {
  /* Elimina width: 20vw; si lo tienes */
  width: 100%; /* Deja que Bootstrap (width=3) controle el ancho */
  height: 100vh;
  border-right: 1px solid #333;
  background-color: #060606;
  padding: 15px;
  overflow-y: auto;
  position: relative;
  z-index: 10 /* Permite scroll si hay muchos filtros */
}

/* Asegura que el contenedor de la fila no tenga márgenes que empujen el contenido */
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* Card Styling - Removing Gradients */
.card {
  background-color: #1a1a1a;
  border: 1px solid #333; /* Subtle border */
  border-radius: 8px; /* Slightly sharper corners for a professional look */
  margin: 8px 4px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Softer, realistic shadow */
  transition: all 0.2s ease;
  overflow: hidden; /* Cambiado de auto para evitar barras de scroll feas */
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  border-color: #2a9fd6;
}

/* Specific Card Sizes - Uniform Look */
.small-card, .medium-card {
  flex: 1;
  background: #1f1e1e /* from gradient to flat white */;
}

.small-card {
  background: #080808 !important;
  min-height: 100px;
  flex: 1; /* Esto hace que todas las de la misma fila midan lo mismo */
}

/* Typography */
.card h1, .card h2, .card h3, .card strong, A {
  color: #ffffff; /* Deep charcoal instead of bright blue */
  font-weight: 600;
}

p {
  margin: 5px;
  color: #adafae; /* Mid-grey for body text */
}


/* Buttons - From Orange to Professional Grey/Blue */
.event-btn {
  display: inline-block;
  width: 95%;
  padding: 8px 16px;
  background-color: #2a9fd6; /* Dark Grey button */
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  transition: background-color 0.2s;
}

.event-btn:hover {
  background-color: #1f2937;
}

.row {
  display: flex;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start; /* Cambiado de space-between */
}

.maplibregl-ctrl {
  display: none;
}
/* Apunta específicamente al h1 dentro de tu clase markdown-text */
.markdown-text h1 {
    font-size: 2rem !important; /* Ajusta este valor a tu gusto */
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0px;
    letter-spacing: 2px;
    /*text-transform: uppercase; /* Opcional: le da un look más de "Observatorio" */
}

/* Para ajustar la línea horizontal (---) */
.markdown-text hr {
    margin-top: 5px;
    border-top: 1px solid #333;
}

.custom-title {
    display: flex;          /* Usamos flex para control total */
    flex-wrap: wrap;        /* Permite que baje de línea si es muy largo */
    align-items: baseline;  /* Alinea las letras grandes y pequeñas por la base */
    gap: 0px 4px;           /* Controla el espacio: [Vertical] [Horizontal entre palabras] */
    line-height: 1.1 !important;
    word-spacing: 3px;     /* Reduce el espacio entre palabras */
    margin-bottom: 5px !important;

}

.custom-title span {
    display: inline-block;
    white-space: pre;       /* Mantiene el espacio justo que definimos */
}
/* Contenedor del acordeón para que ocupe el alto de la sidebar */
.sidebar-container {
    padding: 15px;
    background-color: #111; /* Consistente con tu sidebar */
}

/* Estilo de los encabezados del acordeón (los botones que tienen el +) */
.accordion-button {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid #333 !important;
    box-shadow: none !important;
}

/* Cuando el acordeón está abierto */
.accordion-button:not(.collapsed) {
    background-color: #222 !important;
    color: #00bc8c !important; /* Color verde esmeralda para resaltar */
}

/* El cuerpo interno donde están los checklists */
.accordion-body {
    background-color: #060606 !important;
    color: #adafae !important;
    padding: 15px !important;
}

/* Estilo de los checkboxes */
.form-check-input {
    background-color: #333;
    border-color: #555;
}

.form-check-input:checked {
    background-color: #00bc8c;
    border-color: #00bc8c;
}

/* Ajuste del icono (flecha o +) */
.accordion-button::after {
    filter: invert(1); /* Hace que el icono sea blanco */
    background-size: 1rem;}

/* Asegura que el gráfico tenga espacio para la leyenda sin crear scroll interno en la card */
.small-card .js-plotly-plot .plotly .legend {
    font-family: 'Open Sans', sans-serif !important;
}

/* Ajuste opcional para que los nombres de la leyenda no se corten */
.small-card .legendtext {
    fill: #adafae !important; /* Gris claro para que no brille tanto como el título */
}

.custom-card-title {
    color: #2a9fd6 !important; /* El azul característico de Cyborg */
    font-size: 0.7rem !important; /* Un poco más grande que el 'small' por defecto */
    font-weight: 700 !important;   /* Bold (negrita) */
    text-transform: uppercase;     /* Opcional: le da un look más profesional de dashboard */
    letter-spacing: 0.5px;         /* Mejora la legibilidad en negrita */
    margin-bottom: 0.25rem;        /* mb-1 equivalente */
}