/* Estilos del Dashboard Hub (Tarjetas Refinadas y Compactas) */

.dashboard-contenedor {
  padding: var(--panel-espacio-4) 0;
  width: 100%;
}

.dashboard-header {
  margin-bottom: var(--panel-espacio-6);
  text-align: left;
}

/* El botón de volver va en la MISMA fila que el título, no arriba ocupando una
   franja para él solo. La bajada queda debajo de las dos cosas. */
.dashboard-header-fila {
  display: flex;
  align-items: center;
  gap: var(--panel-espacio-4);
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.dashboard-header-fila .dashboard-titulo {
  margin-bottom: 0;
}

.dashboard-titulo {
  font-size: var(--panel-texto-xl);
  font-weight: 700;
  color: var(--panel-texto);
  margin-bottom: 0.25rem;
}

.dashboard-bajada {
  color: var(--panel-texto-tenue);
  font-size: var(--panel-texto-sm);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 380px));
  gap: 1.5rem;
  justify-content: flex-start;
}

.card-sistema {
  background-color: var(--panel-superficie-elevada);
  color: var(--panel-texto);
  border: 1px solid var(--panel-borde-control);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--panel-sombra-tarjeta);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  border-top: 4px solid var(--panel-verde-600);
  max-width: 380px;
  /* las cards son clickeables; el cursor va acá y no inline porque `crearElemento`
     rechaza el atributo `style` a propósito (ver crearElemento.js) */
  cursor: pointer;
}

.card-sistema:hover {
  transform: translateY(-3px);
  box-shadow: var(--panel-sombra-tarjeta-hover);
}

/* Sin `opacity`: sobre fondo oscuro bajar la opacidad de la tarjeta le baja
   también el contraste al texto de adentro, y el badge quedaba por debajo de
   AA. La distinción entre los dos sistemas la da el borde naranja, que era de
   donde venía la intención. */
.card-sistema-admin {
  border-top-color: var(--panel-naranja);
}

.card-icono {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

/* Iba en verde-800, que ahora ES el fondo de la página: sobre la tarjeta
   elevada habría quedado un título casi invisible. */
.card-titulo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--panel-texto);
  margin-bottom: 0.35rem;
}

.card-descripcion {
  font-size: var(--panel-texto-sm);
  color: var(--panel-texto-tenue);
  margin-bottom: 1.25rem;
  line-height: 1.45;
}

.card-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 10px;
  background-color: var(--panel-neutro-fondo);
  color: var(--panel-neutro-tinta);
  border: 1px solid var(--panel-neutro-linea);
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
  width: fit-content;
}