/* index_tarjetas_acceso.v02.css */
/* Contenedor principal en una sola línea */
.system-access {
    display: flex;
    gap: 20px; /* Separación entre el grupo de accesos y el de gestión */
    align-items: stretch; /* Hace que todos tengan la misma altura */
    width: 100%;
    max-width: 1200px; /* Ajustalo al ancho de tu diseño */
    margin: 0 auto;
}

/* El marco que une a los dos primeros módulos */
.access-group {
    display: flex;
    flex: 6; /* Ocupa el doble de espacio que la tarjeta de gestión por tener 2 elementos */
    gap: 15px; /* Separación interna entre las dos tarjetas de accesos */
    padding: 15px;
    background-color: #f8f9fa; /* Un fondo sutil para dar idea de bloque unido */
    border: 2px dashed #ccc;   /* Un borde que los delimita como "hermanos" */
    border-radius: 10px;
}

/* Estilo para cada tarjeta individual */
.access-card {
    flex: 1; /* Distribuye el ancho equitativamente */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el botón siempre al fondo */
    padding: 20px;
    background-color: #fff; /* Fondo blanco para resaltar dentro del marco */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Ajuste opcional para la tarjeta de gestión (para que mantenga proporción) */
.system-access > .access-card {
    flex: 1;
    margin: 15px 0; /* Compensa el padding del .access-group para alinearse arriba y abajo */
}

/* Estilo limpio para el texto beta */
.beta-tag {
    color: #FF33FF;
    font-weight: bold;
}